profile
๐Ÿ‘ฉ๐Ÿปโ€๐Ÿ’ปFrontend Web Developer
ํƒœ๊ทธ ๋ชฉ๋ก
์ „์ฒด๋ณด๊ธฐ (64)WeCode(10)์œ„์ฝ”๋“œ(8)JavaScript(6)git(5)React(5)CSS(4)์ฝ”๋”ฉ๋ถ€ํŠธ์บ ํ”„(3)westagram(3)CodingBootcamp(2)github(2)wecode 6๊ธฐ(2)์ฝ”๋”ฉํ•™์›(2)enemyrain(2)html(2)children-React(1)display-none(1)visibility-hidden(1)JavaScript์—์„œ class๋ถ€๋ฅด๊ธฐ(1)opacity(1)Slick(1)์›น ๊ตฌ๋™ ๊ตฌ์กฐ(1)flex box froggy(1)bind(1)Sass(1)float(1)setState(1)API(1)ํšŒ๊ณ ๋ก(1)๋น„๋™๊ธฐ(1)class(1)์ƒํ™œ์ฝ”๋”ฉ(1)Flex(1)form(1)arrow function(1)destructuring(1)State(1)React Context(1)componentDidMount(1)Fetch(1)ajax(1){...props}(1)์†์„ฑํผํŠธ๋ฆฌ๊ธฐ(1)๊ฐ์ฒด๋กœ ์„ค์ •๊ฐ’ ๋„ฃ๊ธฐ(1)2์ฐจ ํ”„๋กœ์ ํŠธ(1)styled components js์—์„œ ์ดˆ๊ธฐ์„ธํŒ…(1)ts styled components(1)์ฝ”๋”ฉ ํ•™์›(1)lifecycle ์ƒ๋ช…์ฃผ๊ธฐ(1)๋กœ์ปฌ์—์„œ buildํ™”๋ฉด ๋„์šฐ๊ธฐ(1)build์‹œ ๋ฌธ์ œ ํ•ด๊ฒฐ ํ•˜๊ธฐ(1)๋ฏธ๋””์–ด์ฟผ๋ฆฌ(1)Table(1)๋ณ€์ˆ˜(1)Context API(1)life cycle(1)๋™๊ธฐ(1)react unit test(1)inline block(1)export(1)children(1)li(1)git flow(1)css๋ ˆ์ด์•„์›ƒ(1)์ฝ”๋”ฉ ๋ถ€ํŠธ์บ ํ”„(1)๋‚ด์šฉ์ด ๊ธธ๋ฉด... ์ฒ˜๋ฆฌ(1)๊ฐœ๋ฐœ์ž๋„๊ตฌ(1)text overflow(1)slick-slider(1)coding boot camp(1)์Šคํƒ€์ผ ์‰์–ด(1)1์ฐจ ํ”„๋กœ์ ํŠธ(1)์œ„ํƒ€์ผ์‰์–ด(1)codesandbox(1)๊ฐฏ์ˆ˜ ๋Š˜๋ฆฌ๊ธฐ(1)hover(1)์žฅ๋ฐ”๊ตฌ๋‹ˆ(1)์ถฉ๋Œ(1)element์ˆจ๊ธฐ๊ธฐ(1)mok data(1)

build ์ƒํƒœ ๋ณด๊ธฐ

aws์„œ๋ฒ„ ๋„์›Œ์„œ ๋ดค๋”๋‹ˆ ๋‚ด๊ฐ€ ๋งŒ๋“  ํ™”๋ฉด์—์„œ css๋ฅผ ๋ถˆ๋Ÿฌ์˜ค์ง€ ๋ชปํ•˜๋Š”๊ฑธ ๋ณด๊ณ  ์•ฝ๊ฐ„ ์ถฉ๊ฒฉ์Šค..๊ธ‰ํ•˜๊ฒŒ ํ•ด๊ฒฐํ•ด๋ณด๋ ค๊ณ  ํ–ˆ๋Š”๋ฐ ๊ฐ€์žฅ ํฐ ์›์ธ์€ index.html์„ ๊ฑด๋“œ๋ ธ์—ˆ๋˜ ๊ฒƒ์ด๋‹ค. ๋‘ ๋ฒˆ์งธ๋Š” ์ ˆ๋Œ€๊ฒฝ๋กœ๋กœ ๋งŒ๋“ค์–ด๋†จ์—ˆ๋Š”๋ฐ ๋ฐฑ์—”๋“œ์—์„œ ์ƒ๋Œ€๊ฒฝ๋กœ๋กœ ์žก์•„์•ผ ํ•œ๋‹ค๊ณ  ํ•ด์„œ ์ด ๋ฌธ์ œ ํ•ด๊ฒฐํ•˜๋ฉด

