
๐ฆ ๋ฉ์ฌ ์ง์ ํ๊ต ์ํ์ ํ๋ฉด์ ๋ฉ์ฌ ์์ด๋์ดํค, ํด์ปคํค ๋ฑ ๋ค์ํ ๊ฒฝํ์ ํ๋ ๋๊ธฐ๋ค์ ๋ณด์๊ณ ์๊ธฐ์ฌ์๋ถ๋ค๊ณผ ๊ฐ์ด ๊ณต๋ถํ๊ณ ๋์์ ์ฃผ๋ ์ด์์ง์ด ๊ฐ์ธ์ ์ผ๋ก ์ข์ ์ฑ์ฅ ํ๊ฒฝ์ด ๋ ๊ฒ ๊ฐ์์ ํ๋ก ํธ์๋ ์ด์์ง์ผ๋ก ์ง์์ ํ๊ฒ ๋์๋ค. ๊ฒฐ๊ณผ๋ ํฉ๊ฒฉ!! ๋ช ์ง๋(์ธ๋ฌธ)

๊ธฐ์กด์ ์ปค๋ฆฌํ๋ผ์ ๋ค์๊ณผ ๊ฐ์๋คJavascript (1) - ๊ธฐ๋ณธ ๊ฐ๋ ๊ณผ ๋ฌธ๋ฒ์๋ฐ์คํฌ๋ฆฝํธ ์๊ฐ๋ณ์์ ๋ฐ์ดํฐ ํ์ ๋ฐฐ์ด์ฐ์ฐ์์ ํํ์์กฐ๊ฑด๋ฌธ๊ณผ ๋ฐ๋ณต๋ฌธํจ์์ ์ค์ฝํ, ์ฝ๋ฐฑํจ์Javascript (2) - ๊ฐ์ฒด ์งํฅ ํ๋ก๊ทธ๋๋ฐ๊ฐ์ฒด์ ์์ฑ๋ฉ์๋์ ํ๋กํ ํ์ ํด๋์ค์ ์์๋ชจ๋ํ์ ๋ค

์๊ธฐ์ฌ์๋ถ๋ค์ด 4์ฃผ ๋์ javascript์ ๊ฐ๋ ๋ฐ ํ ์ดํ๋ก์ ํธ๋ฅผ ์งํํ๊ณ ๋๋ฉด ๋ฐฉํ์ ์๋ ํด์ปคํค ์ฐธ๊ฐ๋ฅผ ์ํด React ํ์ต์ ์งํํ๊ฒ ๋๋ค. ๋ฐ๋ผ์ ํ๋ก ํธ์๋ ์ด์์ง๋ค์ ์๊ธฐ์ฌ์๋ถ๋ค์ด ๊ณต๋ถํ React์ ๋ํด์๋ ๋ฏธ๋ฆฌ ๊ณต๋ถํ๊ณ , ์ปค๋ฆฌํ๋ผ์ ์์ฑํด์ผํ๋ค. ๋จผ์

React.js๋ Node.js ๊ธฐ๋ฐ์ผ๋ก ๋์๊ฐ๋ฏ๋ก Node.js์ ๊ฐ๋ ์ด ํ์์น ๋ธ๋ผ์ฐ์ ๊ฐ ์๋ ํ๊ฒฝ์์๋ Javascript ์ฝ๋๋ฅผ ์คํ์์ผ์ฃผ๋ ์๋ฐ์คํฌ๋ฆฝํธ์ ๋ฐํ์, ์คํ ํ๊ฒฝ์ฆ Node.js๋ Javascript ์ฝ๋์ ๊ตฌ๋๊ธฐ๊ตฌ๋๊ธฐ๋ ๊ฒ์๊ธฐ๊ฐ ๊ฒ์์ ์คํ์์ผ์ฃผ๋ฏ

Meta(Facebook)์ด ๊ฐ๋ฐํ ์คํ์์ค Javascript ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋๊ท๋ชจ ์น ์๋น์ค์ UI๋ฅผ ๋ ํธํ๊ฒ ๊ฐ๋ฐํ๊ธฐ ์ํด ๋ง๋ค์ด์ง ๊ธฐ์ ๊ฐ์ฅ ์ธ๊ธฐ์๋ ํ๋ก ํธ์๋์์ ์ฌ์ฉ๋๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌComponent : ํ๋ฉด์ ๊ตฌ์ฑํ๋ ์์, UI๋ฅผ ๊ตฌ์ฑํ๋ ์์์น ํ์ด์ง๊ฐ Head

React.js ์ ๋ฌธ 1. React Component Javascript ํจ์๊ฐ html ํ๊ทธ๋ค์ ๋ฐํํ๋๋ก ์ค์ ํ ์ ์์ ์ด๋ ๊ฒ html ํ๊ทธ๋ค์ ๋ฐํํ๋ ํจ์๋ฅผ Component Class๋ฅผ ํตํด์ Component๋ฅผ ๋ง๋ค ์ ์์ง๋ง, ์ฝ๋์ ์์ด ๋ง์์ง๋ฏ๋ก

