🇰🇷 20230815 TIL Next.js 기초 강의를 듣던 중 프로젝트 create를 npx로 하길래 npm과 뭐가 다르지? 그렇다면 yarn이랑은? 궁금해져서 간단하게 찾아보고 정리하였다. 1. npm 자바스크립트 런타임 환경 Node.js의 기본 패키지 관리자 Node Package Manager라는 말 그대로 노드 환경에서의 패키지 매니저를 의미한다. 자바스크립트 환경에서 프로젝트를 시작할 때 node와 함께 설치하라고 하는 Getting Started가 많고 사용 빈도가 높다. `npm install 모듈명 -g` : npm을 통해 -g 옵션을 주면 매 프로젝트마다 모듈을 설치해 줄 필요가 없고 내 컴퓨터 안에서 글로벌하게 모듈이 설치되어 프로젝트마다 같은 모듈을 공유해서 사용할 수도 있다. 단..
💡 TIL 20230814 리액트 프로젝트를 빌드하면서 상태관리 라이브러리는 당연하게도(?) Redux만 써봤었다. 하지만 세상에 당연한 것은 없는 법.. Recoil, Zustand, Jotai 등 다른 상태 관리 라이브러리도 써보고 싶다는 생각에 먼저 Recoil부터 설치해서 사용해보게 되었다. 1. Recoil이란? Recoil은 페이스북이 만든 상태 관리 라이브러리이다. React 전용으로 나온 상태 관리 라이브러리인 만큼 리액트에서 최적화되어 작동한다. 아래는 Recoil 공식 홈페이지에서 소개하는 Recoil의 특징인데 설명이 뭔가 귀엽다. 리액트 공식 유튜브에서 설명하는 Atom의 개념도이다. redux에서는 store라는 중앙 상태 관리소에 담아두고 관리하는 개념이었다면, 리코일에서는 뭔가..
💡 WIL 20230807-20230811 : TypeScript React - 챗봇, private route, 마이 페이지 구현한 기능 동작원리 및 트러블슈팅 정리 1. 맡은 기능 openai API 사용하여 챗봇 UI 기능 구현 auth 여부에 따라 접근 불가능하도록 private route 설정 마이페이지 프로필 수정 및 내가 쓴 글 모아보기 페이지네이션 2. 사용 라이브러리 react-route-dom, redux-toolkit, react-query, supabase, openai, react-hook-form, styled-components 3. 구현한 기능 동작 원리 1) 🤖💬 챗봇 기능 - openai API, UI 상태관리 (1) openai API openai API를 사용하여 사용..
💡 20230807 TIL : OpenAI api 리액트 프로젝트에 세팅한 과정 정리 이번 프로젝트에서 챗봇 기능을 담당하였다. 챗봇은 웹 사이트 어디에서든 모달창으로 접근할 수 있으며, 모달에서 OpenAI api를 이용하여 함수명, 변수명을 지어달라고 요청할 수 있는 챗봇을 만드는게 목표이다. OpenAI api는 처음 사용해보는거라, 공식 문서와 블로그들을 참고하여 일단은 어설프게 구현에 성공하여 그 과정을 정리해보려고 한다. 참고로 진행 중인 리액트 프로젝트는 타입스크립트 기반으로 진행 중이다. 1. 세팅 API 사용 전, API키 발급 및 라이브러리 설치 세팅을 완료하여야 한다. 1) React 프로젝트에 openai 라이브러리 설치 // npm 설치 npm install openai // ya..
1. useMemo 리렌더링 사이에 연산 값(value)을 캐시할 수 있는 리액트 훅으로, 메모화된(memoized) 값을 계산하는 함수를 호출한다. import { useMemo } from "react"; const cachedValue = useMemo(calculateValue, dependencies) 1) 사용 예시 리액트 공식 문서에서 설명하고 있는 사용 예시는 다음과 같다. Skipping expensive recalculations (비용이 많이 드는 재연산 생략) Skipping re-rendering of components (컴포넌트의 리렌더링 생략) Memoizing a dependency of another Hook (다른 훅의 의존성 메모화) Memoizing a functio..
💡 20230802 TIL : AWS에 대해 공부한 내용 정리 1. On-premise vs Cloud computing 1) 🏠 On-premise 온프레미스(On-premise)란 기업이 직접 물리적 공간에 실제 하드웨어 장비를 가지고 IT 인프라를 구축하여 운영하는 방식을 말한다. 필요한 인프라 시스템을 구축하기 위해 하드웨어와 소프트웨어를 직접 구입하여, 제공 서비스나 시스템 상황에 맞게 환경을 구성한다. 서버의 유지보수 역시 해당 조직의 IT 인프라를 관리하는 팀이 직접 한다. 간혹 학교나 회사에서 봤었던 서버실 같은 곳들을 떠올리면 된다. 2) ☁️ Cloud computing 클라우드 컴퓨팅(Cloud Computing) 또는 클라우드 서비스(Cloud Service)란 제3자 서비스 공급자..
1. createAction + reducer rtk의 createAction 함수를 사용하여 action creator 정의 createAction 함수는 자동으로 action creator 함수를 생성하여 action object를 생성한다. (ex. { type: 'ADD', payload: actionPayload }) 그 후 reducer 함수를 직접 정의하여, action type과 payload를 기반으로 상태가 어떻게 업데이트되는지를 지정 state가 변화하면 state를 직접 변경하지 않고, reducer 함수에서 새로운 state를 생성하여 반환 2. createAction + createReducer rtk의 createAction 및 createReducer 함수를 모두 사용한다. ..
react-router-dom 6 이상 버전에서 nested routes를 구현하는 방법에는 두 가지가 있다. 참고 사이트 - The Guide to Nested Routes with React Router 1. 부모 Route path에 `/*` 부모 route의 path 마지막에 /*를 적어 명시적으로 이 route의 내부에서 nested route가 렌더링될 수 있음을 표시하고, 자식 route를 부모 route의 element 내부에 작성하는 방법 // Router.tsx // Coin.tsx Routes가 상대경로도 지원하기 때문에 path="chart"와 같이 써도 동작한다. 2. 자식 Route를 Route 내부에 작성 자식 route를 부모 element의 내부가 아닌 route 내부에 작..
1. global.d.ts Todo List를 만들 때, Todo 객체는 여러 컴포넌트에서 쓰일 것이므로 Todo 객체의 타입은 전역적으로 설정해주면 효율적일 것이다. `global.d.ts` 파일은 TypeScript에서 전역으로 사용할 타입들을 선언하는 파일이다. 일반적으로 `.d.ts` 확장자를 가진 파일들은 TypeScript 타입 선언 파일로서, 프로젝트 전체에서 사용되는 타입들을 정의하기 위해 사용된다. 1) 내가 작성한 global.d.ts 파일 // global.d.ts import { Dispatch, SetStateAction } from "react"; export interface Todo { id: string; title: string; content: string; isDone..
1. 리액트 앱 생성 // yarn yarn create react-app my-app (--template typescript) // npx npx create-react-app my-app (--template typescript) 디렉토리 구조 package.json 프로젝트 정보와 의존성(dependencies)을 관리하는 문서 파일 안의 script 객체에서는 실행, 빌드 등의 alias를 설정하여 관리할 수 있음 tsconfig.json 디렉토리에 tsconfig.json 파일이 있다면 해당 디렉토리가 TypeScript 프로젝트의 루트가 됨 tsconfig.json 파일은 프로젝트를 컴파일하는 데 필요한 루트 파일과 컴파일러 옵션을 지정 2. 절대경로 사용 // tsconfig.json { ..
