BOM Study
  • README
  • Computer Science
    • 운영체제
      • 운영체제와 컴퓨터
      • 메모리
        • 메모리
        • 캐시 메모리
        • 가상 메모리
        • 메모리 할당
      • 프로세스 & 스레드
        • 프로세스
  • Algorithm
    • 버블정렬
    • 선택정렬
    • 삽입정렬
    • 삽입정렬이 버블정렬과 선택정렬보다 빠른 이유
  • Data Structure
    • 스택
    • 큐
    • 해시 테이블
  • Algorithm Program Solve
    • 문제 해결법 소개
    • 문제의 이해
    • 문제 해결 패턴
      • 빈도수 세기 패턴
      • 빈도수 세기 패턴 과제
      • 다중 포인터 패턴
      • 다중 포인터 패턴 과제
      • 기준점 간 이동 배열 패턴(Sliding Window Pattern)
      • 분할과 정복 패턴(Divide and Conquer)
  • Javascript
    • 변수
    • 데이터 타입
    • 연산자, 형변환
    • 함수
    • 실행 컨텍스트
    • 이벤트 루프
    • 호출스택(Execution Stack)
    • 스코프(Scope)
    • 스코프 체인과 클로저
    • This
    • V8 Engine
    • DreamCoding
  • Typescript
    • 타입스크립트
    • 타입스크립트 컴파일러 옵션
    • 타입스크립트의 기본 타입
    • 배열과 튜플 타입
    • 객체 타입
    • 타입 별칭과 인덱스 시그니처
    • 열거형 타입(Enumerable Type : Enum Type)
    • any, unknown
    • Void타입과 Never타입
    • 타입스크립트 이해하기
    • 타입계층도
    • 객체타입간의 호환성
    • 대수 타입
    • 타입 추론
    • 타입 단언
    • 타입 좁히기
    • 서로소 유니온 타입
    • 함수 타입
    • 사용자 정의 타입 가드
    • 인터페이스
    • 클래스
    • 제네릭
    • 타입 조작하기
    • 조건부 타입
    • 유틸리티 타입
  • React
    • 전역 상태 관리
    • 컴포넌트 설계하기
  • React Deep Dive
    • JSX
    • JSX Transpiler
    • Virtual DOM & React Fiber
    • Class Component
    • Functional Component
    • Class Component vs Functional Component
    • Rendering
    • Hooks
    • Server Side Rendering
    • React Server Side Rendering
    • 리액트 상태관리
    • ESLint
  • NextJs
    • Client Component
    • Server Component
    • Link 컴포넌트를 사용하는 이유
  • Frontend Test
    • 테스트 방법과 테스트 전략
    • 테스트 코드
    • 비동기 처리 테스트
    • 목 객체
    • 웹 API 목 객체
    • 목 함수를 사용하는 스파이
    • 테스트 실행하기 전, 후 공통 설정
    • UI테스트
    • 컴포넌트 스냅숏 테스트
    • NextJs 통합 테스트 - React Context
    • NextJs 통합 테스트 - Next Router
    • 입력 테스트
    • MSW
    • 스토리북 테스트
    • 시각적 회귀 테스트와 E2E 테스트
  • FrontEnd Security
    • 웹 보안
    • HTTP
    • HTTPS
    • CORS
    • 사이드 채널 공격 대책
    • XSS
    • CSRF
    • 클릭재킹
    • 오픈 리다이렉트
    • 인증 · 인가
    • 라이브러리 보안 리스크
  • Clean Code
    • 클린코드
    • 깨끗한 코드
    • 의미 있는 이름
    • 함수
    • 주석
  • TestCode
    • 좋은 소프트웨어 만들기
    • 도구 다루기
  • NestJs
    • 프로젝트 셋업
    • Nest CLI 프로젝트 생성하기
    • 파이프로 요청 데이터 검증하기
    • 서비스와 레파지토리
    • 제어 역전
    • 모듈로 코드 정리하기
    • API 설계, TypeORM, 데이터베이스
    • Type Orm
    • 리포지토리
    • 데이터의 생성 및 저장
    • 데이터 쿼리(데이터 조회, 수정, 삭제 등)
    • Error
    • 응답 속성 제외
    • 인터셉터
    • 커스텀 데코레이터
    • 인증
    • Session
    • 로그아웃
    • 커스텀 데코레이터 & 인터셉터
    • 인증 가드
    • 테스트
    • 테스트 코드 리팩토링
    • 로그인 테스트
  • NestJs 개인 학습
    • NestJs 회원가입 관련 개인 학습내용
  • Node.js
    • Node.js 소개
    • Node.js와 브라우저의 차이점
    • V8 JavaScript Engine
    • Blocking과 Non-Blocking
  • Megatera FrontEnd Dev Road
    • 1주차 : 프론트엔드 개발 환경
      • 개발환경
      • TypeScript
      • React
      • Testing Library
      • Parcel + ESLint
    • 2주차 : JSX
      • JSX
      • UI Tree
      • DOM Node
    • 3주차 : React
      • React Component
      • Data
      • Atomic Design
      • React State
    • 4주차 : React Hooks
      • Express
      • Fetch API & CORS
      • React Hook
      • useRef & Custom Hook
      • usehooks-ts
    • 5주차 : 테스트
      • TDD
      • React Testing Library
      • MSW(Mock Service Worker)
      • Playwright
    • 6주차 : External Store
      • External Store
      • TSyringe
      • Redux 따라하기
      • usestore-ts
    • 7주차 : Route
      • Routing
      • Routes
      • Router
      • Navigation
    • 8주차 : CSS in JS
      • Design System
      • Style Basic
      • CSS in JS
      • Styled Components
      • Props
      • Attrs
      • Global Styles
      • Theme
    • 9주차 : 온라인 쇼핑몰 1
      • 개발하기 전 준비
      • 목록 보기
      • 상품 상세 보기
      • 장바구니
      • 장바구니에 상품 담기
    • 10주차 : 온라인 쇼핑몰 2
    • 11주차 : 온라인 쇼핑몰 3
    • 12주차 : 관리자 페이지
Powered by GitBook
On this page
  1. Megatera FrontEnd Dev Road

7주차 : Route

RoutingRoutesRouterNavigation
Previoususestore-tsNextRouting

Last updated 8 months ago