profile
๐Ÿ’ป ๊ฐœ๋ฐœํ•˜๊ณ  ๊ณต์œ ํ•˜๋Š” ๊ฒƒ์„ ์ข‹์•„ํ•˜๋Š” ๊ณ ๋“ฑํ•™์ƒ ๊ฐœ๋ฐœ์ž์ž…๋‹ˆ๋‹ค
post-thumbnail

์–ด์ค‘๊ฐ„ํžˆ ์•Œ๋ฉด ์•ˆ๋˜๋Š” JS ๊ฐœ๋… #1 this

๋ฌด์‹ฌ์ฝ” ์ง€๋‚˜๊ฐ€๊ฒŒ ๋  ์ˆ˜๋„ ์žˆ๋Š” "this"์˜ ๊ฐœ๋…์„ ํ™•์‹คํžˆ ์งš๊ณ  ์ง€๋‚˜๊ฐ€ ๋ด…์‹œ๋‹ค.

2020๋…„ 8์›” 31์ผ
ยท
7๊ฐœ์˜ ๋Œ“๊ธ€
post-thumbnail

ํ”„๋กœ์ ํŠธ ํ›„๊ธฐ (feat. ์ฝ”๋กœ๋‚˜ ์บ์น˜)

๊ฐœํ•™์ด ์—ฐ๊ธฐ๋˜๊ณ  ํ•™๊ต์—์„œ ํ•œ ๊ณผ์ œ๊ฐ€ ๋‚ด๋ ค์กŒ๋Š” ๋ฐ, 2์ฃผ ๋‚ด๋กœ ํ”„๋กœ์ ํŠธ๋ฅผ ์ง„ํ–‰ํ•˜์—ฌ ์ œ์ถœํ•ด์•ผํ•˜๋Š” ๊ณผ์ œ์˜€์Šต๋‹ˆ๋‹ค. ๋งˆ์นจ ๊ธฐ์กด์— ํ•˜๋˜ ํ† ์ด ํ”„๋กœ์ ํŠธ๊ฐ€ ๋๋‚˜๊ฐ€๊ณ  ๋ฐฉํ•™๋™์•ˆ ํ•˜๊ณ  ์‹ถ์—ˆ์ง€๋งŒ ๋ชปํ–ˆ๋˜ ๊ธฐ์ˆ ์„ ์จ๋ณด๊ธฐ์— ์ข‹์€ ๊ธฐํšŒ๋ผ๊ณ  ์ƒ๊ฐํ–ˆ์Šต๋‹ˆ๋‹ค.

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

๋‚˜์˜ ์ฒซ ์ธํ„ฐ๋ทฐ ์งˆ๋ฌธ ๋ฆฌ์ŠคํŠธ

ํ•™๊ต์— ๊ณ ๋“ฑํ•™์ƒ ๊ฐœ๋ฐœ์ž๋ฅผ ์ฑ„์šฉํ•˜๊ธฐ ์œ„ํ•ด ๊ธฐ์—…์„ค๋ช…ํšŒ๊ฐ€ ์—ด๋ ธ์—ˆ๋Š”๋ฐ, ์ง€์›ํ•˜๊ณ  ์‹ถ์€ 3ํ•™๋…„ ํ•™์ƒ๊ณผ 2ํ•™๋…„ ํ•™์ƒ๋“ค์„ ๋Œ€์ƒ์œผ๋กœ ์ฑ„์šฉ ๋ฉด์ ‘์ด ์ง„ํ–‰๋˜์—ˆ์Šต๋‹ˆ๋‹ค. ์„ฑ์žฅํ•˜๋Š” ์Šคํƒ€ํŠธ์—… ํšŒ์‚ฌ์ด๊ณ , ๋–จ์–ด์ ธ๋„ ์ข‹์€ ๊ฒฝํ—˜์ด ๋  ์ˆ˜ ์žˆ์„ ๊ฒƒ ๊ฐ™์•„ ์›น ํ”„๋ก ํŠธ ๊ฐœ๋ฐœ์— ์ง€์›ํ•˜์—ฌ ๋ฉด์ ‘์„ ์ง„ํ–‰ํ•˜์˜€์Šต๋‹ˆ๋‹ค. ๋‚œ์ƒ์ฒ˜์Œ ๋ณด๋Š” ๊ธฐ์ˆ ๋ฉด์ ‘์—์„œ ...

2019๋…„ 12์›” 22์ผ
ยท
1๊ฐœ์˜ ๋Œ“๊ธ€
post-thumbnail

Storybook ์ž‘์„ฑํ•˜๊ธฐ #3 - ์Šค๋ƒ…์ƒท ํ…Œ์ŠคํŒ…

