Skip to content

zeesouth/WhatsMyColor

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ย 

History

21 Commits
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 

Repository files navigation

What's My Color?

  • Personal Color Web Page ๐Ÿ’„
  • KW 3-2 Web Programming Final Project
  • Duration : 2021.11 ~ 2021.12

๐Ÿ—“๏ธ Introduction

  • ํผ์Šค๋„์ปฌ๋Ÿฌ

    • ๊ฐœ์ธ์ด ํƒ€๊ณ ๋‚  ๋•Œ๋ถ€ํ„ฐ ๊ฐ€์ง€๊ณ  ์žˆ๋Š” ์‹ ์ฒด ์ƒ‰
    • ๊ฐœ์ธ์˜ ํ”ผ๋ถ€์™€ ๋จธ๋ฆฌ์นด๋ฝ, ๊ทธ๋ฆฌ๊ณ  ๋ˆˆ๋™์ž์ƒ‰๊ณผ ๊ฐ€์žฅ ์ž˜ ์–ด์šธ๋ฆฌ๋Š” ์ƒ‰

  • ์™œ ํผ์Šค๋„์ปฌ๋Ÿฌ๊ฐ€ ์ค‘์š”ํ• ๊นŒ?

    • ์ด์ œ๋Š” ์œ ํ–‰๋”ฐ๋ผ ๊ฐ€๋Š” ์‹œ๋Œ€๊ฐ€ ์•„๋‹Œ, ๊ฐœ๊ฐœ์ธ์˜ ๊ฐœ์„ฑ์ด ์ค‘์š”ํ•œ ์‹œ๋Œ€
    • ๊ฐœ์ธ์— ๋”ฐ๋ผ์„œ ํ”ผ๋ถ€์ƒ‰, ๋จธ๋ฆฌ์นด๋ฝ์ƒ‰, ๋ˆˆ๋™์ž์ƒ‰ ๋“ฑ์˜ ์ƒ๊น€์ƒˆ๊ฐ€ ๋ชจ๋‘ ๋‹ค๋ฅด๊ธฐ ๋•Œ๋ฌธ์— ์–ด์šธ๋ฆฌ๋Š” ์ƒ‰๋„ ๋‹ค๋ฆ„
    • ํผ์Šค๋„ ์ปฌ๋Ÿฌ ํ…Œ์ŠคํŠธ๋Š” ๊ฐœ์ธ์—๊ฒŒ ๊ฐ€์žฅ ์ž˜ ์–ด์šธ๋ฆฌ๋Š” ์ƒ‰์„ ์ง„๋‹จํ•˜์—ฌ ๊ณ„์ ˆ์— ๋งž๋Š” ์ƒ‰์œผ๋กœ ๋‹จ์ ์€ ๋ณด์™„ํ•˜๊ณ  ์žฅ์ ์€ ๊ทน๋Œ€ํ™”์‹œ์ผœ ๊ธ์ •์ ์ด๋ฉด์„œ๋„ ์ž์‹ ๊ฐ ์žˆ๋Š” ์ด๋ฏธ์ง€๋ฅผ ์—ฐ์ถœํ•ด์คŒ

๐Ÿ› ๏ธ Development Environment

  • Back : Node.js(express), Socket.io
  • Front : HTML5(ejs), CSS3, JavaScript
  • OS : Ubuntu / MacOS
  • DBMS : MySQL

โ›“๏ธ Structure

image


๐Ÿ•น๏ธ Feature

๐Ÿ  HOMEย ย  โ€ข ย ย โ˜‘๏ธ ํผ์Šค๋„์ปฌ๋Ÿฌย ย  โ€ข ย ย โ„น๏ธ ์ปฌ๋ŸฌํŒ”๋ ˆํŠธย ย  โ€ข ย ย ๐Ÿ‘ฅ ์ปค๋ฎค๋‹ˆํ‹ฐย ย  โ€ข ย ย โš™๏ธ ๋งˆ์ดํŽ˜์ด์ง€ย ย 

