프로그래밍 허브

1. Next.js

Next.js는 React를 기반으로 한 서버 사이드 렌더링(SSR), 정적 사이트 생성(SSG), API Routes 등의 기능을 지원하는 프레임워크입니다.
특히 SEO 최적화와 빠른 페이지 로딩을 위한 기능이 많이 제공됩니다.

주요 특징

• 파일 기반 라우팅: pages 폴더에 있는 파일을 기반으로 자동으로 라우팅 설정
• SSR/SSG 지원: 페이지를 서버에서 미리 렌더링해 보내거나, 빌드 시 정적으로 생성
• API Routes: 서버리스 함수처럼 API를 손쉽게 작성할 수 있음

Next.js 예제 코드

# Next.js 설치
npx create-next-app@latest my-next-app
cd my-next-app
npm run dev

pages/index.js

import React from 'react';

const Home = () => {
  return (
    <div>
      <h1>Welcome to Next.js!</h1>
    </div>
  );
}

export default Home;

2. Express.js

Express.js는 Node.js 기반의 간단하고 유연한 웹 서버 프레임워크입니다.
주로 API 서버를 구축하거나, RESTful API 및 미들웨어를 활용한 요청 처리에 적합합니다.

주요 특징

• 라우터 및 미들웨어: HTTP 요청을 처리하는 기본적인 기능 제공
• 유연성: 다양한 플러그인과 미들웨어를 통해 확장 가능
• 빠른 개발: 설정이 간단하고, 직관적인 코드 작성

Express.js 예제 코드

# Express 설치
npm init -y
npm install express

app.js

const express = require('express');
const app = express();

// 기본 라우팅
app.get('/', (req, res) => {
  res.send('Hello World from Express!');
});

// 서버 실행
app.listen(3000, () => {
  console.log('Server running on http://localhost:3000');
});

✅ Next.js vs Express.js — 요약

✅ 한 줄 요약

• Next.js: 서버 사이드 렌더링과 정적 사이트 생성이 필요한 React 기반 웹 애플리케이션
• Express.js: 간단한 API 서버와 HTTP 요청 처리에 최적화된 Node.js 프레임워크

Next.js는 개발자들이 효율적으로 작업할 수 있도록 폴더와 파일 구조에 명확한 규칙을 제공합니다.
덕분에 프로젝트 규모가 커져도 체계적인 코드 관리가 가능하죠.

✅ 기본 폴더 구조

예를 들어:

• app 폴더
  • 파일 기반 라우팅
  • 폴더/파일 이름이 URL 경로가 됨
  • ex) app/about/page.tsx → /about 라우트 생성
• public 폴더
  • 정적 파일(이미지, 폰트, favicon 등) 관리
  • public 폴더 안의 파일은 URL로 접근 가능
    • 예) /public/images/logo.png → /images/logo.png
• components 폴더
  • UI 컴포넌트 모아두는 폴더
  • 재사용성과 유지보수에 유리

✅ 라우트(Route)란?

라우트(Route) = 웹 애플리케이션에서 특정 리소스에 접근하기 위한 경로나 주소

• /about → About 페이지
• /blog/123 → 블로그 글 상세 페이지

✅ 세그먼트(Segment)란?

URL 경로에서 슬래시(/)로 구분되는 각각의 부분

예) /blog/posts/123 경로에서

• blog → 세그먼트
• posts → 세그먼트
• 123 → 세그먼트
• 루트 세그먼트
  • 웹사이트의 시작점
  • 경로: /
• 리프 세그먼트
  • URL 경로의 마지막 부분
  • 예) /blog/posts/123 → 123이 리프 세그먼트

✅ 페이지 간 링크 연결

Next.js에서 라우트 간 이동은 <Link> 컴포넌트로 처리합니다.
HTML의 <a> 태그와 비슷하지만, 추가 기능이 있습니다:

✅ <Link>의 특징

• 클라이언트 사이드 내비게이션
  • 전체 페이지 새로고침 없이 화면만 바뀜
• Prefetching
  • 사용자가 클릭하기 전에 필요한 페이지 데이터를 미리 로드
  • UX가 매우 빨라짐

✅ 사용 예시

예) 블로그 포스트 목록 만들기

// app/blog/page.tsx

import Link from "next/link";

export default function BlogPage() {
  const posts = [
    { id: 1, title: "Next.js 라우팅 이해하기" },
    { id: 2, title: "Next.js API Routes 완전정복" },
  ];

  return (
    <div>
      <h1>블로그 목록</h1>
      <ul>
        {posts.map((post) => (
          <li key={post.id}>
            <Link href={`/blog/${post.id}`}>
              {post.title}
            </Link>
          </li>
        ))}
      </ul>
    </div>
  );
}

✅ 결과

위 코드를 실행하면 /blog 페이지에서:

• “Next.js 라우팅 이해하기” 클릭 → /blog/1로 이동
• “Next.js API Routes 완전정복” 클릭 → /blog/2로 이동

모두 새로고침 없이 부드럽게 이동합니다.

✅ 한 줄 요약

Next.js는 폴더 구조 기반 라우팅 + 클라이언트 내비게이션으로
웹앱 개발을 쉽고 빠르게 만들어줍니다!

1. ESLint란?

“코드 규칙의 경찰관”

• 코드에 문법 오류, 스타일 규칙 위반, 버그 가능성 등을 검사
• 미리 정한 규칙에 따라 경고/에러 표시
• 팀 프로젝트에서 일관된 코드 스타일 유지에 필수

✅ 비유

