본문 바로가기

개발(Development)273

[Next.js 13] 프로젝트 폴더/파일 구조 이해하기 # Next.js 13 프로젝트 (폴더/파일) 구조 Next.js 13 프로젝트를 설치하면, 기본적으로 아래와 같은 프로젝트 구조를 갖게 된다. 최상위 루트 폴더 /app 폴더 /public 폴더 /src 폴더(Optional) /.next 폴더 /node_modules 폴더 최상위 루트 파일 Next.js 설정 파일들 next.config.js 파일 .next-env.d.ts 파일 .env 파일 그외 환경 설정 파일들 package.json 파일 .gitignore 파일 tsconfig.json 파일 .eslintrc.json 파일 [ VS Code 상에서 본 프로젝트 구조 ] # Next.js 13 폴더/파일의 구조 및 역할 각 폴더와 파일의 역할에 대해서 간단하게 살펴보면 다음과 같다. 1. 최상위.. 2023. 8. 19.
[Next.js 13] import alias @ 설정/추가/수정/삭제 방법 # Next.js 13 - import alias 란? import alias 란 import 할 때마다 매번 복잡한 경로를 입력할 필요 없이, 공통되는 부분은 @로 치환하여 사용하는 방법을 의미한다. import Header from "@/components/common/Header"; export default function BoardPage() { return ( BoardPage ); } 만약 import alias 없다면, 매번 import 할때마다 "../../components/common/.." 등의 복잡한 경로를 작성해주어야 한다. import Header from "../../components/common/Header"; export default function BoardPage(.. 2023. 8. 19.
[Next.js 13] 서버 포트 번호 변경 방법 Next.js 에서 서버를 구동하면, 기본적을 3000번 포트에서 서버가 실행된다. 물론 개발 서버와 프로덕션(배포용) 서버의 포트 번호 변경도 가능하며, 아래의 방법대로 진행하면 된다. # 서버 포트 변경 방법 개발 서버 및 프로덕션 서버의 포트를 변경하려면, package.json 파일에서 `-p 포트번호` 옵션을 추가하여 스크립트를 실행해주면 된다. "scripts": { "dev": "next dev -p 5000", "build": "next build", "start": "next start -p 6000", "lint": "next lint" } 예를 들어, 위와 같이 스크립트 수정후, - `npm run dev` 명령어를 실행하여 개발 모드로 서버를 구동하면, `http://localhos.. 2023. 8. 18.
[Next.js 13] 설치, 빌드, 서버 구동 방법 (개발 모드/프로덕션 모드) # Next.js 13 설치 방법 기본적으로 Node.js 16.8 이상이 설치된 상태에서 진행해야 한다. (node.js 공식 홈페이지에 방문하여 OS에 맞는 설치파일을 다운로드 받아서 설치하면 된다.) 1. 설치 `create-next-app` 명령어를 사용하여 Next.js를 설치하면, 관련 설정까지 자동으로 세팅된다. 터미널에서 상에서 원하는 경로로 이동 후, 아래 명령어를 실행한다. npx create-next-app@latest 만약 현재 경로 상에 설치하려면, 명령어 뒤에 마침표( . )를 하나 붙여준다. npx create-next-app@latest . 2. 세팅 설치를 시작하면 터미널 상에서 몇가지 질문을 받게 된다. 프로젝트 이름, 사용할 라이브러리, 추가 설정에 관한 것으로 추천하는.. 2023. 8. 18.
[Next.js 13] Next.js란? 주요 기능과 역할 # Next.js란 Next.js는 React로 웹 서비스를 구축할 수 있는 풀스택 프레임워크이다. 구체적으로 Next.js는 다음과 같은 역할을 수행할 수 있다. Front-End Server: 브라우저의 요청을 받으면, React로 렌더링한 HTML페이지를 응답한다. API Server: 클라이언트의 API 콜을 받아서 JSON등을 응답한다. Back-End Server: Node.js 환경에서 구동되므로, 데이터 베이스 연동, 파일시스템 접근 등이 가능하다. 이 외에도 복잡한 번들링, 컴파일 등의 설정 작업을 Next.js 에서 기본적으로 제공해주기 때문에, 개발자는 좀더 웹 개발에만 집중할 수 있게 되어 아주 유용하다. (+성능 또한 좋다) 한마디로 Node.js의 Express와 유사한 프레임워.. 2023. 8. 18.
[React] 모달창(Modal) 쉽고 간단한 구현 방법 (HTML dialog 엘리먼트 사용) # 리액트 - 모달창 초간단 구현 방법 HTML 에서 기본 제공하는 dialog 엘리먼트를 이용하면, 아래의 2가지를 아주 쉽게 구현할 수 있다. 1. 모달창 2. 다이얼로그 모달창과 다이얼로그의 차이는 - 모달창: dialog 엘리먼트 외부 영역이 불투명하게 dim 처리되고, 스크롤을 제외한 인터랙션(클릭 등)이 허용되지 않는다. - 다이얼로그: 툴팁처럼 노출되며 인터랙션에 영향을 미치지 않는다. dialog 엘리먼트를 이용하면, React에서 useState 나 외부 상태 관리 라이브러리 등을 사용하지 않아도 아주 쉽게 모달창을 구현할 수 있다. 당연히 Next.js 13 환경에서도 동일하게 모달창을 구현할 수 있다. 1. 모달창 dialog 엘리먼트는 비노출 상태가 디폴트이며, (open 속성을 t.. 2023. 8. 15.
[TypeScript] 타입스크립트란? 기초 원리와 설치 방법 TypeScript 기초 TypeScript란? 누가 TypeScript를 만들었을까? TypeScript와 JavaScript의 차이점 TypeScript의 장점 TypeScript의 작동 원리 TypeScript 설치 및 환경 구축 tsconfig.json 세팅 TypeScript 코드를 JavaScript 코드로 컴파일 하는 방법 TypeScript란? 타입스크립트는 타입 정의가 추가된 자바스크립트이다. 물론 Javascript도 number, string 등 타입이 있지만, 타입을 고정해 둘 수가 없다. 심지어, number로 선언한 변수에 string 타입의 값도 할당할 수 있다. 이는 미리 파악하기 힘든 런타임 에러를 발생시킬 가능성이 높다. 예를 들어, 사용자가 숫자를 입력할 거라고 생각하고.. 2023. 8. 3.
[Next.js 13] async 서버 컴포넌트 JSX/Promise 반환 에러 해결 방법 # Async 서버 컴포넌트 Promise 반환 이슈 Next.js13에서 Data Fetching 등을 위해 async 함수 형태의 Server Component 를 사용하면 아래와 같은 에러가 뜰 때가 있다. 'ServerComponent' cannot be used as a JSX component. Its return type 'Promise' is not a valid JSX element. Type 'Promise' is missing the following properties from type 'ReactElement': type, props, keyts(2786) # 원인 Next.js 13의 서버 컴포넌트를 async 함수로 사용하면 JSX가 아닌 Promise를 반환한다. React .. 2023. 5. 12.
[Typescript] @ts-ignore vs. @ts-expect-error 차이, 사용법(타입 에러 무시) # Typescript 의 에러 무시 방법 Typescript 사용시, 의도적으로 에러를 무시해야하는 경우가 있다. 타입스크립트 자체의 이슈 때문일 수도 있고, 개발자가 의도적으로 에러 발생을 무시해야하는 경우가 있을 수도 있다. 이럴 땐, 아래의 2가지 주석 중 하나를 에러가 발생하는 코드 위에 추가해주면 된다. // @ts-ignore // @ts-expect-error Typescript의 붉은 에러 경고가 깔끔하게 사라진다. # // @ts-expect-error 와 // @ts-ignore 의 차이점 위 두가지 주석은 미묘한 차이가 있다. 이 차이를 인식하고 필요할 때 적절하게 사용해주면 된다. 1. // @ts-expect-error - 코드에 에러가 있으면 => 해당 코드의 에러를 무시한다... 2023. 5. 9.

티스토리툴바