๐Ÿ˜Š

4์ฃผ์ฐจ ์ปคํ”ผ์ฑ—

์ƒ์„ฑ์ผ
Feb 21, 2024 11:37 AM
ํƒœ๊ทธ
 
px, rem ๊ฐ™์ด ์“ด ๊ฒŒ ์ข…์ข… ๋ณด์ด๋Š”๋ฐ ํ•˜๋‚˜๋กœ ํ†ต์ผํ•˜๋Š” ๊ฒŒ ์ข‹์„ ๊ฒƒ ๊ฐ™๋‹ค
 
rem์„ ์“ธ๊ฑฐ๋ผ๋ฉด ๋ชจ๋ฐ”์ผ, pc ํ•ด์ƒ๋„์— ๋”ฐ๋ฅธ ํฐํŠธ ํฌ๊ธฐ๋ฅผ ๊ณ ๋ คํ•ด๋ณด๋ฉด ์ข‹์„ ๊ฒƒ ๊ฐ™๋‹ค
 
์ฐจํฌ๋ผ ui์—์„œ prop์œผ๋กœ ๋งŽ์ด ๋‹ฌ๊ณ  ์žˆ๋Š”๊ฒŒ ์ข‹์€ ๊ฑด์ง€๋Š”.. ๋ชจ๋ฅด๊ฒ ๋‹ค ๋‚˜์ค‘์— ๊ณ ๋ คํ•ด๋ณด๊ธธ.. (๋ฆฌํŒฉํ† ๋ง ๋ง์”€ํ•˜์‹œ๋Š” ๋“ฏ) -> ์ปค์Šคํ…€ํ•˜๊ธฐ๊ฐ€ ์‰ฝ์ง€ ์•Š๊ณ  ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์—์„œ ์—๋Ÿฌ๊ฐ€ ์ƒ๊ธฐ๋ฉด ๊ณ ์น˜๊ธฐ๋„ ์‰ฝ์ง€ ์•Š๊ณ  ๊ฐ€๋…์„ฑ ๋ฌธ์ œ๋„ ์žˆ๊ธฐ ๋•Œ๋ฌธ์— ์‹ค๋ฌด์—์„œ ์™ธ๋ถ€ ๋””์ž์ธ ์‹œ์Šคํ…œ์„ ์ž˜ ์•ˆ์“ด๋‹ค..
 
user.ts?๋ฅผ ์ƒ์ˆ˜๋กœ ๋ณด๊ธฐ๋Š” ์–ด๋ ต์ง€ ์•Š๋‚˜.. ๊ทธ๋ƒฅ ํ•˜๋“œ์ฝ”๋”ฉ ๋ฐ•์•„๋†“์€ ๊ฑฐ ์•„๋‹Œ๊ฐ€.. ๊ด€๋ จํ•ด ์ƒ๊ฐํ•ด๋ณด์‹œ๊ธธ
 
ํฐํŠธ๋ฅผ ๋นŒ๋“œํ•˜๋ฉด ์šฉ๋Ÿ‰์ด ํฌ๋‹ค๊ณ  ์›Œ๋‹์ด ๋œจ๋Š”๋ฐ ํ•ด๊ฒฐํ•  ๋ฐฉ๋ฒ•? ํฐํŠธ ์ž์ฒด๋ฅผ ๋“ค๊ณ  ์˜ค๋ฉด ํ”„๋กœ์ ํŠธ๊ฐ€ ์ปค์ง€๋‹ˆ ์›น ํฐํŠธ ์ชฝ์œผ๋กœ ํ’€์–ด๋ณด์‹œ๊ธธ
 
