영화리뷰기록사이트 만들기 루틴. 각 프레임워크의 역할

 

먼저, 웹이 돌아가는 큰 그림

  • 브라우저(크롬): 웹페이지를 보여주는 극장 스크린.

  • 서버: 자료를 보관하는 도서관.

  • HTTP 요청: “이 책 빌려주세요!” 하고 보내는 신청서.

  • API: 서버에 “이런 정보 주세요”라고 묻는 창구.

  • JSON: 서버가 보내주는 정리된 표(데이터) 파일.

웹의 3기둥 (이건 무조건)

  • HTML: 화면에 뼈대 만들기. (제목, 사진, 버튼)

  • CSS: 뼈대에 옷 입히기. (색, 크기, 배치)

  • JavaScript(JS): 화면을 움직이게 하기. (클릭하면 열기/닫기, 목록 불러오기)

메모: HTML=뼈, CSS=옷, JS=근육(움직임)

React / Vue / Svelte (프레임워크·라이브러리)

  • 공통 역할: 레고 블록처럼 화면을 “조각(컴포넌트)”으로 나눠 빠르게 조립하게 도와주는 도구.

  • React: 전 세계에서 가장 많이 쓰는 레고. 블록 종류가 많고 생태계가 큼.

  • Vue: 설명서가 친절한 레고. 진입이 쉬움.

  • Svelte: 가벼운 레고. 성능에 강점.

메모: 세 도구 모두 “컴포넌트로 쪼개서” 만든다 → 선택은 취향+팀 표준.

Vite, Webpack (개발서버/번들러)

  • 역할: 개발 중에 즉시 새로고침(HMR) 해 주고, 배포용으로 파일을 최적화/압축해 주는 포장기.

  • Vite: 빠른 포장기(요즘 표준). npm run dev 하면 개발 서버가 켜짐.

  • Webpack: 예전부터 널리 쓰던 포장기.

메모: Vite = 개발할 때 빠르게, build = 배포용 포장.

Tailwind CSS (스타일)

  • 역할: CSS를 **짧은 단어(유틸 클래스)**로 빠르게 쓰게 해주는 옷장 정리 도우미.
    예) bg-gray-100 p-4 rounded → 회색배경, 패딩, 둥근모서리.

메모: 디자인 시스템이 없을 때 빠르게 예쁘게 만들기 좋음.

React Router / Vue Router (길찾기)

  • 역할: 사이트 안에서 페이지 이동을 흉내 내는 지도 앱.

  • SPA(한 장짜리 앱)인데도 주소가 /movie/1 처럼 바뀌는 척 하게 해줌.

메모: “어떤 주소에 어떤 화면을 보여줄지” 규칙표.

상태관리(공용 가방)

  • 문제: 여러 화면이 **같은 정보(로그인, 장바구니)**를 함께 써야 함.

  • Redux Toolkit: 모든 화면이 같이 보는 큰 가방. 규칙대로 꺼내고 넣음.

  • React Query: 서버에서 가져온 데이터를 영리하게 캐시하고 자동 새로고침.

메모: 앱상태(권한/카트)=Redux, 서버데이터(API목록)=React Query → 역할 분리.

npm, node_modules (도구 장터·창고)

  • npm: 라이브러리를 다운받는 앱 마켓.

  • node_modules: 받은 라이브러리가 쌓이는 창고 폴더(자동 생성).

  • 자주 쓰는 명령:

    • npm i 라이브러리 설치

    • npm run dev 개발 서버 실행

    • npm run build 배포용 포장

메모: 창고가 망가져도 npm i 하면 다시 채워짐.

Git / GitHub (저장·협업)

  • Git: 내 코드의 시간여행 저장소(버전관리).

  • GitHub: 인터넷에 올려 백업/협업하는 장소.

  • 핵심 명령:

    • git add . 변경 모으기

    • git commit -m "메시지" 저장

    • git push 올리기

메모: 큰 변화마다 커밋을 남겨 두면 복구가 쉽다.

