프로젝트 진행 틈틈이 프로젝트에 사용하는 여러 툴을 추가해 보고 있다.기존 프로젝트를 하면서 써봤던 것도 있는데 직접 설정할 기회가 많지는 않았기 때문이다. 코드 포맷 툴에는 대표적으로 eslint와 prettier가 있다.프론트엔드 개발을 하면 거의 모든 프로젝트에서 이 같은 툴을 사용한다. 포맷을 맞춰주지 않으면 세미콜론을 넣냐 안 넣었냐나,띄어쓰기는 몇 개나 들어가냐 하는 사소한 것으로 변경 내역이 표시된다.이러면 git에서 올릴 때 중요한 변경 내역만 표시하지 못 하게 된다. eslint의 주요 기능은 다음과 같다.  • 문법 오류: 정의되지 않은 변수, 미사용 변수, 잘못된 문법 사용 등과 같은 문제를 탐지합니다. • 베스트 프랙티스: 성능에 영향을 미치는 코드 패턴이나 잘못된 코딩 습관을 경고..

이번 편에서는 CRUD 기능 중에 RUD 부분을 만들어 간다.순서적으로는 만들기 간단한 R > D > U 순으로 만들 예정이다. 1. 글 열람 기능 만들기 /dashboard/{게시글id}로 접속하면 글 열람 화면이 나오게 하면 된다. 1) 위 URL 경로에 따라 페이지를 만든다.2) 글 열람 API를 만든다.3) 경로에 접속해 페이지가 표시될 때 글 열람 API를 호출한다.4) 호출해 받은 데이터를 페이지에 바인딩할 수 있게 HTML 부분을 만든다. 대략 이 순서대로 하나씩 만들어 가면 된다.일단 기존에 했던 대로 폴더명을 경로에 맞게 지정하고 안에 page.tsx 파일을 만든다. dashboard/[id]/page.tsx'use client';import { useState } from 'react'..

전편에서 게시판 형태의 화면을 만들어 보았다.이번 편에서는 글쓰기 기능을 추가해 새로운 글을 등록할 수 있게 해볼 것이다.일단 해야 할 작업을 간단하게 나열해 보면 다음과 같다. 1) 글쓰기 버튼 추가해 누르면 글쓰기 화면으로 이동하게끔 한다.2) 글쓰기 페이지를 만들고 제출 버튼을 누르면 글쓰기 API를 호출할 수 있게 한다.3) nextjs 기능 중 하나인 API 기능을 활용해 입력값을 받아 새로운 글을 추가할 수 있는 API를 만든다.4) 글쓰기가 성공적으로 완료되면 게시판 화면으로 리다이렉트한다.  1) 글쓰기 버튼 추가해 누르면 글쓰기 화면으로 이동하게끔 한다. 일단 addButton이라는 컴포넌트를 만들었다.한 가지 유의할 점은 코드 상단에 보면 "use client"라는 게 있는데,서버에서 ..

이번 편에서는 Vercel을 통해 DB를 연결하고 직접 넣은 데이터를,게시판 형태로 화면에 표시하는 데까지 진행해보도록 할 예정이다.  스토리지 생성 후 아래 안내에 따라 기존 vercel 프로젝트와 연결 후,노드 모듈을 설치하고 연결해준다.  쿼리를 날려 DB와 소통하는 기능을 vercel 사이트 자체에서 제공하고 있긴 하지만,좀 더 편리하게 이용하기 위해 여기선 DBeaver라 하는 DB 툴을 사용하도록 하겠다.  Host, Database명, Username, Password를 잘 확인하고,Vercel 사이트에 나와 있는 그대로 입력해 준다.   DBeaver를 통해서 테이블을 만들어 주고 컬럼도 추가해준다.여기서는 일단 테스트용으로 간단하게 id, content만 추가해 보았다.  데이터를 수동으..

1. CSS 스타일링 설정 (SASS를 사용한 방식) Next.js에서는 다음과 같이 다양한 방식의 CSS 스타일링을 지원한다. • CSS Modules: CSS 클래스를 로컬 범위로 설정하여 이름 충돌을 방지. • Global CSS: 전체 적용되는 CSS 스타일을 지정, 앱이 커질수록 스타일 관리가 어려워질 수도 있다. • Tailwind CSS: 유틸리티 우선 CSS 프레임워크로, 유틸리티 클래스를 조합하여 빠르게 커스텀 CSS를 설정할 수 있다. • Sass: 변수, 중첩 규칙, 믹스인 등의 기능을 제공하여 현재 널리 사용되는 CSS 전처리기입니다. • CSS-in-JS: JavaScript 컴포넌트 내에 CSS를 직접 삽입하여 동적으로 스타일을 적용할 수 있다. 그 중에 가장 보편적으로 사용되..

React는 프론트엔드 개발에서 가장 인기 있는 라이브러리 중 하나로, 대규모 웹 애플리케이션을 구축할 때 유용하게 사용된다. 하지만 React로 대규모 프로젝트를 진행하다 보면 서버 사이드 렌더링(SSR), 라우팅, 성능 최적화 등 다양한 기능을 고려해야 할 때가 많다. 이 때 Next.js는 이러한 기능을 쉽고 편리하게 사용하게 해주는 프레임워크다. Next.js의 주요 기능-서버 사이드 렌더링(SSR): 서버에서 미리 HTML을 생성하여 더 빠른 페이지 로딩 및 SEO 최적화 가능.-정적 사이트 생성(SSG): 빌드 시 HTML을 미리 생성해 퍼포먼스 향상.-API 라우트: API 서버를 별도로 설정할 필요 없이 Next.js 내에서 API 엔드포인트 생성 가능.-파일 기반 라우팅: 별도의 라우터 ..