์†Œ์…œ ๋กœ๊ทธ์ธ๊ณผ ์ด๋ฉ”์ผ ๋กœ๊ทธ์ธ ๊ตฌ๋ถ„? (ex ์†Œ์…œ ๋กœ๊ทธ์ธ์€ ๋น„๋ฐ€๋ฒˆํ˜ธ ๋ณ€๊ฒฝ์ด ์•ˆ๋˜์–ด์•ผํ•จ) ์†Œ์…œ ๋กœ๊ทธ์ธ์„ ํ•œ ๋‹ค์Œ์— ํ† ํฐ ๋ฐ›๋Š” ๊ฑด ๋˜‘๊ฐ™์€๋ฐ, ์œ ์ž… ๊ฒฝ๋กœ๋ฅผ ๊ตฌ๋ถ„ํ•˜๊ณ  ์‹ถ์€ ๊ฑด๊ฐ€? ๋„ค. ํ•„์š” ์—†์„๊นŒ์š”? ํ•„์š”๊ฐ€ ์—†๋‹ค๊ธฐ ๋ณด๋‹ค๋Š” ํŽ˜์ด์ง€๊ฐ€ ๋‹ค๋ฅด๊ฒŒ ๋ณด์ธ๋‹ค๋Š” ๋ช…ํ™•ํ•œ ์š”๊ตฌ์‚ฌํ•ญ์ด ์žˆ๋Š” ๊ฒŒ ์•„๋‹Œ ์ƒํ™ฉ์œผ๋กœ ๋ณด์—ฌ์„œ ๊ตณ์ด? ์‹ถ๋‹ค
 
(API PR ์ฝ”๋“œ ๋ฆฌ๋ทฐ) ๋ฒ ์ด์Šค ์ธ์Šคํ„ด์Šค ์ž์ฒด๊ฐ€ url์ด๋‚˜ config๊ฐ’ ์ง€์ •ํ•˜๊ณ  ๋„˜์–ด๊ฐ€๋Š”๋ฐ ๊นก์œผ๋กœ ๊ฐ์ž api์—์„œ ์ง€์ •ํ•˜๋Š” ๊ฑฐ ๊ฐ™์€๋ฐ ์›ฌ๋งŒํ•˜๋ฉด ๊ฐœ๋ณ„ api ํ˜ธ์ถœ๋ถ€์—์„œ๋Š” url, request ๋ฐ”๋””์— ๋“ค์–ด๊ฐˆ ๋ฐ์ดํ„ฐ๋งŒ ๋„˜๊ธธ ์ˆ˜ ์žˆ๋„๋ก ๊ตฌ์„ฑํ•˜๊ธธ... config ์–ด์ฉŒ๊ณ ๊ฐ€ ๋ฒ ์ด์Šค ์ธ์Šคํ„ด์Šค์— ์žˆ์–ด๋„ ์ƒ๊ด€์ด ์—†์„ ๊ฑฐ ๊ฐ™์•„ ๋ณด์ธ๋‹ค
 
์ธ์Šคํ„ด์Šค๊ฐ€ ๋‘๊ฐœ์ธ๋ฐ ๋ฐ˜๋ณต๋˜๋Š” ๊ฑด ์‚ญ์ œํ•ด์•ผ ํ•  ๊ฒƒ ๊ฐ™๋‹ค
 
ํŒ) 401 ๋–จ์–ด์กŒ์„ ๋•Œ ํŒ์—… ๋“ฑ์„ ๋„์šฐ๊ณ  ๋กœ๊ทธ์ธ ํŽ˜์ด์ง€๋กœ ์ด๋™ํ•˜๋Š” ๋กœ์ง์ด ์ถ”๊ฐ€๋˜๋ฉด ์ข‹์„ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค
 
์„œ๋ฒ„ ์ชฝ์—์„œ error ๊ฐ์ฒด์— ๋„ฃ์–ด์ค„ ๋ฐ์ดํ„ฐ๊ฐ€ ์žˆ๋Š” ๊ฒŒ ์•„๋‹ˆ๋ฉด ๊ตณ์ด ์ปค์Šคํ…€์„ ๋งŒ๋“ค์–ด์•ผํ•  ์ด์œ ๊ฐ€ ์—†์„ ๊ฑฐ ๊ฐ™๋‹ค (๋ฒก์—”๋“œ๋ž‘ ํ˜‘์˜ํ•ด์„œ ํ•˜๊ฒŒ ๋œ๋‹ค๋ฉด ํ•˜๋ฉด ์ข‹์„ ๊ฑฐ ๊ฐ™๋‹ค)
 
