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

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

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

2019๋…„ 11์›” 14์ผ0๊ฐœ์˜ ๋Œ“๊ธ€
Storybook ์ž‘์„ฑํ•˜๊ธฐ #2 - ํ™œ์šฉํ•˜๊ธฐ Thumbnail

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

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

2019๋…„ 11์›” 14์ผ0๊ฐœ์˜ ๋Œ“๊ธ€
Storybook ์ž‘์„ฑํ•˜๊ธฐ #1 - ๊ฐœ์š” Thumbnail

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

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

2019๋…„ 11์›” 14์ผ2๊ฐœ์˜ ๋Œ“๊ธ€
How to use TypeScript Thumbnail

How to use TypeScript

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

2019๋…„ 10์›” 28์ผ0๊ฐœ์˜ ๋Œ“๊ธ€
[HTTP] REST API ๋ž€ Thumbnail

[HTTP] REST API ๋ž€

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

2019๋…„ 10์›” 28์ผ2๊ฐœ์˜ ๋Œ“๊ธ€
React - eject ์—†์ด Mobx ๋ฐ์ฝ”๋ ˆ์ดํ„ฐ ์‚ฌ์šฉํ•˜๊ธฐ Thumbnail

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

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

2019๋…„ 10์›” 27์ผ0๊ฐœ์˜ ๋Œ“๊ธ€
๐Ÿณ Docker ๋„์ปค - #1 ๊ธฐ๋ณธ ๋ช…๋ น์–ด ๋ชจ์Œ Thumbnail

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

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

2019๋…„ 9์›” 24์ผ0๊ฐœ์˜ ๋Œ“๊ธ€
CORS์— ๋Œ€ํ•œ ๊ฐ„๋‹จํ•œ ๊ณ ์ฐฐ Thumbnail

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

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

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