์–ด์ œ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€

react์˜ lifecycle ์ƒ๋ช…์ฃผ๊ธฐ

์ด ์„ธ๊ฐ€์ง€ ์นดํ…Œ๊ณ ๋ฆฌ => ๋งˆ์šดํŠธ, ์—…๋ฐ์ดํŠธ, ์–ธ๋งˆ์šดํŠธ๋งˆ์šดํŠธ: ํŽ˜์ด์ง€์— ์ปดํฌ๋„ŒํŠธ๊ฐ€ ๋‚˜ํƒ€๋‚จ์–ธ๋งˆ์šดํŠธ: ํŽ˜์ด์ง€์—์„œ ์ปดํฌ๋„ŒํŠธ๊ฐ€ ์‚ฌ๋ผ์ง์นดํ…Œ๊ณ ๋ฆฌ ๋ณ„๋กœ ์‚ดํŽด๋ณด๊ธฐ1.๋งˆ์šดํŠธDOM์ด ์ƒ์„ฑ๋˜๊ณ  ์›น ๋ธŒ๋ผ์šฐ์ € ์ƒ์— ๋‚˜ํƒ€๋‚˜๋Š” ๊ฒƒ์€ ๋งˆ์šดํŠธ๋ผ๊ณ  ํ•œ๋‹ค.๋งˆ์šดํŠธ ํ•  ๋•Œ ํ˜ธ์ถœ๋˜๋Š” ๋ฉ”์†Œ๋“œ๋Š”์ปดํฌ๋„ŒํŠธ ๋งŒ๋“ค๊ธฐ -

2020๋…„ 5์›” 17์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€

light-weight ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ์‚ฌ์šฉํ•˜๊ธฐ

์ตœ๊ทผ ์ž‘์—…ํ•˜๊ณ  ์žˆ๋Š” ํŽ˜์ด์ง€์—์„œ light-weight chart๋ผ๋Š” ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์‚ฌ์šฉํ–ˆ๋‹ค. ๋งค์šฐ ๊ฐ€๋ณ๊ณ  ๊ฐ„๊ฒฐํ•˜๋ฉฐ ์‚ฌ์šฉ๋ฒ•๋„ ์–ด๋ ต์ง€ ์•Š๋‹ค.google์— lightweight-chart๋ฅผ ๊ฒ€์ƒ‰ํ•˜๋ฉด TradingViewํŽ˜์ด์ง€์—์„œ ์ด ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์— ๋Œ€ํ•ด์„œ ์‚ดํŽด๋ณผ ์ˆ˜ ์žˆ๋‹ค.์›ํ•˜๋Š”

2020๋…„ 5์›” 10์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€

ts์—์„œ styled components reset, import์—†๋Š” ๋ฐ˜์‘ํ˜•

npm install styled-components @types/styled-componentsnpm install styled-resetsrc/styles/GlobalStyles.ts์จ์ฃผ๊ธฐ.src/styles/theme.ts๋˜,src/styles/theme-comp

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

js์—์„œ styled components reset, import์—†๋Š” ๋ฐ˜์‘ํ˜•

npm install --save styled-componentsnpm install --save styled-reset

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

์œ„์ฝ”๋“œ ํ›„๊ธฐ ๋ฐ ํšŒ๊ณ 

