๐ŸŒท ์ฑ„์šฉ ์ถ”์„ธ/ ์œ ํŠœ๋ธŒ ์ฑ„๋„ ์ถ”์ฒœ

Taehee Kimยท2022๋…„ 4์›” 5์ผ
0

[์•„์ฃผ ์ค‘์š”ํ•œ ์ด์•ผ๊ธฐ]

1.๐Ÿšฉ์š”์ฆ˜ FE ๊ฐœ๋ฐœ์ž ์ฑ„์šฉ ๋ฌธ์ œ ์ถ”์„ธ

css, html์€ ์™„์ „ ๋‹น์—ฐํ•œ ๊ธฐ๋ณธ, js๊ฐ€ ์ง„์งœ(์ดˆ๋ณด์ž๋Š” ๋‹น์—ฐํžˆ ์ฒ˜์Œ๋ถ€ํ„ฐ ํƒ„ํƒ„ํ•˜๊ฒŒ!)

(1) ๋‹จ์ˆœ ui ๊ตฌํ˜„(๋‚ฎ์€ ์—ฐ๋ด‰)

์ฝ”๋”ฉ ํ…Œ์ŠคํŠธ: ๋‹ค์Œ ๊ฒ€์ƒ‰ > ์ตœ์‹  ์˜ํ™” ํŽ˜์ด์ง€ ๊ตฌํ˜„ ๋ฌธ์ œ ๊ธฐ์ถœ (html, css)
๋ฉด์ ‘: class ์™œ ์ด๋ ‡๊ฒŒ ์ผ๋Š”์ง€ ๋“ฑ tab ๋ˆŒ๋Ÿฌ๋ณด๋ฉฐ ์›น์ ‘๊ทผ์„ฑ ํ™•์ธ

(2) ์•Œ๊ณ ๋ฆฌ์ฆ˜ (์•„์ฃผ ๊ณ ์—ฐ๋ด‰)

(3) js๋กœ componentํ™”

๋ˆˆ๋– ๋ณด๋‹ˆ ์ฝ”๋”ฉ ์ „๋‚  ๊ฐ•์˜(ํ”ผ๊ทธ๋งˆ, API)
ํ”„๋กœ๊ทธ๋ž˜๋จธ์Šค- ์‡ผํ•‘๋ชฐ SPA (only js)
http://35.76.53.28:8080/mall (JSON ๋ฐ์ดํ„ฐ ๊ฐ€์ ธ์™€์„œ ๋งŒ๋“ฆ)

* ์ปดํฌ๋„ŒํŠธ(Component)๋ž€ ํ”„๋กœ๊ทธ๋ž˜๋ฐ์— ์žˆ์–ด ์žฌ์‚ฌ์šฉ์ด ๊ฐ€๋Šฅํ•œ ๊ฐ๊ฐ์˜ ๋…๋ฆฝ๋œ ๋ชจ๋“ˆ ์˜๋ฏธ


2. ๐Ÿ’ป ๊ฐœ๋ฐœ์ž๊ฐ€ ๋˜๊ณ  ์‹ถ์–ด์š”

https://paullabkorea.medium.com/%EA%B0%9C%EB%B0%9C%EC%9E%90%EA%B0%80-%EB%90%98%EA%B3%A0-%EC%8B%B6%EC%96%B4%EC%9A%94-5d90b7ad9be9

