The journey to becoming a developer

My future is created by what I do today, not tomorrow.

What I learned/CodeSquad Log

CodeSquad Day 34 : Front-end Week 2

Millie 2022. 2. 25. 00:51

 

CodeSquad๐Ÿ”นDay 34

Morning Algo

์˜ค๋Š˜์€ ๋„๋‹ˆ๊ฐ€ ๋ชธ์ด ์ข‹์ง€ ์•Š์•„์„œ ํ–„๋””, ํ˜ธ์ด์™€ ์…‹์ด์„œ ์Šคํ„ฐ๋””๋ฅผ ํ–ˆ๋‹ค. ํ”„๋กœ๊ทธ๋ž˜๋จธ์Šค '๊ฐ€์žฅ ํฐ ์ˆ˜' ๋ฌธ์ œ์™€ LeetCode์˜ Linked List ๋ฌธ์ œ๋ฅผ ๋ฆฌ๋ทฐํ–ˆ๋‹ค. ์•„์นจ์— ์Šคํ„ฐ๋””๋ฅผ ํ•˜๋ฉด ์™ ์ง€ ๋ชจ๋ฅผ ๋ฟŒ๋“ฏํ•จ์ด ๋Š๊ปด์ง„๋‹ค. ๊พธ์ค€ํžˆ ์ด์–ด๋‚˜๊ฐ€๊ณ  ์‹ถ๋‹ค.

 

Class by Crong

ํ•ญ์ƒ ํฌ๋กฑ์˜ ์ˆ˜์—…์€ ์งˆ์˜์‘๋‹ต์œผ๋กœ ์‹œ์ž‘ํ•œ๋‹ค. ์ด๋ฒˆ์— ์งˆ์˜์‘๋‹ต์—์„œ๋Š” ์ „์—ญ ๋ณ€์ˆ˜ ์‚ฌ์šฉ์˜ ๋ฌธ์ œ์ , Git workflow ๊ด€๋ จํ•œ ์ด์•ผ๊ธฐ, ๊ธฐ๋Šฅ์€ ๊ตฌํ˜„ํ–ˆ์ง€๋งŒ ์ฝ”๋“œ ๊ตฌ์„ฑ์ด๋‚˜ ์„ค๊ณ„๊ฐ€ ๋งŒ์กฑ์Šค๋Ÿฝ์ง€ ์•Š์„ ๋• ์–ด๋–ป๊ฒŒ ํ•ด์•ผํ•˜๋Š”์ง€์— ๋Œ€ํ•œ ์ด์•ผ๊ธฐ๋ฅผ ํ–ˆ๋‹ค.

๋‘ ๋ฒˆ์งธ ํŒŒํŠธ์—์„œ๋Š” Web Animation์„ ์ค‘์ ์ ์œผ๋กœ ์ด์•ผ๊ธฐํ–ˆ๋‹ค. setInterval, setTimeout, requestAnimationFrame์„ ์–ด๋–ป๊ฒŒ ํ™œ์šฉํ•˜๋Š”์ง€์— ๋Œ€ํ•œ ๊ฒƒ๋“ค. ์‚ฌ์‹ค ์ด์ฏค๋ถ€ํ„ฐ ์‚ด์ง ์ž ์ด ์˜ค๊ธฐ ์‹œ์ž‘ํ–ˆ๋‹ค. ๊ทธ๋Ÿฐ๋ฐ ๊ทธ๋ฃน์„ ์ง€์–ด์„œ ์ฝ”๋“œ๋ฅผ ์ง์ ‘ ์งœ ๋ณด๋ฉด์„œ ๋„ค๋ชจ๋ฅผ ์˜†์œผ๋กœ ์ž์—ฐ์Šค๋Ÿฝ๊ฒŒ ์›€์ง์—ฌ๋ณด๋Š” ํ™œ๋™์„ ํ•˜๋‹ˆ ์ž ์ด ํ™• ๊นผ๋‹ค. ํ™•์‹คํžˆ ๋ง์„ ํ•˜๋ฉด์„œ ์ง์ ‘ ์ฝ”๋“œ๋ฅผ ์งœ๋‹ˆ๊นŒ ๊ทธ๋Ÿฐ ๊ฒƒ ๊ฐ™๋‹ค. ์ ์‹ฌ ์‹œ๊ฐ„์— ์ž ์„ ๋” ์ž˜๊นŒ ํ•˜๋‹ค๊ฐ€ ์ž ์ด ์ •๋ง ๋‹ฌ์•„๋‚˜ ๋ฒ„๋ ค์„œ ๊ทธ๋Ÿด ํ•„์š”๋„ ์—†๊ฒŒ ๋˜์—ˆ๋‹ค.

 

Express

