TIL

[TIL] 스파르타코딩클럽 프론트엔드 엔지니어 양성과정_240905

sod0l 2024. 9. 25. 00:35

𝜗𝜚 오늘 공부한 내용

1. React 심화 주차 강의 한 바퀴

  • 각 기술과 도구를 배우는 궁극적인 목적은 웹 애플리케이션 개발의 전반적인 효율성과 사용자 경험을 크게 향상시키기 위해서이다. 비동기 작업, 데이터 관리, 상태 관리, UX 향상 등을 통합적으로 다루어 더 나은 성능과 사용자 만족도를 제공하는 애플리케이션을 만드는 데 중점을 두고 있다.

1) 비동기 1: 비동기, Promise

  • 비동기: 시간이 걸리는 작업을 끝날 때 까지 기다리지 않고, 다른 작업을 먼저 처리할 수 있는 방식. 예를 들어, 서버에서 데이터를 가져오는 동안 다른 버튼 클릭 같은 작업을 계속할 수 있는 것.
  • Promise: 이 비동기 작업의 결과를 기다리고 처리하는 객체. 서버에서 데이터를 가져오고 나면 그 결과를 알려주는 역할을 함. 예를 들어, 친구한테 영화표 예매를 부탁했을 때, 예매가 끝나면 결과를 알려주는 약속 같은 것.

 

2) 비동기 2: Promise All, Async/Await

  • Promise.all: 여러 개의 비동기 작업을 동시에 처리하고, 모든 작업이 완료될 때까지 기다려서 결과를 한꺼번에 받을 수 있음. 예를 들어, 여러 친구에게 동시에 영화표 예매를 부탁하고, 셋 다 끝나면 결과를 확인하는 방식
  • Async/Await: 비동기 작업을 동기 코드처럼 쉽게 작성할 수 있게 해주는 방법. async 함수 안에서 await를 사용하면, 비동기 작업이 완료될 때까지 기다릴 수 있다. 코드가 더 깔끔하고 이해하기 쉬워짐
목적: 여러 개의 비동기 작업을 동시에 처리하거나, 비동기 코드를 더 직관적으로 작성할 수 있는 방법을 배우기 위해 필요함.
활용: 여러 API 호출을 동시에 처리하거나, 비동기 작업을 동기 코드처럼 작성하여 코드의 가독성을 높일 떄 사용. 예를 들어, 페이지 로딩 시 여러 데이터 요청을 동시에 처리하고, 모든 데이터가 준비된 후에 화면을 업데이트할 때 유용함.

 

3) 비동기 3: HTTP

  • HTTP: 웹에서 클라이언트와 서버 간의 데이터 통신 방법. GET 요청으로 서버에서 데이터를 받아오고, POST 요청으로 데이터를 서버에 보낼 수 있음. 예를 들어, 웹사이트에서 정보를 조회하거나 폼을 제출할 때 사용
목적: 웹에서 데이터를 주고받는 기본적인 방법을 이해하고, 클라이언트와 서버 간의 데이터 통신을 관리하기 위해 배워야 함.
활용: 웹 애프리케이션에서 데이터를 서버로 보내거나, 서버에서 받아올 때 사용. 예를 들어, 사용자가 폼을 제출할 때 POST 요청을 보내고, 서버에서 데이터를 조회할 때 GET 요청을 사용하는 방식.

 

4) JSON Server

  • Jason Server: 서버 없이도 API 테스트를 할 수 있게 해주는 도구. 로컬에서 간단한 REST API 서버를 만들어서 데이터를 요청하고 받을 수 있음. 개발 초기나 프로토타입을 만들 때 유용함.
목적: 서버 없이 로컬에서 API 테스트할 수 있는 환경을 제공해 개발 초기 단계에서 빠르게 프로토타입을 만들 수 있게 해줌.
활용: 백엔드 개발이 완료되기 전에 프론트엔드에서 API를 미리 테스트하고, 데이터와 상호작용을 시뮬레이션할 때 사용함.

 

5) Axios 1: 소개, GET, POST

  • Axios: HTTP 요청을 쉽게 할 수 있도록 도와주는 라이브러리. GET 요청으로 데이터를 서버에서 가져오고, POST 요청으로 서버에 새 데이터를 보낼 수 있음
목적: HTTP 요청을 간편하게 처리하고, 오류를 관리할 수 있는 라이브러리를 사용하여 더 효율적인 데이터 통신을 구현하기 위해 배워야 함.
활용: API 요청을 간편하게 처리하고, 요청과 응답을 관리할 떄 사용함. 예를 들어, 사용자 정보를 서버에서 받아오거나, 새 데이터를 서버에 보낼 때 Axios를 활용함.

 

