섹션 2: 라우팅과 내비게이션 📌 다이내믹 라우트(Dynamic Routes) 공식 문서 : https://nextjs.org/docs/pages/building-your-application/routing/dynamic-routes#convention "src/app/users/[id]/photo/[photoId]" 경로를 작성 대괄호 [] 안에 매개 변수를 지정할 수 있고, 이 매개 변수에 할당되는 인수가 경로가 된다. // src/app/users/[id]/photo/[photoId]/page.tsx import React from "react"; interface Props { params: { id: number; photoId: number }; } // props에 params 속성이 존재하..

1. React Router 설치 npm i react-router-dom 😉 공식 문서 : https://reactrouter.com/en/main 2. 프로젝트에 적용 1. BrowserRouter 컴포넌트 적용 // index.jsx // (생략) import { BrowserRouter } from "react-router-dom"; const root = ReactDOM.createRoot(document.getElementById("root")); root.render( // BrowserRouter 컴포넌트 적용 ); 2. , 컴포넌트 적용 // app.js // (생략) import { Link, Route, Routes, useLocation } from "react-router-dom"..

섹션 1: Styling 📌 globals.css 모든 태그 및 컴포넌트에 공통 스타일 적용한다. globals.css 안에서 class는 CSS 라이브러리와의 충돌을 방지하기 위해 사용하지 않는 것이 좋다. @media (prefers-color-scheme: dark) {}에서 다크모드 스타일을 설정하면 된다. 📌 CSS Module CSS 파일을 모듈처럼 사용한다. 동일한 클래스 이름을 사용하더라도 다른 컴포넌트, 페이지의 스타일과 충돌(덮어쓰기) 하지 않는다. postCSS를 사용하여 클래스 렌더링 시 충돌하지 않도록 클래스 이름에 별도의 문자열을 추가하기 때문이다. 클래스를 제거하려면 컴포넌트에 정의한 내용과 해당 클래스가 정의된 파일도 함께 삭제해야 빌드시 번들에 포함되지 않는다. → 테일윈드..

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

1. React-Toastify 설치 1) 설치 https://www.npmjs.com/package/react-toastify#react-toastify npm install --save react-toastify 2) 추가 설치 사용자 정의 애니메이션(Define a custom enter and exit animation)을 적용하고자 한다면 설치하면 된다. React-Toastify 공식 문서: https://fkhadra.github.io/react-toastify/custom-animation Animate.css 공식 문서: https://animate.style/ npm install animate.css --save 3. React-Toastify 적용예 📌 app.js import "...

1. 공통점 추상화(선언부는 보여주고, 구현부는 숨김)를 위해 사용한다. 상속받거나(extends) 구현(implements)하는 클래스에게 추상 메서드를 구현하도록 강제한다. 스스로 인스턴스를 생성할 수 없다. 2. 차이점 내용 추상 클래스 인터페이스 비고 추상 메서드가 반드시 있어야 하는가? ❌ ⭕ 추상 클래스의 경우 추상 메서드가 없어도 된다. 멤버 변수, 메서드를 가질 수 있는가? ⭕ ❌ 인터페이스는 상수와 추상 메서드를 가질 수 있고-자바8 이상의 경우-default, static 메서드를 가질 수 있다. 다중 상속 처럼 사용할 수 있는가? ❌ ⭕ 추상 클래스는 모호성을 제거하기 위해 다중 상속을 지원하지 않는다. 추상 메서드에 abstract 키워드를 반드시 붙여야 하는가? ⭕ ❌ 용도(사용 ..

1. MySQL 날짜, 시간이 왜 UTC 시간으로 조회될까? MySQL Workbench에서 SELECT 쿼리로 날짜, 시간에 해당하는 데이터를 조회하니 [그림 1]과 같이 원하는 결과가 잘 나왔다. 하지만 내가 만든 서버에 동일한 쿼리를 적용한 API를 호출하면 [그림 2]와 같이 UTC 시간으로 조회가 되었다. 도대체 왜??? 2. 쿼리에 CONVERT_TZ() 적용해 해결 위와 같은 현상이 발생하는 원인은 아직 찾지 못했다. 다만 쿼리에서 CONVERT_TZ()를 이용해 create_date 칼럼의 타임존을 UTC에서 Asia/Seoul로 변경해주어 이 문제를 해결했다. SELECT CONVERT_TZ(create_date, 'UTC', 'Asia/Seoul') AS create_date // 타임..

1. uuid-apikey 라이브러리 uuid-apikey 라이브러리(https://www.npmjs.com/package/uuid-apikey)를 이용해서 apikey, uuid를 생성하고 API 요청 시 유효한지 검증할 수 있다. 설치 방법은 아래와 같다. npm install uuid-apikey 2. uuid-apikey 적용 // app.js // (생략) // API키 생성 import uuidAPIKey from "uuid-apikey"; console.log(uuidAPIKey.create()); // 터미널에 객체 자료형으로 apiKey, uuid가 찍힌다. 새로운 키를 생성할 필요가 없을 때는 주석 처리한다. // (생략) // app.js // (생략) // key 변수를 app.js..