이번 편에서는 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 엔드포인트 생성 가능.-파일 기반 라우팅: 별도의 라우터 ..