섹션 0: 기초 📌 VSCode에서 컴포넌트 코드 스니펫 사용 익스텐션 설치 : ES7+ React/Redux/React-Native/JS snippets rafce + tab : 화살표 함수 형태 리액트 컴포넌트 코드 생성 📌 내비게이션 a태그 : 서버 측 내비게이션을 수행, 링크 클릭 시 전체 페이지 로딩 Link 컴포넌트 : 클라이언트 측 라우팅을 활용한 페이지 간 전환. 페이지가 새로 렌더링 되지 않고 필요한 부분만 업데이트 📌 CSR/SSR CSR SSR 큰 사이즈 번들 크기 작은 번들 사이즈 리소스 집약적 리소스 최소화 검색 엔진 최적화 어려움(SEO) 검색엔진 최적화(SEO) 낮은 보안성 높은 보안성 📌 Hybrid Rendering 서버 측에서 페이지를 미리 생성하는 정적 생성(SSG: S..

섹션 5: 클래스 & 인터페이스 📌 OOP(Object-oriented Programming) 코드에서 실제 사물과 최대한 유사한 객체를 사용해 코드를 이해하기 쉽도록 만드는 것! 📌 class == blueprint 청사진: 아키텍처 또는 공학 설계를 문서화한 기술 도면을 인화로 복사하거나 복사한 도면 🤔 class와 instance의 관계에 대한 내 생각 붕어빵틀과 붕어빵, 필름과 사진, 도장과 도장 찍기 📌 this class Department { name: string; // 필드라고 함. 객체가 아님. // 생성자: 생성하는 객체(인스턴스)의 초기화 작업 constructor(n: string) { this.name = n; } describe() { console.log("Department..

| static static으로 서버에 있는 자원을 열어 줄 수 있다. 예를 들어 제품 사진을 판매자가 업로드를 했다면 서버의 특정 폴더에 해당 사진을 저장한다. 이때 static으로 열어두면 클라이언트에서 업로드한 이미지를 볼 수 있게 된다. node 폴더에 public 폴더를 만든 후 public 폴더 아래에 images 폴더를 만든다. images 폴더 내에 nodemon.png 파일을 넣는다. 브라우저에서 "http://localhost:3000/images/nodemon.png"로 접근이 가능해진다. // 15_static.js const express = require("express"); const app = express(); // http://localhost:3000/images/nod..