글

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

  먼저, 웹이 돌아가는 큰 그림 브라우저(크롬) : 웹페이지를 보여주는 극장 스크린 . 서버 : 자료를 보관하는 도서관 . 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 → 회색배경, 패딩, 둥근모서리. 메모: 디자인 시스템이 없을 때 빠르게 예쁘게 만들기 ...
댓글 쓰기
자세한 내용 보기

📘 Day 3 교재 (배열 메서드: map, filter, reduce)

 0. Day3 시작 (폴더 생성) ✍️ cd ~/OneDrive/Desktop/fullstack mkdir day03-array-methods cd day03-array-methods code . 👉 index.js 파일을 새로 만든다. 1. 코드 작성 (index.js) ✍️ // ================== map ================== // 배열의 모든 요소를 변환해서 새로운 배열을 만듦 let numbers = [ 1 , 2 , 3 , 4 , 5 ]; let doubled = numbers. map ( n => n * 2 ); console . log ( "원본:" , numbers); console . log ( "map 결과:" , doubled); // ================== filter ================== // 조건에 맞는 요소만 뽑아 새로운 배열을 만듦 let scores = [ 45 , 82 , 67 , 90 , 33 ]; let passed = scores. filter ( s => s >= 60 ); console . log ( "원본:" , scores); console . log ( "filter 결과:" , passed); // ================== reduce ================== // 배열의 모든 요소를 하나로 줄임 (누적 계산) let prices = [ 1000 , 2000 , 3000 , 4000 ]; let total = prices. reduce ( ( acc, cur ) => acc + cur, 0 ); console . log ( "원본:" , prices); console . log ( "reduce 결과(총합):" , total); 2. 실행 절차 ✍️ cd ...
댓글 쓰기
자세한 내용 보기

📘 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 )); ...
댓글 쓰기
자세한 내용 보기

📘 Day 1 교재 (환경 세팅 & JS 기초)

 JS기 0. GitHub 초기 세팅 (한 번만) 👉 앞으로 Day1~Day100 전부 fullstack 폴더 하나의 레포지토리 에 저장 ✍️ 터미널: cd ~/OneDrive/Desktop/fullstack git init git branch -M main git remote add origin https://github.com/sy920/fullstack.git git add . git commit -m "start fullstack project" git push -u origin main 👀 이제 fullstack 전체가 GitHub에 올라감. 앞으로는 Day별 폴더를 만들어 진행하고, 끝날 때마다 루트( fullstack )에서 커밋 & 푸시만 하면 됨. 1. Day1 시작 (폴더 생성) ✍️ cd ~/OneDrive/Desktop/fullstack mkdir day01-js-basics cd day01-js-basics code . 👉 VSCode가 열리면 index.js 파일을 만든다. 2. 코드 작성 (index.js) ✍️ // ================== 변수 ================== let name = "소율" ; // 문자열 let age = 25 ; // 숫자 let isStudent = true ; // 불리언 // ================== 배열 ================== let fruits = [ "사과" , "바나나" , "체리" ]; // ================== 객체 ================== let user = { name : "소율" , city : "안동" }; // ================== 조건문 ================== if (age >= ...
댓글 쓰기
자세한 내용 보기

풀스택 전반(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 (검색) 인기글·랭킹·검색 필요 시 레이트리밋에도 유...
댓글 쓰기
자세한 내용 보기

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...
댓글 쓰기
자세한 내용 보기