avatar

Frontend 3

  • NextJS 1. Page & Route

    ์š”์ฆ˜ ๋ฆฌ์•กํŠธ๋ฅผ ์“ฐ๋Š” ๋งŽ์€ ํ”„๋กœ์ ํŠธ์—์„œ, SSR์„ ์ง€์›ํ•˜๊ธฐ ์œ„ํ•ด [nextjs](https://nextjs.org/)๋ฅผ ์“ฐ๊ณ  ์žˆ๋‹ค. ์ดˆ๊ธฐ ๋กœ๋”ฉ ์†๋„๋‚˜, SEO ์ง€์› ์ด์Šˆ ๋“ฑ ๋“ฑ ๋•Œ๋ฌธ์— ์•„๋ฌด๋ž˜๋„ SPA๋Š” ์š”์ฆ˜ ํŠธ๋ Œ๋“œ์—์„œ ๋งŽ์ด ๋ฐ€๋ฆฐ ๊ธฐ๋ถ„์ด๋‹ค. ๋ฌผ๋ก  [razzle](https://github.com/jaredpalmer/razzle) ์„ ์“ฐ๊ฑฐ๋‚˜ custom ser...

    8๋ถ„
  • NextJS 2. Data Fetching

    [nextjs์˜ ๊ณต์‹ ๋ฌธ์„œ](https://nextjs.org/docs/basic-features/data-fetching)๋ฅผ ๋ณด๊ณ  ์š”์•ฝํ•œ ๋‚ด์šฉ์ž…๋‹ˆ๋‹ค. ```toc tight: true, from-heading: 1 to-heading: 2 ``` ## 1. getInitialProps Nextjs 9.3 ์ด์ „์—๋Š” `getInitialProps` ๋ฐ–์—...

    13๋ถ„
  • ๋ธ”๋กœ๊ทธ ๊ฐœํŽธํ–ˆ์Šต๋‹ˆ๋‹ค. ๐Ÿ˜Ž

    ์ฃผ๋ง์— ์ง‘๊ตฌ์„์— ํ˜ผ์ž ์˜ค๋ž˜์žˆ์„ ์ผ์ด ์žˆ์–ด์„œ, ์ƒ๊ฐ๋‚œ ๊น€์— ๋ธ”๋กœ๊ทธ๋ฅผ ๊ฐœํŽธํ–ˆ์Šต๋‹ˆ๋‹ค. ์ด ์ „์—๋Š” hexo ๊ธฐ๋ฐ˜์œผ๋กœ ๋งŒ๋“ค์–ด์ง„ ๋ธ”๋กœ๊ทธ๋ฅผ ์ž‘์—…ํ–ˆ๋Š”๋ฐ, hexo ์ƒํƒœ๊ณ„๊ฐ€ ๊ด€๋ฆฌ๊ฐ€ ์ž˜ ์•ˆ๋˜๊ณ  ์žˆ๋Š” ๊ฑด์ง€ ํ”Œ๋Ÿฌ๊ทธ์ธ์ด๋‚˜ ๊ธฐ๋Šฅ๋“ค์ด ์ œ๋Œ€๋กœ ๋™์ž‘์„ ์•ˆํ•˜๋”๊ตฐ์š”. wordpress -> ??? -> github pages -> hexo -> gatsby ๊นŒ์ง€ ๋ฒŒ์จ ๊ฐœํŽธ๋งŒ ํ•œ ๋‹ค์„ฏ๋ฒˆ ์ฏค...

    3๋ถ„
  • ๋ฆฌ์•กํŠธ ๋ฉด์ ‘ ์งˆ๋ฌธ ๋ชจ์Œ (1)

    [๋ชฉ์ฐจ](/2019/08/13/reactjs-interview-questions/) ```toc tight: true, from-heading: 2 to-heading: 3 ``` ## Core React ### What is React ๋ฆฌ์•กํŠธ๋Š” ์˜คํ”ˆ์†Œ์Šค ํ”„๋ก ํŠธ์—”๋“œ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋กœ, ํŠนํžˆ ์‹ฑ๊ธ€ ํŽ˜์ด์ง€ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์˜ ์‚ฌ์šฉ์ž ์ธํ„ฐํŽ˜์ด์Šค ๊ตฌ์ถ•์„...

    64๋ถ„
  • Typescript, React, NextJs, Koa, Styled Component ๋กœ ํ”„๋ก ํŠธ์—”๋“œ ํ™˜๊ฒฝ ๋งŒ๋“ค๊ธฐ

    ์ด ๋ฌธ์„œ๋Š” ๋” ์ด์ƒ ์—…๋ฐ์ดํŠธ ํ•˜์ง€ ์•Š์„ ์ƒ๊ฐ์ด๋‹ค. ๋Œ€์‹  https://github.com/yceffort/koa-nextjs-react-typescript-boilerplate ์—ฌ๊ธฐ์—์„œ ๊ณ„์† ํ•ด์„œ ๋งŒ๋“ค์–ด ๊ฐ€๊ณ  ์žˆ๋‹ค. ## ์‚ฌ์šฉํ•œ ์˜คํ”ˆ์†Œ์Šค ### React ์ž์„ธํ•œ ์„ค๋ช…์€ ์ƒ๋žต ํ•œ๋‹ค ### Nextjs [NextJs](https://nextjs.org...

    4๋ถ„