섹션 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를 사용하여 클래스 렌더링 시 충돌하지 않도록 클래스 이름에 별도의 문자열을 추가하기 때문이다. 클래스를 제거하려면 컴포넌트에 정의한 내용과 해당 클래스가 정의된 파일도 함께 삭제해야 빌드시 번들에 포함되지 않는다. → 테일윈드..

섹션 5: 문제 해결 패턴📌 빈도수 세기 패턴 (Frequency Counters)[1, 2, 3], [1, 4, 9] 왼쪽 배열 요소의 제곱이 오른쪽 배열 요소에 딱 맞게 있으면 true, 그렇지 않으면 false를 반환하는 문제indexOf 메서드가 for문 안에 있는 방식의 풀이 코드는 O(n^2) 시간 복잡도를 가진다. indexOf 메서드가 O(n)의 시간 복잡도를 가지고 있어서 중첩 for문과 같은 조건이 되어버리기 때문이다. 따라서 for문 안에서 indexOf  메서드를 사용하는 코드 대신에 for문을 여러 번 사용하더라도 반복문이 중첩되지 않도록 하는 것이 성능에 유리하다. 또한 배열의 경우 객체(배열 요소는 키, 동일 배열 요소의 개수는 값)로 만들면 O(1)의 시간 복잡도로 필..

섹션 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 키워드를 반드시 붙여야 하는가? ⭕ ❌ 용도(사용 ..

섹션 4: 문제 해결 접근법 📌 알고리즘 특정 작업을 달성하기 위한 과정이나 일련의 단계 📌 문제 해결법 1단계 문제의 이해 작업을 수행하면서 어떤 해결책을 마련할지, 애플리케이션이 어떻게 구동되도록 할지, 각 상황에서 어떤 식으로 작동되도록 할지에 대해 확실히 이해한다. 면접관에게 질문을 던져서 문제를 명확히 함으로써 확실히 이해할 수도 있다. 문제 이해는 구체적인 예시를 살펴보는 것과도 관련된다. 2단계 구체적 예시 이 두 가지 단계(문제의 이해, 구체적 예시)는 문제를 이해하고, 입력값과 출력값을 이해하고 경계 조건을 이해하는 것에 관한 것이다. 에러를 어떻게 처리할지, 그리고 사용자가 잘못된 값을 입력하면 어떻게 되는지와 같은 질문들은 처음부터 모든 것이 어떻게 작동해야 하는지를 이해하는 것과 관..