100일은 해야지

next.js를 공부하다가 chunk buffer stream에 대해 나와서 의미를 작성해두려고 함. Chunk (청크)데이터의 조각대용량 파일을 작은 청크로 나누어 메모리에 로드하거나, 네트워크에서 데이터를 청크로 받아 처리할 때 사용됨Buffer (버퍼)데이터를 임시로 저장하는 메모리 영역데이터를 일시적으로 저장하여 처리 속도를 향상시키는 데에 사용됨Stream (스트림)데이터의 연속적인 흐름을 나타냄입력 스트림은 데이터를 읽어오는 데 사용되고, 출력 스트림은 데이터를 보내는 데 사용 그래서 셋의 관계??chunk는 데이터 조각, 작은 크기로 이루어진 데이터buffer는 chunk를 임시로 저장하는 메모리 공간, 일정량의 데이터를 저장할 수 있음stream은 buffer에 저장된 데이터를 처리하고, ..

next.js에는 보호된 파일명이 있음이 파일들은 app/폴더 내부에서 생성될 때만 보호된 파일명으로 작동한다.app/폴더 외부에서 생성될 경우 이 파일명들을 특별한 방식으로 처리하지 않음. page.js 신규 페이지 생성 layout.js형제 및 중첩페이지를 감싸는 신규 레이아웃 생성 각 폴더 안에 하나씩 생성할 수 있지만RootLayout은 필수적임. , 나 metadata api로 부분 작성해야함. 참고로 favicon을 넣으려면 icon.png 처럼 icon이라는 이름을 사용해야함. not-found.js Not Found 오류에 대한 fallback 페이지 (page router에서는 404.js) error.js기타 오류에 대한 fallback 페이지 loading.js형제 또는 중첩페이지가 ..

리액트로 포트폴리오를 만들겠다고 한지 어언 몇개월 아직도 안만들어진 내 포트폴리오 오늘부터 다시 만들려고 한다. 이번에는 next.js로 만들어 보려고 한다. 포트폴리오 만들면서 내가 했던 것들도 수정하고 UI쪽을 손 봐야 해서 한 이주정도 걸릴 것이라 예상 중... 13버전을 사용할 것이기 때문에 app Router 기반으로 할 예정 yarn을 사용해서 설치를 했는데 npx를 사용한 것보다 시간이 오래걸리는 데 처음에 155.55s 잘못본줄... 내 컴터가 살짝 열받아있어서 그런걸 수도 있을것 같아서 다시 깔아보니 58.21s 뭔가 느린감이 있어서 npx create-next-app@latest로도 깔아봄 27s 근데 여기서 내가 크나큰 착각을 하고 있었음@@! 나는 yarn과 npx로 설치를 했고 비..

NEXT.JS의 Component next.js의 일반적으로 작성하는 것들은 server component이다. html안에 javascript를 넣을 수 없다. hook도 사용 불가능. onClick 이벤트 같은 것도 노노 자바스크립트가 없으니 페이지를 로드할 때 속도가 빠르다. 자바스크립트를 넣고 싶으면 컴포넌트 맨 위에 'use client' 코드를 넣으면 됨 이 코드 아래 모든 컴포넌트는 client component가 된다. 하지만 자바스크립트를 넣으므로써 용량이 커지고 페이지 로딩속도가 느려진다는 단점이 발생한다. client component를 로드하려면 hydration이라는 과정을 거쳐야 하는데 그것 때문에 속도가 더 느려진다. hydration?? => SSR(server-side Re..

Next.js!!!!  pages 폴더에 넣어주는 것만으로도 페이지가 만들어진다.그 파일이름이 페이지가 되는 거임 리액트 라우터를 사용 안 해도 됨일단 index가 기본이고  about폴더 주소는 아래처럼....  pages폴더에 폴더를 하나 더 만들고 파일을 만들어주면 페이지가 뙇next.js가 pages폴더의 파일들의 이름을 가져다가 url이름으로 만드는 거임  그리고 뼈대는 설치할 때 app router사용할 것인지 선택하는 부분에서 초큼 바뀌는 듯하다.app router를 사용하게 되면 pages폴더 대신 app폴더가 생기고 page.tsx가 기본 페이지layout.tsx는 페이지에서 공통으로 쓰는 header 같은 걸 작성하는 파일이다.(참고로 app router를 사용하지 않으면 pages폴더..