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

Styled-componets - ๋ฏธ๋””์–ด ์ฟผ๋ฆฌ

๋ฏธ๋””์–ด์ฟผ๋ฆฌ ๋ฏธ๋””์–ด์ฟผ๋ฆฌ ์‚ฌ์šฉ๋ฐฉ๋ฒ• -> customStyled component ๋‚ด์—์„œ ํ˜ธ์ถœ ex) ${mediaQueries(FROMTABLETTO_PHONE)} { ${(props) => (props.theme.width )}; }

5์ผ ์ „
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
post-thumbnail

Next - getServerSideProps

ํŽ˜์ด์ง€์—์„œ getServerSideProps ํ•จ์ˆ˜๋ฅผ ๋‚ด๋ณด๋‚ด๋ฉด ๋ฐ˜ํ™˜๋œ ๋ฐ์ดํ„ฐ๋ฅผ ์ด์šฉํ•ด ํŽ˜์ด์ง€๊ฐ€ ์š”์ฒญ ๋ฐ›์„๋•Œ ๋งˆ๋‹ค ํ˜ธ์ถœ๋˜์–ด pre-renderingํ•ฉ๋‹ˆ๋‹ค.๊ธฐ๋ณธ์ ์œผ๋กœ next๋Š” ๋ชจ๋“  ํŽ˜์ด์ง€๋ฅผ pre-renderํ•ฉ๋‹ˆ๋‹ค. ๊ฐ ํŽ˜์ด์ง€์— ๋Œ€ํ•ด ๋ฏธ๋ฆฌ HTML์„ ์ƒ์„ฑํ•ฉ๋‹ˆ๋‹ค. ๋” ๋‚˜์€

5์ผ ์ „
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
post-thumbnail

Next - Client side data fetching

ํด๋ผ์ด์–ธํŠธ ์ธก ๋ฐ์ดํ„ฐ ๊ฐ€์ ธ์˜ค๊ธฐ๋Š” ํŽ˜์ด์ง€์— SEO ์ธ๋ฑ์‹ฑ์ด ํ•„์š”ํ•˜์ง€ ์•Š๊ฑฐ๋‚˜ ๋ฐ์ดํ„ฐ๋ฅผ ๋ฏธ๋ฆฌ ๋ Œ๋”๋งํ•  ํ•„์š”๊ฐ€ ์—†๊ฑฐ๋‚˜ ํŽ˜์ด์ง€ ์ฝ˜ํ…์ธ ๋ฅผ ์ž์ฃผ ์—…๋ฐ์ดํŠธํ•ด์•ผ ํ•  ๋•Œ ์œ ์šฉํ•ฉ๋‹ˆ๋‹ค. ํŽ˜์ด์ง€์—์„œ ์ˆ˜ํ–‰ํ•˜๋ฉด ๋Ÿฐํƒ€์ž„์— ๋ฐ์ดํ„ฐ๋ฅผ ๊ฐ€์ ธ์˜ค๊ณ  ๋ฐ์ดํ„ฐ๊ฐ€ ๋ณ€๊ฒฝ๋˜๋ฉด ํŽ˜์ด์ง€ ๋‚ด์šฉ์ด ์—…๋ฐ์ดํŠธ๋ฉ๋‹ˆ๋‹ค.์ปดํฌ๋„ŒํŠธ์—์„œ

5์ผ ์ „
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
post-thumbnail

Next - getStaticProps

Next - ๊ณต์‹ ํ™ˆํŽ˜์ด์ง€ getStaticProps https://nextjs.org/docs/basic-features/data-fetching/get-static-props https://nextjs.org/docs/api-reference/data-fetchi

5์ผ ์ „
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
post-thumbnail

React - ๋ฆฌ์•กํŠธ ํ‹ฑํƒํ†  ๋งŒ๋“ค๊ธฐ(ํ•จ์ˆ˜ํ˜•)

ํ‹ฑํƒํ†  ๋งŒ๋“ค๊ธฐ > React ๊ณต์‹๋ฌธ์„œ ์ž์Šต์„œ์— ๋‚˜์™€์žˆ๋Š” ํ‹ฑํƒํ† ๋ฅผ ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ์™€ ํ•จ์ˆ˜ํ˜• ์ปดํฌ๋„ŒํŠธ๋กœ ์ž‘์—…ํ–ˆ์Šต๋‹ˆ๋‹ค. > > buildTool: React-Create-App style: styled-component type-check: TypeScript github :

