안녕하세요, 패스트 캠퍼스 메가바이트 스쿨 프론트 엔드 3기 수료 중인 김당퀔입니다! 이번 3기 수료 기간은 9월 13일부터 4월 14일까지 총 7개월 과정입니다. 7개월 동안 매주 주말 회고록을 작성해 보려고 합니다.
블로그 제출 기한으로 인해서 지난 금요일부터 해당 주 목요일까지의 사이클로 작성됩니다.
1. 요일별 공부 기록
❤ 1월 27일 금요일
- 리액트 스터디
- Field-Passer
관리자 페이지 레이아웃 마크업
🧡 1월 28일 토요일
- Field-Passer
관리자 페이지 레이아웃 정리
💛 1월 29일 일요일
- 리액트 퀵 스타트
Hooks
- useState
- getter: 읽기 전용의 속성
- setter: 상태를 변경할 때 사용하는 함수
- StateType: 상태 데이터의 타입
- initialValue: 상태 초깃값
const [getter, setter] = useState<StateType>(initialValue)
- useEffect
- componenetDidUpdate, componenetDidMount, componentWillUnMount 생명주기 메서드의 기능 제공
- effectCallback: 필수로 작성해야 하는 함수, 클린업 함수를 리턴
- depsList: 선택적으로 전달하는 의존 객체 배열 값
- 한 컴포넌트 내부에서 useEffect 훅을 여러 개 사용할 수 있으며, 상태와 상태 관련 로직을 중심으로 useEffect 훅을 작성할 수 있어서 관련된 코드들이 함께 모여 있으므로 코드를 이해하기 편리.
useEffect(effectCallback[, depsList])
- useReducer
- state: 상태
- dispatch: 상태를 변경하는 메서드
- reducer: 새로운 상태를 리턴 하는 리듀서 함수
- initialState: 초기 상태로 지정할 객체
- 상태 관리 기능을 컴포넌트로부터 분리할 수 있고, 유사한 상태 관리 기능을 사용하는 여러 컴포넌트가 상태 변경과 관리 기능을 공유할 수 있다.
- 불변성을 가지는 상태 변경을 강제하게 되므로 상태 변경을 추적하기가 용이.
const [state, dispatch] = useReducer(reducer, initialState)
- useRef
- useRef 훅을 호출한 뒤 리턴 받은 ref 객체는 컴포넌트의 모든 생명주기 동안에 유지되므로 다시 렌더링 되더라도 기존 참조 데이터를 유지한다. 대신 ref 객체가 참조하는 데이터가 변경되더라도 다시 렌더링이 일어나지 않는다.
- initialValue: 참고 객체로 주어질 초깃값
const refObject = useRef(initalValue)
- useMemo
- 함수가 호출되고 연산된 리턴 값을 캐싱하여 재사용. 캐싱되는 것은 함수를 호출한 후의 리턴 값.
- factory: 캐싱할 값을 만들어내는 함수.
- depsList: 의존 배열 객체, 이 배열의 값이 바뀌기 전까지는 캐시를 유지.
const memoizedValue = useMemo<T>(factory: () => T, depsList)
- useCallback
- 컴포넌트 내부의 함수를 캐싱. 렌더링 할 때마다 함수가 생성되지 않게 재사용. 캐싱되는 것은 컴포넌트 내부의 함수.
- callback: 캐싱하려는 대상 함수
- depsList: 함수를 캐싱할 때 의존 객체 배열, 이 배열의 값에 변화가 없으면 함수를 새로 만들지 않음.
const memoizedCallback = useCallback(callback, depsList)
리액트 훅의 생명주기
- 컴포넌트가 마운트 될 때
| 단계 | 설명 |
|---|---|
| 레이지 초기화 | useState()나 useReducer에 전달하는 함수. 이 함수는 비동기로 지연되어 호출. 일반적인 초기화: const count = useState<number>(0) 레이지 초기화: const count = useState<number>(() => return 0) 레이지 초기화를 실행할 때 인자로 전달되는 함수 내부에서 실행되는 코드는 마운트 될 때만 실행. 상태로 사용할 데이터를 도출하기 위해 복잡한 로직이 필요한 경우 레이지 초기화가 유용. |
| 렌더링 | 함수 컴포넌트의 내부 코드가 실행. 가상 DOM에 대한 쓰기 작업을 수행. |
| 가상 DOM 업데이트 | 가상 DOM 업데이트 |
| LayoutEffects 실행 | useLayoutEffect 훅에 지정한 함수를 실행. |
| 브라우저 DOM 업데이트 | 이 단계가 완료되면 브라우저 화면의 갱신이 완료된 상태. |
| Effects 실행 | useEffects 훅에 지정한 함수가 호출. |
- 컴포넌트가 업데이트 될 때
| 단계 | 설명 |
|---|---|
| 렌더링 | 함수 컴포넌트의 내부 코드가 실행. 가상 DOM에 대한 쓰기 잘업을 수행. |
| 가상 DOM 업데이트 | 가상 DOM 업데이트 |
| LayoutEffects 클린업 | useLayoutEffect 훅의 두 번째 인자(의존 객체 배열: despList) 전달 여부에 따라 리턴한 클린업 함수가 호출. |
| LayoutEffects 실행 | useLayoutEffect 훅의 두 번째 인자 전달 여부에 따라 지정한 함수를 실행. |
| 브라우저 DOM 업데이트 | 브라우저 DOM 업데이트 |
| Effects 클린업 | useEffect 훅의 두 번째 인자 전달 여부에 따라 리턴한 클린업 함수가 호출. |
| Effects 실행 | useEffect 훅의 두 번째 인자 전달 여부에 따라 지정한 함수를 실행. |
- 컴포넌트가 언마운트 될 때
| 단계 | 설명 |
|---|---|
| LayoutEffects 클린업 | useLayoutEffect 훅이 리턴 하는 클린업 함수 호출. |
| Effects 클린업 | useEffect 훅이 리턴 하는 클린업 함수 호출. |
useEffect vs useLayoutEffect?
- useEffect
- 컴포넌트가 완전히 마운트 된 상황
- 복잡한 처리 과정, API 읽어올 때 사용
- useLayoutEffect
- 컴포넌트가 렌더링 되고 브라우저 DOM에서 렌더링이 실행되기 전
- 간단한 작업, 다시 렌더링으로 인한 화면의 깜빡임을 사용자에게 보여 주고 싶지 않을 때.
순수 함수 조건
- 입력 인자가 동일하면 리턴 값도 동일해야 한다.
- 부수 효과 (side effect) 가 없어야 한다.
- 함수에 전달되는 인자는 불변성을 가져야 한다. 따라서 인자를 변경할 수 없다.
- Field-Passer
관리자 페이지 레이아웃 마크업
💚 1월 30일 월요일
- 리액트 스터디
- Field-Passer
관리자 페이지 레이아웃 마크업 - 안재원 강사님 수업
- res.end()로 내용을 보내는 것보다 res.send(), res.json()으로 보내는 것이 좋다.
- res.send()와 res.json()의 차이는 json이 조금 더 명시적인 메소드이기 때문에 json을 사용하는 것이 좋다. json 함수 안에서 또 send 메소드를 사용하기 때문.
- MVC 패턴
model-view-controller 사용자 인터페이스, 데이터 및 논리 제어를 구현하는데 널리 사용되는 소프트웨어 디자인 패턴. MVC에 기반을 둔 몇 가지 다른 디자인 패턴은 MVVM(model-view-viewmodel), MVP(model-view-presenter), MVW(model-view-whatever)가 있다.
참고 링크
💙 1월 31일 화요일
- Field-Passer
- 리액트 퀵 스타트
고차 함수(Hider-order function)
다른 함수와 컴포넌트를 인자로 전달받거나 리턴 하는 함수.
{...props}코드는 기존 컴포넌트가 사용하는 속성을 그대로 다시 전달하기 위해 반드시 작성.
클래스 컴포넌트의 공통 로직을 분리하는 경우라면 고차 함수를 사용할 수밖에 없지만 함수 컴포넌트를 사용한다면 사용자 정의 훅을 작성하여 공통의 로직을 분리할 것을 권장.
- 한 컴포넌트에 여러 고차 함수를 적용할 때 동일한 이름의 속성을 사용하고 있다면 충돌이 생김.
- 인자로 전달되는 컴포넌트의 속성이 무엇일지 알 수 없으므로 암묵적으로 any 타입을 사용할 수밖에 없다. 즉, 타입스크립트와 같은 정적 타입 언어를 적용할 때 어려움이 있다.
React.memo 고차함수
컴포넌트가 동일한 상태나 속성을 가지고 있다면 얕은 비교를 수행하도록 하여 불필요한 렌더링을 방지. 불변성을 가진 상태의 변경이 필수적.
- 두 번째 인자로 전달한 함수의 리턴값이 true면 렌더링을 하지 않는다.
- prevProps: 이전의 속성
- nextProps: 새롭게 전달된 속성
React.memo(컴포넌트, (prevProps, nextProps) => {})
React.memo 고차 함수를 이용하면 렌더링 최적화가 가능. 전달 받은 속성에 대한 이전 속성과 얕은 비교를 통해 다시 렌더링 할지를 결정함으로써 렌더링 최적화를 한다. 함수를 속성으로 전달하는 경우 React.memo 고차 함수와 함께 useCallback 훅을 이용해 렌더링 할 때마다 함수가 매번 생성되지 않도록 최적화할 수 있다.
💜 2월 1일 수요일
- 백준
- TEAM-NXLL
관리자 페이지 NavBar 정보 불러오는 것들 정리, CSS 정리
Vite .env를 사용하는데 axios 에러가 자꾸 뜨길래 뭐가 문제인가 했더니 단순 오타였다. ^^ 오타를 잘 확인하자. 이걸로 몇 시간을 버린 거 생각하니까 조금 눈물이 나는 것 같기도 하고. - 리액트 스터디
이론적인 이해는 어느 정도 된 것 같은데 아직도 리액트는 내가 잘 활용을 할 수 있을지 모르겠다. - 안재원 강사님 수업
- Node.js는 view engine 시스템을 가지고 있다. 서버에서 처리한 데이터 결과값을 정적인 페이지 (HTML)에 보다 편리하게 출력해 주기 위해 사용한다.
참고 블로그
🤎 2월 2일 목요일
- 백준
- 블로그 작성
- 리액트 퀵 스타트
- 그룹 스터디 워크샵 자료 제출
- Field-Passer
관리자 페이지 폴더 구조 변경 및 레이아웃 마크업
2. 주간 회고
이번 주부터 제대로 백준을 풀기 시작했다. 프로그래머스도 아직 2단계를 제대로 풀지 않기는 했지만 난이도가 조금은 상승했다는 걸 체감하기도 했고 자꾸 그런 걸 보니까 눈에 안 들어오는 것 같길래 다시 쉬운 것부터 해 보자는 마음으로 백준을 풀기 시작했다. 백준은 node.js를 기반으로 하는 거라 fs 사용해서 풀어야 하길래 그것부터 익숙해지기로 했다. 처음에는 되게 막막했는데 문제 몇 개를 풀고 나니까 어떻게 하는 건지 이해가 됐다. 역시 뭐든 부딪혀 보는 것이 답. 주말까지 Field-Passer도 최대한 마크업 끝내 놓고 api 연결해서 작동하는 걸 생각해야 된다. 그리고 에러 처리에 대한 것들도 생각해야 되는데 왜 이렇게 막막할까... 8ㅅ8 그치만 할 수 있다! 이거 얼른 끝내고 미니 프로젝트랑 파이널 프로젝트도 뿌셔야 하니까 더 힘을 냅시다. 아직 리액트로 제대로 할 줄 아는 게 없어서 더 막막한 것 같기도 하다. 일단은 마크업만 하고 기능 구현을 안 하다 보니까 이렇게 하는 게 맞나? 하는 생각이 더 드는 것도 있는 것 같다. 설도 있고 이래서 조금 쉬다 보니 자꾸 쉬운 길로 돌아서 가려고 하는 것 같다. 그치만 할 수 있어!!!
지금까지 21주차의 기록을 읽어 주신 여러분, 감사합니다! 김당퀔은 이만 공부하러. 🥕🥕