0. ๊ฐœ์š”

  • ์ƒ๋‹จ ์นดํ…Œ๊ณ ๋ฆฌ ๋ฐ”๋ฅผ ํ†ตํ•ด ๋ชจ๋“  ํŽ˜์ด์ง€์—์„œ ๋‹ค๋ฅธ ํŽ˜์ด์ง€๋กœ์˜ ์ด๋™์ด ๊ฐ€๋Šฅํ•˜๋‹ค.
  • ๋ชจ๋“  ๋ฉ”๋‰ด๋Š” 'HOME' ๋ฉ”๋‰ด๋ฅผ ์ œ์™ธํ•œ ํšŒ์›๊ฐ€์ž…์ด ๋œ ์‚ฌ์šฉ์ž์— ํ•œํ•˜์—ฌ ๋กœ๊ทธ์ธ ์ƒํƒœ์—์„œ๋งŒ ์ด์šฉ ๊ฐ€๋Šฅํ•˜๋‹ค.

1. HOME

image

  • ๋กœ๊ทธ์ธ ์ƒํƒœ์—์„œ 'HOME'์—์„œ ํผ์Šค๋„ ์ปฌ๋Ÿฌ ๊ฒ€์‚ฌํžˆ๊ธฐ ๋ฒ„ํŠผ์„ ํด๋ฆญํ•˜๋ฉด 'ํผ์Šค๋„์ปฌ๋Ÿฌ ํ…Œ์ŠคํŠธ' ํŽ˜์ด์ง€๋กœ ์ด๋™ํ•œ๋‹ค.
  • ๋กœ๊ทธ์•„์›ƒ ์ƒํƒœ์—์„œ ์œ„์™€ ๊ฐ™์€ ๊ธฐ๋Šฅ์„ ๋™์ผํ•˜๊ฒŒ ์ˆ˜ํ–‰ํ• ๊ฒฝ์šฐ, '๋กœ๊ทธ์ธ' ํŽ˜์ด์ง€๋กœ ์ด๋™ํ•œ๋‹ค.