npm์œผ๋กœ express๋ฅผ ์„ค์น˜ํ•˜๊ณ , data.json์„ localhost:3000์— ๋ฌด์‚ฌํžˆ ๋„์› ๋‹ค. ๊ทธ๋ฆฌ๊ณ  ์•ž์œผ๋กœ ์ด ๊ฒฝ๋กœ๋กœ fetch๋ฅผ ํ•˜๋ ค๊ณ  ํ–ˆ๋Š”๋ฐ CORS ์—๋Ÿฌ๊ฐ€ ๋–ด๋‹ค. ์˜ˆ์ „์— ํ”„๋กœ์ ํŠธ๋ฅผ ํ–ˆ์„ ๋•Œ์—๋„ ์ด ์—๋Ÿฌ๊ฐ€ ๋–ด๋˜ ์ ์ด ์žˆ๊ณ , ์–„์ฝ”์˜ ์˜์ƒ์—์„œ ๋ณธ ์ ๋„ ์žˆ๋Š”๋ฐ ์ œ๋Œ€๋กœ ๋‚ด๊ฐ€ ์•Œ๊ณ  ์žˆ๋Š” ๊ฒŒ ์•„๋‹ˆ๋ผ๋Š” ์ƒ๊ฐ์ด ๋“ค์–ด์„œ ๊ฒ€์ƒ‰์„ ์ข€ ํ•ด ๋ดค๋‹ค.

Cross Origin Resource Sharing์˜ ์ค„์ž„๋ง๋กœ์„œ, ์ž์‹ ์ด ์†ํ•˜์ง€ ์•Š์€ ๋‹ค๋ฅธ domain, protocol, port์— ์žˆ๋Š” resource๋ฅผ ์š”์ฒญํ•˜๋Š” ๋ฐฉ์‹์ด๋ผ๊ณ  ํ•œ๋‹ค. ์•„์ง ๊นŠ์ด ์žˆ๊ฒŒ ์•„๋Š” ๊ฒƒ์€ ์•„๋‹ˆ๋‹ค.

 

[Node.js] express cors ์‚ฌ์šฉํ•˜๊ธฐ

1. ์„œ๋ก  ๋ฆฌ๋ฒ„์Šค ํ”„๋ก์‹œ ์„œ๋ฒ„๋กœ NGINX๋ฅผ ๋‘๊ณ  ํ•œ ์›Œํฌ์Šคํ…Œ์ด์…˜์—์„œ Swagger์™€ node.js ์„œ๋ฒ„๋ฅผ ํ•จ๊ป˜ ๊ตฌ๋™ํ•œ ์ ์ด ์žˆ๋‹ค. Swagger์˜ ํฌํŠธ๋ฅผ 8085๋กœ ์ง€์ •ํ•˜๊ณ  node.js ์„œ๋ฒ„๋Š” 443๋ฒˆ์œผ๋กœ ์ง€์ •ํ–ˆ๋Š” ๋ฐ, CORS ์—๋Ÿฌ๊ฐ€ ๋ฐœ

surprisecomputer.tistory.com

์ด ๋ธ”๋กœ๊ทธ ๊ธ€์„ ์ฐธ๊ณ ํ•ด์„œ npm์œผ๋กœ cors ๋ชจ๋“ˆ์„ ์„ค์น˜ํ•ด์„œ ์ฝ”๋“œ๋ฅผ ์ถ”๊ฐ€ํ•˜๋‹ˆ ๋ฐ”๋กœ ํ•ด๊ฒฐ์ด ๋˜์—ˆ๋‹ค.

๊ทธ๋Ÿฐ๋ฐ ์•„์ง data.json๋งŒ ๋„์šด ๊ฑฐ๊ณ  ํด๋ก ์ฝ”๋”ฉํ•œ ํ™”๋ฉด ์ž์ฒด๋ฅผ ๋„์›Œ์•ผ ํ•˜๋Š”๋ฐ ์•„์ง ํ•˜์ง€ ๋ชปํ–ˆ๋‹ค. ๋‚ด์ผ PR ๋‚ ๋ฆฌ๊ธฐ ์ „๊นŒ์ง€ ๊ผญ ์™„์„ฑํ•˜์ž.

 

Algorithm : Programmers

๋ฐค์—๋Š” ์ด๋Ÿฐ์ €๋Ÿฐ ์ƒ๊ฐ์ด ๋งŽ์ด ๋“ค์–ด์„œ ๊ณต๋ถ€๋ฅผ ๋งŽ์ด ํ•˜์ง€ ๋ชปํ–ˆ๋‹ค. 11์‹œ๊ฐ€ ๋˜์–ด์„œ์•ผ ๋งˆ์Œ์„ ๋‹ค์žก๊ณ  ์•Œ๊ณ ๋ฆฌ์ฆ˜์„ ํ•œ ๋ฌธ์ œ ํ’€์—ˆ๋‹ค. ๋ ˆ๋ฒจ 1 ๋ฌธ์ œ์—ฌ์„œ ๊ทธ๋ ‡๊ฒŒ ์–ด๋ ต์ง€๋Š” ์•Š์•˜๋Š”๋ฐ, ๋‹ค๋ฅธ ์‚ฌ๋žŒ๋“ค์ด ํ‘ผ ๋กœ์ง์„ ๋ณด๊ณ  ์ •๋ง ํ˜„๋ž€ํ•ด์„œ ๋ฐฐ์šธ ์ ์ด ๋งŽ์•˜๋‹ค.