7์ผ ์ „
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
post-thumbnail

React - ์Šคํฌ๋กค ํผ์„ผํŠธ ๊ตฌํ•˜๊ธฐ

์Šคํฌ๋กค ํผ์„ผํŠธ ๊ตฌํ•˜๊ธฐ > ์ด์ „ ๊ธ€์—๋Š” ์š”์†Œ์˜ ์ ˆ๋Œ€์œ„์น˜๋ฅผ ๊ตฌํ•˜๋Š” ๊ธ€์„ ์ ์—ˆ์Šต๋‹ˆ๋‹ค. ์ด๋ฒˆ์—๋Š” ํ˜„์žฌ ๋‚ด๊ฐ€ ์–ผ๋งˆ๋‚˜ ์Šคํฌ๋กค์„ ํ–ˆ๋Š”์ง€ ํผ์„ผํŠธ๋ฅผ ๊ตฌํ•˜๋Š” ๋ฐฉ๋ฒ•์ž…๋‹ˆ๋‹ค! > ( ์Šคํฌ๋กค ๋œ ๋†’์ด+ ๋ณด๊ณ ์žˆ๋Š”ํ™”๋ฉด(viewport)๋†’์ด ) / ์ „์ฒด๋ฌธ์„œ๋†’์ด * 100 ํ™œ์šฉํ•˜๊ธฐ Element

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

React - ์ปดํฌ๋„ŒํŠธ ์ ˆ๋Œ€์œ„์น˜ ์ฐพ๊ธฐ

์›น ํŽ˜์ด์ง€๋ฅผ ๋งŒ๋“ค๋‹ค ๋ณด๋ฉด ํ•ด๋‹น ์š”์†Œ์˜ ์ ˆ๋Œ€์œ„์น˜๋ฅผ ์ฐพ์•„์•ผ ํ•  ๋•Œ ์žˆ์Šต๋‹ˆ๋‹ค,์ ˆ๋Œ€์œ„์น˜๋ฅผ ์ด์šฉํ•ด ์Šคํƒ€์ผ์„ ๊พธ๋ฏธ๊ฑฐ๋‚˜ ๋กœ์ง์„ ๋งŒ๋“ค๋•Œ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.ํ•ด๋‹น ์š”์†Œ๊ฐ€ ์›น ํŽ˜์ด์ง€๋ฅผ ๊ธฐ์ค€์œผ๋กœํ•œ ์œ„์น˜์ž…๋‹ˆ๋‹ค.์Šคํฌ๋กค๋œ ์ปจํ…์ธ ์˜ ๊ธธ์ด + Viewport ์ƒ๋Œ€์ขŒํ‘œ๋ฅผ ๊ตฌํ•˜๋ฉด ์š”์†Œ์˜ ์ ˆ๋Œ€์œ„์น˜๋ฅผ

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

Styled - Switch๋ฌธ + TypeScript ํ™œ์šฉํ•œ ๋ชจ๋“ˆํ™”ํ•˜๊ธฐ

Styled-component + TypeScript >์ €๋Š” React, TypeScript ,Styled-componet ์ด ์„ธ๊ฐ€์ง€ ์กฐํ•ฉ์„ ๋งŽ์ด ์‚ฌ์šฉํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. Styled-component๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ์ด์œ ๋Š” ๋…์ž์ ์ธ ํด๋ž˜์Šค๋ฅผ ๋งŒ๋“ค์–ด ์Šคํƒ€์ผ ์ถฉ๋Œ์„ ๋ฐฉ์ง€ SASS์™€

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

JavaScript - ์ด๋ฒคํŠธ ๋ฃจํ”„, ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์‹ฑ๊ธ€์Šค๋ ˆ๋“œ

์ด๋ฒคํŠธ ๋ฃจํ”„๋Š” ๋ธŒ๋ผ์šฐ์ €๋‚ด์— ๋‚ด์žฅ๋œ ๊ธฐ๋Šฅ์ž…๋‹ˆ๋‹ค. Call Stack ๋‚ด์—์„œ ํ˜„์žฌ ์‹คํ–‰์ค‘์ธ task๊ฐ€ ์žˆ๋Š”์ง€ ๊ทธ๋ฆฌ๊ณ  Event Queue์— task๊ฐ€ ์žˆ๋Š”์ง€ ๋ฐ˜๋ณตํ•˜์—ฌ ํ™•์ธํ•ฉ๋‹ˆ๋‹ค.๋งŒ์•ฝ Call Stack์ด ๋น„์–ด์žˆ๋‹ค๋ฉด Event Queue ๋‚ด์˜ task๊ฐ€ Call Stack์œผ

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