2. ํผ์Šค๋„์ปฌ๋Ÿฌ

  • ํผ์Šค๋„์ปฌ๋Ÿฌ ํ…Œ์ŠคํŠธ ๋ฐ ํผ์Šค๋„ ์ปฌ๋Ÿฌ ๋ถ„๋ฅ˜์— ๋Œ€ํ•œ ์ •๋ณด๋ฅผ ์ œ๊ณตํ•˜๋Š” ๋ฉ”๋‰ด

  1. ํผ์Šค๋„์ปฌ๋Ÿฌ ํ…Œ์ŠคํŠธ
  • ํ…Œ์ŠคํŠธ ์‹œ์ž‘ ํŽ˜์ด์ง€

    image
    • ํผ์Šค๋„์ปฌ๋Ÿฌ ํ…Œ์ŠคํŠธ ์‹œ์ž‘ ์ „ ์•ˆ๋‚ด ๋ฌธ๊ตฌ์™€ ํ•จ๊ป˜ ํ…Œ์ŠคํŠธ ์ง„ํ–‰ ์—ฌ๋ถ€์— ๋Œ€ํ•ด ์‚ฌ์šฉ์ž๊ฐ€ ์„ ํƒํ•  ์ˆ˜ ์žˆ๊ฒŒ ํ•œ๋‹ค.
    • ํผ์Šค๋„์ปฌ๋Ÿฌ ๊ฒ€์‚ฌํ•˜๊ธฐ ๋ฒ„ํŠผ์„ ํด๋ฆญํ•˜๋ฉด ๋ณธ๊ฒฉ์ ์ธ ํ…Œ์ŠคํŠธ๊ฐ€ ์ง„ํ–‰๋œ๋‹ค.

  • ํ…Œ์ŠคํŠธ ์ง„ํ–‰ ํŽ˜์ด์ง€

    image
    • 9๊ฐ€์ง€์˜ 2์ง€์„ ๋‹คํ˜• ๊ฐ๊ด€์‹ ๋ฌธํ•ญ์œผ๋กœ ์ œ๊ณต๋œ๋‹ค.
    • ์‚ฌ์šฉ์ž๊ฐ€ ๋ณด๋‹ค ์ •ํ™•ํ•œ ํ…Œ์ŠคํŠธ๋ฅผ ์ง„ํ–‰ํ•  ์ˆ˜ ์žˆ๋„๋ก ๊ฐ ๋ฌธํ•ญ์— ํ…Œ์ŠคํŠธ ์ฐธ๊ณ  ์ด๋ฏธ์ง€ ๋ฐ TIP์„ ์ œ๊ณตํ•œ๋‹ค.
    • ์ด์ „/์ดํ›„ ๋ฒ„ํŠผ์„ ํด๋ฆญํ•˜์—ฌ ๊ฒฐ๊ณผ ์ œ์ถœ ์ „๊นŒ์ง€ ๋ฌธํ•ญ์„ ์ˆ˜์ •ํ•  ์ˆ˜ ์žˆ๋‹ค.
    • ๋งˆ์ง€๋ง‰ ๋ฌธํ•ญ์ธ 9๋ฒˆ ๋ฌธํ•ญ์œผ๋กœ ์ด๋™ํ•  ๊ฒฝ์šฐ ๊ฒฐ๊ณผ๋ณด๊ธฐ ๋ฒ„ํŠผ์ด ํ™œ์„ฑํ™” ๋˜๋ฉฐ, ์ด๋ฅผ ํด๋ฆญํ•˜๋ฉด ํผ์Šค๋„์ปฌ๋Ÿฌ ํ…Œ์ŠคํŠธ ๊ฒฐ๊ณผ๋ฅผ ์•Œ๋ ค์ค€๋‹ค.

  • ํ…Œ์ŠคํŠธ ๊ฒฐ๊ณผ ํŽ˜์ด์ง€

    image
    • ์‚ฌ์šฉ์ž์˜ ํผ์Šค๋„์ปฌ๋Ÿฌ ํ…Œ์ŠคํŠธ ๊ฒฐ๊ณผ๋ฅผ ์•Œ๋ ค์ค€๋‹ค.
    • ๋” ์•Œ์•„๋ณด๊ธฐ๋ฒ„ํŠผ์€ ํ•ด๋‹น ๊ฒฐ๊ณผ์— ๋Œ€ํ•œ ์ž์„ธํ•œ ์ •๋ณด๋ฅผ ์ œ๊ณตํ•˜๋Š” ํผ์Šค๋„ ์ปฌ๋Ÿฌ ๋ถ„๋ฅ˜ ํŽ˜์ด์ง€๋กœ ์ด๋™์‹œํ‚จ๋‹ค.
    • ๊ฒฐ๊ณผ ์ €์žฅํ•˜๊ธฐ ๋ฒ„ํŠผ์€ ์‚ฌ์šฉ์ž์˜ ํ…Œ์ŠคํŠธ ๊ฒฐ๊ณผ๋ฅผ ์ €์žฅํ•˜๋ฉฐ, '๋งˆ์ดํŽ˜์ด์ง€'์—์„œ๋„ ํ™•์ธ์ด ๊ฐ€๋Šฅํ•˜๋‹ค.

  1. ํผ์Šค๋„์ปฌ๋Ÿฌ ๋ถ„๋ฅ˜

    image
    • ํ…Œ์ŠคํŠธ๋ฅผ ์ง„ํ–‰ํ•˜์ง€ ์•Š๊ณ ๋„ ํ•ด๋‹น ํŽ˜์ด์ง€๋กœ ์ด๋™ํ•˜์—ฌ ๋ชจ๋“  ํผ์Šค๋„์ปฌ๋Ÿฌ ๋ถ„๋ฅ˜ ์ •๋ณด๋ฅผ ๋ณผ ์ˆ˜ ์žˆ๋‹ค.
    • ํ…Œ์ŠคํŠธ ๊ฒฐ๊ณผ ํŽ˜์ด์ง€์—์„œ ๋” ์•Œ์•„๋ณด๊ธฐ ๋ฒ„ํŠผ์„ ํด๋ฆญํ•  ๊ฒฝ์šฐ, ๋ถ„๋ฅ˜ ๊ฒฐ๊ณผ์— ๋งž๋Š” ํŽ˜์ด์ง€๋กœ ์ด๋™์‹œํ‚ค๋ฉฐ ์œ„์™€ ๊ฐ™์ด ๋‹ค๋ฅธ ํผ์Šค๋„ ์ปฌ๋Ÿฌ์˜ ์ •๋ณด๋„ ๋ณผ ์ˆ˜ ์žˆ๋‹ค.

