안녕하세요, 패스트 캠퍼스 메가바이트 스쿨 프론트 엔드 3기 수료 중인 김당퀔입니다! 이번 3기 수료 기간은 9월 13일부터 4월 14일까지 총 7개월 과정입니다. 7개월 동안 매주 주말 회고록을 작성해 보려고 합니다.
블로그 제출 기한으로 인해서 지난 금요일부터 해당 주 목요일까지의 사이클로 작성됩니다.
1. 요일별 공부 기록
❤️ 2월 3일 금요일
- 백준
- 1330 두 수 비교하기
- 9498 시험 성적
- 2753 윤년
- 14681 사분면 고르기
- Field-Passer
- 노마드코더 Redux 101 vs 김민태 강사님 Redux 만들기
🧡 2월 4일 토요일
농놀... 했어요 🏀
💛 2월 5일 일요일
- Field-Passer
- 관리자 페이지
- 게시글 상세 페이지
- 문의 내역 상세 페이지
- 백준
- 2884 알림 시계
- 2525 오븐 시계
- 2480 주사위 세 개
- 리액트 라우터
URI? URL?
- URI: Uniform Resource Identifier의 약자로 식별자(idenfier)를 의미.
- URL: Uniform Resource Locator의 약자로 식별자 중에 하나인 위치 표시자.
URL은 URI의 서브셋.중첩 라우트
중첩 라우트 (nested route)는<Route />컴포넌트에 의해 렌더링 된 컴포넌트에 기존 Route의 중첩된<Route />의 컴포넌트가 나타나도록 구성하는<Route />컴포넌트의 적용 방법.
index 라우트 설정: index 라우트를 설정하면 부모 경로까지만 매칭되는 경우에도 자식 컴포넌트를 렌더링 할 수 있다.<Route path="/parents" element={<Parent />}> <Route index element={<DefaultChild />} /> <Route path=":param" element={<Child1 />} /> </Route> - parents로 요청: Parent, DefaultChild 컴포넌트 렌더링
- paraents/:param으로 요청: Parent, Child1 컴포넌트 렌더링
💚 2월 6일 월요일
- 백준
- 2739 구구단
- 10950 A + B -3
- 8393 합
- 25304 영수증
- 김준태 강사님 특강
- .github 폴더 안에
issue_template,pull_request_template작성
- 안재원 강사님 수업
💙 2월 7일 화요일
- 백준
- 15552 빠른 A + B
하나씩 콘솔에 출력하지 않고 모아서 출력하기 - 11021 A + B -7
- 11022 A + B -8
- 2438 별 찍기 -1
리액트 라우터가 제공하는 훅
| 리액트 라우터 훅 | 설명 |
|---|---|
| useMatch() | 현재 요청 경로가 지정한 경로 패턴에 매칭되는 경우 PathMatch 객체를 리턴. PathMatch는 매칭된 경로 정보를 담고 있다. |
| useParams() | URI 파라미터 값을 포함하는 Params 객체를 리턴. |
| useSearchParams() | 현재 요청의 쿼리 문자열을 읽거나 수정할 수 있다. 쿼리 문자열은 URL 뒤에 ?a=1&b=2와 같이 따라붙는 문자열 정보. |
| useLocation() | 현재 요청된 경로 정보를 포함하는 Location 객체를 리턴. |
| useNavigate() | 화면 전환(이동)을 위한 Navigate 함수를 리턴. |
| useOutletContext() | 상위 경로에 상태를 저장하고 Outlet 컴포넌트에 렌더링 하는 자식 컴포넌트에서 상태에 접근할 수 있도록 한다. |
useMatch
const pathMatch = useMatch(경로패턴)-
params: URI 경로 파라미터
-
pathname: 요청된 경로
-
pattern: 요청된 경로 패턴
useSearchParams
const [searchParams, setSearchParams] = useSearchParams() -
searchParams: 쿼리 문자열을 읽을 수 있는 전용의 객체,
?a=1&b=2와 같이 요청한 경우 searchParams.get('a')와 같이 값에 접근할 수 있다. -
setSearchParams: 쿼리 문자열을 설정할 수 있는 기능을 제공하는 함수.
useNavigate
const navigate = useNavigate() -
navigate(to, options)
-
to: 이동하려는 경로
-
options: 경로를 이동할 때 지정할 수 있는 옵션
- replace: 내부적으로 이용하는 브라우저 히스토리의 현재 항목을 교체할 것인지를 boolean으로 지정. 기본값은 false.
- state: 내비게이션 할 때 전달할 상태 정보. 이 정보는 경로 이동이 완료된 후 location 객체의 state 속성(location.state)을 이용해 접근할 수 있다.
useLoaction
const location = useLocation() -
pathname: 현재 요청된 경로
-
search: 쿼리 문자열
-
state: navigate()로 이동할 때 전달된 상태(state) 정보
useOutletContext
-
상위 라우트가 렌더링 하는 컴포넌트 (컴포넌트를 렌더링 하는 컴포넌트)에서 상태 또는 속성을 컴포넌트의 context에 지정하여 전달.
-
중첩 라우트의 자식 컴포넌트에서 useOutletContext() 훅을 이용해 context 객체를 받아서 이용.
Router 컴포넌트
-
BrowserRouter
HTML5 History API를 사용하여 URI와 UI를 동기화한 상태를 유지할 수 있는 기능을 제공. 웹 브라우저에서 리액트 라우터를 적용할 때 가장 권장. -
HashRouter
URL의 해시 정보를 이용해서 URI 경로와 UI를 동기화한 상태로 유지. BrowserRouter가 지원되지 않는 환경일 때 사용할 것을 권장. -
MemoryRouter
애플리케이션의 메모리 영역에 배열을 만들어 라우팅 정보를 저장하고 UI와 동기화. URI 경로가 브라우저의 주소창에 표시되지 않고 메모리에만 유지. 브라우저 주소 UI를 보여 주지 않아도 되는 하이브리드 앱 같은 경우에 사용.fallback UI
웹 서버에서 404 Not Found 에러가 발생하더라도 정해진 기본 페이지를 응답하는 기능. fallback UI를 지원하도록 웹 서버를 설정할 수 없다면 HashRouter를 사용하면 된다.
NavLink 컴포넌트
현재 요청된 경로와 일치 여부에 따라 각기 다른 스타일을 부여할 수 있는 Link 컴포넌트.
<NavLink to ='/blog' style={({ isActive }) => { return isActive ? activeStyle : undefined }} > Blog </NavLink>레이지 로딩 적용 방법
// 기존의 정적 import 방법 import Home from "./Home"; // React.lazy()와 import 함수 사용 const Home = React.lazy(() => import("./Home")); // webpackChunkName 지정 const Home = React.lazy(() => import(/* webpackChunkName:'home' */ "./Home")); const Blog = React.lazy(() => import(/* webpackChunkName:'home' */ "./Blog"));webpackChunkName 주석은 이름이 같은 것끼리 모아서 청크 파일을 생성, 생성된 청크 파일의 이름은 home.f4c1eac5.js와 같이 생성됨. webpackChunkName은 함께 사용되는 컴포넌트를 모아서 하나의 청크로 생성해 줌.
코드 스플리팅(code splitting): 코드를 여러 개의 조각으로 분할.
CRA 도구를 이용해 리액트 프로젝트를 생성했다면 webpack이 기본으로 지원되므로 별도의 설정을 하지 않아도 되지만 vite로 생성된 프로젝트는 별도의 설정이 필요.
$ npm install -D vite-plugin-webpackchunkname// vite.config.js import { defineConfig } from "vite"; import react from "@vitejs/plugin=react"; import { manualChnksPlugin } from "vite-plugin-webpackchunkname"; // https://vitejs.dev/config/ export default defineConfig({ plugins: [react(), manualChunksPlugin()], });Suspense 컴포넌트
// 1. 특정 컴포넌트를 감싸 줄 수 있다. <React.Suspense fallback={<Loading />}> <TestComponent /> </React.Suspense> // 2. <Router /> 컴포넌트도 감싸 줄 수 있다. <React.Suspense fallback={<Loading />}> <Router>...</Router> </React.Suspense>
- 김민태 강사님 redux 만들기
- 문제 정의 - 어떤 코드가 상태를 어디서 바꾸나?
- 개별 컴포넌트는 외부와의 디펜던시가 가능하면 없는 것이 좋다.
- 해결책 만들기
- Flux
- One way 아키텍처: 데이터가 한 방향으로 흐름
- 구독 발행 모델
- Pub and Subscribe
- 그럴 듯하게 모양 내기
- 비동기처럼 보이는 동기의 한계
- 비동기적인 모습은 reducer로 처리할 수 없다. 입출력이 순수 함수이길 원함.
- redux는 결과적으로 미들웨어를 제공하고 있다.
💜 2월 8일 수요일
- Field-Passer
- 회의!
- 리액트 스터디
- 안재원 강사님 수업
🤎 2월 9일 목요일
- 미니 프로젝트 회의
- 페이지 담당 정하기
- 웹 페이지 콘셉트
- 다음 회의 전까지 해야 할 것
- 페이지 내 요구 기능
- 팀 레포 생성
- 이슈 컨벤션, 커밋 규칙 정하기
- 리액트 퀵 스타트
- 그룹 스터디 워크샵
- 서버와 클라이언트는 절대적인 관계가 아니라 상대적인 관계이다.
- HTTP는 캐시를 관리하지 않는다.
- TCP 통신: 보장된 데이터를 전달받을 수 있다.
- 쓰리핸드쉐이크?
- SPA의 탄생 과정에 대해서 알아보기
- Emotion 라이브러리
- 백엔드와 협업할 때 API 개발을 기다렸다가 프론트엔드가 개발하는 게 맞을까?
- 회사마다 다르겠지만 목서버를 만들어서 주거나, 프론트에서 목데이터로 promise 객체를 만들어서 개발을 하는 편.
- 상태 관리 라이브러리, CSS 라이브러리 추천
- 안정성을 도모하기 위해 상태 관리 라이브러리를 쓰는 것. 목표인 회사가 redux를 쓴다면 redux 공부하는 건 나쁘지 않다. 그렇지만 목표 없이 무작정 공부를 하기보단 해당 라이브러리가 왜 생겨났는지, 어떤 장점이 있는지, 동작 원리가 어떤지 공부해 보는 것이 좋을 듯.
- 코테를 안 보는 회사를 간다고 한다면 코테를 보는 회사보다 성장 가능성이 낮을까?
- 그건 아니다. 회바회. 코테는 토익과 같다. 코테에 통과를 못 한다면 그냥 합격의 기준이 안 될 뿐.
- 팀 프로젝트를 한 뒤 포트폴리오 작성을 어떻게 하면 좋을까?
- 면접자들은 세세하게 포트폴리오를 확인하지 않는다. 배포된 서버를 추가하고 어그로성 제목을 작성하는 게 좋다. (그렇다... 개발자는 어그로꾼?!) 해당 회사가 요구하는 것들을 작성하여 관심을 끌 만한 내용을 작성해 보자.
2. 주간 회고
사이드 프로젝트도 애매하게 멈추어 있고, 미니 프로젝트도 이제 막 시작해서 정신이 없는 한 주. 회의가 끝나나 싶으면 또 다른 회의가 생기는 매직. 앞으로 계속 팀원들이랑 작업을 할 것 같은데 내 역량을 더 많이 키워야 할 것 같다. 얼른 노마드코더 강의도 보고... redux에 익숙해져야만!!! 그래도 이번 주에 농놀(슬램덩크 봤다는 뜻)도 하고 부석순 컴백으로 아주 파이팅!!! 해야지!! 상태. 아좌작. 그리고 요즘 들어서 더 드는 생각은 글을 재미있게 쓰고 싶다는 생각이다. 내가 쓴 글은 별로 재미있다고 생각하지 않아서 그런 것도 있지만 개발 블로그들을 보다 보면 정말 재미있고, 쉽고, 더 궁금하게 만드는 글들이 많다. 회고록 같은 것들도. 재미있게 쓰는 법을 익히고 싶다. 책도 많이 읽자!