6) Axios 2: DELETE, PATCH, Fetch와 비교

  • DELETE: 서버에서 데이터를 삭제하는 요청
  • PATCH: 서버의 데이터 중 일부를 수정하는 요청
  • Axios는 Fetch API보다 사용하기 쉬운 편이다. 기본적인 설정과 에러 처리가 간편하고, JSON 자동 변환 같은 추가 기능이 있다.
목적: Axios의 다양한 기능을 이해하고, Fetch API와 비교하여 적합한 도구를 선택하는 방법을 배우기 위해 필요함.
활용: 데이터 삭제나 일부 수정이 필요할 때 DELETE와 PATCH 요청을 사용하고, Fetch와의 차이를 이해하여 상황에 맞는 도구를 선택할 때 활용함.

 

7) Axios 3: Custom Instance, Interceptors

  • Custom Instance: Axios를 사용할 때, 기본 설정(예: API 엔드 포인트, 헤더 등)을 미리 정해놓고 재 사용할 수 있는 방법
  • Interceptors: 요청이 서버로 가기 전에 또는 응답이 클라이언트에 도착하기 전에 추가적인 작업을 할 수 있음. 예를 들어, 모든 요청에 자동으로 인증 토큰을 추가하는 기능
목적: 반복적인 요청 설정을 간편하게 관리하고, 요청 및 응답을 가로채어 추가 작업을 수행할 수 있는 방법을 이해하기 위해 배워야 함.
활용: API 요청의 기본 설정을 중앙에서 관리하고, 모든 요청에 인증 토큰을 자동으로 추가하는 등 공통 작업을 설정할 때 사용함.

 

8) Tanstack Query 1: 등장배경

  • Tanstack Query: 서버에서 받아온 데이터를 효율적으로 관리하고 캐시할 수 있는 도구. 서버와의 데이터 통신을 쉽게 하고, 데이터를 캐시해서 재요청을 줄여줌
목적: 서버에서 가져온 데이터를 효율적으로 관리하고 캐시할 수 있는 도구의 필요성을 이해하기 위해 배워야 함.
활용: 데이터를 서버와 주고받을 때, 복잡한 데이터 상태 관리 및 캐싱을 자동으로 처리하는 도구를 사용할 떄 유용함.

 

9) Tanstack Query 2: 기본 사용법

  • useQuery: 데이터를 요청하고, 자동으로 캐시하고 갱신하는 기능을 제공함. 예를 들어, API에서 데이터를 받아오면, Tanstack Query가 알아서 데이터 상태를 관리해줌.
목적: 데이터를 요청하고, 캐시하며 상태를 관리하는 기본적인 사용 방법을 익히기 위해 필요함.
활용: API 데이터를 요청하고, 상태를 관리하며 데이터가 업데이트되었을 때 자동으로 반영되게 할 때 사용함.

 

10) Tanstack Query 3: 복습, SWR, 데이터 흐름

  • SWR: Tanstack Query와 비슷한 데이터 패칭 도구로, 데이터를 가져오고 업데이트하는 기능을 제공함. 두 도구의 차이점을 이해하고, 데이터 데이터 흐름을 파악하는게 중요함

 

11) Tanstack Query 4: 라이프사이클 및 동작 원리

  • 데이터 요청과 업데이트 과정을 이해하는게 중요함. 데이터가 언제 요청되고, 언제 업데이트되는지 이해하면 Tanstack Query를 더 효과적으로 사용할 수 있음
  1. 쿼리 요청: useQuery로 데이터 요청을 트리거
  2. 데이터 패칭: 서버에서 데이터 가져오기
  3. 캐시 저장: 데이터를 캐시에 저장하여 빠르게 제공
  4. 데이터 업데이트: useMutation으로 데이터 수정 및 UI 업데이트
  5. 에러 처리: 요청 실패 시 에러 상태 관리 및 재요청

 

12) Tanstack Query 5: 고급; Cancellation, Optimisitic Update, Prefetching

  • Cancellation: 진행 중인 비동기 작업을 취소할 수 있음. 예를 들어, 사용자가 검색어를 바꿀 때 이전 검색 요청을 취소할 수 있음
  • Optimistic Update: 서버 응담을 기다리기 전에 UI를 먼저 업데이트해서 사용자 경험을 개선하는 기술. 예를 들어, 서버에서 댓글을 추가할 때 UI를 즉시 업데이트할 수 있음
  • Prefetching: 사용자가 필요로 할 데이터를 미리 가져와서, 빠르게 제공할 수 있게 해주는 기술. 페이지를 미리 로드해 두는 것과 비슷함.

 