์ง€๋‚œ ํฌ์ŠคํŠธ์— ์ด์–ด ์ด๋ฒˆ ๊ธ€์—์„œ๋Š” Storybook์—์„œ ์Šค๋ƒ…์ƒท์„ ์ด์šฉํ•˜์—ฌ ์ปดํฌ๋„ŒํŠธ ํ…Œ์ŠคํŠธ ์ž๋™ํ™”๋ฅผ ํ•ด๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค. ๐Ÿ–ผ๏ธ Snapshot Testing? snapshot ํ…Œ์ŠคํŠธ ์ผ€์ด์Šค๋Š” UI component๋ฅผ ๋ Œ๋”๋งํ•œ ๋’ค, ์Šคํฌ๋ฆฐ์ƒท์„ ์ฐ๊ณ , ํ…Œ์ŠคํŠธ ๋ถ€๊ทผ์— ์ €์žฅ๋œ ๋ ˆํผ๋Ÿฐ์Šค ์ด๋ฏธ์ง€์™€ ์ฐ์€ ๊ฒƒ๋“ค์„ ๋น„๊ตํ•ฉ๋‹ˆ๋‹ค. ๋งŒ์•ฝ ์ด์ „์— ์ฐ์—ˆ๋˜ ์ด๋ฏธ์ง€์™€ ํ…Œ์ŠคํŠธํ–ˆ์„ ๋•Œ์™€์˜...

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

Storybook ์ž‘์„ฑํ•˜๊ธฐ #2 - ํ™œ์šฉํ•˜๊ธฐ

์ง€๋‚œ ๊ธ€์—์„œ ๊ฐ„๋‹จํ•˜๊ฒŒ Storybook์ด ๋ฌด์—‡์ด๊ณ  ์–ด๋–ค ๊ธฐ๋Šฅ์„ ์ œ๊ณตํ•˜๋Š”์ง€ ์•Œ์•„๋ณด์•˜์Šต๋‹ˆ๋‹ค. ์ด๋ฒˆ๊ธ€์—์„œ๋Š” React.js์—์„œ Storybook์„ ์–ด๋–ป๊ฒŒ ์ ์šฉํ•˜๊ณ  ์‚ฌ์šฉํ•˜๋Š”์ง€ ๊ฐ„๋‹จํ•œ ํˆฌ๋‘๋ฆฌ์ŠคํŠธ๋ฅผ ๋งŒ๋“ค๋ฉด์„œ ์•Œ์•„๋ณด๋ ค๊ณ  ํ•ฉ๋‹ˆ๋‹ค. ๐Ÿ“™ Storybook-cli ์„ค์น˜ ๋ฐ ์‹œ์ž‘ ๋จผ์ € ๊ฐ„๋‹จํ•˜๊ฒŒ create-react-app์„ ์ด์šฉํ•˜์—ฌ ํ”„๋กœ์ ํŠธ๋ฅผ ์ƒ์„ฑํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค. ์ด์ œ ...

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

Storybook ์ž‘์„ฑํ•˜๊ธฐ #1 - ๊ฐœ์š”

์ด๋ฒˆ ํฌ์ŠคํŠธ์—์„œ๋Š” Storybook ์ด๋ผ๋Š” ๊ฒƒ์„ ์•Œ์•„๋ณผ๊นŒ ํ•ฉ๋‹ˆ๋‹ค. Storybook์€ UI ๊ตฌ์„ฑ ์š”์†Œ(์ปดํฌ๋„ŒํŠธ)๋ฅผ ๊ฐœ๋ฐœํ•˜๊ธฐ์œ„ํ•œ ์˜คํ”ˆ ์†Œ์Šค ๋„๊ตฌ์ž…๋‹ˆ๋‹ค. ์˜ˆ์ „์—๋Š” ํŽ˜์ด์ง€ ๋‹จ์œ„์˜ ๊ฐœ๋ฐœ์„ ํ•˜์˜€๋‹ค๋ฉด ์š”์ฆ˜์—๋Š” ์ปดํฌ๋„ŒํŠธ ๋‹จ์œ„๋กœ ํ”„๋ก ํŠธ์—”๋“œ๋ฅผ ๊ฐœ๋ฐœํ•˜๊ณ , ๋งŽ์€ ๋ถ„๋“ค์ด React, Vue๋‚˜ Angular๋ฅผ ์ด์šฉํ•˜์—ฌ ๊ฐœ๋ฐœํ•ฉ๋‹ˆ๋‹ค. ์—ฌ๊ธฐ์„œ ์ปดํฌ๋„ŒํŠธ๋Š” ์™ธ๋ถ€์— ์˜ํ–ฅ์„ ๋ฐ›์ง€ ์•Š๊ณ  ...

2019๋…„ 11์›” 14์ผ
ยท
2๊ฐœ์˜ ๋Œ“๊ธ€
post-thumbnail

How to use TypeScript