(์ด ๊ธ€์€ ์œ„์ฝ”๋“œ 6๊ธฐ ํ”„๋ก ํŠธ์—”๋“œ์˜ ํ›„๊ธฐ๋กœ, ์œ„์ฝ”๋“œ ๊ณผ์ •์— ๋Œ€ํ•ด์„œ ํ”„๋ก ํŠธ์—”๋“œ ์„ค๋ช…์ด ๋Œ€๋ถ€๋ถ„ ์ž…๋‹ˆ๋‹ค.)when & where?2020.01.28 ~ 2020.04.17 ์•ฝ 12์ฃผ ๋™์•ˆ ์ง„ํ–‰๋˜์—ˆ๋˜ ์œ„์ฝ”๋“œ 6๊ธฐ. ์žฅ์†Œ๋Š” ์„ ๋ฆ‰์—ญ 10๋ฒˆ ์ถœ๊ตฌ์—์„œ 7๋ถ„์ •๋„ ๊ฑธ์œผ๋ฉด ๋‚˜์˜ค๋Š” ์„ ๋ฆ‰์—ญ

2020๋…„ 4์›” 26์ผ
ยท
2๊ฐœ์˜ ๋Œ“๊ธ€

์œ ๋‹›ํ…Œ์ŠคํŠธ(snap, enzyme)

์œ ๋‹› ํ…Œ์ŠคํŒ…์ด๋ž€? -- ๊ธฐ๋Šฅ๋ณ„๋กœ ์ชผ๊ฐœ๊ณ  ๊ทธ ๊ธฐ๋Šฅ ๋‚ด๋ถ€์—์„œ ์‚ฌ์šฉ๋˜๋Š” ํ•จ์ˆ˜๋„ ์ชผ๊ฐœ๊ณ  ์ชผ๊ฐœ์–ด ์•„์ฃผ ์ž‘์€ ๋‹จ์œ„๋กœ ํ…Œ์ŠคํŒ… ํ•˜๋Š”๊ฒƒ์„ ์˜๋ฏธํ•œ๋‹ค. ์šฐ๋ฆฌ๊ฐ€ ๋งŒ๋“  ์†Œํ”„ํŠธ์›จ์–ด๊ฐ€ ์ œ๋Œ€๋กœ ์ž‘๋™ ํ•˜๋Š”์ง€ ํ…Œ์ŠคํŒ…์„ ํ•˜๊ธฐ ์œ„ํ•ด์„œ ์“ฐ์ธ๋‹ค. ํ”„๋กœ์ ํŠธ๊ฐ€ ์ปค์ง„๋‹ค๋ฉด, ๋งค๋ฒˆ ์ฝ”๋“œ๋ฅผ ์ˆ˜์ •/์ƒˆ๋กœ ์ž‘์„ฑํ•  ๋•Œ๋งˆ๋‹ค

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

label tag

์œ„์ฝ”๋“œ 1์ฐจ ํ”„๋กœ์ ํŠธ ์ฝ”๋“œ๋ฅผ ๋‹ค์‹œ ๋ณด๋‹ค๋ณด๋‹ˆ label tag์— ๋Œ€ํ•ด ๊ณต๋ถ€ํ•˜๊ณ  ์‹ถ์–ด์ ธ์„œ ๋„์ ๋„์ .. ์šฐ์„  label์€ html ์˜ tag์ค‘ ํ•˜๋‚˜์ด๋‹ค. ๊ณผ ์„ ์—ฐ๊ฒฐํ•˜๋ฉด ์ด์ ์ด ์žˆ๋‹ค. ์‹œ๊ฐ์ ์ธ ๊ฒƒ ๋ฟ๋งŒ ์•„๋‹ˆ๋ผ ํ”„๋กœ๊ทธ๋ž˜๋ฐ์ ์œผ๋กœ๋„ ๊ด€๋ จ์ด ์žˆ๋‹ค. ์˜ˆ๋ฅผ ๋“ค์–ด, screen

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

[+74]์Šคํ”„๋ ˆ๋“œ ์†์„ฑ