3. ์ปฌ๋ŸฌํŒ”๋ ˆํŠธ

  1. ์˜ท

    image
    • ๊ฐ ํผ์Šค๋„ ์ปฌ๋Ÿฌ๋ณ„๋กœ ์˜ท์— ๋Œ€ํ•œ ์ปฌ๋ŸฌํŒ”๋ ˆํŠธ๋ฅผ ์ œ๊ณตํ•œ๋‹ค.
    • ์‚ฌ์šฉ์ž ๋ณธ์ธ์˜ ํผ์Šค๋„์ปฌ๋Ÿฌ์— ๋งž๋Š” ์˜ท ์ปฌ๋ŸฌํŒ”๋ ˆํŠธ๋ฅผ ์ฐธ๊ณ ํ•˜์—ฌ, ์˜ท์„ ์ฝ”๋””ํ•  ๋•Œ ์ƒ‰์ƒ ์„ ํƒ์— ๋„์›€์ด ๋  ์ˆ˜ ์žˆ๋„๋ก ํ•œ๋‹ค.

  1. ๋ฉ”์ดํฌ์—… ์ œํ’ˆ

    image
    • ๊ฐ ํผ์Šค๋„ ์ปฌ๋Ÿฌ๋ณ„๋กœ ๋ฉ”์ดํฌ์—…์— ๋Œ€ํ•œ ์ปฌ๋ŸฌํŒ”๋ ˆํŠธ์™€, ์ƒ‰์กฐ ํ™”์žฅํ’ˆ ์ถ”์ฒœ ๋ฆฌ์ŠคํŠธ๋ฅผ ์ œ๊ณตํ•œ๋‹ค.
    • ์‚ฌ์šฉ์ž ๋ณธ์ธ์˜ ํผ์Šค๋„์ปฌ๋Ÿฌ์— ๋งž๋Š” ๋ฉ”์ดํฌ์—… ์ปฌ๋ŸฌํŒ”๋ ˆํŠธ, ์ถ”์ฒœ ์ƒ‰์กฐ ํ™”์žฅํ’ˆ์„ ์ฐธ๊ณ ํ•˜์—ฌ ๋ฉ”์ดํฌ์—… ์ œํ’ˆ์„ ๊ตฌ๋งคํ•˜๊ฑฐ๋‚˜ ๋ฉ”์ดํฌ์—…์„ ํ•  ๋•Œ ์ƒ‰์ƒ ์„ ํƒ์— ๋„์›€์ด ๋  ์ˆ˜ ์žˆ๋„๋ก ํ•œ๋‹ค.