Typescript๋ฅผ ๋ฐฐ์šฐ๋ฉด์„œ ์ค‘์š”ํ•œ ๋‚ด์šฉ์„ ์ •๋ฆฌํ•œ ๊ธ€์ž…๋‹ˆ๋‹ค. ์ด์ „๋ถ€ํ„ฐ ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ์˜ ์žฅ์ ๊ณผ ํ•„์š”์„ฑ์„ ์•Œ๊ณ ๋Š” ์žˆ์—ˆ์ง€๋งŒ Typescript๋ฅผ ์“ฐ์ง€ ์•Š๊ณ ๋„ ๊ฐœ๋ฐœ์„ ์ž˜ ํ•ด์™”๊ธฐ ๋•Œ๋ฌธ์— ์‚ฌ์šฉ์„ ๊บผ๋ ค์™”์—ˆ์Šต๋‹ˆ๋‹ค. ๊ทธ๋ฆฌ๊ณ  ํ‰์†Œ์ฒ˜๋Ÿผ React๋กœ javascript๋งŒ์„ ์ด์šฉํ•˜์—ฌ ์›น ์–ดํ”Œ๋ฆฌ์ผ€์ด์…˜ ๊ฐœ๋ฐœ์„ ํ•˜๋˜ ๋„์ค‘ (๋Œ€์ถฉ Props๋กœ ๊ฐ’์„ ๋„˜๊ฒจ์ค„ ๋•Œ, ํƒ€์ž…์ •์˜๋ฅผ ํ•˜์ง€ ์•Š...

2019๋…„ 10์›” 28์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
post-thumbnail

React - eject ์—†์ด Mobx ๋ฐ์ฝ”๋ ˆ์ดํ„ฐ ์‚ฌ์šฉํ•˜๊ธฐ

์˜ค๋Š˜ ์จ๋ณผ ๊ธ€์€ React์˜ ์ƒํƒœ๊ด€๋ฆฌ๋ฅผ ํ•  ๋•Œ ๋งŽ์ด ์‚ฌ์šฉํ•˜๋Š” ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์ธ Mobx์˜ ๋ฐ์ฝ”๋ ˆ์ดํ„ฐ๋ฅผ CRA์—์„œ yarn eject ์—†์ด ์‚ฌ์šฉํ•˜๋Š” ๋ฒ•์„ ์•Œ์•„๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค :) ๋ณดํ†ต์€ Mobx ๋ง๊ณ ๋„ ๋ฐ์ฝ”๋ ˆ์ดํ„ฐ๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ํ•˜์ง€๋งŒ Mobx๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด์„œ ๋ฐ์ฝ”๋ ˆ์ดํ„ฐ๋ฅผ ๋งŽ์ด ์‚ฌ์šฉํ•˜๊ณ  react์—์„œ ๋ฐ์ฝ”๋ ˆ์ดํ„ฐ๋ฅผ ์‚ฌ์šฉํ•  ๋•Œ ์—ฌ๋Ÿฌ๊ฐ€์ง€ ์„ค์ •์— ๊ด€ํ•œ ๋ฌธ์ œ๋ฅผ ๊ฒช์—ˆ๊ธฐ ๋•Œ...

2019๋…„ 10์›” 27์ผ
ยท
1๊ฐœ์˜ ๋Œ“๊ธ€
post-thumbnail

CORS์— ๋Œ€ํ•œ ๊ฐ„๋‹จํ•œ ๊ณ ์ฐฐ

์ด ํฌ์ŠคํŠธ์—์„œ๋Š” CORS์— ๋Œ€ํ•œ ์ด์Šˆ์— ๋Œ€ํ•ด์„œ ๋‹ค๋ค„๋ณผ๋ ค๊ณ  ํ•ฉ๋‹ˆ๋‹ค. ์›น ๊ฐœ๋ฐœ์„ ํ•˜๋‹ค๋ณด๋ฉด ํ•œ๋ฒˆ์ฏค ๊ฒช๊ฒŒ๋˜๋Š” ์ด์Šˆ๋กœ ํด๋ผ์ด์–ธํŠธ์™€ ์„œ๋ฒ„์˜ ์˜ค๋ฆฌ์ง„์ด ๋‹ค๋ฅผ ๋•Œ ๋ฐœ์ƒํ•˜๋Š” ์ด์Šˆ์ž…๋‹ˆ๋‹ค. ๐Ÿค” CORS? ํฌ๋กœ์Šค ๋„๋ฉ”์ธ? CORS๋Š” Cross Origin Resource Sharing์˜ ์•ฝ์ž๋กœ ๋„๋ฉ”์ธ ๋˜๋Š” ํฌํŠธ๊ฐ€ ๋‹ค๋ฅธ ์„œ๋ฒ„์˜ ์ž์›์„ ์š”์ฒญํ•˜๋Š” ๋งค์ปค๋‹ˆ์ฆ˜์„ ๋งํ•ฉ๋‹ˆ๋‹ค. ์ด...

2019๋…„ 9์›” 23์ผ
ยท
5๊ฐœ์˜ ๋Œ“๊ธ€