Junior Front-End Developer๐
ํ๊ทธ ๋ชฉ๋ก
- ์ ์ฒด๋ณด๊ธฐ(71)
- React(19)
- JavaScript(16)
- WeCode(5)
- git(4)
- CSS(4)
- typescript(4)
- Map(3)
- style component(3)
- ๊ณต๋ถ(3)
- ์ฝ๋์นดํ(3)
- github(3)
- ์๊ณ ๋ฆฌ์ฆ(3)
- JOIN(2)
- html(2)
- boolean(2)
- ES6(2)
- Event(2)
- object(2)
- ํ์ ์คํฌ๋ฆฝํธ(2)
- String(2)
- ํ๋ก์ ํธ(2)
- DOM(2)
- Props(2)
- component(2)
- js(2)
- ์๋ฐ์คํฌ๋ฆฝํธ(2)
- branch(2)
- ์์ฝ๋(2)
- ์์ ํ์(1)
- web(1)
- JavaScript ์ด๋ฒคํธ๋ฃจํ(1)
- position(1)
- math(1)
- ์์๋ฐ์ดํฐ(1)
- headless ui(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)
- Portal(1)
- git push(1)
- querySelector(1)
- ์ฑ๊ธ์ค๋ ๋(1)
- checked(1)
- git rebase(1)
- library(1)
- ๊ฐ์ฒด ํ๋กํผํฐ ์ญ์ (1)
- radio(1)
- git master(1)
- Symbol(1)
- ์์ฃผ์ฌ์ฉํ๋ ์ ๊ท์(1)
- CRA(1)
- git status(1)
- ๋ฆฌ์กํธ(1)
- for๋ฌธ(1)
- browser(1)
- mac(1)
- ๋ง์ดํธ(1)
- include(1)
- ์ต๋๊ฐ๊ตฌํ๊ธฐ(1)
- ๊ฐ์ฒด(1)
- intersection(1)
- ์ปดํฌ๋ํธ(1)
- ๋ธ๋ผ์ฐ์ (1)
- ์ ๋์์น ์ฐพ๊ธฐ(1)
- getBoundingClientRect(1)
- ๋๊ธ์ฐฝ(1)
- React Tic Tac Toe(1)
- router(1)
- ํ๋ก ํธ์๋(1)
- Arrow_Function(1)
- null(1)
- ํฉ์ฑ์ปดํฌ๋ํธ(1)
- styled-component switch(1)
- useEffect(1)
- ๋ฆฌ์กํธ ํฑํํ (1)
- ํ๊ฒฝ๋ณ์(1)
- Side Effect(1)
- fixed(1)
- mock data(1)
- git init(1)
- scrollY(1)
- number(1)
- .scss(1)
- defaultProps(1)
- js property delete(1)
- node.js(1)
- ํ์ ์ข ๋ฅ(1)
- ref(1)
- ์คํ๋ ๋๋ฌธ๋ฒ(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)
- filter(1)
- abs(1)
- React ์ปดํฌ๋ํธ ์ ๋์์น ์ฐพ๊ธฐ(1)
- React ์คํฌ๋กค(1)
- ๋ธ๋ผ์ฐ์ ๋ ๋๋ง ๊ณผ์ (1)
- interface(1)
- ์ธํฐํ์ด์ค(1)
- arrow(1)
- config(1)
- key(1)
- javascipr(1)
- instagram(1)
- ์ผํญ์ฐ์ฐ์(1)
- ์คํฌ๋กค ํผ์ผํธ ๊ตฌํ๊ธฐ(1)
- ๋ ์์ปฌ์ค์ฝํ(1)
- Observer(1)
- State(1)
- useRef(1)
- Promis(1)
- inline block(1)
- React Potal(1)
- body(1)
- React ์คํฌ๋กค ํผ์ผํธ(1)
- Sass(1)
- button(1)
- git branch(1)
- API ๋ณ์(1)
- hook(1)
- @property(1)
- React ์ ๋์์น ์ฐพ๊ธฐ(1)
- ์ ๊ท์(1)
- ์คํ๋ ๋ ์ฐ์ฐ์(1)
- type(1)
- storage(1)
- block(1)
- wanted(1)
- ๋ฐ์ดํฐํ์ (1)
- inline(1)
- console(1)
- styled component(1)
- ์ปดํฌ๋ํธ ์ ๋์์น(1)
- clean up effect(1)
- master(1)
- array(1)
- ๋ก๊ทธ์ธ ์ ๊ท์(1)
- Fetch(1)
- addEventListener(1)
- spa(1)
- display(1)
- style(1)
- IntersectionObserver(1)
- render(1)
- getStaticProps(1)
- git add .(1)
- JSX(1)
- next.js(1)
- react.js(1)
- Advanced Router(1)
- semantic web(1)
- ์ํ ๋ฏน ๋์์ธ(1)
- ํฑํํ (1)
- useNavigate(1)
- reverse(1)
- ์๊ธฐ์๊ฐ(1)
- ํ์๊ฐ์ ์ ๊ท์(1)
- ์ ๋ฐ์ดํธ(1)
- ์์(1)
- ๊ตฌ์กฐ๋ถํด ํ ๋น(1)
- grid(1)
- attrs(1)
- .then()(1)
- ํ์ ์คํฌ๋ฆฝํธ ํจ์(1)
- ๋ธ๋์น(1)
- createPortal(1)
- ์คํฌ๋กค ํผ์ผํธ(1)
- headless(1)
- js boolean(1)
- ์๋ฐ์คํฌ๋ฆฝํธ ๋ ์์ปฌ์ค์ฝํ(1)
- git clone(1)
- switch๋ฌธ(1)
- function(1)
- ์ง์๊ฐ๋ฅํ ์ปดํฌ๋ํธ(1)
- ์ ๊ทํํ์(1)
- ์๋ฐ์คํฌ๋ฆฝํธ ์ฑ๊ธ์ค๋ ๋(1)
- ์ฐธ์กฐ(1)
- undefined(1)
- 1์ฐจํ๋ก์ ํธ(1)
- mixin(1)
- ํจ์์ ์(1)
- ๋น๊ตฌ์กฐํ ํ ๋น(1)
์ ์ฒด๋ณด๊ธฐ (71)React(19)JavaScript(16)WeCode(5)git(4)CSS(4)typescript(4)Map(3)style component(3)๊ณต๋ถ(3)์ฝ๋์นดํ(3)github(3)์๊ณ ๋ฆฌ์ฆ(3)JOIN(2)html(2)boolean(2)ES6(2)Event(2)object(2)ํ์
์คํฌ๋ฆฝํธ(2)String(2)ํ๋ก์ ํธ(2)DOM(2)Props(2)component(2)js(2)์๋ฐ์คํฌ๋ฆฝํธ(2)branch(2)์์ฝ๋(2)์์ ํ์(1)web(1)JavaScript ์ด๋ฒคํธ๋ฃจํ(1)position(1)math(1)์์๋ฐ์ดํฐ(1)headless ui(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)Portal(1)git push(1)querySelector(1)์ฑ๊ธ์ค๋ ๋(1)checked(1)git rebase(1)library(1)๊ฐ์ฒด ํ๋กํผํฐ ์ญ์ (1)radio(1)git master(1)Symbol(1)์์ฃผ์ฌ์ฉํ๋ ์ ๊ท์(1)CRA(1)git status(1)๋ฆฌ์กํธ(1)for๋ฌธ(1)browser(1)mac(1)๋ง์ดํธ(1)include(1)์ต๋๊ฐ๊ตฌํ๊ธฐ(1)๊ฐ์ฒด(1)intersection(1)์ปดํฌ๋ํธ(1)๋ธ๋ผ์ฐ์ (1)์ ๋์์น ์ฐพ๊ธฐ(1)getBoundingClientRect(1)๋๊ธ์ฐฝ(1)React Tic Tac Toe(1)router(1)ํ๋ก ํธ์๋(1)Arrow_Function(1)null(1)ํฉ์ฑ์ปดํฌ๋ํธ(1)styled-component switch(1)useEffect(1)๋ฆฌ์กํธ ํฑํํ (1)ํ๊ฒฝ๋ณ์(1)Side Effect(1)fixed(1)mock data(1)git init(1)scrollY(1)number(1).scss(1)defaultProps(1)js property delete(1)node.js(1)ํ์
์ข
๋ฅ(1)ref(1)์คํ๋ ๋๋ฌธ๋ฒ(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)filter(1)abs(1)React ์ปดํฌ๋ํธ ์ ๋์์น ์ฐพ๊ธฐ(1)React ์คํฌ๋กค(1)๋ธ๋ผ์ฐ์ ๋ ๋๋ง ๊ณผ์ (1)interface(1)์ธํฐํ์ด์ค(1)arrow(1)config(1)key(1)javascipr(1)instagram(1)์ผํญ์ฐ์ฐ์(1)์คํฌ๋กค ํผ์ผํธ ๊ตฌํ๊ธฐ(1)๋ ์์ปฌ์ค์ฝํ(1)Observer(1)State(1)useRef(1)Promis(1)inline block(1)React Potal(1)body(1)React ์คํฌ๋กค ํผ์ผํธ(1)Sass(1)button(1)git branch(1)API ๋ณ์(1)hook(1)@property(1)React ์ ๋์์น ์ฐพ๊ธฐ(1)์ ๊ท์(1)์คํ๋ ๋ ์ฐ์ฐ์(1)type(1)storage(1)block(1)wanted(1)๋ฐ์ดํฐํ์
(1)inline(1)console(1)styled component(1)์ปดํฌ๋ํธ ์ ๋์์น(1)clean up effect(1)master(1)array(1)๋ก๊ทธ์ธ ์ ๊ท์(1)Fetch(1)addEventListener(1)spa(1)display(1)style(1)IntersectionObserver(1)render(1)getStaticProps(1)git add .(1)JSX(1)next.js(1)react.js(1)Advanced Router(1)semantic web(1)์ํ ๋ฏน ๋์์ธ(1)ํฑํํ (1)useNavigate(1)reverse(1)์๊ธฐ์๊ฐ(1)ํ์๊ฐ์
์ ๊ท์(1)์
๋ฐ์ดํธ(1)์์(1)๊ตฌ์กฐ๋ถํด ํ ๋น(1)grid(1)attrs(1).then()(1)ํ์
์คํฌ๋ฆฝํธ ํจ์(1)๋ธ๋์น(1)createPortal(1)์คํฌ๋กค ํผ์ผํธ(1)headless(1)js boolean(1)์๋ฐ์คํฌ๋ฆฝํธ ๋ ์์ปฌ์ค์ฝํ(1)git clone(1)switch๋ฌธ(1)function(1)์ง์๊ฐ๋ฅํ ์ปดํฌ๋ํธ(1)์ ๊ทํํ์(1)์๋ฐ์คํฌ๋ฆฝํธ ์ฑ๊ธ์ค๋ ๋(1)์ฐธ์กฐ(1)undefined(1)1์ฐจํ๋ก์ ํธ(1)mixin(1)ํจ์์ ์(1)๋น๊ตฌ์กฐํ ํ ๋น(1)
Styled - Switch๋ฌธ + TypeScript ํ์ฉํ ๋ชจ๋ํํ๊ธฐ
Styled-component + TypeScript >์ ๋ React, TypeScript ,Styled-componet ์ด ์ธ๊ฐ์ง ์กฐํฉ์ ๋ง์ด ์ฌ์ฉํ๊ณ ์์ต๋๋ค. Styled-component๋ฅผ ์ฌ์ฉํ๋ ์ด์ ๋ ๋ ์์ ์ธ ํด๋์ค๋ฅผ ๋ง๋ค์ด ์คํ์ผ ์ถฉ๋์ ๋ฐฉ์ง SASS์ ๊ฐ์ nesting, ๋ณ์ ๊ธฐ๋ฅ props๋ฅผ ํ์ฉํ ์กฐ๊ฑด๋ถ ์คํ์ผ ์ง์ ์ด ์ธ๊ฐ์ง ์ด์ ๊ฐ ํฐ ๊ฒ ๊ฐ์์! props์ TypeScript๋ฅผ ํ์ฉํด ๋ชจ๋ํํ ์ปดํฌ๋ํธ์ ์คํ์ผ์ ๋ค์ํ ์กฐ๊ฑด์ผ๋ก ์ฌ์ฉ ํ ์ ์์ด์! Type, interface ์ง์ ํ๊ธฐ ๋ผ๋ฒจ๋ฒํผ์ ์์๋ก ๋ง๋ค์ด ๋ณด๊ฒ ์ต๋๋ค. ํฐํธ์ปฌ๋ฌ, ๋ฐฐ๊ฒฝ์ปฌ๋ฌ, ํ ๋๋ฆฌ ๋ฅผ props๋ก ๋ฐ์ ์คํ์ผ์ด ์ ํด์ง๋ ์ปดํฌ๋ํธ ์ ๋๋ค. label.jsx > #### 1. React, Styled-componet์ css๋ฅผ importํด์ค๋๋ค. > #### *
2022๋
6์ 26์ผ
ยท
0๊ฐ์ ๋๊ธยท
2