💡 TIL 20230814 리액트 프로젝트를 빌드하면서 상태관리 라이브러리는 당연하게도(?) Redux만 써봤었다. 하지만 세상에 당연한 것은 없는 법.. Recoil, Zustand, Jotai 등 다른 상태 관리 라이브러리도 써보고 싶다는 생각에 먼저 Recoil부터 설치해서 사용해보게 되었다. 1. Recoil이란? Recoil은 페이스북이 만든 상태 관리 라이브러리이다. React 전용으로 나온 상태 관리 라이브러리인 만큼 리액트에서 최적화되어 작동한다. 아래는 Recoil 공식 홈페이지에서 소개하는 Recoil의 특징인데 설명이 뭔가 귀엽다. 리액트 공식 유튜브에서 설명하는 Atom의 개념도이다. redux에서는 store라는 중앙 상태 관리소에 담아두고 관리하는 개념이었다면, 리코일에서는 뭔가..
프로그래머스 알고리즘 풀이 사용 언어 - 자바스크립트 JavaScript JS 1. 특수문자 출력하기 1) ❓ 문제 설명 다음과 같이 출력하도록 코드를 작성해 주세요. 2) ✅ 입출력 예 !@#$%^&*(\'"?:; 2. 이스케이프 문자 이스케이프 문자란 이스케이프 시퀀스를 따르는 문자들로서, 다음 문자가 특수문자임을 알리기 위해 사용하며 백슬래시(\)를 사용한다. 1) 자바스크립트에서의 특수 문자 특수문자 설명 \n 줄 바꿈 \r 캐리지 리턴(carriage return). Windows에선 캐리지 리턴과 줄 바꿈 특수 문자를 조합(\r\n)해 줄을 바꿉니다. 캐리지 리턴을 단독으론 사용하는 경우는 없습니다. \', \" 따옴표 \\ 역슬래시 \t 탭 \b, \f, \v 각각 백스페이스(Backspac..
💡 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를 사용하여 사용..
1. 챗봇 on/off state 전역 상태관리를 위한 redux 세팅 챗봇 on/off 상태는 모든 페이지에서 똑같이 인식해야하므로 redux-toolkit을 사용하여 전역적으로 관리해주어야 한다. redux에서 모듈 슬라이스 파일을 만들고, 모듈 슬라이스를 리덕스 configStore에 등록해줌 1) redux - module - chatBotUISlice.ts import { createSlice } from '@reduxjs/toolkit'; import { ChatBotState } from '../../types/types'; const initialState: ChatBotState = { chatBotIsActive: false, }; const chatBotUISlice = createS..
프로그래머스 알고리즘 풀이 사용 언어 - 자바스크립트 JavaScript JS 1. 리스트 자르기 1) ❓ 문제 설명 정수 n과 정수 3개가 담긴 리스트 slicer 그리고 정수 여러 개가 담긴 리스트 num_list가 주어집니다. slicer에 담긴 정수를 차례대로 a, b, c라고 할 때, n에 따라 다음과 같이 num_list를 슬라이싱 하려고 합니다. n = 1 : num_list의 0번 인덱스부터 b번 인덱스까지 n = 2 : num_list의 a번 인덱스부터 마지막 인덱스까지 n = 3 : num_list의 a번 인덱스부터 b번 인덱스까지 n = 4 : num_list의 a번 인덱스부터 b번 인덱스까지 c 간격으로 올바르게 슬라이싱한 리스트를 return하도록 solution 함수를 완성해주세..
맨날 쓰면서도 이름이 비슷해서 그런가 저 세 메서드가 정리가 안되고 헷갈려서 이 참에 한번 시원하게 정리해보자~! 1. slice Array.prototype.slice() 또는 String.prototype.slice() `slice()` 메서드는 문자열 또는 배열에서 특정 범위의 요소들을 복사하여 새로운 문자열 또는 배열을 반환한다. Array // 예제 출처: MDN web docs - Array.prototype.slice() const animals = ['ant', 'bison', 'camel', 'duck', 'elephant']; console.log(animals.slice(2)); // Expected output: Array ["camel", "duck", "elephant"] con..
💡 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..
프로그래머스 알고리즘 풀이 https://school.programmers.co.kr/learn/courses/30/lessons/120813 사용 언어 - 자바스크립트 JavaScript JS 1. 짝수는 싫어요 1) ❓ 문제 설명 정수 n이 매개변수로 주어질 때, n 이하의 홀수가 오름차순으로 담긴 배열을 return하도록 solution 함수를 완성해주세요. 2) 🚫 제한 사항 1 ≤ n ≤ 100 3) ☑️ 입출력 예 n result 10 [1, 3, 5, 7, 9] 15 [1, 3, 5, 7, 9, 11, 13, 15] 2. 사용한 메서드: For문 For문으로 배열에 홀수를 push for문은 괄호로 감싸고 세미콜론으로 구분한 세 개의 선택식과, 반복을 수행할 문(주로 블럭문)으로 이루어져 있..
프로그래머스 알고리즘 풀이 https://school.programmers.co.kr/learn/courses/30/lessons/120891 사용 언어 - 자바스크립트 JavaScript JS 1. 문제 제목 1) ❓ 문제 설명 머쓱이는 친구들과 369게임을 하고 있습니다. 369게임은 1부터 숫자를 하나씩 대며 3, 6, 9가 들어가는 숫자는 숫자 대신 3, 6, 9의 개수만큼 박수를 치는 게임입니다. 머쓱이가 말해야하는 숫자 order가 매개변수로 주어질 때, 머쓱이가 쳐야할 박수 횟수를 return 하도록 solution 함수를 완성해보세요. 2) 🚫 제한 사항 1 ≤ order ≤ 1,000,000 3) ☑️ 입출력 예 order result 3 1 29423 2 입출력 예 설명 입출력 예 #1..
