avatar

Page 27

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

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

    64๋ถ„
  • ๋ธŒ๋ผ์šฐ์ €๋Š” ์–ด๋–ป๊ฒŒ ๋™์ž‘ํ•˜๋Š”๊ฐ€? - ๋ชจ๋˜ ์›น๋ธŒ๋ผ์šฐ์ €๊ฐ€ ๋™์ž‘ํ•˜๋Š” ๋ฐฉ๋ฒ•

    ### ๐Ÿšง์ž‘์„ฑ์ค‘ ๐Ÿšง [์›๋ฌธ-How Browsers Work: Behind the scenes of modern web browsers](https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/) > ์ด ๊ธ€์„ ์š”์•ฝ/๋ฒˆ์—ญํ•œ ๋” ์ข‹์€ ๊ธ€์ด [๋„ค์ด๋ฒ„ d2](https://d2.naver.com/...

    20๋ถ„
  • koa-nextjs-react-typescript-boilerplate

    [github repository](https://github.com/yceffort/koa-nextjs-react-typescript-boilerplate) nextjs์™€ react ๋งŒ ๊น”๋”ํ•˜๊ฒŒ ์“ฐ๊ณ  ์‹ถ์ง€๋งŒ, ๊ทธ๋Ÿฌ๊ธฐ์—” ํ˜„์‹ค์ ์ธ ๋ฌธ์ œ๊ฐ€ ๋ช‡๊ฐ€์ง€ ์žˆ๋‹ค ...

    1๋ถ„
  • React Hooks Api (2)

    ### useReducer ```javascript const [state, dispatch] = useReducer(reducer, initialArg, init); ``` `useState`์˜ ๋Œ€์ฒด ํ•จ์ˆ˜๋‹ค. ๋‹ค์ˆ˜์˜ ํ•˜์œ— ๊ฐ’์„ ๋งŒ๋“œ๋Š” ๋ณต์žกํ•œ ๋กœ์ง, ํ˜น์€ ๋‹ค์Œ state๊ฐ€ ์ด์ „ state์˜ ์˜์กด์ ์ธ ๊ฒฝ์šฐ์— ์“ด๋‹ค. ๋ญ๊ฐ€ ๋ญ”์ง€ ๋ชจ๋ฅด๊ฒ ์œผ๋‹ˆ๊นŒ ์˜ˆ์ œ๋ฅผ ๋ณด์ž. ...

    3๋ถ„
  • React Hooks Api (1)

    # Hooks API Hook์€ react 16.8์—์„œ ์ถ”๊ฐ€๋œ ๊ฐœ๋…์œผ๋กœ, Hook์„ ์‹œ์šฉํ•˜๋ฉด class๋ฅผ ๊ฐ–์„ฑํ•˜์ง€ ์•Š์•„๋„ state๊ด€๋ฆฌ์™€ ๊ฐ™์€ react์˜ ๊ธฐ๋Šฅ์„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค. ## ๊ธฐ๋ณธ Hook ### useState ```javascript const [state, setState] = useState(initialState); setStat...

    4๋ถ„
  • HAProxy

    ## ๋กœ๋“œ๋ฐธ๋Ÿฐ์„œ > ๋กœ๋“œ ๋ฐธ๋Ÿฐ์‹ฑ์ด๋ž€, ๋ถ€ํ•˜ ๋ถ„์‚ฐ์„ ์œ„ํ•ด์„œ ๊ฐ€์ƒ IP๋ฅผ ํ†ตํ•ด ์—ฌ๋Ÿฌ ์„œ๋ฒ„์— ์ ‘์†ํ•˜๋„๋ก ๋ถ„๋ฐฐํ•˜๋Š” ๊ธฐ๋Šฅ์„ ๋งํ•œ๋‹ค. ๋กœ๋“œ ๋ฐธ๋Ÿฐ์‹ฑ์—์„œ ์‚ฌ์šฉํ•˜๋Š” ์ฃผ์š” ๊ธฐ์ˆ ์€ - NAT(Network Address Translation): ์‚ฌ์„ค IP ์ฃผ์†Œ๋ฅผ ๊ณต์ธ IP ์ฃผ์†Œ๋กœ ๋ฐ”๊พธ๋Š” ๋ฐ ์‚ฌ์šฉํ•˜๋Š” ํ†ต์‹ ๋ง์˜ ์ฃผ์†Œ ๋ณ€์กฐ๊ธฐ์ด๋‹ค. - DSR(Dynamic Source Rout...

    3๋ถ„
  • Docker์™€ ECR, ECS ๊ฒฝํ—˜

    ์ œ๋ฒ• ๊ทœ๋ชจ๊ฐ€ ์žˆ์—ˆ๋˜ ์ „ ํšŒ์‚ฌ์—์„œ๋Š” ํŠน๋ณ„ํ•˜๊ฒŒ ์ธํ”„๋ผ์— ๋Œ€ํ•ด ๊ณ ๋ฏผ์„ ๋ณ„๋กœ ํ•  ํ•„์š”๊ฐ€ ์—†์—ˆ๋‹ค. ๋งŽ์€ ๋ถ€๋ถ„์ด ์ž๋™ํ™”๋˜์–ด ์žˆ์—ˆ๊ณ , ๋˜ ์ ๋‹นํ•œ ํˆด๋กœ ์ž˜ ๋งŒ๋“ค์–ด์ ธ ์žˆ์—ˆ๊ธฐ ๋•Œ๋ฌธ์— ๊ฐœ๋ฐœ์— ์˜จ์ „ํžˆ ์ง‘์ค‘ํ•  ์ˆ˜ ์žˆ์—ˆ๋‹ค. ํ•˜์ง€๋งŒ ์ƒˆ๋กญ๊ฒŒ ์˜จ ์Šคํƒ€ํŠธ์—…์€ (๋‹น์—ฐํ•˜๊ฒŒ๋„) ๊ทธ๋Ÿฐ๊ฒŒ ์—†์œผ๋ฏ€๋กœ, ํšŒ์‚ฌ์—์„œ ์‚ฌ์šฉํ•˜๊ณ  ์žˆ๋Š” AWS ์ธํ”„๋ผ์™€ ๋ฐฐํฌ ์‹œ์Šคํ…œ์— ๋Œ€ํ•ด์„œ ์ง์ ‘ ๊ณต๋ถ€ํ•  ํ•„์š”๊ฐ€ ์žˆ์—ˆ๋‹ค. ๊ทธ ์ค‘์—์„œ...

    7๋ถ„
  • Javascript Reduce

    ๋ฉ์ฒญ์ด๋ผ ๊ทธ๋Ÿฐ์ง€ `reduce` ํ•จ์ˆ˜๊ฐ€ ์ž˜ ์ดํ•ด ๋˜์ง€ ์•Š์•˜๋‹ค. ## Reduce ```javascript const list = [1, 2, 3, 4, 5]; const initValue = 10; const totalSum = list.reduce( (accumulator, currentValue, currentIndex, array) => { ...

    2๋ถ„
  • Javascript Set ๊ทธ๋ฆฌ๊ณ  Map

    ## ๊ทผ๋ฐ ์‚ฌ์‹ค.. ์ปฌ๋ ‰์…˜ ํ•„์š”์—†์ง€ ์•Š์„๊นŒ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์—์„œ ์ผ๋ฐ˜์ ์ธ Object๋Š” key-value์Œ์„ ๋Š์ž„ ์—†์ด ์ถ”๊ฐ€ํ•  ์ˆ˜ ์žˆ๋Š” ํ˜•ํƒœ๋กœ ๊ตฌ์„ฑ๋˜์–ด ์žˆ๋‹ค. ๊ทธ๋ž˜์„œ ์‚ฌ์‹ค ์ปฌ๋ ‰์…˜์ด ํ•„์š”ํ•˜์ง€ ์•Š์€ ๊ฒƒ ์ฒ˜๋Ÿผ ๋ณด์ผ ์ˆ˜๋„ ์žˆ๋‹ค. ๊ทธ๋Ÿฌ๋‚˜ ์ด๋”ฐ๊ธˆ์”ฉ object๋กœ ๋ถ€์กฑํ•  ๋•Œ๊ฐ€ ์žˆ๋‹ค. - key ์ถฉ๋Œ ์œ„ํ—˜์ด ์กด์žฌํ•˜๋Š” ๊ฒฝ์šฐ - ๋ฌธ์ž์—ด/์‹ฌ๋ณผ ์ด์™ธ์˜ ํ‚ค ๊ฐ’์ด ํ•„์š”ํ•œ ๊ฒฝ์šฐ - ๊ฐ...

    6๋ถ„
  • Javascript Symbol

    ## Javascript Primitive ๊ธฐ์กด์— ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋Š” 6๊ฐ€์ง€์˜ primitive๊ฐ€ ์žˆ์—ˆ๋‹ค. - Object - string - number - boolean - null - undefined ๊ทธ๋Ÿฌ๋‚˜ es6๊ฐ€ ๋“ค์–ด์„œ๋ฉด์„œ `symbol`์ด๋ผ๋Š” 7๋ฒˆ์งธ primitive๊ฐ€ ์ถ”๊ฐ€๋˜์—ˆ๋‹ค. ## Symbol ```javascript const hel...

    4๋ถ„