๋ผ์ดํ์ฌ์ดํด 1. ๋ผ์ดํ์ฌ์ดํด? Mount(Like ํ์) ์ปดํฌ๋ํธ๊ฐ ํ์ํ๋ ์๊ฐ ํ๋ฉด์ ์ฒ์ ๋ ๋๋ง ๋๋ ์๊ฐ Update(Like ๋ณํ) ์ปดํฌ๋ํธ๊ฐ ๋ค์ ๋ ๋๋ง ๋๋ ์๊ฐ ๋ฆฌ๋ ๋๋ง ๋๋ ์๊ฐ UnMount(Like ์ฃฝ์) ์ปด

๊ตฌํ ํ๋ฉด์ ์์ ๊ฐ์Todo ์ถ๊ฐ/์ฒดํฌ/์ญ์ /๊ฒ์ ๊ธฐ๋ฅ3๊ฐ์ component๋ก ๋๋HeaderEditorListinput ํ๊ทธ๋ flex: 1๋ก ๋ฌ์ ๋ถ๋ชจ์ ๋ฒ์๋ฅผ ๋์ด๊ฐ์ง ์๋ ์ ์์ ์ต๋๋ก ํ์ฅ๋๊ฒ ๊ตฌํ์์น๋ฐ๋ width: 100%๋ฅผ ์ค์ ๋ถ๋ชจ์ ๊ฐ๋์ฐจ๊ฒ ๊ตฌํ์

1. ๊ธฐ๋ฅ ๊ตฌํ ๊ธฐ๋ฅ ๊ตฌํ ์ค๋น ๊ตฌํํ ๊ธฐ๋ฅ Todo ์ถ๊ฐ/์ฒดํฌ/์ญ์ /๊ฒ์ ๊ธฐ๋ฅ ์ ๊ธฐ๋ฅ์ ๊ตฌํํ๊ธฐ ์ํด์๋ todoItem๋ค์ ๋ฐ์ดํฐ๋ฅผ State๋ก ๋ง๋ค์ด์ ๋ณด๊ดํด์ผ ํ๋ค. ์๋ํ๋ฉด ์๋ก์ด ๋ฐ์ดํฐ๊ฐ ์ถ๊ฐ/์์ /์ญ์ ๋์์ ๋ ํ๋ฉด์ ๋ณํ๋ฅผ ๋ฐ์ํ ์ ์๊ธฐ ๋๋ฌธ์ด๋ค

1. useReducer useReducer, useState? useReducer๋ component ๋ด๋ถ์ ์๋ก์ด State๋ฅผ ์์ฑํ๋ React Hook์ด๋ค. ๋ชจ๋ useState๋ useReducer๋ก ๋์ฒดํ ์ ์๋ค. useState์์ ์ฐจ์ด์ ์ ์ํ ๊ด๋ฆฌ

1. useReducer๋ฅผ ํตํ refactoring ๊ธฐ์กด์ ์ํ ๊ด๋ฆฌ ํจ์ onCreate, onUpdate, onDelete๋ฅผ useReducer๋ฅผ ํตํด refactoring ํด๋ณธ๋ค. useState -> useReducer(state, dispatch)๋ก ๋ฐ๊ฟ์ฃผ

Optimization Optimization? Optimization์ด๋ ์น ์๋น์ค์ ์ฑ๋ฅ์ ๊ฐ์ ํ๋ ๋ชจ๋ ํ์๋ฅผ ์ผ์ปซ๋ ๋ง์ด๋ค. ์ผ๋ฐ์ ์๋ฒ์ ์๋ต์๋ ๊ฐ์ ์ด๋ฏธ์ง, ํฐํธ, ์ฝ๋ ํ์ผ ๋ฑ์ ์ ์ ํ์ผ ๋ก๋ฉ ๊ฐ์ ๋ถํ์ํ ๋คํธ์ํฌ ์์ฒญ ์ค์

React Context๋ component๊ฐ์ ๋ฐ์ดํฐ๋ฅผ ์ ๋ฌํ๋ ๋ ๋ค๋ฅธ ๋ฐฉ๋ฒ์ด๋ค. ๊ธฐ์กด์ Props๊ฐ ๊ฐ์ง๊ณ ์๋ ๋จ์ ์ ํด๊ฒฐํ ์ ์๋ค. Props๋ ๋ถ๋ชจ์์ ์์์ผ๋ก๋ง ๊ฐ์ ์ ๋ฌํ ์ ์์๋ค. ๋ง์ฝ ์์ ๊ฐ์ด ๊ณ์ธต๊ตฌ์กฐ๊ฐ ๋ ๋จ๊ณ๋ผ๋ฉด, App์์ ChildB๋ก ๋ฐ

Flutter

Dart ๊ธฐ๋ณธ ๋ฌธ๋ฒ
1. UI ์์ (์์ ฏ) ์์ ฏ์ ํ๋ฌํฐ์์ UI๋ฅผ ๊ตฌ์ฑํ๋ ๊ธฐ๋ณธ ๋จ์์ด๋ค. ํ๋ฌํฐ ๊ฐ๋ฐ์ ์์ ฏ์ ์ฌ์ฉํ์ฌ ๊ฒฐํฉํ๋ ๋ฐฉ์์ผ๋ก ์งํ๋๋ค. ๋ชจ๋ ์์ ฏ์ Stateless ์์ ฏ, Stateful ์์ ฏ ๋ฑ์ ํด๋์ค๋ฅผ ์์๋ฐ์ ํด๋์ค์ด๊ธฐ๋ ํ๋ค. ๋ณ๊ฒฝ๋ ์ ์๋ ๊ฐ์ ์ํ(St