Minsu's Dev Log

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

๋น„ํŠธ ์—ฐ์‚ฐ์ž, ํ˜•์‹ํ™” ๋ฐฐ์—ด, ๋ฒ„ํผ(๋ฐฐ์—ด)

33-js-concepts๋ฅผ ์Šคํ„ฐ๋””ํ•˜๋ฉฐ ์ •๋ฆฌํ•œ ํฌ์ŠคํŠธ ์ž…๋‹ˆ๋‹ค. ๋น„ํŠธ ์—ฐ์‚ฐ์ž ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋Š” ์•„๋ž˜์˜ 7๊ฐ€์ง€์˜ ๋น„ํŠธ ์—ฐ์‚ฐ์ž๋ฅผ ์ง€์›ํ•œ๋‹ค. ์—ฐ์‚ฐ์ž ์ด๋ฆ„ ์„ฆ๋ช… & AND ์–‘์ชฝ์˜ ๋น„ํŠธ๊ฐ€ ๋ชจ๋‘ 1์ธ ๋น„ํŠธ๋งŒ 1๋กœ ์„ค์ •ํ•œ๋‹ค. | OR ์–‘์ชฝ ๋น„ํŠธ ์ค‘ ํ•˜๋‚˜๊ฐ€ 1์ด๋ฉด ๋น„ํŠธ๋ฅผ 1๋กœ ์„ค์ •ํ•œ๋‹ค. ^ XOR ์–‘์ชฝ ๋น„ํŠธ ์ค‘ ํ•˜๋‚˜๋งŒ 1์ผ ๊ฒฝ์šฐ ๋น„ํŠธ๋ฅผ 1๋กœ ์„ค์ •ํ•œ๋‹ค. ~ NOT ๋ชจ๋“  ๋น„ํŠธ๋ฅผโ€ฆ

๊ฐœ๋ฐœ์ž๋กœ์„œ ์ฒซ ์ด์ง ํšŒ๊ณ 

๐Ÿšง ๊ธ€์„ ์ž‘์„ฑํ•˜๊ธฐ์— ์•ž์„œ ์ €๋Š” 9๊ฐœ์›” ์ •๋„ ๋‹ค๋‹Œ ์ฒซ ์ง์žฅ์„ ๊ทธ๋งŒ๋‘๊ณ  ์ฒซ ์ด์ง์„ ํ–ˆ์Šต๋‹ˆ๋‹ค. ๋Œ€ํ•™์ƒ ์‹ ๋ถ„์œผ๋กœ ์ฒซ ํšŒ์‚ฌ๋ฅผ ๊ตฌํ•˜๊ณ  ์ฒซ ์ด์ง์„ ํ•˜๊ธฐ๊นŒ์ง€์˜ ๊ฒฝํ—˜๊ณผ ํŒ์„ ๋‹ด์€ ํšŒ๊ณ  ๊ธ€ ์ž…๋‹ˆ๋‹ค. ์ž‘์„ฑ๋œ ๋ชจ๋“  ๋‚ด์šฉ์€ ์ œ ๊ฒฝํ—˜์„ ๊ธฐ๋ฐ˜์œผ๋กœ ํ•œ ์ฃผ๊ด€์ ์ธ ๊ธ€์ด๋ฏ€๋กœ ์ฐธ๊ณ ๋งŒ ํ•˜์…จ์œผ๋ฉด ์ข‹๊ฒ ์Šต๋‹ˆ๋‹ค. ์ฒซ ํšŒ์‚ฌ๋ฅผ ๊ตฌํ•˜๋ ค๋Š” ํ•™์ƒ๊ณผ ์ด์ง์„ ์ค€๋น„ํ•˜๋Š” ์ฃผ๋‹ˆ์–ด๋ถ„๋“ค ๋ชจ๋‘ ์›ํ•˜์‹œ๋Š” ๊ฒƒ๋“ค ๋‹ค ์ด๋ฃจ์…จ์œผ๋ฉดโ€ฆ

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)์˜ ์ผ๋ถ€๋ฅผ ๋‚˜ํƒ€๋‚ธ๋‹ค. ํŒŒ์ƒ๋œ ์ƒํƒœ๋ฅผ ์–ด๋–ค ๋ฐฉ๋ฒ•์œผ๋กœ๋“  ์ฃผ์–ด์ง„ ์ƒํƒœ๋ฅผ ์ˆ˜์ •ํ•˜๋Š” ์ˆœ์ˆ˜ ํ•จ์ˆ˜์— ์ „๋‹ฌ๋œ ์ƒํƒœ์˜ ๊ฒฐ๊ณผ๋ฌผ๋กœ ์ƒ๊ฐํ•  ์ˆ˜ ์žˆ๋‹ค. ํŒŒ์ƒ๋œ ์ƒํƒœ๋Š” ๋‹ค๋ฅธ ๋ฐ์ดํ„ฐ์— ์˜์กดํ•˜๋Š” ๋™์ ์ธ ๋ฐ์ดํ„ฐ๋ฅผ ๋งŒ๋“ค โ€ฆ