ByteSumCookies

0. 요약로컬에서 만든 Next.js 포트폴리오 프로젝트를 GitHub에 업로드하는 과정과,그 과정에서 막혔던 포인트들을 정리한다.1. 개발 환경2. GitHub 가입 & 저장소 생성3. 로컬 프로젝트를 GitHub에 올리기 3-1. Git 설치 (Windows에서 필수) 1) 에러: Git 미설치 3-2. Git으로 프로젝트 관리 시작하기 1) Git 초기화 2) 파일을 커밋 대상으로 등록 3) 첫 번째 커밋 생성 4) 에러: 커밋이 안 될 때 (Author identity unknown) 3-3. GitHub 저장소와 연결 1) 기본 브랜치 이름을 main으로 통일 2) GitHub 저장소 연결 3-4. GitHu..

HTML/CSS/JS로 “파일을 열어보는 웹”은 이해가 됐는데, Node/React/Next로 넘어오면서 라우팅·빌드·배포 같은 단어가 한꺼번에 등장해 혼란이 생겼다. 이번 글의 목표는 “정의 암기”가 아니라 “관계 정리”다. Next.js를 중심에 두고, React/Node가 각각 무엇을 담당하는지(런타임/라이브러리/프레임워크), 어디에서 실행되는지(브라우저 안/밖), 그리고 그 결과로 렌더링 방식(SSR/CSR/SSG)과 SEO가 왜 연결되는지를 하나의 흐름으로 묶어본다.1. 분류를 다시 잡기: 프레임워크 / 라이브러리 / 런타임1-1. Next.jsㅡReact 기반 프레임워크React 기반의 웹 애플리케이션 프레임워크React로 만든 UI를 "프로덕션용 웹 애플리케이션" 형태로 운영하기 위해필요한 ..

1. SPA란 무엇인가? / MPA란 무엇인가?1-1. SPA(Single Page Application)SPA : 단일 페이지로 동작하는 웹 애플리케이션처음 접속할 때 index.html과 자바스크립트를 로드하고, 이후 화면 전환은 전체 새로고침 없이 필요한 부분만 다시 그리는 방식이다.특징화면 이동 : 새로고침 없이 부분 갱신라우팅 : 프론트엔드에서 처리하는 경우가 많음데이터 갱신 : 보통 API 호출 결과로 화면을 다시 그림전체를 다시 불러오는 게 아니기 때문에 데이터 소모가 적음장점UX : 화면 전환이 자연스럽고 빠르게 느껴짐개발 구조 : 프론트/백엔드 분리(API 중심)에 적합함단점초기 로딩 : 번들이 커지면 무거울 수 있음검색엔진에 노출이 잘 안 될 수 있음 (SSR/SSG로 보완 가능)보완 ..