ํ‘ธ๋Š” ์™€์ค‘์— ๊ฒŒ๋”ํƒ€์šด์—์„œ ๋ฐฉํƒœ๊ฐ€ CSS ๊ด€๋ จ ์งˆ๋ฌธ์„ ํ•ด์„œ ๊ฐ™์ด ๋ดค๊ณ , ํ•ด๊ฒฐํ–ˆ๋‹ค. ์ž‘์€ ๋ฌธ์ œ๊ธด ํ–ˆ์ง€๋งŒ ๊ทธ๋ž˜๋„ ๋„์›€์„ ์ค„ ์ˆ˜ ์žˆ์–ด์„œ ๋ฟŒ๋“ฏํ–ˆ๋‹ค.

 


 

์˜ค๋Š˜๋ถ€ํ„ฐ ๋‹ฌ๋ฆฌ๊ธฐ๋ฅผ ์‹œ์ž‘ํ–ˆ๋‹ค. ๋งˆ์นจ ๋‚ ์”จ๋„ ์ ์  ํ’€๋ฆฌ๊ณ  ์žˆ์–ด์„œ ๋‹ฌ๋ฆฌ๊ธฐ ํ•˜๊ธฐ๋„ ์ข‹์€ ๋‚ ์”จ๊ฐ€ ๋˜์–ด๊ฐ€๊ณ  ์žˆ๋‹ค. ํ•œ๋™์•ˆ ๋‹ฌ๋ฆฌ๊ธฐ๋ฅผ ์ œ๋Œ€๋กœ ํ•˜์ง€ ์•Š๋‹ค๊ฐ€ ๋‹ฌ๋ฆฌ๋‹ˆ๊นŒ ์ˆจ์ด ๊ธˆ๋ฐฉ ์ฐผ๋‹ค. ๊พธ์ค€ํžˆ ํ•ด์„œ ์ฒด๋ ฅ์„ ๋†’์—ฌ์•ผ๊ฒ ๋‹ค.

์ฅฌ๋ž‘ ์–˜๊ธฐํ•˜๋‹ค๊ฐ€ ์ฝ”๋“œ์Šค์ฟผ๋“œ์— ๋‹ฌ๋ฆฌ๊ธฐ ํ˜น์€ ์šด๋™ ๋ชจ์ž„์ด ์žˆ์œผ๋ฉด ์ข‹๊ฒ ๋‹ค๋Š” ์ƒ๊ฐ์„ ํ–ˆ๋‹ค. ๊ธฐํš์„ ํ•ด ๋ณด๊ณ  3์›”์— ์ธ์›์„ ๋ชจ์ง‘ํ•˜๊ณ , ๋ชฉํ‘œ๋ฅผ ์ •ํ•ด์„œ ๊ฐ™์ด ๋‹ฌ๋ฆฌ๊ธฐ๋ฅผ ํ•˜๋ฉด ์žฌ๋ฏธ์žˆ๊ณ  ์œ ์ตํ•  ๊ฒƒ ๊ฐ™๋‹ค. ๋น„๋Œ€๋ฉด์ด์–ด์„œ ์ง์ ‘ ๋งŒ๋‚˜์„œ ๊ฐ™์ด ๋›ธ ์ˆœ ์—†๋”๋ผ๋„ ์ด๋ ‡๊ฒŒ ๊ฐ„์ ‘์ ์œผ๋กœ๋‚˜๋งˆ ํ•  ์ˆ˜ ์žˆ์œผ๋ฉด ๋™๊ธฐ๋ถ€์—ฌ๋„ ๋˜๊ณ , ํ˜ผ์ž ์šด๋™ํ•˜๋Š” ๊ฒƒ๋ณด๋‹ค ๋” ์˜ค๋ž˜ ๊ฐ€์ง€ ์•Š์„๊นŒ?

๋ฒŒ์จ 2022๋…„์˜ 2์›”๋„ ๋์ด ๋ณด์ธ๋‹ค. ์‹œ๊ฐ„์ด ์ •๋ง ๋นจ๋ฆฌ ํ˜๋Ÿฌ๊ฐ€๊ณ  ์žˆ๋‹ค. ์กฐ๋งŒ๊ฐ„ 2์›”๋‹ฌ ํšŒ๊ณ ๋ฅผ ํ•ด์•ผ๊ฒ ๋‹ค.

'What I learned > CodeSquad Log' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€

CodeSquad Day 36 : Front-end Week 3  (0) 2022.03.01
CodeSquad Day 35 : Front-end Week 2  (0) 2022.02.26
CodeSquad Day 33 : Front-end Week 2  (0) 2022.02.24
CodeSquad Day 32 : Front-end Week 2  (0) 2022.02.23
CodeSquad Day 31 : Front-end Week 2  (0) 2022.02.22