13) Tanstack Query 6: Infinity Query

  • Infinity Query: 데이터를 무한히 불러오는 기능. 무한 스크롤처럼 스크롤을 내릴 때 자동으로 추가 데이터를 로딩해줌.

 

14) Zustand 1: 소개 및 기본 사용법

  • Zustand: 간단하고 직관적인 상태 관리 도구. 상태(예: 로그인 여부, 사용자 정보)를 쉽게 관리하고, 컴포넌트 간 상태를 공유할 수 있음.

 

15) Zustand 2: Immer, Persist

  • Immer: 상태를 변경할 때 불변성을 유지하면서도 안전하게 업데이트할 수 있음. 데이터가 바뀔 떄 원래 데이터를 복사하지 않고도 변경할 수 있음.
  • Persist: 앱 상태를 브라우저의 로컬 스토리지에 저장하고, 앱을 닫았다가 다시 열어도 상태를 유지할 수 있게 해주는 기능.

 

16) UX 향상 기법 1: Throttiling, Debouncing

  • Throttling: 이벤트가 너무 자주 발생하지 않도록 제한하는 기술. 예를 들어, 스크롤 이벤트를 1초마다 한 번만 처리하도록 설정해 성능을 개선할 수 있음
  • Debouncing: 이벤트가 멈춘 후 일정 시간 동안 추가 이벤트가 없을 때만 마지막 이벤트를 처리함. 검색창에서 타이핑이 끝난 후에만 검색 요청을 보내는 방식
목적: 사용자 경험을 개선하기 위해 이벤트 처리를 최적화하고, 성능을 향상시키기 위한 기술을 이해하기 위해 배워야 함.
활용: 스크롤, 입력 등 자주 발생하는 이벤트를 최적화하여 웹 애플리케이션의 성능을 개선하고, 불필요한 요청을 줄일 때 사용함.

 

17) UX 향상 기법 2: Lodash를 활용한 Throttling, Debouncing

  • Lodash: Throttling과 Debouncing을 쉽게 구현할 수 있는 유틸리티 라이브러리. 직접 코드를 작성할 필요 없이 라이브러리를 통해 간편하게 사용할 수 있음

 

18) 인증 인가 1: 개념, 쿠키, 세션, 토큰

  • 인증: 사용자가 누구인지 확인하는 과정
  • 인가: 사용자가 어떤 권한을 가지고 있는지 확인하는 과정
  • 쿠키와 세션은 브라우저에 저장된 정보를 통해 사용자를 기억하고, 토큰은 서버와의 인증을 위해 사용되는 특별한 키 같은 것
목적: 웹 애플리케이션에서 사용자 인증과 인가를 처리할 수 있는 방법을 이해하고, 보안을 강화하기 위해 배워야 함.
활용: 로그인 시스템을 구현하거나, 사용자 권한에 따라 접근을 제어할 떄, 쿠키, 세션, 토큰을 활용함.

 

19) 인증 인가 2: 코드 예시를 통한 실습

활용:  로그인 기능을 구현하고, API 요청 시 인증 토큰을 사용하는 방법을 실습하여 실제 프로젝트에 적용할 때 사용함.

 

20) Tailwind

  • Tailwind: 유틸리티 클래스 기반의 CSS 프레임워크. 미리 정의된 클래스를 사용해 빠르게 스타일을 적용할 수 있음. 직접 CSS를 작성하지 않고도 다양한 스타일을 손쉽게 적용할 수 있음

 

21) 반응형 웹

  • 반응형 웹: 다양한 화면 크기에 맞게 웹 사이트가 자동으로 조정되는 디자인. 핸드폰, 태블릿, 컴퓨터 등에서 최적화된 레이아웃을 제공해서 사용자 경험을 향상시킬 수 있음.

 

 

𝜗𝜚 Review

  • 오늘 리액트 심화 주차 강의를 쭉 봤는데 어렵고 어색한 내용들이 너무 많다.
  • 일단 중요한 내용들을 타이핑하면서 읽어보긴했는데 아직 잘 모르겠다.

 

 

𝜗𝜚 for tomorrow

  • 내일 오전에 머리에 안 들어온 내용의 구멍들을 매꿀 방법과 와카타임 7시간을 어떻게 같이 챙길지 계획을 잘 짜야할 것 같다.



Ig. https://www.instagram.com/sodol_dotcom/