props๊ฐ์ฒด๊ฐ€ ์ด๋ฏธ ์žˆ๊ณ  JSX๋กœ ์ „๋‹ฌํ•˜๋ ค๋Š” ๊ฒฝ์šฐ ... ์Šคํ”„๋ ˆ๋“œ ์—ฐ์‚ฐ์ž๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ props๊ฐ์ฒด๋ฅผ ์ „๋‹ฌํ•  ์ˆ˜ ์žˆ๋‹ค.ํ•จ์ˆ˜ App1๊ณผ ํ•จ์ˆ˜ App2์˜ ๊ตฌ์„ฑ์š”์†Œ๋Š” ๋™์ผํ•˜๋‹ค.

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

[+73][๊ธฐ์—…ํ˜‘์—…]hooks api reference

hooks api reference ๊ณต๋ถ€

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

[+73] React context (Redux๋ž‘ ๋น„์Šท)

contextcontext๋ฅผ ์“ฐ๋ฉด ์ปดํฌ๋„ŒํŠธ ์žฌ์‚ฌ์šฉ์ด ์–ด๋ ค์›Œ>๋–„๋กœ๋ฅธ ์ปดํฌ๋„ŒํŠธ ํ•ฉ์„ฑ์ด ์ข‹์€ ๋Œ€์•ˆ์ด ๋  ์ˆ˜๋„.์š”๋กœ์ฝ”๋กฌ

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

[+67][๊ธฐ์—…ํ˜‘์—…]useRef

์œ„์ฝ”๋“œ ์‹œ์ž‘ ์ดํ›„ 2์ฐจ ํ”„๋กœ์ ํŠธ ๋๋‚  ๋•Œ ๊นŒ์ง€ ์—ฌ๋Ÿฌ ๊ฐœ๋…๋“ค์— ๋Œ€ํ•ด ์ž์„ธํ•˜๊ฒŒ ๊ณต๋ถ€ํ•˜๊ธฐ๋ณด๋‹ค ๋‚˜์ค‘์— ๊ณต๋ถ€ํ•ด์•ผ์ง€ ํ•˜๊ณ  ๋ฏธ๋ฃจ๋Š” ๊ฐœ๋…๋“ค์ด ๋ช‡๊ฐ€์ง€ ์žˆ์—ˆ๋‹ค. ๊ธฐ์—…ํ˜‘์—…์„ ํ•˜๋‹ค๋ณด๋‹ˆ ๊ฒฐ๊ตญ ๋‚ด๊ฐ€ ๊ณต๋ถ€ํ•˜์ง€ ์•Š์•˜๋˜ ๋ถ€๋ถ„์ด ๋ญ๋ฅผ ํ•˜๋ ค๊ณ  ํ•  ๋•Œ๋งˆ๋‹ค ๊ฑธ๋ ค์„œ ๊ณต๋ถ€ํ•˜๊ณ  ์ด๋ฒˆ์ฃผ์—๋Š” ๊ทธ๋Ÿฐ ๊ฐœ๋…๋“ค์„ ์ •๋ฆฌํ•˜๊ณ 

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

์ด๋ฒคํŠธ ๋ฒ„๋ธ”๋ง

์ด๋ฒคํŠธ ๋ฒ„๋ธ”๋ง ๊ณต๋ถ€ํ•˜๊ธฐ

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

๋น„๊ตฌ์กฐํ™” ํ• ๋‹น

์ด๋Ÿฐ๊ฑฐ ์žˆ์„ ๋•Œ์—ฌ๊ธฐ์—์„œ ๊ถ๊ธˆํ•œ ์ 1\. poiData๋ฅผ ๋„ฃ๋Š”๋ฐ ์ค‘๊ด„ํ˜ธ๊ฐ€ ์™œ ํ•„์š”?2\. ๋น„๊ตฌ์กฐํ™” ํ• ๋‹น์€ ์–ธ์ œ ์“ฐ๋Š”๊ฐ€?

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

[+62][๊ธฐ์—…ํ˜‘์—…]ajax/axios