์ทจํ–ฅ์ฐจ์ด์ธ๋ฐ, ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ๋Š” ๋ณด์ˆ˜์ ์œผ๋กœ ์“ฐ๊ธฐ ์œ„ํ•จ์ด ํฌ๋‹ค๊ณ  ์ƒ๊ฐ์ด ๋˜๊ธฐ ๋•Œ๋ฌธ์— ์ œ๋„ˆ๋ฆญ๋ณด๋‹ค๋Š” ํƒ€์ž…์œผ๋กœ ์ง€์ •ํ•˜๋Š” ๊ฑธ ์ถ”์ฒœ๋“œ๋ฆฝ๋‹ˆ๋‹ค (๊ณ ์ •๋œ ์ƒ์ˆ˜์ด๊ณ  ์–ด๋–ค ํƒ€์ž…์ด ๋“ค์–ด์˜ฌ์ง€๋Š” ํ˜‘์˜ํ•  ์ˆ˜ ์žˆ๋Š” ๋ถ€๋ถ„์ด๋‹ˆ ํƒ€์ž…์œผ๋กœ ํ•˜๋Š” ๊ฑด ์–ด๋–จ์ง€ํ•˜๋Š” ์˜๊ฒฌ!)
 
์ œ๋„ˆ๋ฆญ์ด any ํƒ€์ž…๊ณผ ๊ฐ™์€ ๋А๋‚Œ์ด...? ใ„ดใ„ด ๋‹ค๋ฅด๋‹ค. any๋Š” ์ •๋ง ์–ด์ฉ” ์ˆ˜ ์—†๋Š” ๊ฒฝ์šฐ ์•„๋‹ˆ๋ฉด ์“ฐ์ง€๋ง๊ธธ..
 
์ค‘๋ณต๋˜๋Š” ์ฝ”๋“œ๋ฅผ interface๋กœ ์„ ์–ธํ•˜๊ณ  extend๋กœ ํ™•์žฅํ•˜๋ฉด ํ™•์žฅํ•œ ํƒ€์ž…์˜ ์ด๋ฆ„๋งŒ ๋ณด์ด๋˜๋ฐ ์™œ ์•ˆ๋ณด์—ฌ์ฃผ๋Š” ๊ฑธ๊นŒ์š”? ์ฒ˜์Œ๋ถ€ํ„ฐ ๋๊นŒ์ง€ interface๋งŒ ์ผ์œผ๋ฉด ํฌ๊ฒŒ ์ƒ๊ด€์ด ์—†์„ ๊ฑฐ ๊ฐ™๊ธดํ•œ๋ฐ.. ํƒ€์ž…์„ ์“ฐ๋‹ˆ๊นŒ ๋ณด์ด๊ณ  ์ธํ„ฐํŽ˜์ด์Šค๋ฅผ ์“ฐ๋‹ˆ๊นŒ ์•ˆ๋ณด์ด๋”๋ผ๊ตฌ์šฉ.. ํ™•์‹คํžˆ ์ด์œ ๋ฅผ ๋ชจ๋ฅด๊ฒ ์–ด์„œ ๋ณด๊ณ  ๋‹ต๋ณ€๋“œ๋ฆฌ๊ฒ ์Šต๋‹ˆ๋‹น
 
์ด์•ผ๊ธฐ๊ฐ€ ๋‚˜์™€์„œ ํ•˜๋Š” ๋ง์ธ๋ฐ ์†์„ฑ์ด ๋‹ค๋ฅธ ๋‘ ๊ฐœ๋ฅผ ํ•ฉ์น  ๋•Œ๋Š” ๋ฌด์กฐ๊ฑด ์ธํ„ฐํŽ˜์ด์Šค์ž…๋‹ˆ๋‹ค ๊ธฐ๋ณธ์ ์ธ๊ฑด ์ธํ„ฐํŽ˜์ด์Šค, ์ธํ„ฐํŽ˜์ด์Šค๊ฐ€ ์•ˆ๋˜๋ฉด ํƒ€์ž…์œผ๋กœ ์“ฐ๊ธธ~!
 
pr ์˜ฌ๋ฆด ๋•Œ ํŒจํ‚ค์ง€๋ฅผ ๋ฐ”๊พผ ๊ฒŒ ์•„๋‹Œ๋ฐ package-lock์ด ๋ณ€ํ–ˆ๋‹ค? ์ด๊ฑด ์˜ฌ๋ฆฌ๋ฉด ์•ˆ๋จ..
 
