본문 바로가기

next.js7

layout.tsx 레이아웃은 시스템 파일이다. 시스템 파일 : 운영 체제 및 시스템 소프트웨어가 제대로 동작하기 위해 필요한 파일이거 경로마다 사용이 가능하다.  기본적으로 root에 있는 레이아웃의 설정을 따라가게 되는데예를 들어 라우터폴더 안에 , layout.tsx를 만들면 , 그 안에 page.tsx는 안쪽 layout.tsx를 따라가게 된다.src/app/blog/layout (blog 폴더 내에 있는 page.tsx는 이 놈을 따라간다.)src/layout.tsx (전체적으론 이놈)  결론 : 레이아웃은 경로마다 생성해서 중첩 할 수 있다. 2024. 7. 30.
리액트 서버컴포넌트 , 클라이언트 컴포넌트 넥제 서버컴포넌트 안에서도 변수 사용이 가능하다. RSC (Default)react-server-component데이터 패칭 ! axos나 fetch api를 사용해서 하는 작업을 용도로.server Actions RCC (선택사항)react-Client-component 사용자와 상호작용하기 위한 컴포넌트useState , useEffect등 훅 사용가능.  넥제가 이렇게 두개가 나뉘는 이유는각각의 역할이 다르기 때문이다. 컴포넌트 트리를 구현할 때 신경써야 하는 부분 서버(상단) - 클라이언트(하단) 이렇게는 적용이 괜찮은데 클라(상단) - 서버(하단) 이렇게 트리구조가 되면 ,서버는 client 컴포넌트가 되는 것이다. 클라컴포는 서버컴포넌트에서 실행된다.요약 : 서버컴(상) - 클라(하) => 이.. 2024. 7. 30.
SSR 되어있는지 검사 어떻게 해요? + 최적화 검사 브라우저에 F12 -네트워크- 전체페이지로딩해봤을 때 html이 다 있는지 확인해볼 수 있다.여기에 요소들이 비어있으면 SSR이 되지 않고 있다는 것이다.해당 페이지는 넥제 공홈이라 nextjs.org이고 , 개발할 땐 localhost를 눌러보면 된다. 안보이면 filter에 문서검색을 하면 된다.  Lighthouse => 최적화 검사성능 , 접근성 , 권장사항 , 검색엔진 최적화 등을 볼 수 있다.다 100점은 나와야 되게 좋은건데, 성능은 70 넘기기도 굉장히 어려운 것이다.  근데 이거 다 이기는 게 있다.그것은 바로 스폰서다.몇백,몇천씩 구글이나 네이버에 돈주면 스폰서 띄준다. 2024. 7. 29.
Next.js를 왜 쓰는가? 일단 CSR , SSR에 대한 개념을 알아야 한다. CSR (Client-Side Rendering)개념클라이언트(브라우저)에서 JavaScript를 사용하여 콘텐츠를 렌더링하는 방식입니다.초기 HTML 파일은 거의 비어 있고, JavaScript 파일을 로드하여 화면을 구성합니다.장점사용자 경험: 페이지 전환이 빠르고, 애플리케이션과 유사한 경험을 제공할 수 있습니다.서버 부하 감소: 초기 로드 이후에는 서버와의 통신이 줄어듭니다.유연성: 프론트엔드에서 다양한 기능을 쉽게 구현할 수 있습니다.단점SEO 문제: 검색 엔진 크롤러가 JavaScript를 제대로 실행하지 못하면 콘텐츠를 인덱싱하기 어렵습니다.초기 로드 시간: JavaScript 파일을 로드하고 실행하는 데 시간이 걸릴 수 있습니다.JS 의존.. 2024. 7. 29.
[유데미x스나이퍼팩토리] 프로젝트 캠프 : Next.js 2기 - 사전직무교육 2주차 후기 1.2주차 후기2.배운 것들 링크 1. 2주차 후기직무교육을 한지 벌써 2주차가 끝났다.굉장히 빠른 속도로 진도를 나갔고 알고 있던 부분 , 모르는 부분 고루 있었다.React에 대해 잘안다고 생각했는데 많이 부족하다는 걸 느꼈다. 어색했던 동기들과 하나 둘 같이 지내며 친해진 거 같아서 좋았다.첫날보다 오프라인 인원이 조금 줄었으나 여전히 많은 사람들이 강의를 함께 들었다. 이번주는 자바스크립트 , 리액트까지 마무리를 했는데메모이제이션이라는게 특히 인상 깊었다. 최적화는 이런 식으로 진행되는거구나.내가 이런 부분이 부족한거구나.여기 들어오기 전에 나태해질 뻔 했다.뭐가 중요한지 몰라 뭘 공부해야할지 몰랐기 때문이다.유데미에 들어오게 된 건 정말 잘한 거 같다고 다시금 생각했다. 강사님의 강의는 여.. 2024. 7. 26.
자료형 , 연산자 자료형,연산자에 대해 배웠다.기본 자료형문자열(String), 숫자(Number), 불린(Boolean), 배열(Array), 객체(Object), 함수(Function), 널(Null), 미정의(Undefined)  참조 자료형배열 객체 함수num = 10e121000000000변수에 지수표기법으로 할당하더라도 , 지수를 10진수를 변환한 10진수의 값으로 본다.     특수자료형(undefined , null)undefinedex) const tvChannel = undefined;nullex) const movieChannel = null;​  undefined는 개발자가 다루지 않고 자바스크립트 엔진이 다루는 값이다.undefined는 값을 할당하고 let numconsole.log(num)원래 .. 2024. 7. 17.

티스토리툴바