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)
React - ์ปดํฌ๋ํธ ์ ๋์์น ์ฐพ๊ธฐ
์ปดํฌ๋ํธ ์ ๋์์น ์ฐพ๊ธฐ >์น ํ์ด์ง๋ฅผ ๋ง๋ค๋ค ๋ณด๋ฉด ํด๋น ์์์ ์ ๋์์น๋ฅผ ์ฐพ์์ผ ํ ๋ ์์ต๋๋ค, ์ ๋์์น๋ฅผ ์ด์ฉํด ์คํ์ผ์ ๊พธ๋ฏธ๊ฑฐ๋ ๋ก์ง์ ๋ง๋ค๋ ์ฌ์ฉํ ์ ์์ต๋๋ค. ์ ๋์์น ์ ๋์์น๋? ํด๋น ์์๊ฐ ์น ํ์ด์ง๋ฅผ ๊ธฐ์ค์ผ๋กํ ์์น์ ๋๋ค! ์คํฌ๋กค๋ ์ปจํ ์ธ ์ ๊ธธ์ด + Viewport ์๋์ขํ๋ฅผ ๊ตฌํ๋ฉด ์์์ ์ ๋์์น๋ฅผ ๊ตฌํ ์ ์์ต๋๋ค. window.scrollY : ์คํฌ๋กค ์ Element.getBoundingClientRect() : ์๋ฆฌ๋จผํธ์ ์๋์ขํ๋ฅผ ์๋ ค์ฃผ๋ ๊ฐ์ฒด๋ฅผ ๋ฐํ ํ์ฉํ๊ธฐ >์คํฌ๋กค์ ํ ๋ ๋ง๋ค ์ ๋์์น๋ฅผ ๊ตฌํ๋ ๋ฐฉ๋ฒ header, main, footer์ id๊ฐ์ ๊ฐ์ง ์๋ฆฌ๋จผํธ์ ์ ๋์์น๋ฅผ ๊ตฌํด๋ณด๊ฒ ์ต๋๋ค. ์ ๋์์น๋ฅผ ํ์ฉํ๋ฉด ๋ทฐํฌํธ๊ฐ ์ฌ์ฉ์์๊ฒ ๋ณด์ผ๋ ์คํ์ผ์ ๊ฐ์กฐํ ์ ์์ต๋๋ค.
2022๋
6์ 28์ผ
ยท
0๊ฐ์ ๋๊ธยท
1