Way to be gorgeous developer

도커를 사용할 때 DB 호스트는 컨테이너 이름으로 한다.// .env# DB_HOST=localhost # localDB_HOST=my-mysql # DockerDB_PORT=3306DB_USER=rootDB_PASS=[MY_PASS]DB_DATABASE=[MY_DB]docker-compose.yml 파일과 함께 실행한다면 Dockerfile을 직접 실행하지 않는다.// DockerfileFROM node:22WORKDIR /appCOPY package*.json ./RUN npm installCOPY . .RUN npm run buildCMD ["npm","run","dev"]EXPOSE 8000ROOT 사용자로 DB 연결일반 사용자로 연결한다면 services-db-environment 키값이 바뀌어..

1. handler 함수를 사용하지 않는다.GET, POST 등 메소드별 개별 함수를 사용한다. 2. 메소드 함수의 매개변수는 res를 받지 않는다. req만 받는다.export const GET = async (req: NextRequest) => { return NextResponse.json(data, { status: 200 });} 3. Request, Response는 다음 타입을 따른다.req: NextRequestres: NextResponseNextApiRequest, NextApiResponse는 사용하지 않는다. 4. 리턴 타입은 다음과 같다.// return NextResponse.json({JSON_RESULT}, {STATUS_CODE});return NextResponse.js..

프로젝트를 마치고 aws 프리티어 기간이 끝나면 잊혀지는 프로젝트가 많았다.그래서 일정 기간 경과 후, vercel에도 배포할 예정이었다.그러기 위해서는 별도의 백엔드 서버를 최대한 쓰고 싶지 않았다. next.js는 ssr을 활용하기 때문에 내장 서버 node.js가 포함되어있다.HTTP연결을 마치고 Socket연결을 하던 중, 내장서버에서 별개의 포트를 열 수 없는 문제에 직면했다. 소켓통신만 node 프로젝트를 한개 더 만들까, 아예 nest로 백엔드를 옮길까 여러 고민을 했다.그러다 커스텀 서버로 포트를 개방할 수 있다는 방법을 찾았고 해결했다. next dev위 명령어를 사용하면 next.js에 내장된 node.js 서버를 자동으로 구동한다.소켓통신을 하기 위해서는 내장서버 이외에 별도 포트를 ..

1. 먼저 사용할 전역 context 컴포넌트를 작성한다.// global-context.tsximport React, { useState, createContext, useContext } from "react";// -> 여기에 사용할 변수들, 함수 인터페이스 작성interface IGlobalContext { token: string | null; setToken: (token: string) => void;}const GlobalContext = createContext(undefined);export const GlobalContextProvider = ({ children }: { children: React.ReactNode }) => { const [token, setToken] = ..

1. 전역으로 사용할 css파일을 만든다.어디에 위치하든 상관없다. 2. Root Layout 파일에 임포트한다.import "../styles/global.css"; 3. 컴포넌트 css 모듈어디에 위치하든 상관없다.단 이름을 아무이름.module.css로 생성해야 한다.css파일에서 클래스명만 사용한다.자바스크립트 파일처럼 임포트한다.// navigation.module.css.nav{ background-color: red;}.list{ font-size: 11px;}// components/navigation.tsx"use client";import styles from "../styles/navigation.module.css";const Navigation = () => { return..

Parallel Request자바스크립트는 싱글스레드로 동작한다.C++에서 비동기 프로그래밍과는 다르게 동작된다. C++에서는 하나의 스레드가 비동기 작업을 요청하고 다른 로직을 실행하면, 다른 스레드가 비동기 작업을 마무리하고 요청한 스레드에게 알린다. JavaScript에서 비동기 작업은 이벤트 루프(Event Loop)와 태스크 큐(Task Queue)를 통해 처리된다.메인 스레드가 비동기 작업을 요청하면, 해당 작업은 백그라운드(브라우저 또는 Node.js 런타임에서 제공하는 스레드)에서 처리된다.작업이 완료되면, 결과를 태스크 큐에 넣고, 메인 스레드가 대기 중이거나 호출 스택(Call Stack)이 비었을 때 태스크 큐에 있던 작업이 실행된다.따라서, 비동기 작업이 완료되어도 절차적으로 순서가..

해당 page 파일과 같은 위치에 loading 파일이 존재해야한다.-> 해당 page 파일에 대해 loading 컴포넌트를 제공한다.ex) 아래의 경우, / 페이지에서 로딩 컴포넌트가 제공된다. 해당 page 파일의 메인 함수는 async로 동작해야한다.const GetMovies = async () => { await new Promise((resolve) => setTimeout(resolve, 5000)); // 임의 로딩 const res = await fetch(URL, { cache: "no-store" }); // SSR용 옵션 return await res.json();};const Start = async () => { const movies = await GetMovies();..

React 수준의 data fetchClient side fetch클라이언트 사이드에서 데이터를 가져오기 때문에 metadata를 사용할 수 없다."use client";import { Metadata } from "next";import { useState, useEffect } from "react";// export const metadata: Metadata = {// title: "Home",// };const Start = () => { const [isLoading, setIsLoading] = useState(true); const [movies, setMovies] = useState(); const getMovies = async () => { const response ..

1. 폴더구조의 router는 static router이다 2. dynamic router는 /movie/:id 형식이다// app/(movies)/movies/[id]/page.tsxexport const metadata = { title: "Movie",};// const Movie = (props) => {const Movie = ({ params: { id } }: { params: { id: string } }) => { // console.log(props.params, props.searchParams); return Movie - {id};};export default Movie;

1. 페이지마다 컴포넌트 렌더링을 수행한다.Layout 렌더링 -> URL 탐색 -> 컴포넌트 렌더링, 레이아웃 렌더링 -> 계속 폴더 탐색, 컴포넌트 및 레이아웃 렌더링...// localhost:3000/about ...  2. URL 폴더에 새로 layout 파일을 생성하면, 해당 페이지는 그 레이아웃을 포함한다.(중첩)// html, body 태그를 빼고 div 태그를 사용한다.export default function AboutLayout({ children }: { children: React.ReactNode }) { return ( {children} © Next.js );}해당 URL 폴더 아래 폴더를 만들면, 위에 작..