profile
Having Fun with Code ๐ŸŽต

Redux

yarn install reduxstate๋Š” application์•ˆ์—์„œ ๋ฐ”๋€Œ๋Š” data๋ฅผ ๋งํ•œ๋‹ค.redux์—๋Š” createStore์ด๋ผ๋Š” function์ด ์žˆ๋‹ค.redux๋Š” data๋ฅผ ๊ด€๋ฆฌํ•˜๋Š”๋ฐ ๋„์™€์ฃผ๋Š” ์—ญํ• ์„ ํ•˜๊ธฐ ์œ„ํ•ด ๋งŒ๋“ค์–ด์กŒ๋‹ค.reducer is a functio

2021๋…„ 4์›” 25์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
ยท

React์˜ ํŠน์ง• ์ •๋ฆฌ: ์ •ํ™•ํ•˜๊ฒŒ ์ดํ•ดํ•˜๊ณ  ์‚ฌ์šฉํ•˜๊ธฐ

React๋Š” ์ปดํฌ๋„ŒํŠธ๋“ค์ด๋‹ค.React๋Š” ๋ฐ์ดํ„ฐ๊ฐ€ ์กฐ๊ธˆ์ด๋ผ๋„ ์—…๋ฐ์ดํŠธ๊ฐ€ ๋˜๋ฉด (state๋‚˜ ๊ด€๋ จ๋œ props์ด ๋ณ€ํ•˜๋ฉด) ์ „์ฒด์ ์œผ๋กœ ์–ดํ”Œ๋ฆฌ์ผ€์ด์…˜์ด ๋‹ค re-render๊ฐ€ ๋œ๋‹ค.ํ•˜์ง€๋งŒ React์ž์ฒด์˜ Virtual DOM์„ ์‚ฌ์šฉํ•˜๊ธฐ ๋•Œ๋ฌธ์— ์‹ค์ œ๋กœ๋Š” ์ •๋ง ์—…๋ฐ์ดํŠธ ๋ผ์•ผ ํ•˜๋Š”

2021๋…„ 3์›” 9์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
ยท

Typescript

์ƒˆ๋ฒฝ์— ์ž  ์•ˆ์™€์„œ ์‹œ์ž‘ํ•˜๋Š” ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ ๊ณต๋ถ€ ๋“ฃ๊ณ  ์žˆ๋Š” ๊ฐ•์˜๋Š” ์š”๊ฑฐ ๐Ÿ‘‡ Udemy Understanding TypeScript - 2021 Edition https://www.udemy.com/course/understanding-typescript ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ๋ž€

2021๋…„ 2์›” 16์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
ยท

CSS Centering 5๊ฐ€์ง€ ๋ฐฉ๋ฒ•

: div, h1-h6, p, form, header, footer, section๊ฐ™์€ block item์˜ ๊ฒฝ์šฐ, ํ˜น์€ display: block์„ ๋”ฐ๋กœ ์ฃผ๋Š” ๊ฒฝ์šฐmargin ์˜ ์˜ค๋ฅธ์ชฝ ์™ผ์ชฝ์„ auto๋กœ ์ฃผ์–ด์„œ centering์„ ํ• ์ˆ˜์žˆ๋‹ค.ํ•œ๊ฐ€์ง€ ์ฃผ์˜ํ•  ์ ์€ ์ด๊ฒฝ์šฐ์—

2021๋…„ 1์›” 31์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
ยท

Javascipt ๋””๋ฒ„๊น…ํ•˜๊ธฐ

debugger ํ‚ค์›Œ๋“œ๋ฅผ ๋ฉˆ์ถ”๊ณ  ์‹ถ์€ ๊ณณ์— ์ž…๋ ฅํ•œ ํ›„, function์„ ์…€ํ”„๋กœ ๋ถˆ๋Ÿฌ์ค€๋‹ค.ํ„ฐ๋ฏธ๋„์— ํ•ด๋‹น ํด๋”๋กœ ๊ฐ„๋‹ค์Œ node.inspect ํŒŒ์ผ๋ช….jscont (ํ˜น์€ continue, ํ˜น์€ c) ๋ฅผ ์นœ๋‹ค.repl ๋ฅผ ์นœ๋‹ค.๊ทธ ํ›„ ๋””๋ฒ„๊น… ํ•˜๊ณ  ์‹ถ์€ ์ฝ”๋“œ๋ฅผ ์น˜๋ฉด ๋œ๋‹ค.์˜ˆ

2021๋…„ 1์›” 20์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
ยท
post-thumbnail

Javascript ๊ธฐ๋ณธ ์•Œ๊ณ ๋ฆฌ์ฆ˜ ์ •๋ฆฌ

์ƒˆ๋กœ์šด for loop (ES2015)go through each character of 'str', one by one. and set the each character equal to 'character'(which is the temporary variable)e

2021๋…„ 1์›” 20์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
ยท

CSS Mediaquery:๋ฐ˜์‘ํ˜• ์›น์‚ฌ์ดํŠธ

