공부는 필요할 때 하는 게 제일이라고 하셨다..
본격적인 개발에 들어가기 앞서 다음 나열한 정적 언어, 프레임워크, 라이브러리 모두 처음 배우며 하다 보니 간단한 정리가 필요했다.

TypeScript

공식 문서 바로가기

TypeScript is JavaScript with syntax for types.
타입 스크립트는 유형에 대한 구문(타입 구문)이 있는 자바스크립트이다.

Javascript	Typescript
동적 언어	정적 언어
런타임에 타입이 결정되고 오류가 발견된다.	컴파일 타임에 타입 결정되고 오류가 발견된다.
	코드 작성 시간은 길어지지만 안정적이다.

+그렇다고 타스가 런타임에 오류가 나지 않는다는 건 오해다. 그래서 Type Guard(타입 가드)를 사용하는데, Type Guard를 통해 컴파일러가 타입을 예측할 수 있도록 타입을 좁혀 (narrowing) 좀 더 안정성을 보장할 수 있다.

타입스크립트는

• Typescript 코드가 Javascript로 온전하게 변환되기 때문에, Javascript가 실행되는 모든 장소에서 Typescript를 사용할 수 있도록 만들었다.

• 사용하는 프로젝트의 규모가 크고 복잡해짐에 따라 유지보수가 중요해지는 만큼, Typescript의 효과는 극대화될 것이다.

  
  
  
  
  

Next.js

공식 문서 바로가기

Next.js is a flexible React framework that gives you building blocks to create fast web applications.
빠른 웹 애플리케이션을 만들기 위한 빌딩 블록을 제공하는 유연한 React 프레임워크

Next.js는

SSR(Server-Side-Rendering)을 기반으로 한다.

• 브라우저가 javascript파일을 다운로드한 뒤 UI를 보여주는 CSR(Client-Side-Rendering)방식의 리액트와 달리,
• Next.js의 기반인 SSR(Server-Side-Rendering)은 서버에서 UI를 모두 구성한 후 유저에게 화면을 보여주는 방식이다. 화면이 pre-rendering되어 유저는 네트워크 환경에 관계없이 화면에 나오는 것을 볼 수 있다.
• SEO(검색 엔진 최적화)에 좋고, 초기 로딩 속도가 빠르다.(빈 화면 대신 UI를 보여주므로)
  
  

강력한 라우팅 및 레이아웃을 제공한다.

• 복잡한 라우터를 사용할 필요 없이, 폴더의 경로에 따라 페이지의 경로가 설정되어 라우팅이 정말 간편하다!
  
  
  13버전 부터는 app 폴더에서 파일을 생성함과 동시에 페이지 경로를 설정할 수 있다.

  
  
  
  

Redux Tool-kit

공식 문서 바로가기

Redux는 자바스크립트 앱을 위한 예측 가능한 상태 컨테이너.
RTK는 Redux 앱을 만들 때 필수적인 패키지와 함수들을 포함한다. 대부분의 Redux 작업을 단순화하고, 흔한 실수를 방지하며, Redux 앱을 만들기 쉽게 해준다.

Redux Tool-kit은

• 스토어 설정, 리듀서 생성, 불변 업데이트 로직 등과 같은 일반적인 사용 사례를 단순화하는 유틸리티가 포함되어 있다.
• RTK 쿼리 기능으로 강력한 데이터 가져오기 및 캐싱 기능도 포함한다.(선택 사항)
• 따라서 툴킷을 사용하려면 리덕스에 대해 어느 정도 공부가 필요하다.
• 간략하게 리덕스는 "액션"이라는 이벤트를 사용하여 애플리케이션 상태를 관리하고 업데이트하기 위한 패턴 및 라이브러리이다. 🔍 Redux 튜토리얼

Redux Toolkit에는 다음 API가 포함된다.

• configureStore(): 단순화된 구성 옵션과 좋은 기본값을 제공하기 위해 createStore을 래핑한다. 슬라이스 리듀서를 자동으로 결합하고, 제공하는 모든 Redux 미들웨어를 추가하고, 기본적으로 redux-thunk를 포함하고, Redux DevTools Extension을 사용할 수 있다.

• createReducer(): switch 문을 작성하는 대신 case reducer 함수에 작업 유형의 조회 테이블을 제공할 수 있습니다. 또한 자동으로 immer라이브러리를 사용하여 state.todos[3].completed = true.같은 일반적인 mutative 코드로 더 단순한 불변 업데이트를 작성할 수 있게 한다.

• createAction(): 주어진 액션 유형 문자열에 대한 액션 생성자 함수를 생성합니다. 함수 자체가 toString()으로 정의되어 있으므로 형식 상수 대신 사용할 수 있다.

• createSlice(): 리듀서 함수의 객체, 슬라이스 이름, 초기 상태 값을 받아 해당 액션 생성자와 액션 타입으로 슬라이스 리듀서를 자동으로 생성한다.

• createAsyncThunk: 작업 유형 문자열과 약속을 반환하는 함수를 수락하고 해당 약속을 기반으로 pending/fulfilled/rejected 작업 유형을 발송하는 thunk를 생성한다.

• createEntityAdapter: 저장소에서 정규화된 데이터를 관리하기 위해 재사용 가능한 축소기 및 선택기 세트를 생성한다.

• 사용 편의성을 위해 다시 내보낸 Reselect 라이브러리 의 유틸리티 createSelector이다. .

  
  
  
  

---

준비가 안 된 상태에서 무언가를 진행하는 게 막막하고 두렵고 머리가 아프지만 일단 열심히 부딪혀 가며 해보자!