yarn create next-app .현재 경로에 next 프로젝트 생성 yarn add next@14 react@18 react-dom@18 Next.js 14 버전에서는 next.config.ts 파일을 공식적으로 지원하지 않습니다.즉, TypeScript(.ts)로 next.config.ts를 작성하는 것은 지원되지 않으며, .js 또는 .mjs 형식으로 변환해야 함 mv next.config.ts next.config.mjs 변경후 파일 내용 다음과 같이 수정/** @type {import('next').NextConfig} */const nextConfig = { reactStrictMode: true};export default nextConfig; PnP 환경에서는 TypeScript가 ..

서버 액션(Server Actions)은 React 18에서 새롭게 도입된 기능으로, 서버에서 실행되는 코드를 클라이언트에서 쉽게 호출할 수 있게 해준다. 이는 서버에서 직접 액션을 처리하고, 그 결과를 클라이언트로 반환하는 방식으로 작동하여 클라이언트에서 복잡한 상태 관리나 비동기 처리를 덜어주는 장점을 가지고 있다  React 서버 액션의 주요 특징 1. React 컴포넌트에서 호출 가능서버 액션은 React 컴포넌트 내에서 호출할 수 있으며, 서버 액션이 완료되면 결과값을 받아 렌더링할 수 있습니다. 이를 통해 클라이언트에서 복잡한 로직을 구현할 필요 없이 서버에서 처리된 데이터를 바로 사용할 수 있습니다. 2. 직접적인 서버와 클라이언트 통신서버 액션은 클라이언트가 직접 호출하는 서버 함수입니다...

현재 진행하고 있는 프로젝트의 메인화면이다페이지를 구현하기 전에 먼저 머리속에서 순서를 정해보았다 1. 레시피 정보가 담긴 배열을 만든다.API에서 받아와야 하지만 당장은 api가 없기 때문에 임시 Mock Data를 만들어 사용하자.//Mock Dataconst items = [ { imgFile: 'https://homecuisine.co.kr/files/attach/images/140/868/087/c936189e03c496989162bf511a99b12e.JPG', recipeName: '마라떡볶이', NickName: '소연', recipeDesc: '마라맛이 나는 떡볶이' }, { imgFile: 'https://www.sbfoods-worldwide.com/k..

Redux와 React Query의 차이점 Redux주된 목적: 클라이언트 측 상태 관리. 주로 사용자가 직접 생성하고 관리해야 하는 전역 상태(예: 사용자 입력, UI 상태, 인증 상태 등)를 다루기 위한 라이브러리입니다.데이터 관리: 모든 종류의 상태(비동기 또는 동기, 클라이언트 내부에서만 사용하는 상태)를 관리하는 데 사용됩니다.전역 상태: 상태를 하나의 스토어에 저장하고, 전역에서 액세스 및 업데이트할 수 있도록 합니다.설정 복잡성: 전통적인 Redux는 비동기 처리나 상태 관리 로직이 다소 복잡할 수 있습니다. 이를 간소화하기 위해 Redux Toolkit을 많이 사용합니다.비동기 처리: 비동기 처리는 Redux 미들웨어(예: redux-thunk 또는 redux-saga)를 통해 처리해야 하..

💡 React 강의를 보며 프로젝트를 만들던 도중 강의에서 React Router 라이브러리를 사용하는데, 이에 대해 정확이 이해하고 공부하기 위해 React Route에 대해 정리하려고 합니다.리액트 라우터(React Router)에 대한 정확한 정보는 공식문서를 통해 확인하는 것이 가장 좋고, 이 글은 공식문서와 여러 블로그를 참고하여 작성하였습니다.   React Router는 Client Side Routing을 가능하게 한다. Client Side Routing을 통해 서버에서 다른 문서를 요청하지 않고도 링크를 클릭함으로써 URL을 업데이터할 수 있다. 즉시 새 UI를 렌더링 하고 fetch를 통해 데이터 요청을 수행하여 페이지를 새 정보로 업데이트 할 수 있다. 브라우저가 다음 페이지에 대..

Context란?리액트에서는 값을 관리할 때 useState를 사용해서 값을 선언하고 상태를 관리한다.const [a,setA] = useState(''); useState는 컴포넌트 안에서 선언하고, 이렇게 선언한 값은 컴포넌트 내에서만 사용이 가능하다만약 컴포넌트에게 자식이 있다면 자식에게 props를 사용해서 값을 전달 해 주는 것이 가능하다  만약 위와 같이 컴포넌트들을 만들었다고 가정하자컴포넌트 A에서도 쓰고 B에서도 쓰고 C, D, E에서도 써야하는 값이 있다면 어떻게 해야할까? 최상위 컴포넌트인 App에서 useState로 상태를 만든 다음A에게 Props로 전달해주고, B에게 Props로 전달해주고, B의 자식 컴포넌트인 C와 D에도 Props로 전달해주고, C의 자식 컴포넌트인 E에도 P..

Next.js는 대충 React의 업그레이드 버전이라고만 알고 있었는데, 이번에 제대로 두 개의 차이를 정리해보려고 한다.   React 란?리액트(React)는 페이스북에서 개발한 UI를 담당하는 JavaSrcipt 기반의 SPA 웹 프레임워크이다.컴포넌트를 활용하여 UI를 쉽고 효율적으로 만들 수 있다.리액트는 SPA, CSR, Virtual DOM 등 몇 가지 대표적인 특징들을 가지고 있다.   SPA(Single Page Application)단 하나의 페이지를 통해 유저의 요청을 처리해주는 방식이다.필요한 모든 정적 리소스를 최초에 한 번 다운로드한다.페이지간 이동 시, 페이지 갱신에 필요한 데이터만을 JSON으로 전달받아 페이지를 갱신하므로 전체적인 트래픽을 감소할 수 있다.전체 페이지를 다시..

스프링부트 입문 시리즈 #01 프로젝트 생성하기 #02 정적페이지 만들고 화면 띄우기 #03 회원 관리 페이지 만들기 #04 회원 리포지토리 테스트케이스 #05 회원 서비스 개발 + 테스트 👈 지난 시간에는 회원 리포지토리를 만들어 회원 등록, 회원 검색 기능을 구현해 보고 Test Case를 만들어 테스트까지 모두 마쳤다 이번에 만들 회원 서비스 만들어놓은 회원 도메인과 리포지토리를 활용해서 실제 비즈니스 로직을 구현할 것이다 회원 서비스 클래스 생성 src / main / java / yeon.hello_spring 에서 service 패키지를 만들고 그 안에 MemberService 클래스를 생성한다 회원가입 메소드 회원가입 기능을 구현할 때는 리포지토리에 member를 save 해주기만 하면 된다..

스프링부트 입문 시리즈 #01 프로젝트 생성하기 #02 정적페이지 만들고 화면 띄우기 #03 회원 관리 페이지 만들기 #04 회원 리포지토리 만들기 + 테스트 👈 1. Test Case 개발한 기능을 테스트할 때 Java의 main 메소드를 통해서 실행하거나, 웹 어플리케이션의 Controller를 통해서 해당 기능을 실행하는데 이런 방법은 준비와 실행이 오래 걸리고, 반복하기 어렵고, 여러 테스트를 한번에 실행하기 어렵다는 단점이 있다 Java는 JUnit이라는 프레임워크를 이용해 이러한 문제를 해결한다 src / test에 이미 테스트를 할 수 있는 공간이 준비되어있다 scr / test/ java에 있는 yeon.hello_spring 패키지 안에 repository라는 패키지를 만들고 Memory..