Dev Diary 💻

Intro spring boot에서 service를 주입하여 사용하던 도중 다음의 오류가 발생하였습니다. The dependencies of some of the beans in the application context form a cycle 인텔리제이 터미널에 순환 참조되고 있다는 표시와 함께 잘 올라가던 서버가 동작하지 않았더군요.. Why? 처음 보는 오류라서 이게 뭘까 싶었습니다. 구글링을 해보니 두 파일에서 서로 동일하게 생성자를 주입해 사용해서 순환 참조가 일어나고, 때문에 에러가 발생했던 것이였습니다. How to solve the problem 구글링한 결과, 순환 참조 오류를 해결할 방법은 크게 3가지가 있었습니다. #1 application.yml 변경 spring: applicati..

이 글은 udemy의 Next.js & React - 완벽 정복 가이드 (incl. Two Paths) 강좌를 바탕으로 정리한 내용입니다. 124. 모듈 요약 getStaticProps 함수도 실행해보고 유효성 재검사 옵션을 통해 해당 컴포넌트가 배치되고 주기적으로 재생성하게 설정해봤습니다. 또한 getStaticPaths 함수를 결합하여 동적 페이지를 생성했고 폴백 옵션을 추가함으로써 예상되는 모든 경우의 인스턴스에 알아서 대응할 수 있도록 했습니다. getServerSideProps 함수도 실행하는 걸 확인했습니다. 하지만 클라이언트 사이드 데이터 페칭으로 전환했습니다. 그 함수는 다음에 실습할 수 있습니다. 이제 여러분은 Next.js에서 쓸 수 있는 데이터 페칭의 핵심 구조를 배웠습니다. 그중 일..

이 글은 udemy의 Next.js & React - 완벽 정복 가이드 (incl. Two Paths) 강좌를 바탕으로 정리한 내용입니다. 86. 모듈 개요 Next.js를 이용하면 풀스택 React 앱을 구축할 수 있습니다. Next.js는 서버 사이드에서 페이지를 사전 렌더링 해줍니다. Next.js는 코드 실행에 있어서 클라이언트 사이드 뿐만 아니라 React 앱이 실행되는 사용자의 브라우저 뿐만 아니라 서버 사이드에서 코드를 실행할 때도 도움을 줍니다. 페이지에 표시되어야 하는 데이터를 준비하거나 로딩하는 작업을 돕는다는 의미입니다. 데이터 fetching이 무엇인가 Static VS Server-side Page 어떻게 데이터 fetch 하는가 이 의미에 대해 자세히 살펴보도록 합시다. 87. ..

Intro 이번 시간에는 spring boot 에서 mongodb read preference를 설정하는 방법에 대해 알아보도록 하겠습니다. 제 경우 Spring boot 로 구성된 프로젝트에 monogo db read preference 가 따로 적용되어 있지 않았습니다. 여러 read preference mode 중에서 secondaryPreferred 를 적용하기 위해 구글링을 해봤습니다. Read preference 참고로, Read preference란 MongoDB 클라이언트가 읽기 작업을 replica set의 members에게 route 하는 방법을 설명하는 것입니다. 총 5가지의 방식이 있으며, primary가 기본 default 값으로 적용됩니다. primary (default mode..

이 글은 udemy의 Next.js & React - 완벽 정복 가이드 (incl. Two Paths) 강좌를 바탕으로 정리한 내용입니다. 69. 모듈 개요 이번 섹션에서는 이벤트 앱을 간단하게 만들어보도록 하겠습니다. 이벤트 목록을 확인하고, 그 중에서 한 이벤트를 선택할 수도 있습니다. Creat a Complete NextJS Project From Scratch Add Static & Dynamic Routes Add Regular Components & Connect Everything! 70. 프로젝트 계획 / : Startign PAge (show featured Events) /events: Events Page (show all Events) /events/event> event-item..

Intro Next.js를 사용하던 도중 다음과 같은 에러가 발생하였습니다. Error: Invalid with child. Please remove or use Why? {props.children} next/link 를 활용하여 Link 태그 안에 a 태그를 넣어줬던 코드에 문제가 있었습니다. 에러 화면에 나와있는 Next.js 사이트에 한번 접속해봤습니다. (https://nextjs.org/docs/messages/invalid-new-link-with-extra-anchor) Why This Error Occurred Next.js 13버전이 나오면서, Link 태그는로 렌더링 되므로 를 사용하는 시도는 유효하지 않다고 하네요! How to solve the problem npx @next/co..

Intro next js 를 사용하던 도중 아래와 같은 에러가 발생하였습니다. Error: The default export is not a React Component in page: "/" Why? 에러가 난 코드를 확인해보니, export 만 하고 default 를 적어주지 않았습니다. Next.js에서는 default로 export를 해야 에러 없이 정상 작동 되기 때문입니다. export function HomePAge() { const featuredEvents = getFeaturedEvents(); return ( ); } How to solve the problem export default 코드를 추가해주면 됩니다. 🙌 export default function HomePAge() { ..

이 글은 udemy의 Next.js & React - 완벽 정복 가이드 (incl. Two Paths) 강좌를 바탕으로 정리한 내용입니다. 52. 모듈 개요 파일 기반의 routing, 정적 및 동적 routes, 페이지간의 네비게이팅에 대해 배울 예정입니다. 53. 시작 설정 Setup 사이트 소스 코드 참고 54. 파일 기반 라우팅이란 무엇일까? React.js는 react-router-dom을 사용하여, 라우트를 진행합니다. 하지만 Next.js는 라우터를 설치하지 않고, 라우트와 페이지 구조를 정의하는 데 JSX와 JS 코드를 사용하지 않습니다. Next.js에서는 React 컴포넌트 파일을 생성합니다. 특별한 폴더에 일반적인 React 컴포넌트 파일을 생성합니다. 이후 Next.js가 설정된 폴..

이 글은 udemy의 Next.js & React - 완벽 정복 가이드 (incl. Two Paths) 강좌를 바탕으로 정리한 내용입니다. 1. Welcome to the Coursel 시작하도록 하겠습니다. 꾸준히 화이팅 🤟🤟 2. Next.js란 무엇인가? Next.js를 왜 사용하는 걸까? NextJS는 프로덕션용 React 프레임 워크 입니다. 큰 규모의 프로덕션용 React 앱을 쉽게 구축할 수 있도록 해주는 많은 기능을 가지고 있습니다. ReactJS는 사용자 인터페이스 구축을 위한 JS 라이브러리입니다. 즉 Third Party 패키지로 프론트 엔드 프로젝트에 추가되는 라이브러리 입니다. 결국 클라이언트 측 JavaScript 코드라는 이야기 입니다. 주로 사용자 인터페이스 부분인 컴포넌트,..

이 글은 udemy의 React 완벽 가이드 with Redux, Next.js, TypeScript 강좌를 바탕으로 정리한 내용입니다. 139. 모듈 소개 지난 섹션에서 중요한 리액트 개념들을 살펴보았습니다. useEffect, useContext, useReducer 등등 / 위 개념을 복습하면서 다시 살펴보도록 합시다. 140. 설정 시작하기 Layout folder : ex. Header UI folder: ex. Input 141. "헤더" 컴포넌트 추가하기 header 컴포넌트 추가 142. Adding the "Cart" Button Component Cart Button 컴포넌트 추가 143. Adding a "Meals" Component Meals 컴포넌트 추가 144. Adding I..