JavaScript - ๋ ‰์‹œ์ปฌ์Šค์ฝ”ํ”„, ํด๋กœ์ €

๋ ‰์‹œ์ปฌ์Šค์ฝ”ํ”„ > ์Šค์ฝ”ํ”„๋ž€? ์‹๋ณ„์ž๊ฐ€ ์œ ํšจํ•œ ๋ฒ”์œ„์ž…๋‹ˆ๋‹ค. ์Šค์ฝ”ํ”„๋ฅผ ๊ตฌ๋ถ„ํ•ด๋ณด๋ฉด ๋‘๊ฐ€์ง€๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค. ์ „์—ญ ์Šค์ฝ”ํ”„ : ์ฝ”๋“œ ์–ด๋””์—์„œ๋“  ์ฐธ์กฐํ•  ์ˆ˜ ์žˆ๋Š” ๋ฒ”์œ„ ์ง€์—ญ ์Šค์ฝ”ํ”„ : ํ•จ์ˆ˜ ์ฝ”๋“œ ๋ธ”๋ก์ด ๋งŒ๋“  ์Šค์ฝ”ํ”„๋กœ ํ•จ์ˆ˜ ์ž์‹ ๊ณผ ํ•˜์œ„ ํ•จ์ˆ˜์—์„œ๋งŒ ์ฐธ์กฐํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜ ์ƒ์œ„

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

Web Browser - ์›น ๋ธŒ๋ผ์šฐ์ € ๋ Œ๋”๋ง ๊ณผ์ •

HTML, CSS, JavaScript๋กœ ์ž‘์„ฑ๋œ ๋ฌธ์„œ๋ฅผ ํŒŒ์‹ฑํ•˜์—ฌ ๋ธŒ๋ผ์šฐ์ €์— ์‹œ๊ฐ์ ์œผ๋กœ ์ถœ๋ ฅ๋˜๋Š” ๊ฒƒ์„ ๋งํ•ฉ๋‹ˆ๋‹ค.ํŒŒ์‹ฑ : ์–ด๋–ค ํŽ˜์ด์ง€์—์„œ ์›ํ•˜๋Š” ๋ฐ์ดํ„ฐ๋ฅผ ํŠน์ • ํŒจํ„ด์ด๋‚˜ ์ˆœ์„œ๋กœ ์ถ”์ถœํ•ด ๊ฐ€๊ณตํ•˜๋Š” ๊ฒƒ๋ Œ๋”๋ง ๊ณผ์ •์˜ ์ˆœ์„œ๋ฅผ ์š”์•ฝํ•˜๋ฉด1\. ์„œ๋ฒ„์— ์š”์ฒญ ๋ฐ ์‘๋‹ต(HTTP)2\. ๋ธŒ๋ผ์šฐ

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

Mac์—์„œ hosts ์ฃผ์†Œ ๋ณ€๊ฒฝ

Mac์—์„œ hosts ํŒŒ์ผ ์ฐพ๊ธฐ

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

JavaScript - Promise

Promis๋Š” ๋น„๋™๊ธฐ์ฒ˜๋ฆฌ๋ฅผ ์ˆ˜ํ–‰ํ•  ์ฝœ๋ฐฑ ํ•จ์ˆ˜๋ฅผ ์ธ์ˆ˜๋กœ ์ „๋‹ฌ ๋ฐ›๊ณ resolve, reject ๋‘ ํ•จ์ˆ˜๋ฅผ ์ธ์ˆ˜๋กœ ์ „๋‹ฌ ๋ฐ›๋Š”๋‹ค..then : ๋น„๋™๊ธฐ ์ฒ˜๋ฆฌ๊ฐ€ ์„ฑ๊ณตํ–ˆ์„ ๋•Œ ํ˜ธ์ถœ.catch : ๋น„๋™๊ธฐ ์ฒ˜๋ฆฌ๊ฐ€ ์‹คํŒจ ํ–ˆ์„๋•Œ ํ˜ธ์ถœ.finally : ์„ฑ๊ณต,์‹คํŒจ ์—ฌ๋ถ€ ์—†์ด ๋ฌด์กฐ๊ฑด ํ•œ ๋ฒˆ

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