API & 데이터 (밖에서 정보 가져오기)

  • API 부르기: fetch("주소") 혹은 axios.get("주소")

  • JSON 읽기: res.json() → { title: "...", items: [...] }

  • 예시: 영화 검색 API에서 목록을 받아 카드로 뿌림.

메모: API는 약속된 질문/답변 형식.

Firebase / Auth (로그인)

  • 역할: 회원가입/로그인/로그아웃을 빨리 붙이는 문지기.

  • 구글/이메일 등 소셜 로그인도 쉽게.

메모: 비밀키는 .env 파일에, 깃에 올리지 않기!

배포(사람들이 보게 만들기)

  • GitHub Pages: 정적 사이트 배포(React는 HashRouter가 편함).

  • Vercel/Netlify: Next.js/SPA 배포가 아주 쉬움.

  • 순서: npm run build → 배포 설정 → 접속 링크 공유.

메모: 배포 후 강력 새로고침으로 캐시 지우고 확인.

자주 묻는 질문(초·중학생 버전 Q/A)

Q. React랑 Vue, 뭐가 달라요?
A. 둘 다 레고예요. React는 가장 큰 마트, Vue는 쉬운 설명서가 강점. 어느 걸 써도 “조각으로 나눠 만들기”는 같아요.

Q. Vite는 왜 써요?
A. 빨리 달리는 개발 자동차라서요. 저장하면 화면이 즉시 바뀌고, 배포용으로 예쁘게 포장도 해 줍니다.

Q. Redux가 꼭 필요해요?
A. “모든 화면이 같이 보는 가방(공용 상태)”이 필요할 때만. 서버에서 가져오는 목록은 React Query가 더 편해요.

Q. Tailwind는 뭐가 좋아요?
A. CSS를 짧은 단어로 빠르게 조합해서, 디자인 뼈대 잡기가 빨라요.

Q. npm이랑 node_modules는요?
A. npm은 앱 마켓, node_modules는 내 폴더 속 창고. npm i 하면 창고에 쌓여요.

1장 요약 메모(복붙용)

  • HTML=뼈, CSS=옷, JS=움직임

  • React/Vue=레고(컴포넌트로 조립)

  • Router=지도(주소↔화면 규칙)

  • Redux=공용 가방(앱 상태), React Query=서버 데이터 캐시

  • Tailwind=옷장(스타일 빠르게)

  • Vite=개발 자동차+포장기(Dev/Build)

  • npm=마켓, node_modules=창고

  • API=창구, JSON=정리된 답장

  • Firebase Auth=문지기(로그인)

  • 배포=사람들에게 보여주기(GH Pages/Vercel)

댓글

댓글 쓰기

이 블로그의 인기 게시물

2025 풀스택 개발자 로드맵: 언어·프레임워크·DB·배포까지 한 번에

2025 풀스택 개발자 로드맵: 언어·프레임워크·DB·배포까지 한 번에 대상 : 완전 초보~초중급 / 웹 앱을 처음부터 배포까지 직접 만들어 보고 싶은 분 메인 키워드 : 풀스택 개발자 로드맵 2025, 웹개발 입문, 프론트엔드 백엔드 기초 관련 롱테일 : “풀스택 공부 순서”, “Next.js Node.js 배포”, “PostgreSQL vs MongoDB 초보” 1) 먼저 큰 그림: 풀스택의 7개 축 기본 언어 : HTML, CSS, JavaScript 프론트엔드 : React/Vue/Angular 중 1개(입문은 React 추천) 백엔드 : Node.js(Express/NestJS) 또는 Python(FastAPI/Django), Java(Spring) 등 중 1개 데이터베이스 : RDBMS(MySQL/PostgreSQL) + 필요 시 NoSQL(MongoDB) 버전 관리 : Git & GitHub 웹 기본기 : HTTP/HTTPS, REST, 클라이언트–서버, 브라우저 동작 배포 & 운영 : Vercel/Netlify/Render/AWS + 보안(인증·권한·OWASP) 2) 환경 준비 (15분~1시간) Node.js LTS 설치 (권장: nvm 사용) VS Code + 확장: ESLint, Prettier, Error Lens, GitLens Git 설치 & GitHub 계정 생성 브라우저 : Chrome/Edge(DevTools 익히기) # macOS/Linux (예: nvm) nvm install --lts nvm use --lts # 프로젝트 폴더 만들기 mkdir my-fullstack && cd my-fullstack git init 3) 기본 언어 한 번에 잡기 (HTML/CSS/JS) HTML : 문서 구조(semantic 태그), 폼, 접근성(alt/label) CSS : 레이아웃(Flex/Grid), 반응형(@m...
자세한 내용 보기

