나의 코딩일지

확실히 프레임워크는 좋긴 좋다. 하지만 맥락을 알고 사용해야한다. Next.js는 pages router를 사용하다가 리액트 13부터 app router가 등장하였다.라우팅 방식의 변화Pages Router의 경우 /pages/fridge.tsx와 같이 pages 디렉토리 안에 파일을 넣어두면 해당 파일명을 기반으로 라우팅이 된다.  App Router의 경우 /app/my-page/page.tsx와 같이 pages 디렉토리 안에 pathname을 가진 디렉토리를 만들고, page.tsx를 만들면 폴더 구조를 기반으로 라우팅이 된다.왜 변화하였나?디렉토리 안에 page.tsx를 담아야했기 때문에, 오히려 pages가 직관적으로 라우팅을 명시한다고 생각했다. 하지만, 폴더 구조로 변경하면서 같은 폴더 안에..

네트워크 탭을 읽는거에 익숙해질 때쯤, 청크 파일은 왜 내 코드는 이상한 파일로 변경되었고, 이 파일들은 누가 보내주는거냐고 물어봤다가 거절당한 기억이 있다. 이제는 그 친구들이 빌드된 파일들이고 Nginx가 서빙한다는 걸 알게 되었지만 그때는 그냥 호기심이 들었다가 다른 게 급해서 금방 잊혀졌었다.사실 회사가 굳이 위험부담을 안고 갈까 하는 의문이 아직도 남아있는데, 사이드 범위 안에서는 vercel이 다 감당해주니까 오히려 사이드에서 Next.js를 많이 사용해보는것도 나쁘지 않을거같다. Next를 처음 사용할때 누가 파일을 제공하는 건가에 의문이 있었다. 웹 서버와 백 서버의 차이를 이해하지 못해서 맨날 백이랑 레포를 합쳐야하는거 아닌가,, 뭐 이런 생각을 했었다. 이 때 가졌던 의문 하나는 라이브..

데이터를 fetch해온 값들을 전달할 때 fetch 함수에서 선언한 타입들을 그대로 이용하기 위해서 자식 컴포넌트에 그대로 전달하고, 자식 컴포넌트에서 UI에 맞춰서 수정하는 편이었다. 그런데 UI를 선언할 때 값을 변경하는 것은 권장하지 않는다는 피드백을 받았다. 처음에는 UI의 반환값을 선언형으로 맞춰놔야하기 때문에 반환값안에서 변경하지 않고 로직을 통해 변경 후 UI에 그대로 담아놔야하는 것이라고 생각했다. 하지만 더 찾아보니 리액트에서 props는 변경을 지양해야한다는 원칙이 있었다. 그 이유가 궁금해져서 props가 전달되는 렌더링 과정을 찾아보았다. 사실 실상은 리액트 문서보면서 이전에 내가 만든 state, useState 좀 더 구체화하는 이야기다.초기 렌더링의 경우렌더링 단계앱을 시작할 ..