이 포스팅은 인프런의 "[손에 익는 Next.js] 공식 문서 훑어보기"를 학습하면서 필요한 내용을 정리한 것이다. 이 강의는 Next.js 13 버전에 대한 것으로서 새로운 라우팅 시스템인 App Router,  서버 컴포넌트(Server Component), 데이터 페칭(Data Fetching), 캐싱(Caching) 그리고 재검증(Revalidating)을 다룬다.1. 문제 해결 과정에서 탄생JavaScript > 복잡한 요구사항, 다양해진 브라우저의 종류 > jQuery > UI 요소들에 사용되는 데이터 관리 어려움 > AngularJS > 양방향 데이터 바인딩이 효과적이었지만 프로젝트가 크고 복잡할수록 복잡도가 급격하게 증가 > React.js > 단반향 바인딩으로 복잡한 문제 해결했지만 CS..

이 글은 2023년 웹 개발교육 WEB TECH SEMINAR의 강의를 학습하고-개인적으로 중요하다고 생각한 부분을-정리한 내용이다. 1. Next.js 개발 환경 구축하기(1주차) 😉 1주차 강의 링크 1.1. a태그와 SPA a태그는 기본적으로 페이지를 새로고침하기 때문에 SPA의 이점을 살릴 수 없다. 따라서 a태그 대신 Link를 이용하면 된다. 😉 a태그가 페이지를 새로고침하는 것을 확인하는 방법: 콘솔에서 로그 찍은 상태에서 a태그 클릭, 로그가 사라지면 페이지가 변경된 것임을 알 수 있다. 😉 vscode에서 ul, li 태그 자동 생성 : ul>li 1.2. JSX JavaScript + XML XML 안에 {}로 자바스크립트 표현식을 작성할 수 있다. 1.3. 천 단위 구분 기호 cons..

1. SSR, CSR 컴포넌트의 클래스명 불일치 문제 트위터 클론 코딩인 NodeBird 프로젝트 작업 중에 [그림 1]과 같은 문제를 만나게 되었다. 스타일 관련된 문제라 프로그램이 실행되지 않는 심각한 문제는 아니지만 최초 페이지 로드 시 붉은색 점선으로 표시된 부분에 스타일이 적용되지 않는 문제가 있었다. 콘솔에 찍힌 경고 메시지는 다음과 같다. client.js:1 Warning: Prop `className` did not match. Server: "ant-input-group-wrapper ant-input-search ant-input-search-with-button sc-jSwlEQ ehJBhf css-dev-only-do-not-override-byeoj0" Client: "ant-i..