풀스택 전반(React + Next.js 포함) 스택 맵

Next.js 까지 포함해 전반 스택을 정리하고, 실시간 채팅 · 레딧형 커뮤니티 를 만들 때의 권장 선택지를 표로 정리했습니다. 마지막으로 실질적인 필수 언어/개념 이 “무엇을 맡고, 왜 필요한지” 역할 중심으로 요약합니다. 1) 풀스택 전반(React + Next.js 포함) 스택 맵 영역 필수 언어/개념 대표 스택(React/Next) 언제 선택? 비고 프론트 UI HTML/CSS/JS(ES6+) , 반응형 레이아웃 React + TypeScript SPA로 빠른 인터랙션이 중요할 때 컴포넌트/훅 기반 UI 엔진 라우팅 & 렌더링 CSR/SSR/SSG/ISR 개념 Next.js (App Router) SEO·초기속도·데이터 접근이 중요할 때 서버 컴포넌트·라우트 핸들러·이미지 최적화 상태 관리 앱 상태 vs 서버 상태 분리 Redux Toolkit (앱 상태), React Query (서버 상태) 장바구니·권한(앱) / API 캐시(서버) 둘을 혼용하면 깔끔함 스타일링 박스모델, Flex/Grid Tailwind CSS 디자인 시스템 없이 빠른 스타일링 유틸리티 클래스 중심 인증 세션/JWT, OAuth2 Firebase Auth , NextAuth.js 빠른 소셜로그인 / Next 통합 백엔드는 httpOnly 쿠키 권장 백엔드(API) Node 런타임, REST/JSON Next.js Route Handlers 또는 Express/Fastify 단일 리포 내 API 필요(Next) / 별도 서버(Express) Zod로 입력 검증 추천 DB & ORM 스키마/인덱스/트랜잭션 PostgreSQL + Prisma 범용·안정·타입 세이프티 마이그레이션/시드 쉬움 캐시/검색 HTTP 캐시·키밸류·검색엔진 Redis (세션·카운터), Meilisearch/Elastic (검색) 인기글·랭킹·검색 필요 시 레이트리밋에도 유...
자세한 내용 보기

📘 Day 2 교재 (반복문 & 함수)

 0. Day2 시작 (폴더 생성) ✍️ cd ~/OneDrive/Desktop/fullstack mkdir day02-loops-functions cd day02-loops-functions code . 👉 index.js 파일을 만든다. 1. 코드 작성 (index.js) ✍️ let fruits = [ "사과" , "바나나" , "체리" ]; // ================== 반복문 ================== // for 반복문 for ( let i = 0 ; i < fruits. length ; i++) { console . log ( "for:" , fruits[i]); } // for...of 반복문 for ( let f of fruits) { console . log ( "for...of:" , f); } // while 반복문 let i = 0 ; while (i < fruits. length ) { console . log ( "while:" , fruits[i]); i++; } // ================== 함수 ================== // 함수 선언식 function add ( a, b ) { return a + b; } console . log ( "더하기:" , add ( 2 , 3 )); // 함수 표현식 const multiply = function ( a, b ) { return a * b; } console . log ( "곱하기:" , multiply ( 2 , 3 )); // 화살표 함수 const divide = ( a, b ) => a / b; console . log ( "나누기:" , divide ( 6 , 2 )); ...
자세한 내용 보기