Mobile: 320-480pxtablet: 768-1024pxdesktop: 1024px~ํ™”๋ฉด์˜ ๋„“์ด๊ฐ€ 0~768์ผ๋•Œflex-box๋กœ ์ง€์ •ํ•ด์ค€ ๊ฒƒ์ด ์ˆ˜์ง์œผ๋กœ ์ผ๋ ฌ๋กœ ๋‚˜์—ด๋œ๋‹ค.px์€ ๊ณ ์ •๊ฐ’์ด๊ธฐ๋•Œ๋ฌธ์— ๋ณดํ†ต ๋ถ€๋ชจ div์— width:80% ์ด๋Ÿฐ์‹์œผ๋กœ ๋ฐ˜์‘ํ˜•์œผ๋กœ ์‚ฌ์šฉํ•œ๋‹ค.๊ทธ

2021๋…„ 1์›” 20์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
ยท

React: Class component VS Function component

์‰ฝ๊ฒŒ ์ •๋ฆฌํ•˜๊ณ , ํ•œ๋ˆˆ์— ์•Œ์•„๋ณด๊ธฐ ์ข‹๋‹ค.'state'๋ฅผ ์“ธ ์ˆ˜ ์žˆ์–ด์„œ user input์„ ์ฒ˜๋ฆฌํ•˜๊ธฐ์— ์ข‹๋‹ค.lifecycle eventsJavascript class์—ฌ์•ผํ•œ๋‹ค.React.Component๋กœ extend ๋˜์–ด์•ผ ํ•œ๋‹ค.JSX๋ฅผ returnํ•˜๋Š” 'render'์„

2021๋…„ 1์›” 15์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
ยท
post-thumbnail

React์™€ Lifecycle Method

Lifecycle method๋Š” class component์—์„œ ์˜ต์…˜์œผ๋กœ ์“ธ ์ˆ˜ ์žˆ๋Š” function์ด๋‹ค.ํ™”๋ฉด์— (ํ˜น์€ DOM์—) ๋‚˜ํƒ€๋‚˜์„œ -> re-render๊ฐ€ ๋˜๊ณ  -> ์–ด๋Š ์ˆœ๊ฐ„์— ํ™”๋ฉด์—์„œ ์ด component๊ฐ€ ์‚ฌ๋ผ์ง€๋Š” ์ผ๋ จ์˜ ๊ณผ์ •๋“ค์„ Lifecycle์ด๋ผ๊ณ 

2021๋…„ 1์›” 15์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
ยท
post-thumbnail

React์™€ Hooks

Hooks ์˜ ๋ชฉ์ ์€ ์žฌ์‚ฌ์šฉ๊ฐ€๋Šฅํ•œ ์ฝ”๋“œ๋ฅผ ๋งŒ๋“œ๋Š”๋ฐ์— ๋„์›€์„ ์ฃผ๋Š”๊ฒƒ! Hooks System > useState -> functional component์•ˆ์—์„œ state๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋Š” ์ ‘๊ทผ๊ถŒํ•œ์„ ์ค€๋‹ค. useEffect -> useState ์‚ฌ์šฉ๋ฒ• ์—ฌ๊ธฐ์—์„œ

2021๋…„ 1์›” 11์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
ยท
post-thumbnail

React ์™€ DOM

ref์˜ ํŠน์ง•: single DOM element์— ์ ‘๊ทผํ•  ์ˆ˜ ์žˆ๊ฒŒ ํ•ด์ค€๋‹ค.constructor function์•ˆ์—์„œ ref๋ฅผ ๋งŒ๋“ ๋‹ค.๊ทธ ref๋ฅผ instance variable๋กœ ์„ ์–ธํ•œ๋‹ค.๊ทธ ref๋ฅผ JSX์— props๋กœ ์ „๋‹ฌํ•ด์ค€๋‹ค.์ด๋ ‡๊ฒŒ ์ ‘๊ทผํ•œ DOM element

2021๋…„ 1์›” 9์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
ยท
post-thumbnail

React์™€ Map function (์•ฝ๊ฐ„์˜ key property ์ฃผ์ €๋ฆฌ)

understand Map function and use it in React

2021๋…„ 1์›” 9์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
ยท
post-thumbnail

React ์™€ API request

Javascript์—์„œ fetch๋ฅผ ์ด์šฉํ•˜์—ฌ Get request๋ฅผ ๋ณด๋‚ด๋Š” ๊ฒƒ๋งŒ ํ•ด๋ณด๋‹ค๊ฐ€ ์˜ค๋Š˜์€ React์—์„œ API request๋ฅผ ํ•˜๋Š” ๋‚ ์ด๋‹ค! ๋‘๊ทผ๋‘๊ทผ. ๊ณผ์—ฐ ๋ฆฌ์•กํŠธ์—์„œ๋Š” ๋ญ๊ฐ€ ์–ด๋–ป๊ฒŒ ๋‹ค๋ฅผ๊นŒ? ๐Ÿ˜ƒ ์˜ค๋Š˜์˜ ๋ชฉํ‘œ : ์œ ์ €๊ฐ€ ๊ฒ€์ƒ‰์ฐฝ์— "์ž๋™์ฐจ" ํ‚ค์›Œ๋“œ๋ฅผ ๊ฒ€์ƒ‰ํ–ˆ์„๋•Œ

2021๋…„ 1์›” 8์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
ยท