Minsu's Dev Log

Written by@[Minsu Kim]
๐ŸŒˆ22์‚ด ๋Œ€ํ•™์ƒ ํ•™์ƒ ๊ฐœ๋ฐœ์ž๐Ÿ™‚

setTimeout, setInterval and requestAnimationFrame

33-js-concepts๋ฅผ ์Šคํ„ฐ๋””ํ•˜๋ฉฐ ์ •๋ฆฌํ•œ ํฌ์ŠคํŠธ ์ž…๋‹ˆ๋‹ค. ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์—์„œ์˜ ์Šค์ผ€์ฅด๋ง ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์—์„œ๋Š” ์Šค์ผ€์ฅด๋ง์„ ์œ„ํ•œ ํƒ€์ด๋จธ ํ•จ์ˆ˜๊ฐ€ ์กด์žฌํ•œ๋‹ค. ์‚ฌ์šฉ๊ฐ€๋Šฅํ•œ ํƒ€์ด๋จธ ํ•จ์ˆ˜์™€ ํƒ€์ด๋จธ ํ•จ์ˆ˜์˜ ๊ธฐ๋Šฅ์€ ์•„๋ž˜์™€ ๊ฐ™๋‹ค. ํ•จ์ˆ˜ ์ด๋ฆ„ ๊ธฐ๋Šฅ setTimeout(fn, timeout) ์ผ์ • ์‹œ๊ฐ„ ํ›„ fn์œผ๋กœ ๋ฐ›์€ ํ•จ์ˆ˜๋ฅผ ์‹คํ–‰ํ•œ๋‹ค. setInterval(fn, intervaโ€ฆ

๋ฉ”์‹œ์ง€ ํ์™€ ์ด๋ฒคํŠธ ๋ฃจํ”„

33-js-concepts๋ฅผ ์Šคํ„ฐ๋””ํ•˜๋ฉฐ ์ •๋ฆฌํ•œ ํฌ์ŠคํŠธ ์ž…๋‹ˆ๋‹ค. ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜ ํŠน์ง• ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋Š” ์‹ฑ๊ธ€ ์Šค๋ ˆ๋“œ ๊ธฐ๋ฐ˜์˜ ์–ธ์–ด์ด๋ฉฐ 1๊ฐœ์˜ ์ฝœ์Šคํƒ์„ ์‚ฌ์šฉํ•œ๋‹ค. 1๊ฐœ์˜ ์ฝœ์Šคํƒ์„ ์‚ฌ์šฉํ•˜๊ธฐ ๋•Œ๋ฌธ์— ํ•˜๋‚˜์˜ ํ•จ์ˆ˜์˜ ์ž‘์—…์ด ์˜ค๋ž˜๊ฑธ๋ฆฌ๊ฒŒ ๋˜๋ฉด ๊ทธ ์ดํ›„์— ์‹คํ–‰๋  ๋‹ค๋ฅธ ์ž‘์—…๋“ค์€ ์‹คํ–‰์ด ๋˜์ง€ ๋ชปํ•˜๋Š” ์ƒํ™ฉ์ด ๋ฐœ์ƒํ•˜๊ฒŒ ๋œ๋‹ค. ์ด ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ•˜๊ธฐ ์œ„ํ•˜์—ฌ ๋น„๋™๊ธฐ ์ฝœ๋ฐฑ ๋ฐฉ์‹์„ ์‚ฌ์šฉํ•˜๊ณ  ์žˆ๋‹คโ€ฆ

Pure Django๋กœ JWT์ธ์ฆ ๊ตฌํ˜„ํ•˜๊ธฐ (2)

์ด์ „ ํฌ์ŠคํŠธ์—์„œ๋Š” Django์—์„œ JWT์ธ์ฆ์„ ์œ„ํ•œ ๋ฏธ๋“ค์›จ์–ด ์ž‘์„ฑ๋ฒ•์„ ์•Œ์•„๋ณด์•˜๋‹ค. ์ด๋ฒˆ์—๋Š” ๋ฅผ ์‚ฌ์šฉํ•˜๊ธฐ ์œ„ํ•œ ์ธ์ฆ ํ† ํฐ์„ ๋ฐœํ–‰ํ•˜๋Š” ๊ณผ์ •์„ ๋‹ค๋ฃจ์–ด๋ณด๊ฒ ๋‹ค. ๊ธฐ๋ณธ์ ์œผ๋กœ ๊ณผ ๋‘ ๊ฐ€์ง€์˜ ์—์„œ ํ† ํฐ์„ ๋ฐœํ–‰๋œ๋‹ค. URL ์„ค์ •ํ•˜๊ธฐ ์ธ์ฆ๊ณผ ๊ด€๋ จ๋œ ๋กœ์ง์„ ์ฒ˜๋ฆฌํ•˜๊ธฐ ์œ„ํ•œ ์•ฑ์„ ์ƒˆ๋กœ๋งŒ๋“ค์—ˆ๋‹ค. ๊ทธ ํ›„ ์•ž์„œ ์–˜๊ธฐํ–ˆ๋˜ ๊ฒƒ๊ณผ ๊ฐ™์ด ๋กœ๊ทธ์ธ๊ณผ ํšŒ์›๊ฐ€์ž…์— ํ•„์š”ํ•œ ๋‘ ์„ ์„ค์ •ํ•œ๋‹ค. ์•„์ง โ€ฆ

Pure Django๋กœ JWT์ธ์ฆ ๊ตฌํ˜„ํ•˜๊ธฐ (1)

JWT๋ž€? Json Web Token์˜ ์•ฝ์ž๋กœ JSON ๊ฐ์ฒด๋กœ ์ •๋ณด๋ฅผ ์ „๋‹ฌํ•˜๋Š” ๋ฐฉ์‹์ด๋‹ค. ์ด ํฌ์ŠคํŠธ์—์„œ๋Š” JWT์„ ์ด์šฉํ•ด ์ธ์ฆ์„ ๊ตฌํ˜„ํ•˜๋Š” ๋ฐฉ์‹์„ ๋‹ค๋ฃจ์–ด๋ณผ ๊ฒƒ์ด๋‹ค. JWT์— ๊ด€ํ•ด์„œ ์ž์„ธํ•˜๊ฒŒ ์•Œ๊ณ  ์‹ถ๋‹ค๋ฉด ์•„๋ž˜์˜ ๋งํฌ๋ฅผ ํ™•์ธํ•˜๋ฉด ์ข‹์„ ๊ฒƒ์ด๋‹ค. Velopert๋‹˜ ๋ธ”๋กœ๊ทธ ์กฐ๋Œ€ํ˜‘๋‹˜ ๋ธ”๋กœ๊ทธ ํ•„์š”ํ•œ ํŒจํ‚ค์ง€ ์„ค์น˜ํ•˜๊ธฐ JWT์ธ์ฆ์„ ๊ตฌํ˜„ํ•˜๊ธฐ์œ„ํ•ด ์•„๋ž˜์˜ ํŒจํ‚ค์ง€ 3๊ฐœ๋ฅผ ์„ค์น˜ํ•˜์˜€โ€ฆ

IIFE, Modules, Namespaces

33-js-concepts๋ฅผ ์Šคํ„ฐ๋””ํ•˜๋ฉฐ ์ •๋ฆฌํ•œ ํฌ์ŠคํŠธ ์ž…๋‹ˆ๋‹ค. IIFE IIFE๋Š” Immediately Invoked Function Expression์œผ๋กœ ์ฆ‰์‹œ ํ˜ธ์ถœ ํ•จ์ˆ˜ ํ‘œํ˜„์‹์ด๋‹ค. IIFE์˜ ๊ธฐ๋ณธ์ ์ธ ํ˜•ํƒœ๋Š” ์•„๋ž˜์™€ ๊ฐ™๋‹ค. IIFE๋Š” ํ•จ์ˆ˜ ์„ ์–ธ๊ณผ ๋™์‹œ์— ํ•จ์ˆ˜ ํ˜ธ์ถœ์ด ๋˜๋Š” ์ต๋ช… ํ•จ์ˆ˜๋‹ค. ํ•จ์ˆ˜ ์„ ์–ธ์„ ์•„๋ž˜์™€ ๊ฐ™์ด ํ•จ์ˆ˜ ์ด๋ฆ„์ด ์—†์ด ์„ ์–ธ์„ ํ•  ๊ฒฝ์šฐ์—๋Š” ์˜ค๋ฅ˜โ€ฆ

Recoil - Core Concepts

Recoil ๊ณต์‹ ๋ฌธ์„œ ์ค‘ Introduction - Core Concepts๋ฅผ ๋ฒˆ์—ญํ•œ ํฌ์ŠคํŠธ์ž…๋‹ˆ๋‹ค. ๊ฐœ์š” Recoil์„ ์‚ฌ์šฉํ•˜๋ฉด atoms (๊ณต์œ  ์ƒํƒœ)์—์„œ selectors (์ˆœ์ˆ˜ ํ•จ์ˆ˜)๋ฅผ ๊ฑฐ์ณ React ์ปดํฌ๋„ŒํŠธ๋กœ ๋‚ด๋ ค๊ฐ€๋Š” ๋ฐ์ดํ„ฐ ํ๋ฆ„ ๊ทธ๋ž˜ํ”„๋ฅผ ์ƒ์„ฑํ•  ์ˆ˜ ์žˆ๋‹ค. Atoms๋Š” ์ปดํฌ๋„ŒํŠธ๊ฐ€ ๊ตฌ๋…ํ•  ์ˆ˜ ์žˆ๋Š” ์ƒํƒœ์˜ ๋‹จ์œ„๋‹ค. Selectors ๊ฐ€ ์ด ์ƒํƒœ๋ฅผ โ€ฆ

Bonus: Performance

Recoil ๊ณต์‹ ๋ฌธ์„œ ์ค‘ Basic Tutorial Bonus: Performance๋ฅผ ๋ฒˆ์—ญํ•œ ํฌ์ŠคํŠธ์ž…๋‹ˆ๋‹ค. Bonus : ์„ฑ๋Šฅ ์šฐ๋ฆฌ๊ฐ€ ๊ตฌํ˜„ํ•œ ๊ธฐ์กด์˜ ๊ฒƒ์€ ์™„๋ฒฝํ•˜๊ฒŒ ์œ ์š”ํ•˜๋‹ค. ํ•˜์ง€๋งŒ ์šฐ๋ฆฌ ์•ฑ์ด ์ž‘์€ ํ† ์ด ํ”„๋กœ์ ํŠธ์—์„œ ๋ฐฑ๋งŒ์ค„์งœ๋ฆฌ ๊ธฐ์—… ํ”„๋กœ๊ทธ๋žจ์œผ๋กœ ๋ฐœ์ „ํ•˜๋ฉด์„œ ๊ณ ๋ คํ•ด์•ผ ํ•  ์ค‘์š”ํ•œ ์„ฑ๋Šฅ์  ์ธก๋ฉด์ด ์žˆ๋‹ค. ์šฐ๋ฆฌ์˜ ์ปดํฌ๋„ŒํŠธ๋“ค์„ ๋‹ค์‹œ ๋žœ๋”๋ง ์‹œํ‚ค๋Š” ์›์ธ์ด ๋ฌด์—‡์ธ์ง€ ์ƒโ€ฆ

Selectors

Recoil ๊ณต์‹ ๋ฌธ์„œ ์ค‘ Basic Tutorial Selectors๋ฅผ ๋ฒˆ์—ญํ•œ ํฌ์ŠคํŠธ์ž…๋‹ˆ๋‹ค. Selectors Selector๋Š” ํŒŒ์ƒ๋œ ์ƒํƒœ(derived state)์˜ ์ผ๋ถ€๋ฅผ ๋‚˜ํƒ€๋‚ธ๋‹ค. ํŒŒ์ƒ๋œ ์ƒํƒœ๋ฅผ ์–ด๋–ค ๋ฐฉ๋ฒ•์œผ๋กœ๋“  ์ฃผ์–ด์ง„ ์ƒํƒœ๋ฅผ ์ˆ˜์ •ํ•˜๋Š” ์ˆœ์ˆ˜ ํ•จ์ˆ˜์— ์ „๋‹ฌ๋œ ์ƒํƒœ์˜ ๊ฒฐ๊ณผ๋ฌผ๋กœ ์ƒ๊ฐํ•  ์ˆ˜ ์žˆ๋‹ค. ํŒŒ์ƒ๋œ ์ƒํƒœ๋Š” ๋‹ค๋ฅธ ๋ฐ์ดํ„ฐ์— ์˜์กดํ•˜๋Š” ๋™์ ์ธ ๋ฐ์ดํ„ฐ๋ฅผ ๋งŒ๋“ค โ€ฆ

Atoms

Recoil ๊ณต์‹ ๋ฌธ์„œ ์ค‘ Basic Tutorial Atoms๋ฅผ ๋ฒˆ์—ญํ•œ ํฌ์ŠคํŠธ์ž…๋‹ˆ๋‹ค. Atoms Atoms๋Š” ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ์ƒํƒœ์˜ source of truth๋ฅผ ๊ฐ–๋Š”๋‹ค. todo ๋ฆฌ์ŠคํŠธ์—์„œ source of truth๋Š” todo ์•„์ดํ…œ์„ ๋‚˜ํƒ€๋‚ด๋Š” ๊ฐ์ฒด๋กœ ์ด๋ฃจ์–ด์ง„ ๋ฐฐ์—ด์ด ๋  ๊ฒƒ์ด๋‹ค. ์šฐ๋ฆฌ๋Š” atom ๋ฆฌ์ŠคํŠธ๋ฅผ ๋ผ๊ณ  ํ•˜๊ณ  ์ด๊ฒƒ์„ ํ•จ์ˆ˜๋ฅผ ์ด์šฉํ•ด ์ƒ์„ฑํ•  ๊ฒƒ์ด๋‹ค.โ€ฆ

Recoil Basic Tutorial Intro

Recoil ๊ณต์‹ ๋ฌธ์„œ ์ค‘ Basic Tutorial Intro๋ฅผ ๋ฒˆ์—ญํ•œ ํฌ์ŠคํŠธ์ž…๋‹ˆ๋‹ค. Intro ์ด ์„น์…˜์€ Recoil๊ณผ React๊ฐ€ ์„ค์น˜ํ–ˆ๋‹ค๊ณ  ๊ฐ€์ •ํ•œ๋‹ค. Recoil๊ณผ React๋ฅผ ์ฒ˜์Œ๋ถ€ํ„ฐ ์‹œ์ž‘ํ•˜๋Š” ๋ฐฉ๋ฒ•์€ Getting Started๋ฅผ ๋ณด๋ฉด๋œ๋‹ค. ์•ž์œผ๋กœ์˜ ์„น์…˜์˜ ์ปดํฌ๋„ŒํŠธ๋“ค์€ ๋ถ€๋ชจํŠธ๋ฆฌ์— ๊ฐ€ ์žˆ๋‹ค๊ณ  ๊ฐ€์ •ํ•œ๋‹ค. ์ด ํŠœํ† ๋ฆฌ์–ผ์—์„œ๋Š” ๊ฐ„๋‹จํ•œ todo ๋ฆฌ์ŠคํŠธ ์• ํ”Œโ€ฆ