치춘짱베리굿나이스

DOM과 웹 렌더링 개요 Next.js 의 첫 챕터에 DOM과 바닐라 자바스크립트, 리액트 관련 내용이 있길래 정리하다가 아예 DOM, 브라우저 렌더링 관련 내용을 분리하는 게 나을 것 같아서 쓰는 포스팅 https://blog.chichoon.com/418 여기에 대강 DOM에 관해 정리해놓긴 했지만 뭔가 크진 않다 사전 지식 DOM Document Object Model HTML (또는 XML) 요소들을 객체로 표현한 모델이다 DOM은 트리와 같은 구조를 띄고, HTML (또는 XML) 에서의 각 요소들이 노드로 표현되며 서로 부모 - 자식 간의 관계로 연결되어 있다 프로그래밍 언어 (JavaScript 등의 스크립팅 언어) 와 유저 인터페이스 (UI ⇒ 웹 페이지) 간의 연결다리 역할을 하며, DO..

App 라우터, Pages 라우터 Pages 에서 App으로 넘어가기 내가 Next.js 공부를 시작한지도 어언 1달 정도가 되었는데… 5월 초쯤 (5월 5일?) v13.4.0 릴리즈부터 갑자기 앱 라우터가 stable 해 지면서 권장사항으로 바뀌었다 진행하던 미니 프로젝트 레포 초기화 할 때만 해도 App 라우터는 experimental이라 pages로 가는 것을 추천했었는데 이런 대격변이 아닐 수 없다 이렇게 갑작스럽게 바뀔 줄 알았으면 진작에 App 라우터로 초기화했지!… Next.js 공식문서엔 Next 13버전으로 업데이트되면서 변경된 사항들 몇몇개를 같이 소개하고 있지만 여기서는 App 라우터로만 변경하는 것을 적어보기로 한다 (사실상 번역만 하는 수준) 패키지 업데이트 npm install ..

useContext 개요 이번에 쪼끄만 자기소개 페이지를 SSR과 SSG를 섞어서 만들어보고 있는데 아무래도 외부 라이브러리를 가져다가 쓸 만큼 프로젝트 규모가 크지 않다 보니… 라이브러리 설치가 조금 꺼려지는 상황에서 상태값을 자식의 자식의 자식한테 내려줘야 하는 일이 생겼다 3~4 depth 정도이니 아예 Prop Drilling 으로 처리할까 했는데, 그보다 먼저 useContext 를 이용하여 상태값의 활동 범위를 넓혀줄 수 있겠다는 생각이 들어서 여태껏 한번도 써 보지 않은 useContext를 써 보기로 했다 useContext란? 각 컴포넌트에서 context를 읽고 구독할 수 있도록 도와주는 React Hook 이라고 한다 쉽게 말해 어떠한 상태값을 context 형태로 감싼 뒤, 이를 다..

그게바로 나에요 감기 유행할 때마다 한번씩 잊지 않고 걸리는 느낌 이번엔 어디서 옮아온건지? 갑자기 또 감기 걸림 열도 나고 작년 5월~6월 11월 올해 3월 쌩고생하고 5월되지마자 또걸림 건강이 제일 중요하지만 뭔가 제일 안건강한 오늘은 악착같이 걷기 4km 채우긴 했는데 내일은 또 어떻게 될지 모르겠다 오늘 상태 보면 내일은 더할 것 같기도 하고 어린이날 휴일이라 약도 못받아올텐데 쩝,,

로그인 유지 작년 부스트캠프 자료로 작성했던 것인데 블로그에 옮겨오는 것을 잊어버린듯 이슈 사용자 경험 측면에서, 페이지를 이동할 때마다 로그인이 해제되어 재로그인을 해야 한다면 사용자에게 불편을 초래할 수 있음 단순히 로그인 정보 (id - 다른 사람이 열람해도 상관없는 값) 를 전역 상태값으로 관리하면 해결되긴 하지만, 만약 유저가 페이지 내부의 상호작용 (버튼, 링크 등) 을 거치지 않고 url로 직접 접근하거나, 새로고침을 할 경우 웹 페이지 전체가 리로드되면서 로그인 상태값이 날아간다 해결 방안 CheckLogin 컴포넌트 export const CheckLogin = ({ children }: Props) => { const [currentUser, setCurrentUser] = useRec..

https://youtu.be/g34xhG803bM 오랜만에 짧은 생각 적는 것을 매우 소홀히 했더니 마지막 글이 글쎄 반년 전이다 어제 어제는 페스티벌에 갔다 왔다 아는 분이 표를 공연 시작 이틀전에 갑자기? 구해주셔서 호다닥 갔다 온 정신없는 페스티벌 사람 되게 많았음 좀 낑겨앉아서 약간 불편했다 이날 헤드라이너는 넬이었는데 넬 공연을 보고 나면 이전에 들었던 노래들에 대한 기억을 싹 다 넬이 덮어씌워줌 집에 돌아가는 내내 넬 생각뿐....... 사실 다른 가수들도 넘넘 좋았고 JST에 올릴 노래들이 한가득 쌓였는데 하필 넬이 마지막 순서라 기억이 다 오버라이딩 됐을 뿐... 넬의 노래는 꼭 라이브 버전으로 들으시오 집 가는 길에 버스에서 음원 버전으로 들었는데 라이브의 그 강렬함을 따라잡을 수 없었..