์ฝ”๋”ฉ์€ ์ผ์ƒ์ด๋‹ค! ํž˜๋“ค๊ณ  ์กฐ๊ธ‰ํ•ดํ•˜์ง€ ๋ง์ž! ์ฝ”๋”ฉ์€ ๊ธด ํ˜ธํก์œผ๋กœ ๊ณต๋ถ€ํ•ด์•ผ ํ•œ๋‹ค.
ํŠนํžˆ '๊ฑท๋‹ค๋ณด๋ฉด ๋‹ค๋‹ค๋ฅด์ง€ ๋ชปํ•˜๋Š” ๊ณณ์ด ์—†๋‹ค.'๋ผ๋Š” ๋ง์ด ๊ธฐ์–ต์— ๋‚จ๋Š”๋‹ค. ์ง€๊ธˆ์€ ๋‹ต๋‹ตํ•  ์ˆ˜ ์žˆ์ง€๋งŒ ํ•˜๋ฃจ, ์ผ์ฃผ์ผ, ํ•œ ๋‹ฌ ๋’ค์—๋Š” ๋‹ฌ๋ผ์ง„ ๋‚ด ๋ชจ์Šต์ด ๊ธฐ๋‹ค๋ฆฌ๊ณ  ์žˆ์„๊ฑฐ๋ผ๊ณ  ๋ฏฟ๋Š”๋‹ค!


3. <input type=hidden>

์‚ฌ๋žŒ๋ˆˆ์— ๋ณด์ด์ง€ ์•Š์ง€๋งŒ, ์ž…๋ ฅ์„ ํ•˜๊ณ  ์ œ์ถœํ•˜๋ฉด
hidden ํƒœ๊ทธ์— ๋ฐ์ดํ„ฐ๊ฐ€ ๋„ฃ์–ด์ ธ ๋ณด์—ฌ์ง€๊ณ , ๋ฐ์ดํ„ฐ๋„ ์„œ๋ฒ„๋กœ ์ „์†ก๋œ๋‹ค.


5. ๐Ÿ“ƒ์ถ”์ฒœ์„œ - github๊ธฐ์ค€์œผ๋กœ

- ๊นƒํ—™ ๊ด€๋ฆฌ: ์ถ”ํ›„ ์–ด๋ ค์šด ๊ณผ์ œ๋Š” ๋”ฐ๋กœ ์˜ฌ๋ฆด ๋ ˆํฌ์ง€ํ† ๋ฆฌ ๋”ฐ๋กœ ๋งŒ๋“ค๊ธฐ

6. ๐Ÿ“— ์ฝ”๋”ฉ ์œ ํŠœ๋ธŒ ์ถ”์ฒœ

โœ” 1๋ถ„์ฝ”๋”ฉ

โœ” Veamcamp ๐Ÿ’œ๐Ÿ’œ

์˜ค์•„์ด์Šค ์‹œ๋ฆฌ์ฆˆ ๋ชจ๋‘ ๋ณด๊ธฐ ์ถ”์ฒœ

โœ” ์ƒํ™œ์ฝ”๋”ฉ๐Ÿ’œ

โœ” ์ฝ”๋“œ๋ฆฌ๋ทฐ ๋…ธํ•˜์šฐ

โœ” ๋“œ๋ฆผ์ฝ”๋”ฉ: FE๋ถ€๋ถ„๋งŒ

โœ” ์• ํ”Œ์ฝ”๋”ฉ(์ผ๋ถ€๋Ÿฌ ์‰ฝ๊ฒŒ ์•Œ๋ ค์คŒ)

โœ” ๋ผ๋งˆ์ฝ”๋”ฉ: ๋ธ”๋กœ๊ทธ ๋งŒ๋“ค๊ธฐ ํด๋ก ์ฝ”๋”ฉ

โœ” ๋น„์ „๊ณต์ž์˜ ์†”์งํ•œ ์ด์•ผ๊ธฐ

โœ” zerocho

โœ” ์–„ํŒํ•œ ์ฝ”๋”ฉ์‚ฌ์ „


๐Ÿ‘€ SI์˜ ์–ด๋ ค์›€

https://www.youtube.com/watch?v=9u75fN2lbis
https://www.youtube.com/watch?v=4qMyX5yIiNo


baseline๊ณผ x-height์ •๋„๋Š” ์•Œ์•„๋‘๊ธฐ

0๊ฐœ์˜ ๋Œ“๊ธ€