JavaScript & React 학습 노트

---

1. 자바스크립트 문법

객체 표현

자바스크립트에서 객체는 중괄호 {}로 표시한다.

참조변수는 객체의 주소를 가리킨다.

단축 속성명 (Shorthand Property)

키 이름과 변수명이 같을 경우 생략 가능하다.

// ✅ 생략 가능 (키 이름 === 변수명)
export default {
    moduleA_var1: moduleA_var1,  // 풀어쓴 형태
    moduleA_var2,                // 생략 형태
    moduleA_var3
}

// ❌ 생략 불가 (키 이름 ≠ 변수명)
export default {
    var1: moduleA_var1,
    var2: moduleA_var2,
    var3: moduleA_var3
}

함수 표현 방식

함수는 값처럼 변수에 할당하거나 전달할 수 있다.

// 1. 함수 선언식
function fun1() {
    console.log("fun1 실행");
}

// 2. 함수 표현식
const fun2 = function() {
    console.log("fun2 실행");
}

// 3. 화살표 함수
const fun3 = () => console.log("fun3 실행");

// 4. 함수를 변수에 재할당
const fun1 = fun3;

모듈 (import / export)

개별 export된 항목은 import 시 중괄호 {}를 사용한다.

import { moduleB_var1, moduleB_fun1 } from "./moduleB.js";

import하는 이유: 외부 파일의 변수·함수를 현재 파일에서 사용하기 위해

팀 프로젝트 주의사항

항목	내용
package.json / package-lock.json	팀원 간 버전 일치 확인 필수
node_modules	.gitignore에 추가, GitHub에 올리지 않기

---

2. React

2-1. React 개요

• 자바스크립트 기반의 프론트엔드 프레임워크
• DOM(Document Object Model): HTML을 파싱해 각 태그를 객체로 만든 메모리 구조
• DOM 생성에 시간이 걸려 → 페이지 이동·새로고침 시 깜빡임 발생

React의 접근법:

단 하나의 DOM만 사용하고, 이전 DOM과 차이나는 부분만 업데이트 → SPA 방식

→ 지속적으로 데이터가 변화하는 대규모 애플리케이션에 유리

---

2-2. SPA (Single Page Application)

단계	설명
첫 화면	서버에서 HTML을 받아옴
이후 요청	API 기반 비동기 통신 (JSON 응답)
화면 전환	브라우저의 JS로 DOM을 직접 생성·변경

장점

• 페이지 전환 시 전체 HTML 리로드 없음 → 앱처럼 부드러운 UX
• 화면 일부만 갱신 → 인터랙션 속도 빠름
• 서버는 API에만 집중 → 구조 단순화
• 동일한 API를 웹·모바일에서 재사용하기 쉬움

단점

• 첫 화면 로딩 시 HTML + JS 번들 크기로 인해 초기 로딩 시간 증가
• 클라이언트 상태 관리가 복잡해짐
• SEO(검색 엔진 최적화)가 어려움
• 규모가 커질수록 JS 번들 관리·성능 최적화가 중요해짐

---

2-3. 렌더링 방식 비교

CSR (Client Side Rendering)

• 서버는 비어있는 HTML만 전달
• 브라우저가 JS 번들을 다운로드·실행 후 직접 DOM 생성
• 데이터 필요 시 API 비동기 통신
• → 첫 화면 로딩이 느림

SSR (Server Side Rendering) — React 방식

• 서버가 완전한 첫 화면 HTML을 생성해서 브라우저로 전달
• SEO에 유리
• 하이드레이션(Hydration): 서버에서 받은 정적 HTML을 유지한 채, JS를 로드해 이벤트·상태를 연결하는 과정 (재렌더링 없이 동적 상호작용 가능)
• 첫 화면 데이터를 서버에서 미리 조회해 HTML에 포함 가능
• → HTML 내용이 방대해지면 첫 화면 로딩이 다시 느려질 수 있음

SSR + Streaming SSR — React 18+

• 첫 화면 내용이 많을 때 조각 단위 HTML로 분할 전송
• 빠른 부분을 먼저 보여주고, 느린 부분은 나중에 렌더링
• <Suspense>로 분리된 Server Component를 사용해야 자동 적용됨

방식	누가 렌더링?	특징
CSR	브라우저	초기 로딩 느림, 이후 빠름
SSR	서버	초기 로딩 빠름, 큰 HTML은 느려질 수 있음
Streaming SSR	서버 (분할)	빠른 것 먼저 노출, React 18+

---

2-4. 클라이언트 컴포넌트 vs 서버 컴포넌트

클라이언트 컴포넌트

파일 최상단에 "use client" 디렉티브를 작성하면 클라이언트 컴포넌트가 됨.

가능	불가
useState, useEffect 사용	서버 컴포넌트 import
DOM API, window, document 접근	백엔드 리소스(DB) 직접 접근
UI 이벤트 처리	—
API 비동기 통신	—

서버 컴포넌트

서버의 Node.js 실행 환경에서 동작. 브라우저로 내려보낼 JS 번들을 줄이는 것이 주 목적.

가능	불가
DB 직접 접근	useState, useEffect 사용
—	DOM API, window, document 접근
—	UI 이벤트 처리

정리: 대부분의 컴포넌트는 브라우저(클라이언트)에서 만들어지지만, UI와 관련 없는 일부 컴포넌트는 서버에서 처리될 수 있다.

---

2-5. Next.js 프로젝트 구조

폴더/파일	설명
.next/	빌드 산출물이 저장되는 폴더
page.module.css	해당 page.js에만 적용되는 CSS
public/	정적 이미지 등 정적 파일 보관 폴더

---

3. HTML & CSS 기초

경로 표현 방식

구분	형태	설명
절대 경로	/images/photo.png	슬래시(/)가 앞에 붙음, 루트 기준
상대 경로	./images/photo.png	현재 파일 위치 기준