์Šฌ๋ž™์— ์˜ฌ๋ฆฐ ์ƒํ™ฉ์—์„œ๋Š” node module์„ ์žฌ์„ค์น˜ํ•˜๋Š” ๊ณผ์ •์ด ๋ฌธ์ œ์ผ ์ˆ˜๋„.. ๋˜‘๊ฐ™์ด ์„ค์น˜๋œ๋‹ค๋Š” ๋ณด์žฅ์ด ์—†๋‹ค
๋™๊ฑด๋‹˜์ด ๋ง์”€ํ•˜์‹  ๊ฒฝ์šฐ๊ฐ€ npm ci์˜ ๋ฌธ์ œ๋Š” ์•„๋‹Œ ๊ฑฐ ๊ฐ™์Šต๋‹ˆ๋‹ค. ์ปค๋งจ๋“œ ๋ฌธ์ œ๋ผ๊ธฐ๋ณด๋‹ค๋Š” ํŒจํ‚ค์ง€ ๋””ํŽœ๋˜์‹œ๊ฐ€ ์›๋ž˜ ๊ผฌ์—ฌ์žˆ์„ ๊ฐ€๋Šฅ์„ฑ์ด ์ปค๋ณด์ž„ ๋กค์—… ๋ฌธ์ œ๊ฐ€ ์•„๋‹ˆ์—ˆ์„๊นŒ~ ํ•˜๋Š” ์ƒ๊ฐ!
ํ•˜์‹ค ๋•Œ๋Š” npm ci, npm i ๋‘˜ ์ค‘ ํ•˜๋‚˜๋กœ ํ†ต์ผํ•˜๋Š” ๊ฒŒ ์ข‹์„ ๊ฑฐ ๊ฐ™์Šต๋‹ˆ๋‹ค (์ด๋Ÿฐ๋ฐ ์‹œ๊ฐ„ ๋‚ญ๋น„ํ•˜๋Š” ๊ฑด ์‹œ๊ฐ„ ์•„๊นŒ์šฐ๋‹ˆ๊นŒ ๋ฆฌ์•กํŠธ์— ์ง‘์ค‘ํ•œ๋‹ค!๋Š” ๋งˆ์ธ๋“œ๋กœ ใ„ฑใ„ฑ) ci๋„ ์ƒ๊ด€ ์—†๋Š”๋ฐ ci๋Š” ์„ค์น˜ํ•˜๋Š” ์‹œ๊ฐ„์ด ์ข€ ๋” ๊ฑธ๋ฆด ๊ฑฐ ๊ฐ™์•„์„œ ๊ทธ๊ฒŒ ๋‹จ์ ์ผ ๊ฑฐ ๊ฐ™๋‹ค. ์•„์˜ˆ i๋กœ ํ†ต์ผํ•˜๋Š” ๊ฒŒ ์ข‹์ง€ ์•Š์„๊นŒ~ํ•˜๋Š” ์ƒ๊ฐ์ž…๋‹ˆ๋‹ค
 