Asynchronous Javascript And Xml(๋น„๋™๊ธฐ์‹ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์™€ xml) ์˜ ์•ฝ์ž.JavaScript์˜ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ์ค‘ ํ•˜๋‚˜.Javascript๋ฅผ ์‚ฌ์šฉํ•œ ๋น„๋™๊ธฐ ํ†ต์‹ . ํด๋ผ์ด์–ธํŠธ์™€ ์„œ๋ฒ„๊ฐ„์˜ XML ๋ฐ์ดํ„ฐ(๋ธŒ๋ผ์šฐ์ €๊ฐ€ ๊ฐ€์ง€๊ณ  ์žˆ๋Š” XMLHttpRequest

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

[+61][๊ธฐ์—…ํ˜‘์—…] development branch์— push ํ•˜๊ธฐ

์ „์— ์“ด git flow ๊ฒŒ์‹œ๊ธ€์„ ๊ธฐ์–ตํ•˜๋Š”๊ฐ€?์ด์ œ๋Š” ์‹ค๋ฌด์ดˆ๊ธฐ ๊ณผ์ •์„ ๊ธฐ๋กํ•˜๊ณ ์ž ํ•œ๋‹ค.git clone ํ•ด๋‹นgit ์ฃผ์†Œgit checkout developmentgit checkout -b feature/create-header(์˜ˆ์‹œ์ฒ˜๋Ÿผ ๊ธฐ๋Šฅ์ด๋ฆ„๋ณ„๋กœ ๋”ฐ๊ธฐ + (-)์ผ์ง€

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

[+61] [๊ธฐ์—…ํ˜‘์—…] import svg

์œ„์ฝ”๋“œ 9์ฃผ์ฐจ, ๊ธฐ์—…ํ˜‘์—…์„ ์‹œ์ž‘ํ•˜๊ณ  ํŽ˜์ด์ง€๋ฅผ ๋งŒ๋“ค๊ธฐ ์‹œ์ž‘ํ•˜๋Š”๋ฐ1\. next.js๋ฅผ ์“ฐ๊ณ 2\. next.js์™€ ์ž˜ ๋งž๋Š”๋‹ค๋Š” jsx style๋กœ ์“ด๋‹ค.3\. ํ•œ ํŽ˜์ด์ง€ ๋‹น 2๋ช…์”ฉ ์ง์„ ์ง€์–ด ํŽ˜์ด์ง€๋ฅผ ๋งŒ๋“ ๋‹ค.๋ผ๋Š” ์ง„ํ–‰์‚ฌํ•ญ์ด ์žˆ์—ˆ๋‹ค.svg import ์‹œํ‚ค๊ธฐ.svg๋ž€?ํ™•์žฅ

2020๋…„ 3์›” 28์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€

[+55] 2์ฐจ ํ”„๋กœ์ ํŠธ๋ฅผ ๋งˆ๋ฌด๋ฆฌ ์ง€์œผ๋ฉฐ

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

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

[+51]typescript์—์„œ React-Redux ์‚ฌ์šฉํ•˜๊ธฐ

npm install reduxsrc์— store.js ๋ผ๋Š” ํŒŒ์ผ ์ƒ์„ฑsrc ๋ฐ‘์— container๋งŒ๋“ค์–ด์„œ component๋“ค ๊ฐ์Œ€ ํŒŒ์ผ๋“ค ๋งŒ๋“ค์ž.1\. ํŒŒ์ผ์„ ๋งŒ๋“ค์–ด์„œ component๋ฅผ import์‹œ์ผœ์„œ return ์‹œํ‚จ๋‹ค.2\. container๋กœ ๊ฐ์‹ผ ์ปดํฌ๋„ŒํŠธ

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

[ +50 ]git flow

git์ด ์ œ๊ณตํ•˜๋Š”๊ฒŒ ๊ฐ™์•„๋„ ํšŒ์‚ฌ๋งˆ๋‹ค ์‚ฌ์šฉํ•˜๋Š” ๋ฐฉ๋ฒ•์ด ๋‹ค๋ฅด๋‹ค.git flow๋ž€git flow๋Š” branch๊ฐ€ ์ด 5๊ฐœmasterdevelopfeaturereleasehotfix๋ฐฐํฌ๋ , ๋ฐฐํฌ๋œ ์ฝ”๋“œ๋Š” master์— ์žˆ๋‹ค.develop ๊ฐ€์žฅ ๊ธฐ์ค€์ด ๋˜๋Š” branch๋Š” mas

2020๋…„ 3์›” 17์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€