4. ์ปค๋ฎค๋‹ˆํ‹ฐ

  • ๋ฉ”์ดํฌ์—…, ์˜ท, ๊ธฐํƒ€์˜ ์„ธ ๊ฐ€์ง€ ์นดํ…Œ๊ณ ๋ฆฌ๋กœ ์ปค๋ฎค๋‹ˆํ‹ฐ ๊ธฐ๋Šฅ์„ ์ œ๊ณตํ•œ๋‹ค.
  • ์‚ฌ์šฉ์ž๋“ค์ด ์ปค๋ฎค๋‹ˆํ‹ฐ ๊ธฐ๋Šฅ์„ ํ™œ์šฉํ•˜์—ฌ ๊ฐ ์นดํ…Œ๊ณ ๋ฆฌ ๋ณ„๋กœ ์ •๋ณด ๊ณต์œ ๋ฅผ ํ•  ์ˆ˜ ์žˆ๋„๋ก ํ•œ๋‹ค.

  1. ๊ฒŒ์‹œ๊ธ€ ๋ฆฌ์ŠคํŠธ ์กฐํšŒ

    image
    • ์นดํ…Œ๊ณ ๋ฆฌ ๋ณ„๋กœ ๊ฒŒ์‹œ๊ธ€ ๋ฆฌ์ŠคํŠธ๋ฅผ ์ตœ์‹  ์ž‘์„ฑ์ˆœ์œผ๋กœ ์กฐํšŒํ•œ๋‹ค.
    • ์ œ๋ชฉ ๋˜๋Š” ์ž‘์„ฑ์ž๋ฅผ ๊ธฐ๋ฐ˜์œผ๋กœ ๊ฒ€์ƒ‰ ๋ฐ ์กฐํšŒํ•  ์ˆ˜ ์žˆ๋‹ค.
    • ํ•œ ํŽ˜์ด์ง€๋‹น 10๊ฐœ์˜ ๋ฆฌ์ŠคํŠธ๋ฅผ ์กฐํšŒํ•˜๋ฉฐ, ํ•˜๋‹จ์˜ ํŽ˜์ด์ง€ ๋ฒˆํ˜ธ๋ฅผ ํด๋ฆญํ•ด ์ด์ „/์ดํ›„์˜ ๊ฒŒ์‹œ๋ฌผ ๋ฆฌ์ŠคํŠธ๋ฅผ ์กฐํšŒํ•  ์ˆ˜ ์žˆ๋‹ค.
    • ์ž‘์„ฑํ•˜๊ธฐ ๋ฒ„ํŠผ์„ ๋ˆ„๋ฅด๋ฉด ํ•ด๋‹น ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๊ฒŒ์‹œ๊ธ€ ์ž‘์„ฑํ•˜๊ธฐ ํŽ˜์ด์ง€๋กœ ์ด๋™ํ•œ๋‹ค.
    • ๊ฒŒ์‹œ๊ธ€ ๋ฆฌ์ŠคํŠธ์˜ ํŠน์ • ๊ฒŒ์‹œ๋ฌผ์˜ ์ œ๋ชฉ์„ ๋ˆ„๋ฅด๋ฉด ๊ฒŒ์‹œ๊ธ€ ์ƒ์„ธ๋ณด๊ธฐ ํŽ˜์ด์ง€๋กœ ์ด๋™ํ•œ๋‹ค.

  2. ๊ฒŒ์‹œ๊ธ€ ์ž‘์„ฑํ•˜๊ธฐ

    image
    • ์ œ๋ชฉ ๋ฐ ๋‚ด์šฉ ์ž‘์„ฑ(ํ•„์ˆ˜), ํŒŒ์ผ ์ฒจ๋ถ€(์„ ํƒ)๋ฅผ ํ•˜์—ฌ ์ž‘์„ฑํ•  ์ˆ˜ ์žˆ๋‹ค.
    • ์šฐ์ธก ์ƒ๋‹จ์˜ ๋“œ๋กญ๋‹ค์šด ๋ฐ”๋ฅผ ์„ ํƒํ•˜์—ฌ ์นดํ…Œ๊ณ ๋ฆฌ๋ฅผ ๋ณ€๊ฒฝํ•˜์—ฌ ๊ฒŒ์‹œ๊ธ€์„ ์ž‘์„ฑํ•  ์ˆ˜ ์žˆ๋‹ค.

  3. ๊ฒŒ์‹œ๊ธ€ ์ƒ์„ธ๋ณด๊ธฐ

    image
    • ์นดํ…Œ๊ณ ๋ฆฌ ๋ณ„๋กœ ๋ชจ๋“  ์ž‘์„ฑ๋œ ๊ฒŒ์‹œ๋ฌผ ์ƒ์„ธ๋ณด๊ธฐ๊ฐ€ ๊ฐ€๋Šฅํ•˜๋‹ค.
    • ์ž์‹ ์ด ์ž‘์„ฑํ•œ ๊ฒŒ์‹œ๊ธ€์€ ์ˆ˜์ • ๋ฐ ์‚ญ์ œํ•  ์ˆ˜ ์žˆ๋‹ค.
    • ๋‹ค๋ฅธ์‚ฌ๋žŒ์ด ์ž‘์„ฑํ•œ ๊ฒŒ์‹œ๊ธ€์€ ์ƒ์„ธ๋ณด๊ธฐ๋งŒ ๊ฐ€๋Šฅํ•˜๋‹ค.

  4. ๊ฒŒ์‹œ๊ธ€ ์ˆ˜์ •ํ•˜๊ธฐ

    image
    • ์ œ๋ชฉ, ๋‚ด์šฉ, ํŒŒ์ผ์€ ์ˆ˜์ •์ด ๊ฐ€๋Šฅํ•˜๋‚˜ ์นดํ…Œ๊ณ ๋ฆฌ๋Š” ์ˆ˜์ •์ด ๋ถˆ๊ฐ€๋Šฅํ•˜๋‹ค.
    • ์ œ๋ชฉ, ๋‚ด์šฉ์€ ๊ณต๋ž€ ์ž‘์„ฑ(์ˆ˜์ •)์ด ๋ถˆ๊ฐ€๋Šฅํ•˜๋‹ค.