TypeScript - typeof, keyof, ์ƒ์ˆ˜๋ฐ์ดํ„ฐ ํƒ€์ž…์ถ”๋ก 

as const

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

React - useCallback / useMemo

useCallback, useMemo

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

์›ํ‹ฐ๋“œ x ์œ„์ฝ”๋“œ ํ”„๋ก ํŠธ์—”๋“œ ํ”„๋ฆฌ์˜จ๋ณด๋”ฉ ํ›„๊ธฐ

์›ํ‹ฐ๋“œ ํ”„๋ฆฌ์˜จ๋ณด๋”ฉ์ด๋ž€?5์ฃผ ์ •๋„์˜ ๊ธฐ๊ฐ„๋™์•ˆ ์›ํ‹ฐ๋“œ์—์„œ ๋ชจ์ง‘ํ•œ ๊ธฐ์—…์˜ ๊ณผ์ œ๋ฅผ ํ’€๋ฉฐ์œ„์ฝ”๋“œ ๋ฉ˜ํ† ๋‹˜์˜ ๊ฐ•์˜๋ฅผ ๋“ค์„ ์ˆ˜ ์žˆ๋Š” ์„ธ์…˜์ž…๋‹ˆ๋‹ค.ํ”„๋ฆฌ์˜จ๋ณด๋”ฉ ์„ธ์…˜์— ์ฐธ๊ฐ€ํ•œ ์ด์œ ๋Š” ์ปค๋ฆฌํ˜๋Ÿผ์ด ๋งˆ์Œ์— ๋“ค์–ด์„œ ์‹ ์ฒญํ•˜๊ฒŒ ๋˜์—ˆ์Šต๋‹ˆ๋‹ค.ํž˜๋“ค์—ˆ๋˜ ์‹œ๊ฐ„๋„ ์žˆ์—ˆ์ง€๋งŒ ๋˜๋Œ์•„๋ณด๋ฉด ์ข‹์€ ๊ฒฝํ—˜์ธ ๊ฒƒ ๊ฐ™์•„์š”!์œ„ ๊ธ€

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

Node.js - ์—…๋ฐ์ดํŠธ ๋ฐฉ๋ฒ•

๊พธ์ค€ํžˆ ์—…๋ฐ์ดํŠธ ๋˜๋Š” javascript ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์œ„ํ•ด Node์˜ ๋ฒ„์ „์„ ์—…๋ฐ์ดํŠธ ํ•  ํ•„์š”์„ฑ์ด ์žˆ์Šต๋‹ˆ๋‹ค.ํ•ด๋‹น ์ปค๋งจ๋“œ๋ฅผ ์ž…๋ ฅํ•˜๋ฉด ์•„๋ž˜ ์‚ฌ์ง„์ฒ˜๋Ÿผ ํ˜„์žฌ ๋ฒ„์ „๊ณผ ์ƒˆ๋กœ์šด ๋ฒ„์ „์„ ์•Œ๋ ค์ค๋‹ˆ๋‹ค.

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

TypeScript - interface

์ธํ„ฐํŽ˜์ด์Šค๋Š” ํƒ€์ž…์˜ ๊ทœ์น™์„ ์ง€์ •ํ•˜๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค.๊ฐ์ฒด์˜ ์ŠคํŽ™ํ•จ์ˆ˜์˜ parameter (๋งค๊ฐœ๋ณ€์ˆ˜)ํ•จ์ˆ˜์˜ ์ŠคํŽ™, ๋ฐ˜ํ™˜ ๊ฐ’๋ฐฐ์—ดํด๋ž˜์Šคinterface๋ฅผ ์•ž์— ์ ๊ณ  ์ธํ„ฐํŽ˜์ด์Šค ์•ž๊ธ€์ž๋Š” ๋Œ€๋ฌธ์ž๋กœ ์ด๋ฆ„์„ ์ง€์ •ํ•ฉ๋‹ˆ๋‹ค.๊ฐ์ฒด์˜ ํ”„๋กœํผํ‹ฐ ๊ฐ’์€ ์„ ์–ธํ•œ ์ธํ„ฐํŽ˜์ด์Šค์˜ ํƒ€์ž…๊ณผ ๋™์ผํ•˜๊ฒŒ ํ•ด์•ผํ•ฉ๋‹ˆ๋‹ค.ํ•จ

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