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

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

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

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

[DI] Dependency Injection์ด๋ž€ ๋ฌด์—‡์ผ๊นŒ?

Dependency Injection, ์˜์กด์„ฑ ์ฃผ์ž…์ด ๋ฌด์—‡์ด๊ณ  ์–ด๋–ค ์ด์ ์ด ์žˆ๋Š”์ง€ ์˜ˆ์‹œ๋ฅผ ํ†ตํ•ด ์ •๋ฆฌํ•œ ๊ธ€์ž…๋‹ˆ๋‹ค.

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

ํ•จ๊ป˜ํ•˜๋Š” ์˜๋ฏธ๋ฅผ ์•Œ๋ ค์ค€ 2019

2019๋…„ ํ•œ ํ•ด๊ฐ€ ์–ผ๋งˆ ๋‚จ์ง€ ์•Š์•˜๊ตฐ์š”. 12์›” ๋‹ฌ์ด ๋˜๊ธฐ ์ „์— ๋ฏธ๋ฆฌ ์จ์•ผ์ง€ ํ•˜๋‹ค๊ฐ€ ์ง„์งœ 12์›” ๋งˆ์ง€๋ง‰ ๋‚ ์ด ๋˜์„œ ์“ฐ๊ฒŒ ๋˜๋„ค์š”... ๊ทธ๋ž˜์„œ 2019๋…„์ด ๊ฐ€๊ธฐ์ „์—, 2019๋…„์„ ๋ฐ˜์„ฑํ•˜๊ณ  ๋˜๋Œ์•„ ๋ณด๋ฉด์„œ ์˜ฌํ•ด๋ณด๋‹ค ๋ฉ‹์ง„ 2020๋…„์„ ์ค€๋น„ํ•ด๋ณด๋ ค๊ณ  ํ•ฉ๋‹ˆ๋‹ค. 2019 ์ด๋ชจ์ €๋ชจ 20

2019๋…„ 12์›” 31์ผ
ยท
2๊ฐœ์˜ ๋Œ“๊ธ€
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

[HTTP] REST API ๋ž€

๊ณผ๊ฑฐ์—๋Š” ๋ธŒ๋ผ์šฐ์ €๊ฐ€ ์›น์„œ๋ฒ„์— ์›นํŽ˜์ด์ง€๋ฅผ ์š”์ฒญํ•˜์—ฌ ํด๋ผ์ด์–ธํŠธ๋ฅผ ์ œ๊ณตํ•˜์—ฌ ์›นํŽ˜์ด์ง€๊ฐ€ ์ž‘๋™ํ•˜์˜€์Šต๋‹ˆ๋‹ค. ํ•˜์ง€๋งŒ ์ตœ๊ทผ์—๋Š” SPA(Signle-Page-Application)๋ฅผ ์ด์šฉํ•˜์—ฌ ํด๋ผ์ด์–ธํŠธ(๋Œ€ํ‘œ์ ์œผ๋กœ React, Vue, Angular)๋ฅผ ๊ตฌํ˜„ํ•˜๋ฉฐ, ํด๋ผ์ด์–ธํŠธ๋ฅผ ์„œ๋ฒ„์™€ ๋ถ„๋ฆฌํ•˜์—ฌ ํด๋ผ์ด์–ธํŠธ ๋กœ์ง์„ ๋ถ„๋ช…ํžˆ ํ•ฉ๋‹ˆ๋‹ค. ๋˜ํ•œ ์„œ๋ฒ„์— API๋ฅผ ์š”์ฒญํ•˜๋ฏ€๋กœ์จ ์›น ...

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

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

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

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

๐Ÿณ Docker ๋„์ปค - #1 ๊ธฐ๋ณธ ๋ช…๋ น์–ด ๋ชจ์Œ

๋„์ปค๋ž€ ๊ฐ„๋‹จํ•˜๊ฒŒ ๋งํ•ด ์„œ๋ฒ„ํ™˜๊ฒฝ์—์„œ์˜ ๋‹ค์–‘ํ•œ ํ”„๋กœ๊ทธ๋žจ, ์‹คํ–‰ํ™˜๊ฒฝ์„ ์ปจํ…Œ์ด๋„ˆ๋ผ๋Š” ๊ฒฉ๋ฆฌ๋œ ํ™˜๊ฒฝ์—์„œ ์‹คํ–‰ํ•  ์ˆ˜ ์žˆ๊ฒŒ ํ•ด์ฃผ๋Š” ์ปจํ…Œ์ด๋„ˆ ๊ธฐ๋ฐ˜์˜ ์˜คํ”ˆ์†Œ์Šค ๊ฐ€์ƒํ™” ํ”Œ๋žซํผ ์ž…๋‹ˆ๋‹ค. ์ด๋ฅผ ์ด์šฉํ•˜๋ฉด ๋ณต์žกํ•œ ์„œ๋ฒ„ํ™˜๊ฒฝ์„ ์ฝ”๋“œ๋กœ ์‰ฝ๊ฒŒ ๊ด€๋ฆฌํ•  ์ˆ˜ ์žˆ๊ณ  ์•ˆ์ •์ ์ธ ๋ฐฐํฌํ™˜๊ฒฝ (๋ฌด์ค‘๋‹จ ๋ฐฐํฌ ๋“ฑ) ๊ตฌ์„ฑ

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

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

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

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