Next.js5 App Router VS Pages Router 예전의 전통적인 방식 : Pages Router13버전 이후의 방식 : App Router 리액트와 넥스트에서의 라우팅 구현 방법리액트 : react-router-dom을 이용해서 구현넥스트 : 파일 시스템 베이스 라우팅 (or 폴더구조기반)으로 자동으로 제공해준다.- 페이지라우터: pages 폴더에 원하는 페이지의 파일 이름을 둔다 pages ㄴ about.jsㄴ index.js/about > 으로 자동으로 들어갈수 있다. - 앱라우터 app폴더 밑 폴더명을 기반으로 자동 라우팅이 된다.각 폴더 아래에 page.js 파일이 있고, 이 파일이 /about 에 자동으로 페이지를 그려준다. 그러면 대체 어떤걸 써야할까? 공식문서에 따르면 앱라우터를 추천한다고 한다.그렇지만 어떤 차이점이 있는지 알고, 상황.. 2025. 3. 17. Next.js만 활용해서 CRUD 구현하기 Uncontrolled Components : 폼 요소의 상태를 제어하지 않는 컴포넌트한마디로 정의하자면 과정은 보지 않고 결과만 반영하여준다.(마지막 제출할때만)즉 코드상으로 onChage 등으로 관리할 필요가 없다는것! 장점 : 간단한 구현 - 상태를 따로 관리하지 않기 때문에 간단한 폼 처리에 적합하다낮은 복잡성 - 폼의 상태를 리액트 상태로 동기화할필요가 없음으로 상태를 관리하지 않아도 된다단점 :비제어 컴포넌트이니까 당연하게도 제어되지 않는다 -> 폼의 상태 추적이나 제어가 어려울 수 있다.복잡한 폼 처리 어려움 : 실시간 유효성 검사 불가 : 판단하려면 무조건 제출해야함 FormDatahttps://ko.javascript.info/formdata FormData 객체 ko.javascript.. 2025. 3. 13. 서버 컴포넌트 vs 클라이언트 컴포넌트 기본적으로 넥스트에서 app폴더 하위의 모든 컴포넌트는 서버 컴포넌트 이다 서버컴포넌트?말 그대로 서버에서 실행되는 컴포넌트이다.코드상에서 확인해보면, 넥스트상에서 이렇게 콘솔을 찍어보자. 콘솔이 어디에 찍힐까?// src>app>page.tsxexport default function Home() { console.log("여기 어디?"); return ( 안녕하세요! Next.js 입니다! );} 터미널에서 찍히고, 브라우저에서도 "server"에서 찍히고 있다고 말해주고 있다. 그렇다면 서버 환경에서 상호작용 메서드는 어떻게 될까? 해당 메서드를 찾지못한다.. 클라이언트 컴포넌트?당연하게도 브라우저 상에서 실행되는 컴포넌트 이다.서버컴포넌트에서는 alert,confir.. 2025. 3. 11. Next.js App Router에서의 렌더링 방식 이해하기 서버 사이드 렌더링 vs 클라이언트 사이드 렌더링서버 사이드 렌더링 : 주문한 가구가 완전히 조립된 상태로 배송되고, 고객은 바로 사용하면 되니 편리하다.클라이언트 사이드 렌더링 : 주문한 가구의 부품과 조립 설명서만 배송되고, 고객이 직접 조립해야함으로 시간과 노력이 필요하다. - 서버 컴포넌트 : 서버에서만 렌더링 되는 컴포넌트로, SSR의 역할을 한다.클라이언으로 전달되는 HTML만 생성하고, 유저 상호작용을 하지 않는다.Next.js의 App Router에서 모든 컴포넌트는 기본적으로 서버 컴포넌트 이다.// src/app/page.tsxconst HomePage = async () => { const data = await fetchDataFromAPI(); // 서버에서 데이터 호출 re.. 2025. 3. 10. Javascript 톺아보기 자바스크립트란?'웹페이지에 생동감을 불어넣기 위해' 만들어진 프로그래밍 언어로, 스크립트 언어에 해당된다.특수한 목적인 아닌 이상 모든 웹 브라우저가 인터프리터가 내장되어있으며 클라이언트단서 웹 페이지가 동작하는 것을 담당한다. 자바스크립트 만의 강점HTML/CSS와 완전히 통합할 수 있음간단한 일은 간단하게 처리할 수 있게 해줌모든 주요 브러우저에서 지원하고, 기본 언어로 사용됨Javascript 프레임워크 / 라이브러리 알아보기React필요한 사전 지식 : HTML, CSS, JavaScriptReact 특징컴포넌트 기반 구조UI를 작은 독립적인 컴포넌트로 나누어 개발할수 있다컴포넌트는 자신의 상태 (State) 와 속성(Props)를 가지고 있으며, 재사용성이 높다.가상 DOM실제DOM을 수정하는 .. 2024. 11. 25. 이전 1 다음