์›น์ด๋ž‘ ๋ชจ๋ฐ”์ผ์„ ํ”„๋กœ์ ํŠธ ์ดˆ์ฐฝ๊ธฐ๋ถ€ํ„ฐ ๊ณ ๋ คํ•ด์•ผํ• ์ง€? ์•„๋‹ˆ๋ฉด ์›น ๋จผ์ € ๊ณ ๋ คํ•˜๊ณ  ๋ชจ๋ฐ”์ผ์„ ๊ณ ๋ คํ•ด์•ผํ• ์ง€ ๊ถ๊ธˆํ•ฉ๋‹ˆ๋‹ค ์ฒ˜์Œ์— ์„ธํŒ…ํ•ด๋‘๊ณ  ์ง„ํ–‰ํ•˜๋Š” ๊ฒŒ ๋น„์šฉ์ด ๋œ ๋“ค์–ด์š”. ๋ชจ๋ฐ”์ผ ๋จผ์ €ํ•˜๊ณ  pc๋ฅผ ํ•˜๊ธฐ๋„ ํ•˜๋Š”๋ฐ ์ด๋Ÿฐ ๊ฒฝ์šฐ pc๋ฅผ ๊ณ ๋ คํ•˜์ง€ ์•Š๋Š” ์ฝ”๋“œ๋“ค์ด ์žˆ์„ ์ˆ˜ ์žˆ์–ด ์ดˆ์ฐฝ๊ธฐ๋ถ€ํ„ฐ ๊ณ ๋ คํ•˜๋Š” ๊ฒŒ ์ข‹์•„๋ณด์ธ๋‹ค. ๊ทผ๋ฐ ์ด๊ฑด ์šฐ์„ ์ˆœ์œ„๊ฐ€ ๋‚ฎ์€ ๋ถ€๋ถ„์ด๋ผ ์ƒ๊ฐ์ด ๋œ๋‹ค. ์ง€๊ธˆ์€ ๊ธฐ๋Šฅ ๊ตฌํ˜„์ด ์ค‘์š”ํ•˜๋‹ค๊ณ  ์ƒ๊ฐ์ด ๋œ๋‹ค. ๊ธฐ๋Šฅ ํ•˜๋‚˜ ๋” ๋ถ™์ด๋Š” ๊ฒŒ ์ข‹์ง€ ์•Š์„๊นŒ
 
์Šค์™€์ดํผ๋Š” swiper.js๋ผ๋Š” ๋งŽ์ด ์“ฐ๋Š” ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ์“ฐ์‹œ๊ธธ ์ถ”์ฒœ๋“œ๋ฆฝ๋‹ˆ๋‹ค (๊ทธ๋ƒฅ ๊ตฌํ˜„ํ•˜๊ธฐ ์‰ฝ์ง€ ์•Š์Œ)
 
๋ญ”๊ฐ€ ๋‹ด๋‹นํ•œ ๊ธฐ๋Šฅ์ด ์•ˆ๋ณด์ด๋Š” ๋ถ„๋“ค์ด ์žˆ๋Š”๋ฐ, ๊ตต์งํ•œ ๊ธฐ๋Šฅ์„ ๋งก๋„๋ก ๋‚˜๋ˆ ์ฃผ์‹œ๋ฉด ์ข‹์„ ๊ฑฐ ๊ฐ™๋‹ค
 
๋ชจ๋‹ฌ์€ ํ•˜๋‚˜์”ฉ๋งŒ ๋œฌ๋‹ค๋ฉด ์ฐจํฌ๋ผ ui์—์„œ ์ œ๊ณตํ•ด์ฃผ๋Š” ๊ฑฐ ์จ๋„ ํฌ๊ฒŒ ๋ฌธ์ œ ์—†์„ ๊ฑฐ ๊ฐ™๋‹ค ์ด์Šˆ๊ฐ€ ์ƒ๊ธด๋‹ค๋ฉด ๋ญ ์ปดํฌ๋„ŒํŠธ์—์„œ ๋ชจ๋‹ฌ์„ ๋„์šฐ๋˜๊ฐ€ ํ•˜๋Š” ์‹์œผ๋กœ ํ•˜๋ฉด ๋˜์ง€ ์•Š์„๊นŒ,,
 
jwt ํ† ํฐ์„ ํ•„์š”๋กœ ํ•˜์ง€ ์•Š๋Š” ์š”์ฒญ์—์„œ ๋‹ด์•„์„œ ๋‘ฌ๋„ ์ƒ๊ด€์ด ์—†๋‚˜์š”? ์ƒ๊ด€ ์—†์„ ๊ฑฐ ๊ฐ™๋‹ค ๊ทธ๊ฑธ ๋ฝ‘์•„ ์“ฐ๋Š” ๊ฑด ์„œ๋ฒ„ ์ชฝ์ด๊ธฐ ๋•Œ๋ฌธ์—
 
vscode์—์„œ ๊ฐ€๋กœ์ค„? ์ƒ๊ธฐ๋Š” ๊ฑฐ ์–ด์บํ•˜์…จ๋Š”์ง€.. Indenticator ์ต์Šคํ…์…˜์ž…๋‹ˆ๋‹ค