profile
Junior Front-End Developer๐Ÿ˜Ž
ํƒœ๊ทธ ๋ชฉ๋ก
์ „์ฒด๋ณด๊ธฐ (52)React(15)JavaScript(12)WeCode(5)typescript(4)git(4)CSS(4)Map(3)๊ณต๋ถ€(3)์•Œ๊ณ ๋ฆฌ์ฆ˜(3)์ฝ”๋“œ์นดํƒ€(3)github(3)style component(3)String(2)html(2)JOIN(2)์œ„์ฝ”๋“œ(2)Event(2)ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ(2)Props(2)DOM(2)ํ”„๋กœ์ ํŠธ(2)ES6(2)component(2)branch(2)promise(1)absolute(1)API(1)link(1)npm(1)indexOf(1)relative(1)GET(1)POST(1)git commit(1)git push(1)querySelector(1)checked(1)git rebase(1)library(1)radio(1)git master(1)Symbol(1)์ž์ฃผ์‚ฌ์šฉํ•˜๋Š” ์ •๊ทœ์‹(1)CRA(1)git status(1)for๋ฌธ(1)mac(1)๋งˆ์šดํŠธ(1)boolean(1)include(1)์ตœ๋Œ€๊ฐ’๊ตฌํ•˜๊ธฐ(1)๊ฐ์ฒด(1)๋Œ“๊ธ€์ฐฝ(1)router(1)ํ”„๋ก ํŠธ์—”๋“œ(1)Arrow_Function(1)null(1)useEffect(1)ํ™˜๊ฒฝ๋ณ€์ˆ˜(1)Side Effect(1)fixed(1)mock data(1)git init(1)js(1)number(1).scss(1)defaultProps(1)node.js(1)ํƒ€์ž…์ข…๋ฅ˜(1)ref(1)์Šคํ”„๋ ˆ๋“œ๋ฌธ๋ฒ•(1)useParams(1)nesting(1)UI(1)method(1)login(1)git log(1)cli(1)Node(1)์›ํ‹ฐ๋“œ ํ”„๋ฆฌ์˜จ๋ณด๋”ฉ(1)ํ”„๋ก ํŠธ์—”๋“œ ํ”„๋ฆฌ์˜จ๋ณด๋”ฉ(1)abs(1)interface(1)์ธํ„ฐํŽ˜์ด์Šค(1)arrow(1)config(1)key(1)javascipr(1)instagram(1)์‚ผํ•ญ์—ฐ์‚ฐ์ž(1)State(1)useRef(1)Promis(1)inline block(1)body(1)Sass(1)button(1)git branch(1)API ๋ณ€์ˆ˜(1)hook(1)์ •๊ทœ์‹(1)์Šคํ”„๋ ˆ๋“œ ์—ฐ์‚ฐ์ž(1)type(1)storage(1)block(1)wanted(1)๋ฐ์ดํ„ฐํƒ€์ž…(1)inline(1)console(1)reverse(1)์ž๊ธฐ์†Œ๊ฐœ(1)master(1)array(1)๋กœ๊ทธ์ธ ์ •๊ทœ์‹(1)Fetch(1)addEventListener(1)spa(1)display(1)style(1)render(1)git add .(1)JSX(1)react.js(1)Advanced Router(1)semantic web(1)useNavigate(1)clean up effect(1)ํšŒ์›๊ฐ€์ž… ์ •๊ทœ์‹(1)์—…๋ฐ์ดํŠธ(1)์›์‹œ(1)grid(1)attrs(1).then()(1)ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ ํ•จ์ˆ˜(1)๋ธŒ๋žœ์น˜(1)git clone(1)function(1)์ •๊ทœํ‘œํ˜„์‹(1)์ฐธ์กฐ(1)undefined(1)1์ฐจํ”„๋กœ์ ํŠธ(1)mixin(1)ํ•จ์ˆ˜์ •์˜(1)object(1)์ž์œ ํ˜•์‹(1)web(1)position(1)math(1)์ƒ์ˆ˜๋ฐ์ดํ„ฐ(1)semantic tag(1)
post-thumbnail

React - defaultProps

defaultProps React์—์„œ props๋ฅผ ๋ฐ›์•„์˜ค๋Š” ๋ฐฉ๋ฒ•์€ ๊ฐ„๋‹จํ•ฉ๋‹ˆ๋‹ค. ์ผ

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

TypeScript - React Props ๊ตฌ์กฐ๋ถ„ํ•ด ํ• ๋‹น ์ „๋‹ฌ๋ฐฉ๋ฒ•

main.tsx ProductList.tsx

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

React - ๋ฒ„ํŠผํด๋ฆญ์œผ๋กœ ์›ํ•˜๋Š” ์ปดํฌ๋„ŒํŠธ ๋ Œ๋”๋งํ•˜๊ธฐ

