저는 미움받는 것에 무던히 못지나치는 성향이고 팀장을 맡는 것을 은근히 좋아하는 것도 아닙니다. 그래서 웬만해서는 안 맡고 싶은 마음도 있었어요. 근데 자진하는 분들도 없었고 과거 스터디장으로 뼈저리게 회고했던 경험이 떠올라, 이번에는 더 좋은 장의 소양을 기르고 싶다는 욕심에 팀장을 맡게 되었습니다. (뭐야) 결론적으로 자진해서 역을 맡았지만 성향에 안 맞는 건 어쩔 수 없어 프로젝트 진행 전까지는 긴장도 많이 하고 걱정도 많이 했습니다. 근데 최근 역할을 수행하며 과거 스터디장을 했던 저보다 많이 성장했다고 느꼈고, "처음 하는 게 제일 어렵다"는 말이 와닿는 요새라 현 과정을 적으며 스스로를 토닥이고 부족한 부분을 채우는 시간을 가지려 합니다. 이번주 프로젝트의 팀장 역할을 잘 수행하..
서버 컴포넌트서버측에서 사전 렌더링을 진행할 때 딱 한 번만 실행됨 클라이언트 컴포넌트사전 렌더링 진행할 때 한번, 하이드레이션 진행할때 한번 총 2번 실행 서버 컴포넌트에는 브라우저에서 실행될 코드가 포함되면 안된다. 클리이언트 컴포넌트는 클라이언트에서만 실행되지 않는다. 클라이언트 컴포넌트에서 서버 컴포넌트를 import 할 수 없다. - > 만약 클라이언트 컴포넌트에서 서버 컴포넌트를 Import 할경우 자동으로 서버 컴포넌트를 클라이언트 컴포넌트로 변경함 /그래서 반드시 클라이언트 컴포너트의 자식 컴포넌트로 서버 컴포넌트가 존재해야한다면 서버컴포넌트를 children 컴포넌트를 받아서 삽입하면 서버컴포넌트를 클라이언트 컴포넌트로 변경되지 않고 삽입가능하다. 서버 컴포넌트에서 클라이언트 컴포..
1. [Next.js] middleware.ts미들웨어는 요청과 응답 사이에 위치해 실행되는 코드입니다. Next.js 파일 최상단에 middleware.ts 이름으로 파일을 만들면 알아서 동작됩니다.req.nextUrl.startsWith("/path") : 경로로 시작하는 모든 요청을 검사 NextRequest와 NextResponse는 표준 웹 API의 request와 response를 확장한 것 3. [ Next.js 14]개발모드(npm run dev)에서는 getStaticProps가 해당 함수의 개념과는 달리 페이지 재접속시 해당 요청마다 호출합니다. 왜냐하면 개발모드에서는 개발자가 코드를 수정했을 때 수정결과가 바로 반영하도록 설계되어 있기 때문입니다. 따라서 getStaticPr..
SSG SSR CSR 방식의 차이를 살펴봤습니다. Next.js 14를 보면서 이해가 안갔던 부분이 있는데요. 처음 접속이후 다른 페이지 요청시 csr 방식으로 렌더링한다. 브라우저가 js 를 실행해서 컴포넌트를 교체후 화면을 보는 방식. 근데 또 getServerSideProps 를 사용하면 페이지 요청마다 api 요청을 새롭게 보낸다. 재요청시 csr로 클라이언트가 js 렌더링을 하는데 getServersideProps 을 사용할때는 서버도 일하는거 아닌가? csr은 서버가 일하지 않는거라고 생각했었거든요. api 요청은 서버가 하고 하지만 렌더링의 주체는 클라이언트니 서로 일하는것과 개념이 다르니 부딪치지 않는 시스템 인건가, 해당 과정들이 같이 일어났을 때(Next.js에서 초기접속이후 재..
영어 공식 문서를 꼼꼼하게 읽는 연습을 했습니다. 1. [ jotai ] 공식 문서 살펴보기 1-1. 파생원자 공식문서를 읽으며 새롭게 알게 된 점은 파생원자(Derived atoms) 라는 개념입니다. 자신의값을 반환하기 위해 다른 원자로부터 읽어 올 수 있다는 데요. 예를 들어 전체 뉴스 목록이라는 상태를 관리해야 하고, 사용자가 보고 있는 뉴스 인덱스에 대한 뉴스 상태를 저장해야할 때 유용해보입니다. const progressAtom = atom((get) => { const anime = get(animeAtom) return anime.filter((item) => item.watched).length / anime.length})import { atom, useAtom } from '..
div { white-space: nowrap;// 콘텐츠 영역에 텍스트가 넘치려고 하면 넘치는 부분은 안보이고 뒤에 ... 이 붙는다 overflow: hidden; text-overflow: ellipsis;} 지식을 우겨 넣는 게 아니라, 배웠다면 이런 상황에서는 어떻게 적용될까? 스스로 계속 질문을 던지며 지식을 완전히 습득하는 연습을 했습니다. -2. next.js 사전 렌더링 3가지1. 서버사이드 렌더링 ssr : 가장 기본적인 사전 렌더링 방식이자 요청이 들어올 때 마다 사전 렌더링을 진행함 2. 정적 사이트 생성 ssg : 빌드 타임에 미리 페이지를 사전 렌더링 해둠 3. 증분 정적 재생성 isr -1. [ css ] white-space : pre-line줄바꿈만 그대로..
Event.preventDefault() 기능을 자세히 알아보는 시간을 가졌습니다. 그리고 Next.js page router 관련해 정리하는 시간을 가졌습니다. -4. [ Next.js ] Link 태그와 a 태그 a 태그는 클라이언트 사이드 방식이 아닌 일반적으로 서버에 새로운 페이지를 매번 요청하는 방식으로 느립니다. 따라서 Link 컴포넌트를 사용하는 게 좋습니다. 또 Link 태그로 일어난 페이지 이동은 pre-fetching 이 일어나지만 router.push 와 같은 *프로그래매틱한 페이지 이동시 pre-fetching 이 일어나지 않는 점이 있습니다. 그러나 만약 프로그래매틱한 페이지 이동도한 Pre-fetching 이 일어나길 원한다면 하단 코드처럼 작성하면 됩니다. 반대로 Li..
오늘은 저번시간에 북마크 기능이랑 페이지네이션 적용하지 못해서 이를 적용하고 오류를 분석하는 시간을 가졌습니다. 또 supabase 를 Next.js 에 적용하며 오랜만에 억까를 당해 기력이 쇠했던 날이기도 하네요. 하하 그래도 시간이 지나 경험이 쌓이면 과거의 억까들이 신의 장난이 아니라 지식부족이였다는 걸 깨닫겠지만요. 당 떨어지는 하루였습니다 ;ㅅ; -2. [ supabase ] supabase에 Next.js 개같이 털리기 superbase 적용하는 시간이 너무 고생스러워서 꼭 정리해야 겠다 싶었어요.회원가입하고 새 프로젝트를 만들기를 눌러 프로젝트 이름, 비밀번호, 지역을 넣어서 프로젝트를 만듭니다. 여기서 프로젝트와 연결하는 과정이 개인적으로 어려웠는데요. 왼쪽 home 버튼누..