5. ๋งˆ์ดํŽ˜์ด์ง€

  1. ์ •๋ณด๋ณด๊ธฐ/์ˆ˜์ •

    image
    • ํ˜„์žฌ ์‚ฌ์šฉ์ž์˜ ํšŒ์›์ •๋ณด(์ด๋ฆ„, ID, ๋น„๋ฐ€๋ฒˆํ˜ธ, ํผ์Šค๋„์ปฌ๋Ÿฌ)๋ฅผ ์กฐํšŒํ•  ์ˆ˜ ์žˆ๋‹ค.
    • ํšŒ์› ์ •๋ณด ์ค‘ ๋น„๋ฐ€๋ฒˆํ˜ธ๋งŒ ์ˆ˜์ •ํ•  ์ˆ˜ ์žˆ๋‹ค.
    • ํผ์Šค๋„์ปฌ๋Ÿฌ๋Š” ์ฒซ ํšŒ์› ๊ฐ€์ž… ์‹œ ๊ณต๋ž€์ด๋‹ค. ํผ์Šค๋„์ปฌ๋Ÿฌ ํ…Œ์ŠคํŠธ๋ฅผ ์ˆ˜ํ–‰ํ•˜๊ณ  ๊ฒฐ๊ณผ๋ฅผ ์ €์žฅํ–ˆ์„ ๊ฒฝ์šฐ, ๊ฐ€์žฅ ์ตœ๊ทผ์— ์ €์žฅํ•œ ๋ฐ์ดํ„ฐ ๊ธฐ์ค€์œผ๋กœ ์ €์žฅ ๋ฐ ์กฐํšŒ๋œ๋‹ค.

  2. ํƒˆํ‡ดํ•˜๊ธฐ

    image
    • ์‚ฌ์šฉ์ž๊ฐ€ ํšŒ์› ํƒˆํ‡ด๋ฅผ ์‹œ๋„ํ•˜๋ ค๋Š” ๊ฒƒ์ด ๋งž๋Š”์ง€์— ๋Œ€ํ•œ ํ™•์ธ ๋ฌธ๊ตฌ๋ฅผ ์ œ๊ณตํ•œ๋‹ค.
    • ํ˜„์žฌ ์‚ฌ์šฉ์ž์˜ ๋น„๋ฐ€๋ฒˆํ˜ธ๋ฅผ ์˜ฌ๋ฐ”๋ฅด๊ฒŒ ์ž…๋ ฅํ•˜๊ณ  ํƒˆํ‡ดํ•˜๊ธฐ๋ฅผ ๋ˆ„๋ฅด๋ฉด ํ•ด๋‹น ์‚ฌ์šฉ์ž์˜ ๊ณ„์ •์ด ์‚ญ์ œ๋œ๋‹ค.

  3. ๋กœ๊ทธ์•„์›ƒ

    • ๋กœ๊ทธ์ธํ•œ ์‚ฌ์šฉ์ž์˜ ์„ธ์…˜์ด ํ•ด์ œ๋˜๋ฉฐ ๋ฉ”์ธํŽ˜์ด์ง€๋กœ ์ด๋™๋œ๋‹ค.

๐Ÿ“‘ References

  • ํผ์Šค๋„์ปฌ๋Ÿฌ ํ…Œ์ŠคํŠธ : http://www.colorz.co.kr/ (This page is currently closed.)

Releases

No releases published

Packages

No packages published