๋ฒ„ํŠผํด๋ฆญ์œผ๋กœ ์›ํ•˜๋Š” ์ปดํฌ๋„ŒํŠธ ๋ Œ๋”๋งํ•˜๋Š” ๋ฐฉ๋ฒ•

2022๋…„ 1์›” 26์ผ
ยท
7๊ฐœ์˜ ๋Œ“๊ธ€
post-thumbnail

React - useRef()

useRef๋ž€ React์—์„œ ์ œ๊ณตํ•˜๋Š” hook ์ค‘์— ํ•˜๋‚˜์ด๋ฉฐDOM์— ์ ‘๊ทผ ํ•  ์ˆ˜ ์žˆ๋„๋ก ํ•˜๋Š” ๊ธฐ๋Šฅ์„ ๊ฐ€์ง„ hook์ด๋ผ๊ณ  ๋ณด๋ฉด ๋œ๋‹ค.React์—์„œ ์ œ๊ณต์„ ํ•ด์ฃผ๋Š” hook์ด๊ธฐ ๋•Œ๋ฌธ์—์ปดํฌ๋„ŒํŠธ ์ตœ์ƒ๋‹จ์— react์™€ ๊ฐ™์ด import๋ฅผ ํ•ฉ๋‹ˆ๋‹ค.์ปดํฌ๋„ŒํŠธ ๋‚ด ์ƒ๋‹จ์— useRef(

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

Styled-components ์Šคํƒ€์ผ ์žฌ์‚ฌ์šฉ

์Šคํƒ€์ผ๋ง์„ ํ•˜๊ฒŒ๋˜๋ฉด ์ผ์ •ํ•œ ์Šคํƒ€์ผ์„ ๋ฐ˜๋ณตํ•˜๊ฒŒ ์‚ฌ์šฉ ๋  ๊ฒฝ์šฐ๊ฐ€ ์žˆ๋‹ค.์˜ˆ์‹œ๋กœ ์•„๋ž˜ ์ฝ”๋“œ๋Š” ์™„์ „ํžˆ ๋™์ผํ•œ ์Šคํƒ€์ผ์ด ์ ์šฉ๋˜์–ด ์žˆ๋‹ค.์ด๋ ‡๊ฒŒ ์™„์ „ํžˆ ๋˜‘๊ฐ™์€ ์Šคํƒ€์ผ์„ ์‚ฌ์šฉํ•ด์•ผ ํ•œ๋‹ค๋ฉด ๊ฐ™์€ ์ฝ”๋“œ์˜ ์–‘์ด 2๋ฐฐ๊ฐ€ ๋œ๋‹ค...์ฝ”๋“œ์˜ ์–‘์„ ์ค„์ด๊ธฐ ์œ„ํ•ด style-component ์—์„œ๋Š” ๋˜‘๊ฐ™

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

React - ์ปดํฌ๋„ŒํŠธ ์žฌ์‚ฌ์šฉ

๋ฆฌ์•กํŠธ์—์„œ ์ปดํฌ๋„ŒํŠธ๋ž€ ์žฌ์‚ฌ์šฉ์ด ๊ฐ€๋Šฅํ•œ UI๊ตฌ์„ฑ ๋‹จ์œ„๋‹ค!ํ•ต์‹ฌ ํ‚ค์›Œ๋“œ๋Š” ์žฌ์‚ฌ์šฉ์ด๋‹ค!UI๊ตฌ์„ฑ ๋‹จ์œ„๋ผ๊ณ  ํ•˜์ง€๋งŒ ์–ด๋–ป๊ฒŒ ์žฌ์‚ฌ์šฉ์„ ํ•  ๊ฒƒ์ธ๊ฐ€?๋ฐ”๋กœ props ๋ฅผ ์ด์šฉํ•ด์„œ ๋™์ผํ•œ ์ปดํฌ๋„ŒํŠธ์— ๋ณ€ํ™”๋ฅผ ์ค„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค!๋™์ผํ•˜๊ฒŒ ์‚ฌ์šฉ๋  UI๋ฅผ ์ œ์ž‘ํ•ฉ๋‹ˆ๋‹ค๋ถ€๋ชจ์—๊ฒŒ ์ „๋‹ฌ ๋ฐ›๋Š” props๋ฅผ ๊ตฌ์กฐ

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

React - useParams()

Advanced Router

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

React - Styled component ์‹œ์ž‘ํ•˜๊ธฐ

๋ฆฌ์•กํŠธ์—์„œ ์Šคํƒ€์ผ์„ ์ค„ ์ˆ˜ ์žˆ๋Š” ๋ฐฉ๋ฒ•์ด ๋” ์žˆ๋‹ค.Style Component ๋ฅผ ์‚ฌ์šฉ ํ•˜๋Š” ๋ฐฉ๋ฒ•์ด๋‹ค!SASS๋„ ์ข‹์•˜์ง€๋งŒ Style Component ๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ์ด์œ ๊ฐ€ ์žˆ๋‹ค.ํด๋ž˜์Šค ์ด๋ฆ„์˜ ์ค‘์ฒฉ์„ ์ค„์—ฌ์คŒattribute ์ถ”๊ฐ€๊ฐ€ ๊ฐ€๋Šฅ์Šคํƒ€์ผ์— props๋ฅผ ์ ์šฉ ํ•  ์ˆ˜ ์žˆ๋‹คS

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

React - config (ํ™˜๊ฒฝ๋ณ€์ˆ˜)

์ด๋ฒˆ 1์ฐจ ํ”„๋กœ์ ํŠธ๋ฅผ ํ•˜๋ฉด์„œ ์ƒˆ๋กœ ๋ฐฐ์šด๊ฒƒ์ด ์žˆ๋‹ค.๋ฐ”๋กœ API ์ฃผ์†Œ๋ฅผ JavaScriptํŒŒ์ผ์„ ์ƒˆ๋กœ ๋งŒ๋“ค์–ด ๋ณ€์ˆ˜์ฒ˜๋ฆฌํ•ด์„œ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์ด๋‹ค.์ด๋ฒˆ ํ”„๋กœ์ ํŠธ๋Š” 3๋ช…์˜ ๋ฐฑ์—”๋“œ ๋ถ„๋“ค์ด ์žˆ์–ด ์„œ๋ฒ„๋ฅผ ํ•˜๋‚˜๋กœ ํ•ฉ์น˜๊ธฐ ์ „ ๊นŒ์ง€3๋ช…์˜ API ์ฃผ์†Œ๋ฅผ ๋ฐ”๊พธ๋ฉด์„œ ๋ฐ์ดํ„ฐ๋ฅผ ๋งž์ถฐ๋ด์•ผ ํ–ˆ๋‹ค.์ด ์–ผ๋งˆ๋‚˜

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

React - SASS

SASS ๐ŸŽจ > sass๋Š” css ์ „ ์ฒ˜๋ฆฌ๊ธฐ ์ž…๋‹ˆ๋‹ค. sass ๋ฌธ๋ฒ•์ด css๋กœ ๋ณ€ํ™˜ํ•ด์ฃผ๋Š” ๊ฒƒ! nesting, mixin, ๋ณ€์ˆ˜ ๋ฅผ ์ด์šฉํ•ด ์Šคํƒ€์ผ์‹œํŠธ์˜ ์œ ์ง€๋ณด์ˆ˜์™€ ๊ฐ€๋…์„ฑ์„ ์ข‹๊ฒŒ ๋งŒ๋“ค์–ด ์ค๋‹ˆ๋‹ค. ์„ค์น˜๋ฐฉ๋ฒ• --save ๋ฅผ ์ ๋Š”์ด์œ ๋Š” package.json ์„ค์น˜๋œ ํŒจํ‚ค

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

React - ์ƒ์ˆ˜๋ฐ์ดํ„ฐ, Mock Data

์ƒ์ˆ˜๋ฐ์ดํ„ฐ ๐Ÿ‘จโ€๐Ÿ’ป ์ƒ์ˆ˜๋ฐ์ดํ„ฐ๋ž€ ๋ณ€ํ•˜์ง€ ์•Š๋Š” ๋ฐ์ดํ„ฐ, UI ๊ตฌ์„ฑ์— ํ•„์š”ํ•˜์ง€๋งŒ ๋™์ ์œผ๋กœ ๋ณ€ํ•˜์ง€ ์•Š์•„์„œ ๋ฐฑ์—”๋“œ API๋“ฑ์„ ํ†ตํ•ด์„œ ๊ฐ€์ ธ์˜ฌ ํ•„์š”๊ฐ€ ์—†๋Š” ์ •์ ์ธ ๋ฐ์ดํ„ฐ 1๏ธโƒฃ ์ƒ์ˆ˜๋ฐ์ดํ„ฐ๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ์ด์œ  ๋ฐ˜๋ณต์ ์ธ ๊ตฌ์กฐ๊ฐ€ ๋ณด์ผ ๋•Œ ๋‹ฌ๋ผ์ง€๋Š” ๋ถ€๋ถ„๋“ค์˜ ๋ฐ์ดํ„ฐ๋ฅผ ๋ฐฐ์—ดํ˜•ํƒœ๋กœ ๋ถ„๋ฆฌ์‹œ์ผœ

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

React - useEffect()

์–ด๋–ค ํ•จ์ˆ˜๊ฐ€ input / output์ด์™ธ์˜ ๋‹ค๋ฅธ ๊ฐ’์„ ์กฐ์ž‘ํ•œ๋‹ค๋ฉด, ์ด ํ•จ์ˆ˜๋Š”Side Effect๊ฐ€ ์žˆ๋‹ค๊ณ  ํ‘œํ˜„ํ•ฉ๋‹ˆ๋‹ค!ํ•จ์ˆ˜์ปดํฌ๋„ŒํŠธ์—์„œ๋Š” ์™ธ๋ถ€์„ธ๊ณ„์— ์˜ํ–ฅ์„ ์ฃผ๋Š” ์–ด๋– ํ•œ ํ–‰์œ„์ž…๋‹ˆ๋‹ค.๋Œ€ํ‘œ์ ์œผ๋กœ Data Fetching, DOM์— ์ง์ ‘ ์ ‘๊ทผ(ex. Event Listener

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

React - ์ธ์Šคํƒ€๊ทธ๋žจ ๋Œ“๊ธ€์ฐฝ ๊ตฌํ˜„ํ•˜๊ธฐ

๋Œ“๊ธ€์ฐฝ ๊ตฌํ˜„ํ•˜๊ธฐ๐Ÿ˜Ž ์šฐ์„  ์ž์‹ ์ด ์ž‘์—…ํ•ด์•ผ ๋  ํฐ ๊ทธ๋ฆผ์„ ์•Œ๊ณ ์žˆ๋Š” ๊ฒƒ์ด ์ข‹๋‹ค๊ณ  ์ƒ๊ฐํ•œ๋‹ค! ๋Œ“๊ธ€์ฐฝ์„ ๊ตฌํ˜„ ํ•˜๋ ค๋ฉด ์–ด๋–ค ์ž‘์—…์„ ํ•ด์•ผํ• ๊นŒ! ๋Œ“๊ธ€์ž…๋ ฅ ๊ฐ’ ์ €์žฅ --> ๋Œ“๊ธ€์ž…๋ ฅ๊ฐ’ ์ €์žฅ๋  ๊ณณ ์ง€์ • --> ์—”ํ„ฐ,ํด๋ฆญ์‹œ ์ž…๋ ฅ๊ฐ’ ์ถœ๋ ฅ์žฅ์†Œ๋กœ ์ด๋™--> ๋Œ“๊ธ€์ถœ๋ ฅ ๋Œ“๊ธ€์ž…๋ ฅ ๊ฐ’ ์ €์žฅ ๋Œ“

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

React - Router ์‹œ์ž‘ํ•˜๊ธฐ

์šฐ์„  SPA ๋ผ๋Š” ๊ฐœ๋…์„ ์•Œ์•„์•ผํ•œ๋‹ค!SPA๋Š” single page application ๋Š” ํ•˜๋‚˜์˜ ํŽ˜์ด์ง€๋กœ ๊ตฌ์„ฑ๋œ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์ž…๋‹ˆ๋‹ค.์ด์ „ ์›นํŽ˜์ด์ง€ ๊ฐ™์€ ๊ฒฝ์šฐ ํŽ˜์ด์ง€์˜ ๊ฐœ์ˆ˜๋งˆ๋‹ค HTML ํŒŒ์ผ์ด ์กด์žฌํ–ˆ์ง€๋งŒSPA๋กœ ์ž‘์—…๋œ ์›นํŽ˜์ด์ง€๋Š” ๋‹จ ํ•œ ๊ฐœ์˜ HTML๋กœ ๊ตฌ์„ฑ๋˜์–ด์žˆ์Šต๋‹ˆ๋‹ค!

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

React - ์‹œ์ž‘ํ•˜๊ธฐ

React๐Ÿ‘จโ€๐Ÿ’ป ํ”„๋ก ํŠธ์—”๋“œ ๊ธฐ์ˆ ์—์„œ ๋น ์งˆ ์ˆ˜ ์—†๋Š” ๊ธฐ์ˆ  React ๋ฅผ ์ตํžˆ๋Š” ์ฒซ ๋‚ ์ด๋‹ค! React๋Š” Javascript ์‚ฌ์šฉ์ž ์ธํ„ฐํŽ˜์ด์Šค (UI) ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ๋ผ๊ณ  ๋ณด๋ฉด ๋œ๋‹ค. ํ”„๋ ˆ์ž„์›Œํฌ์™€ ์ฐฉ๊ฐ ํ•  ์ˆ˜ ์žˆ์ง€๋งŒ ์—„์—ฐํžˆ ๋‹ค๋ฅด๋‹ค.

2021๋…„ 11์›” 16์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€