React
//
//
๐Ÿง‘๐Ÿปโ€๐Ÿš’

What will FE developers do?

https://mulder21c.github.io/2020/10/31/see-what-does-front-end-developer-do-through-nuxt/
JS๋กœ ํ”„๋กœ๋•ํŠธ๋ฅผ ๊ฐœ๋ฐœํ•˜๋Š” ์ดˆ๊ธ‰ ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ์ž๊ฐ€ ์ตœ์†Œํ•œ ์ด๊ฒƒ์€ ํ•ด์•ผ ํ•œ๋‹ค.
ํผ๋ธ”๋ฆฌ์…”๊ฐ€ ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ์ž๊ฐ€ ๋˜๊ธฐ ์œ„ํ•ด์„œ ์–ด๋–ค ๊ณต๋ถ€๋ฅผ ํ•ด์•ผ ํ•˜๋Š”๊ฐ€๋ฅผ ํ™•์ธํ•  ์ˆ˜ ์žˆ๋‹ค.
์šฐ์„  ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ ๊ณต๋ถ€ํ•˜๋Š” ๊ฒƒ๋งŒ์œผ๋กœ๋Š” FE ๊ฐœ๋ฐœ์ž๊ฐ€ ๋  ์ˆ˜ ์—†๋‹ค.

1. ๊ฐœ๋ฐœ ํ™˜๊ฒฝ ๋ฐ ํ”„๋กœ์ ํŠธ ์„ค์ •

node.js ๊ธฐ๋ฐ˜ ๊ฐœ๋ฐœ ํ™˜๊ฒฝ ์ดํ•ด
node_modules์— ๋Œ€ํ•œ ์ดํ•ด
ํ•„์š”ํ•œ ๋ชจ๋“ˆ์„ ์„ค์น˜ํ•˜๊ณ  ์„ค์ •ํ•˜๋Š” ๋ฐฉ๋ฒ•
ํ™˜๊ฒฝ ์„ค์ •
๋กœ์ปฌ ์„œ๋ฒ„์— ๋Œ€ํ•œ ๊ฐœ๋…
๋ธŒ๋ผ์šฐ์ € ๋Œ€์‘๊ณผ ์„ค์ • ์ฝ”๋“œ
๋Œ€์‘ ๋ฒ”์œ„๋ฅผ ์ •ํ–ˆ์„ ๋•Œ์˜ ์„ค์ •, ์„ค์ • ๋ณ€๊ฒฝ ๋ฐฉ๋ฒ•
ESLint๋ฅผ ๋ฌด์‹œํ•˜์ง€ ์•Š๊ธฐ

2. APIs ๊ตฌํ˜„

REST API ๊ตฌํ˜„์ด ์•„๋‹ˆ๋ผ REST API๋ฅผ ํ˜ธ์ถœํ•˜๊ณ  ์‘๋‹ต์„ ์ฒ˜๋ฆฌํ•˜๋Š” ํ•จ์ˆ˜ ๊ตฌํ˜„
index.js์— ์ž‘์„ฑํ•˜๋Š” ๊ฒŒ ์•„๋‹ˆ๋ผ ๋ถ„๋ฅ˜ํ•˜๊ณ  ๋ชจ๋“ˆํ™”ํ•ด์„œ dir์™€ file ๊ตฌ์„ฑํ• ์ง€ ์„ค๊ณ„ ๋ฐ ๊ตฌํ˜„
API ํ˜ธ์ถœ์—์„œ header ์กฐ์ž‘
API ์‘๋‹ต ์‹คํŒจ์‹œ app crash ๋ฐฉ์ง€
์‘๋‹ต ๋ฐ์ดํ„ฐ ๊ฐ€๊ณต
(HTTP)header, status code, methods, ๋น„๋™๊ธฐ ํ†ต์‹ , ๋น„๋™๊ธฐ ์ฒ˜๋ฆฌ, CORS

3. assets(static) ์„ค๊ณ„

์ฐจ์ด๋ฅผ ์ดํ•ดํ•ด์•ผ static์— ๋‘˜ ์ˆ˜ ์žˆ๋‹ค.
SCSS(or stylus)๋Š” variables, functions, mixins ๋“ฑ์œผ๋กœ ๋ถ„๋ฅ˜ํ•ด ๊ด€๋ฆฌํ•œ๋‹ค.
css ์ „์ฒ˜๋ฆฌ๊ธฐ ์ฒ˜๋ฆฌ๋ฅผ ์œ„ํ•œ webpack์— ํ•„์š”ํ•œ loader ์„ค์ •
โ†’ ๋‹จ์ˆœํžˆ ๋”ฐ๋ผ์น˜๋Š” ์ˆ˜์ค€์œผ๋กœ ํ•™์Šตํ•˜๋ฉด ํ•„์š”ํ•œ loader๋ฅผ ์„ค์ •ํ•˜์ง€ ๋ชปํ•  ๊ฒƒ์ด๋‹ค.

