전체 > NEXTJS (13) NextJs 13: env파일을 활용한 환경변수 설정 안녕하세요, 각성한 데브키라입니다. .env 파일을 사용하면 프로젝트에서 필요한 전역 설정을 한 곳에 모아 관리할 수 있습니다. 이는 데이터베이스 정보, 도메인 경로 등의 중요한 정보들을 편리하게 관리할 수 있게 해주며, 개발 환경의 유연성을 높여주고 보안 측면에서도 중요한 역할을 합니다.1. env파일의 사용환경 변수를 .env 파일에 저장함으로써, 개발자는 개발, 테스트, 프로덕션 등 다양한 환경에 맞는 설정을 쉽게 전환할 수 있습니다. 이는 로컬 개발 환경에서 사용하는 데이터베이스 서버 주소가 프로덕션 환경에서 사용하는 주소와 다를 경우와 같이, 환경에 따른 설정의 차이를 쉽게 관리할 수 있게 해줍니다.2. gitHub업로드대부분의 경우, .env 파일은 중요한 설정 정보를 포함하고 있기 때문에 .. NextJs 12: next.js글삭제 처리 및 CRUD예제 다운로드 안녕하세요, 각성한 데브키라입니다. 글 삭제 기능이 비교적 단순하기 때문에, 별도의 모듈로 분리할 필요 없이 'Link' 태그 내에서 'onClick' 이벤트를 직접 지정하여 구현하기로 결정했습니다. 이 방식을 통해 코드의 복잡성을 줄이고, 기능의 구현을 더욱 직관적으로 만들 수 있습니다.글삭제 소스코드page.js"use client"import Link from 'next/link';import { useParams, useRouter } from 'next/navigation';export function ButtonControl() { const params = useParams(); const router = useRouter(); // 수정됨: useRouter Hook을 사용 cons.. NextJs 11: next.js글수정 useEffect 안녕하세요, 각성한 데브키라입니다. 웹 애플리케이션 개발 과정에서 사용자의 편의를 위해 글 수정 기능을 추가하는 것은 매우 중요한 과정 중 하나입니다. 이를 위해 구조적인 준비와 코드의 정확한 구현이 필수적입니다. 본 문서에서는 글 수정 기능을 추가하기 위한 폴더 구조 설정과 필수 소스코드 구현에 대해 다루고자 합니다.1. 글수정을 위해 추가된 구조"update" 폴더를 생성하고 그 안에 "[id]"라는 이름의 디렉터리를 만들었습니다. 이 "[id]" 디렉터리는 특별한 기능을 가지고 있으며, 사용자로부터 입력 받은 id 파라미터를 "page.js" 파일로 전달하는 역할을 합니다.2. 글수정 소스코드입력 필드에 문자를 입력해도 반영되지 않는 문제를 방지하려면, onChange={(e)=>setTitle(.. NextJs 10: 버튼 컴포넌트를 별도 파일로 분리 후 활성 비활성화 처리 안녕하세요. 각성한 데브키라입니다. 이번 포스팅에서는 좌측 목록을 클릭했을 때 해당 목록의 ID가 존재할 경우에만 활성화되는 기능을 탑제한 버튼 영역을 별도의 클라이언트 컴포넌트 파일로 분리하는 작업을 진행하겠습니다. 목록 ID가 생성되지 않았을 때는 버튼이 비활성화되도록 처리할 것입니다.1. 버튼 영역을 별도의 컴포넌트로 분리2. 별도의 파일로 컴포넌트 분리좌측 목록을 클릭했을 때 전달되는 파라미터 값을 효율적으로 사용하기 위해서는 해당 부분을 클라이언트 컴포넌트로 정의해야 합니다. 그러나 특정 부분에만 "use client"를 적용할 수 없기 때문에, 이를 별도의 파일로 분리할 계획입니다.해당 컴포넌트 함수 상단에 위치한 전구 모양 아이콘을 클릭하면, 컴포넌트를 쉽게 별도의 파일로 분리할 수 있는 메.. NextJs 09: Next.js 글입력 작성과 캐시처리 안녕하세요. 각성한 데브키라입니다. JSON Server를 사용하여 Next.js에서 글 입력 기능을 구현하는 방법에 대해 설명하겠습니다. JSON Server는 REST API를 모의로 구현할 수 있는 간단한 방법을 제공합니다. 이를 통해 개발 중인 프런트엔드 애플리케이션에 백엔드가 없어도 데이터를 생성, 읽기, 업데이트, 삭제(CRUD)할 수 있습니다. fetch 함수에서 사용할 수 있는 캐시 옵션들은 다음과 같습니다. 이 옵션들은 요청 시의 캐싱 동작을 제어하는 데 사용됩니다. 이 포스팅에서는 no-store옵션을 사용하였습니다. 1. default: 브라우저의 기본 캐시 정책을 따릅니다. 명시적으로 캐싱 동작을 설정하지 않을 때 사용되는 기본값입니다.2. no-store: 어떠한 캐시도 사용하지 .. NextJs 08: Next.js를 활용한 동적 웹 콘텐츠 글보기 화면 실습 안녕하세요, 각성한 데브키라입니다. 현대 웹 개발의 핵심은 사용자 경험입니다. 이를 위해 Next.js를 활용한 동적 웹 콘텐츠 구현 방법을 실습을 통해 공유합니다. Next.js는 빠르고 유연한 웹 애플리케이션 개발을 가능하게 합니다.1. 서버의 구성VSCode의 터미널에서 9999번 포트를 사용하여 서버를 실행하였습니다. 서버가 실행되면, 자동으로 db.json 파일이 생성됩니다. 실습을 위해, 이 파일에 popics라는 항목을 추가하였습니다.또한, Node.js는 3000번 포트로 실행되었습니다.파일명: db.json{ "topics": [ {"id": 1, "title":"블랙핑크", "body":"블랙핑크 good!"}, {"id": 2, "title":"아이브", "body":"아.. NextJs 07: 서버컴포넌트 vs 클라이언트컴포넌트 안녕하세요, 각성한 데브키라입니다. 오늘은 Next.js에서 제공하는 서버 컴포넌트와 클라이언트 컴포넌트의 차이점에 대해 알아보고, 각각의 상황에서 어떻게 활용하는 것이 가장 효과적인지에 대해 이야기해보겠습니다.Next.js의 서버 컴포넌트특징렌더링 방법: 서버가 HTML을 렌더링 하여 클라이언트에 전송합니다.자바스크립트 요구사항: 클라이언트가 자바스크립트 파일을 받지 않으므로, 브라우저에서 자바스크립트가 비활성화되어도 페이지가 제대로 기능할 수 있습니다.사용 사례: 사용자 상호작용이 없는 정보 페이지에 주로 사용됩니다.장점1. 빠른 초기 로딩 속도: 서버에서 미리 렌더링된 HTML로 인해 초기 페이지 로딩이 빠릅니다.2. SEO 최적화: 서버 렌더링 페이지는 검색 엔진에 의해 더 잘 인식됩니다.3. 클.. NextJs 06: npx와 json-server 사용하기 안녕하세요. 각성한 데브키라입니다. 웹 애플리케이션을 개발할 때 백엔드 개발이 완료되기 전에 프론트엔드 개발을 진행해야 하는 경우가 있습니다. 이런 경우, "가짜" 데이터를 제공할 수 있는 간단한 서버가 필요합니다. json-server는 이 목적에 매우 적합한 도구입니다. 이 글에서는 json-server를 사용하여 간단하게 REST API를 구축하는 과정을 안내합니다.json-server란 무엇인가?json-server는 JSON 파일을 데이터베이스로 사용하여 가짜 REST API를 생성할 수 있게 해주는 Node.js 라이브러리입니다. 설치가 쉽고 몇 줄의 명령어로 서버를 시작할 수 있습니다.설치 및 실행npx를 사용하여 json-server를 설치하지 않고 실행할 수 있습니다. npx는 Node.. 이전 1 2 다음
