20 POSTS

React 3

  • #react

    Prop drilling ํ•ด๊ฒฐ์„ ์œ„ํ•ด context๋ฅผ ์‚ฌ์šฉํ•˜๊ธฐ ์ „์— ๊ตฌ์กฐ๋ฅผ ์ƒ๊ฐํ•ด๋ณด์ž.

    ์ฒ˜์Œ๋ถ€ํ„ฐ ๊ตฌ์กฐ๋ฅผ ์ž˜ ์ƒ๊ฐํ•ด ๋‘”๋‹ค๋ฉด ์„ฑ๋Šฅ์ƒ ์— ์ด์ ์„ ๊ฐ€์ ธ๊ฐˆ ์ˆ˜ ์žˆ๋‹ค.

    3๋ถ„
  • #react

    ๋ฆฌ์•กํŠธ์˜ Hooks๊ณผ HOC, HOC์˜ ์‚ฌ์šฉ์ด ๋ณต์žกํ•ด์ง€๋Š” ๊ฒฝ์šฐ

    HOC๋Š” ์ข‹์ง€๋งŒ, hooks์„ ์‚ฌ์šฉํ•˜๋Š” ์Šต๊ด€์„ ๊ธฐ๋ฅด์ž.

    9๋ถ„
  • #react

    ๋ฆฌ์•กํŠธ์˜ useState์™€ lazy initialization

    ๋ฆฌ์•กํŠธ ์ตœ์ ํ™”์˜ ๊ธธ์€ ๋ฉ€๊ณ ๋„ ํ—˜ํ•˜๋‹ค

    4๋ถ„
  • #nextjs#react

    ๋ธ”๋กœ๊ทธ gatsby์—์„œ nextjs๋กœ ์˜ฎ๊ธด ์ด์•ผ๊ธฐ

    ์–ด์˜๋ถ€์˜ํ–ˆ์ง€๋งŒ ๋ณด๋žŒ์€ ์žˆ์—ˆ๋‹ค

    8๋ถ„
  • #react#web-performance

    Create React App์˜ serviceWorker๋Š” ๋ฌด์—‡์ผ๊นŒ

    ๊ฐ€๋” ๋ดค์ง€๋งŒ ์ „ํ˜€ ๊ถ๊ธˆํ•ด ํ•˜์ง€ ์•Š์•˜๋˜ ๊ทธ ๊ฒƒ

    11๋ถ„
  • #react#css

    styled-components๋กœ ์Šคํƒ€์ผ ์ ์šฉํ•˜๋Š”๋ฒ•

    styled components๊ฐ€ ์“ฐ๊ณ  ์‹ถ์Šต๋‹ˆ๋‹ค

    3๋ถ„
  • #react

    useEffect๋Š” ๋ผ์ดํ”„ ์‚ฌ์ดํด ๋ฉ”์†Œ๋“œ๊ฐ€ ์•„๋‹ˆ๋‹ค.

    ์ƒ๊ฐ์—†์ด useEffect๋ฅผ ์“ฐ์ง€ ๋ง์ž

    4๋ถ„
  • #react

    useCallback ์‚ฌ์šฉ ๊ฐ€์ด๋“œ

    ์•„์ง๋„ useCallback์œผ๋กœ ๊ณ ํ†ต ๋ฐ›๋‹ค๋‹ˆ

    6๋ถ„
  • #react

    ๋ฆฌ์•กํŠธ v17.0 ์‚ดํŽด๋ณด๊ธฐ

    ๋ฆฌ์•กํŠธ 17.0 ์ƒˆ๋กœ์šด ๊ธฐ๋Šฅ์€ ์ถ”๊ฐ€๋˜์ง€ ์•Š์„ ์˜ˆ์ •. ์ ์ง„์  ์—…๊ทธ๋ ˆ์ด๋“œ ์ถ”๊ฐ€, ์ด๋ฒคํŠธ ์œ„์ž„ ๋ฐฉ์‹ ๋ณ€๊ฒฝ์ด ์ฃผ์š” ๋ณ€๊ฒฝ ๋‚ด์šฉ์ธ ๊ฒƒ ๊ฐ™๋„ค์šฉ.

    15๋ถ„
  • #react#state-management

    MobX๋ฅผ ๊ณต๋ถ€ํ•˜์ž (4) - React์™€ Mobx์˜ 10๋ถ„ ์š”์•ฝ ๊ธ€

    React์™€ MobX์— ๋Œ€ํ•œ 10๋ถ„ ์„ค๋ช…

    14๋ถ„
  • #javascript#react

    MobX๋ฅผ ๊ณต๋ถ€ํ•˜์ž (3) - ๊ธฐ๋ณธ ๊ฐœ๋…๊ณผ ์›์น™

    MobX 1ํŽ˜์ด์ง€ ์š”์•ฝ์— ๋Œ€ํ•œ ๊ฐ„๋‹จํ•œ ๋ฒˆ์—ญ

    5๋ถ„
  • #react#mobx

    MobX๋ฅผ ๊ณต๋ถ€ํ•˜์ž (2)

    MobX๋ฅผ ์˜ˆ์ œ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์— ์‹ค์ œ๋กœ ์ ์šฉํ•ด๋ณด๊ธฐ

    4๋ถ„
  • #react#state-management

    MobX๋ฅผ ๊ณต๋ถ€ํ•˜์ž (1)

    MobX 1ํŽ˜์ด์ง€ ์š”์•ฝ์— ๋Œ€ํ•œ ๊ฐ„๋‹จํ•œ ๋ฒˆ์—ญ

    13๋ถ„
  • #frontend#react#angular

    ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ์ž๊ฐ€ ์•Œ์•„์•ผ ํ•˜๋Š” Angular์™€ React์˜ Change Detection

    [What every front-end developer should know about change detection in Angular and React](https://indepth.dev/what-every-front-end-developer-should-know-about-change-detection-in-angular-and-react/)๋ฅผ ๋ฒˆ...

    16๋ถ„
  • #react

    ๋ฆฌ์•กํŠธ ๊ณ ์ฐจ ์ปดํฌ๋„ŒํŠธ (React Higher Order Component)

    [์ด ๊ธ€](https://ko.reactjs.org/docs/higher-order-components.html)์ด ํ•œ๊ธ€๋กœ ๋ฒˆ์—ญ์ด ์•ˆ๋˜์žˆ์–ด์„œ ๋Œ€์ถฉ ๋ฒˆ์—ญํ•ด๋ด…๋‹ˆ๋‹ค. # Higher-Order Components ๊ณ ์ฐจ ์ปดํฌ๋„ŒํŠธ (์ดํ•˜ HOC)๋Š” ๋ฆฌ์•กํŠธ์—์„œ ์ปดํฌ๋„ŒํŠธ ๋กœ์ง์„ ์žฌ์‚ฌ์šฉํ•˜๊ธฐ ์œ„ํ•œ ๊ณ ์˜ค๊ธ‰ ๊ธฐ์ˆ ์ด๋‹ค. HOC๋Š” ๋ฆฌ์•กํŠธ API์˜ ์ผ๋ถ€๋ถ„์€ ์•„๋‹ˆ๋‹ค. ์ด๋Š” ๋ฆฌ์•กํŠธ...

    15๋ถ„
  • #javascript#react

    ๋ฆฌ๋•์Šค ๊ณต๋ถ€ํ•ด๋ณด๊ธฐ (2) - ๋ฆฌ๋•์Šค์˜ ํƒ„์ƒ, ํ•ต์‹ฌ ๊ฐœ๋… ๊ทธ๋ฆฌ๊ณ  3๊ฐ€์ง€ ์›์น™.

    ## ๋ฆฌ๋•์Šค์˜ ํƒ„์ƒ ๋ฐฐ๊ฒฝ https://redux.js.org/introduction/motivation **์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์‹ฑ๊ธ€ ํŽ˜์ด์ง€ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์— ๋Œ€ํ•œ ์š”๊ตฌ ์‚ฌํ•ญ์ด ์ ์  ๋ณต์žกํ•ด ์ง์— ๋”ฐ๋ผ์„œ, ์šฐ๋ฆฌ์˜ ์ฝ”๋“œ๋Š” ๊ทธ ์–ด๋А ๋•Œ ๋ณด๋‹ค๋„ ๋” ๋งŽ์ด ์ƒํƒœ๊ด€๋ฆฌ์— ๋Œ€ํ•œ ํ•„์š”์„ฑ์„ ๋А๋ผ๊ณ  ์žˆ๋‹ค.** ์—ฌ๊ธฐ์„œ ๋งํ•˜๋Š” ์ƒํƒœ์—๋Š” ์„œ๋ฒ„ ์‘๋‹ต, ์บ์‹œ๋œ ๋ฐ์ดํ„ฐ ๋ฟ๋งŒ์•„๋‹ˆ๋ผ ์„œ๋ฒ„์— ์•„์ง ์š”...

    9๋ถ„
  • #redux#react#javascript

    ๋ฆฌ๋•์Šค ๊ณต๋ถ€ํ•ด๋ณด๊ธฐ (1) - ๊ฐœ์š”

    ## ๋ฆฌ๋•์Šค ๊ณต๋ถ€ํ•ด๋ณด๊ธฐ 1 [๋ฆฌ๋•์Šค ๊ณต์‹๋ฌธ์„œ](https://redux.js.org/introduction/getting-started)๋ฅผ ์Šค์Šค๋กœ ๋Œ€์ถฉ ๋ฒˆ์—ญํ•ด๋ณธ ๊ธ€์ž…๋‹ˆ๋‹ค. ๋ฆฌ๋•์Šค๋Š” ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์•ฑ์„ ์œ„ํ•œ **์˜ˆ์ธก ๊ฐ€๋Šฅํ•œ ์ƒํƒœ ๊ด€๋ฆฌ ์ปจํ…Œ์ด๋„ˆ**๋‹ค. ๋ฆฌ๋•์Šค๋Š” ์ผ๊ด€์„ฑ ์žˆ๊ฒŒ ๋™์ž‘ํ•˜๊ณ , ์„œ๋กœ ๋‹ค๋ฅธ ํ™˜๊ฒฝ (ํด๋ผ์ด์–ธํŠธ, ์„œ๋ฒ„, ๋„ค์ดํ‹ฐ๋ธŒ)์—์„œ ์‹คํ–‰๋˜๋ฉฐ, ํ…Œ์ŠคํŠธํ•˜๊ธฐ ...

    7๋ถ„
  • #nextjs#react#frontend

    NextJS 1. Page & Route

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

    8๋ถ„
  • #react#javascript#web-performance

    React count down์—์„œ ๋ฐฐ์šด event-emitter ์™€ requestAnimationFrame

    # ๋ฆฌ์•กํŠธ์—์„œ ์นด์šดํŠธ ๋‹ค์šด์„ ๋งŒ๋“ค๋ฉฐ ๋ฐฐ์šด ๊ฒƒ๋“ค ๋ฆฌ์•กํŠธ์—์„œ ์นด์šดํŠธ ๋‹ค์šด์„ ๋งŒ๋“ ๋‹ค๊ณ  ๊ฐ€์ •ํ•ด๋ณด์ž. ๊ฐ€์žฅ ๋จผ์ € ์ƒ๊ฐ๋‚˜๋Š”๋Œ€๋กœ, ๋น ๋ฅด๊ฒŒ ๊ตฌํ˜„ํ•œ๋‹ค๋ฉด ์•„๋ž˜์™€ ๊ฐ™์€ ๋А๋‚Œ์ด ๋  ๊ฒƒ์ด๋‹ค. https://codepen.io/yceffort/pen/BayPyNe ํ•˜์ง€๋งŒ ์ด ์ฝ”๋“œ๋Š” ํ•œ๊ฐ€์ง€ ๋ฌธ์ œ๋ฅผ ๊ฐ€์ง€๊ณ  ์žˆ๋‹ค. ## setInterval, setTimeout `setInte...

    6๋ถ„
  • #react

    ๋ฆฌ์•กํŠธ ํ…์ŠคํŠธ ํ•˜์ด๋ผ์ดํŠธ ๋งŒ๋“ค๊ธฐ

    ๋ฆฌ์•กํŠธ์—์„œ ํ…์ŠคํŠธ ๊ฐ•์กฐํ•˜๋Š” ๋ฐฉ๋ฒ•

    4๋ถ„