Components, layout, pages ์„ค๊ณ„ ๋ฐ ๊ตฌํ˜„

Component based development
ํ…œํ”Œ๋ฆฟ, ์Šคํƒ€์ผ, ๋ฐ์ดํ„ฐ, ๊ธฐ๋Šฅ ๊ฐœ๋ฐœ
์ปดํฌ๋„ŒํŠธ ๋‹จ์œ„ ํผ๋ธ”๋ฆฌ์‹ฑ
ํ…œํ”Œ๋ฆฟ ์–ธ์–ด
DOM ์ œ์–ด๋ฟ๋งŒ ์•„๋‹ˆ๋ผ data ์ œ์–ด๋ฅผ ํ•ด์„œ UI๋ฅผ ๊ฐœ๋ฐœํ•  ์ค„ ์•Œ์•„์•ผ ํ•œ๋‹ค.
โ†’ FE Framework๋Š” DOM์„ ์ œ์–ดํ•˜์ง€ ์•Š๋Š”๋‹ค. ๋ฐ์ดํ„ฐ๋ฅผ ๋ณ€๊ฒฝํ•˜๊ณ  ๊ทธ ๋ฐ์ดํ„ฐ๊ฐ€ ํ…œํ”Œ๋ฆฟ์— ๋ฐ˜์˜๋œ๋‹ค.
์–ด๋–ค ์ปดํฌ๋„ŒํŠธ๋ฅผ ์„œ๋ฒ„์—์„œ ๋ Œ๋”๋งํ• ์ง€ ํด๋ผ์ด์–ธํŠธ์—์„œ ๋ Œ๋”๋งํ• ์ง€
์ปดํฌ๋„ŒํŠธ์™€ ์ปดํฌ๋„ŒํŠธ ๊ฐ„์— ๋ฐ์ดํ„ฐ/์ด๋ฒคํŠธ๋ฅผ ์–ด๋–ป๊ฒŒ ๊ณต์œ ํ•  ๊ฒƒ์ธ์ง€ ์„ค๊ณ„ ๋ฐ ๊ตฌํ˜„
โ†’ data, props, computed , watch , ๋ฐ์ดํ„ฐ๋ฅผ ์–ธ์ œ ์ฑ„์šธ์ง€, ์ด๋ฒคํŠธ ํ•ธ๋“ค๋ง์„ ์ƒ์œ„์—์„œ ์ฒ˜๋ฆฌํ• ์ง€
Nuxt๋Š” layout ์ปดํฌ๋„ŒํŠธ๋„ ์„ค๊ณ„, ๋ผ์šฐํ„ฐ ๊ตฌ์„ฑ์— ๋”ฐ๋ฅธ page ๊ตฌ์„ฑ

middleware ๊ตฌํ˜„

๋ธŒ๋ผ์šฐ์ €์—์„œ ์ผ์–ด๋‚˜๋Š” ์ผ์ด ํ™”๋ฉด์— ๋ณด์ด๋Š” ๊ฒƒ๋งŒ ํ•˜๋Š” ๊ฒƒ์ด ์•„๋‹ˆ๋‹ค.
middleware์˜ ๋Œ€ํ‘œ์ ์ธ ์‚ฌ๋ก€๋Š” authorization ๋ชจ๋“ˆ์ด๋‹ค.
์ด๋Š” ํ™”๋ฉด์— ๋ณด์ด์ง€ ์•Š๊ณ  server/client-side ๋ชจ๋‘์—์„œ ์ˆ˜ํ–‰๋˜๋Š” ํ”„๋กœ์„ธ์Šค๋‹ค.

Store ์„ค๊ณ„ ๋ฐ ๊ตฌํ˜„

store๋ฅผ ๋ชจ๋“ˆํ™”ํ•ด ๋ถ„๋ฆฌ์‹œ์ผœ ๊ด€๋ฆฌํ•˜๊ธฐ ์œ„ํ•œ ์„ค๊ณ„
โ†’ flux ํŒจํ„ด์— ๋Œ€ํ•œ ํ•™์Šต
SSR์˜ ๊ฒฝ์šฐ store๊ฐ€ ์„œ๋ฒ„์—์„œ ๋ฏธ๋ฆฌ ์ฑ„์›Œ์ ธ์„œ ํด๋ผ์ด์–ธํŠธ์— ๋™์ผํ•˜๊ฒŒ ์ ์šฉ๋˜์–ด์•ผ ํ•œ๋‹ค.
โ†’ ์–ด๋–ป๊ฒŒ ํ• ์ง€์— ๋Œ€ํ•œ ์„ค๊ณ„
Made with