ESLint는 문서 작성 시 맞춤법 검사기와 같다.
틀린 글자를 빨간 줄로 알려주듯, 잘못된 코드를 실시간으로 지적해 준다!

✅ 예시 규칙

• no-unused-vars → 선언했는데 쓰지 않는 변수 잡아줌
• eqeqeq → == 대신 === 쓰라고 알려줌
• semi → 세미콜론 누락 감지

2. Prettier란?

“자동 정리 도구”

• 코드 스타일을 통일해 주는 툴
• 들여쓰기, 따옴표, 줄바꿈 등 코드 포맷팅 담당
• ESLint가 규칙 검사라면, Prettier는 형식을 “자동으로 고쳐주는” 역할

✅ 비유

Prettier는 엑셀의 자동 서식 정리처럼, 코드를 “예쁘고 깔끔하게” 정리해 준다.

✅ 사용 예

• 2칸 들여쓰기
• 탭 대신 스페이스
• 한 줄 길이 제한

✅ ESLint vs Prettier 차이

3. TypeScript 설정과 설명

“자바스크립트에 타입을 입혀 안정성을 높여주는 언어”

• JavaScript + 타입 시스템
• 변수, 함수, 객체에 타입 지정
• 런타임 에러를 컴파일 단계에서 미리 차단

✅ 비유

TypeScript는 자동차 보험과 같다.
사고가 나기 전에 대비해 두면, 나중에 큰 피해를 막을 수 있다!

✅ tsconfig.json 예시

json

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "ESNext",
    "strict": true,
    "esModuleInterop": true,
    "baseUrl": "./",
    "paths": {
      "@components/*": ["src/components/*"]
    }
  },
  "include": ["src"],
  "exclude": ["node_modules"]
}

• strict → 엄격한 타입 체크
• baseUrl, paths → 경로 Alias 설정 가능
• esModuleInterop → CommonJS 모듈 호환

4. shadcn/ui란?

“Next.js 기반의 React UI 컴포넌트 라이브러리”

• shadcn/ui는 Next.js, TailwindCSS에 최적화된 UI 라이브러리
• 컴포넌트를 설치하면 코드 그대로 프로젝트에 카피되어 커스터마이즈가 매우 쉬움
• shadcn/ui는 라이브러리가 아니라 컴포넌트 소스를 직접 설치해 쓰는 점이 독특함

✅ 비유

shadcn/ui는 쿠킹 클래스 레시피 같다.
이미 완성된 음식을 사 먹는 게 아니라, 레시피를 직접 가져와 내 스타일대로 요리할 수 있다!

✅ 설치 방법

Next.js + TypeScript 프로젝트 기준

npx shadcn-ui@latest init

• 질문에 따라 Tailwind, Typescript 설정 여부를 선택

✅ 컴포넌트 설치 예

npx shadcn-ui@latest add button

• 결과
  • /components/ui/button.tsx 생성
  • Tailwind 스타일 + Radix UI 활용

✅ shadcn/ui의 장점

• 컴포넌트 소스 직접 커스텀 가능
• TailwindCSS 기반 → 스타일 일관성
• Radix UI 기반 → 접근성(a11y) 우수
• 디자인 시스템 구축에 유리

💡 프론트엔드란? – 사용자와 만나는 첫 화면

프론트엔드는 사용자가 직접 보는 웹·앱의 UI를 구성하고, 버튼 클릭, 입력창 등 사용자 행동에 반응하는 기능을 구현하는 분야입니다. 화면을 꾸미는 것을 넘어, 사용자 경험을 설계하는 핵심 역할을 합니다.

🛠 어떤 일을 하나요? – UI 구성, 반응형 설계, API 연동

• UI 구성: HTML, CSS로 화면 구조와 스타일 구성
• 인터랙션 개발: JavaScript로 버튼, 모달 등 기능 구현
• API 연동: 서버에서 가져온 데이터를 화면에 표시

🔧 사용하는 기술들 – HTML, CSS, JavaScript, React 등

• HTML/CSS: 화면 구조와 디자인을 구성하는 기본 언어
• JavaScript: 동적인 기능과 로직 처리 (ex. 클릭 이벤트)
• React/Vue: 효율적인 UI 구성 도구
• Git, Figma: 협업 및 디자인 도구

🗺 프론트엔드 입문 로드맵 (2025년 기준)

1. 웹 기초 학습
- HTML/CSS로 정적 웹페이지 만들기

2. JavaScript 기본 문법 익히기
- 변수, 함수, 조건문, DOM 조작 등

3. 인터랙션 구현
- 이벤트 처리, API(fetch) 활용

4. React 기초 학습
- 컴포넌트, 상태 관리, 라우팅 등

5. 실전 미니 프로젝트
- 투두 앱, 영화 검색, 날씨 앱 등

6. 포트폴리오 제작 & 배포
- GitHub Pages, Netlify 활용

📚 추천 자료 & 공부법

• Frontend Mentor
• MDN 웹 문서

🚀 나에게 맞는 진로 고민 + 포트폴리오 전략

• 사용자 중심의 직관적인 설계에 관심 있다면 프론트엔드에 적합
• UI/UX에 민감하고, 시각적 표현을 좋아하는 성향도 잘 맞음
• 포트폴리오는 직접 만든 앱과 사이트를 중심으로 구성 (GitHub, Notion 링크 활용)

✅ 마무리

프론트엔드는 웹과 앱에서 사용자와 서비스가 만나는 접점입니다. 직접 눈에 보이는 결과물이 나오기 때문에 성취감도 높고, 실전 프로젝트도 빠르게 경험할 수 있어요. 오늘부터 하나씩 따라하며 나만의 서비스에 도전해보세요!