본문 바로가기
반응형

분류 전체보기166

[TypeScript] 1장: TypeScript 소개 및 개발 환경 설정 1장: TypeScript 소개 및 개발 환경 설정JavaScript 코드에 타입을 더해 안정성을 높이는 TypeScript의 세계에 오신 것을 환영합니다. TypeScript가 왜 필요한지, Java와 비교했을 때 어떤 장점이 있는지 알아보고, 첫 코드를 작성하기 위한 개발 환경을 설정합니다.1. TypeScript, 왜 필요한가요?JavaScript는 매우 유연한 동적 타입 언어지만, 프로젝트의 규모가 커질수록 이 유연함은 예기치 않은 버그의 원인이 되기도 합니다.JavaScript의 문제점 (Java와 비교)// 숫자를 더하는 함수를 만들었습니다.function add(a, b) { return a + b;}add(10, 20); // 30 (정상)add('10', '20'); // '1020.. 2025. 9. 17.
[NextJs] Next.js A to Z: Spring 개발자를 위한 완벽 가이드 Next.js A to Z: Spring 개발자를 위한 완벽 가이드안녕하세요! Spring으로 백엔드 개발에 입문하신 것을 축하드립니다. 이제 현대적인 프론트엔드 기술 스택의 핵심인 Next.js를 배우실 차례입니다. 이 가이드는 Spring 개발자의 관점에서 Next.js의 모든 것을 이해하기 쉽게 설명합니다.목차Intro: Next.js, 왜 필요한가?React, 그리고 Next.js의 역할Spring Boot + Thymeleaf vs Next.js: 무엇이 다른가?Next.js의 핵심 철학: 렌더링의 모든 것Chapter 1: 개발 환경 설정 및 첫 프로젝트필수 도구 설치 (Node.js, VS Code)create-next-app으로 프로젝트 시작하기프로젝트 구조 훑어보기 (Spring Boot.. 2025. 9. 17.
[NextJs] Chapter 8: 배포와 그 너머 Chapter 8: 배포와 그 너머열심히 만든 애플리케이션을 세상에 공개할 시간입니다. Next.js는 개발사인 Vercel을 통해 매우 쉽고 빠른 배포를 지원합니다. 또한, 코드에 하드코딩하면 안 되는 민감한 정보를 관리하는 방법도 알아봅니다.1. Vercel을 이용한 원클릭 배포Vercel은 Git 리포지토리를 연결하여, main 브랜치에 코드를 push 할 때마다 자동으로 빌드 및 배포를 수행해주는 플랫폼입니다.배포 과정:GitHub에 프로젝트 Push: 지금까지 만든 Next.js 프로젝트를 GitHub 리포지토리에 push합니다.Vercel 가입 및 연동: Vercel에 GitHub 계정으로 가입하고 로그인합니다.프로젝트 Import: Vercel 대시보드에서 'Add New... -> Proj.. 2025. 9. 17.
[NextJs] Chapter 7: 실전 예제 - 나만의 블로그 만들기 Chapter 7: 실전 예제 - 나만의 블로그 만들기지금까지 배운 개념(SSG, 동적 라우팅, 컴포넌트 등)을 총동원하여 간단한 마크다운 기반 블로그를 만들어 봅시다. 이 예제는 Next.js의 핵심 기능을 실제로 어떻게 활용하는지 보여주는 좋은 사례입니다.요구사항posts 폴더에 있는 마크다운(*.md) 파일들을 읽어와 블로그 게시물로 사용한다.메인 페이지(/)에는 모든 포스트의 제목과 날짜 목록이 보인다. (SSG)목록의 제목을 클릭하면 해당 포스트의 상세 페이지(/blog/[slug])로 이동한다. (동적 라우팅)상세 페이지에서는 마크다운으로 작성된 본문 내용이 HTML로 렌더링되어 보인다. (SSG)Step 1: 프로젝트 설정 및 포스트 데이터 준비npx create-next-app my-blo.. 2025. 9. 17.
[NextJs] Chapter 6: 스타일링과 UI Chapter 6: 스타일링과 UI애플리케이션의 기능만큼이나 중요한 것이 바로 디자인입니다. Next.js는 다양한 CSS 스타일링 방식을 지원합니다. 여기서는 가장 대표적인 두 가지 방식과, 현대 웹 개발의 대세인 Tailwind CSS에 대해 알아봅니다.1. 전역(Global) CSS애플리케이션 전체에 적용되는 CSS입니다. src/pages/_app.js 파일에서만 import 할 수 있습니다. 주로 폰트 설정, body 태그 스타일 초기화 등 전역적인 스타일을 정의할 때 사용합니다./* src/styles/globals.css */body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, .. 2025. 9. 17.
[NextJs] Chapter 5: API Routes - Next.js로 만드는 미니 백엔드 Chapter 5: API Routes - Next.js로 만드는 미니 백엔드Next.js는 프론트엔드 프레임워크이지만, 간단한 백엔드 API 서버 기능도 내장하고 있습니다. Spring Boot 프로젝트를 따로 만들지 않고도, Next.js 프로젝트 내에서 직접 API를 만들고 호출할 수 있습니다.1. pages/api 폴더의 역할src/pages/api 폴더 안에 만드는 파일들은 페이지가 아니라 API 엔드포인트가 됩니다. Spring의 @RestController와 같은 역할을 합니다.src/pages/api/hello.js → /api/hello 라는 API 엔드포인트가 생성됩니다.src/pages/api/posts/[id].js → /api/posts/1 처럼 동적인 API 엔드포인트도 만들 수.. 2025. 9. 17.
반응형

티스토리툴바