Javascript/next
-
useEffect 공부한 글Javascript/next 2025. 9. 14. 18:17
하나 하나가 정말 너무 고달프네... Next.js 로 토이프로젝트를 진행하는데 정말 하나하나가 다 의문이고 모르는거 투성이다^^...모르는걸 배우는건 재밌지만 진도가 안나가는건 짜증나.. 그래도 어쩌겠어요.. 해야지.... 나는.. 얼은이니까.. 1. 발단두 줄 헤더에서 스크롤 이벤트가 발생하면, 첫 번째 줄 헤더가 위로 올라가고 두번째 줄 헤더만 고정되는 형식의 UI를 만들고 싶었다. 예를 들면 이런거..^^내가 만든 내꺼입니다. 근데 addEventListener를 어디다가 걸어야되는지, 사용할 hook은 뭔지 감도 안잡혔다^^.그래서 google 에 써치를 했는데 useCallback과 useEffect를 알려줬다. 2. useCallback ? useEffect ?useCallb..
-
Next.js 의 렌더링Javascript/next 2025. 9. 8. 18:40
Next.js의 hydration warning 해결하려다가 렌더링 공부한 글.. 0. 브라우저의 동작 원리프론트엔드 개발자라면 한번쯤 찾아봤을 브라우저의 동작 원리.CSR 이든, SSR 이든 브라우저 위에서 작동하기 때문에 다시 한번 회고해본다. 탐색 (Navigation)웹 페이지 로딩의 첫 단계. 웹 최적화의 목표 중 하나는 탐색(검색)이 완료될 때까지의 시간을 최소화 하는 것.탐색(검색)의 첫 단계는 해당 페이지의 자원이 어디에 위치하는지 찾는 것.( 예를 들어, https://example.com 의 HTML 페이지는 IP 주소가 93.184.216.34 인 서버에 위치함. )해당 페이지를 한번도 방문한 적이 없다면 DNS 조회가 필요.DNS 조회 (DNS: Domain Name System)..