jjangsh 님의 블로그

문제 : 내 풀이 : function solution(s) { const lastIndex = {}; const answer = []; for (let i = 0; i   lastIndex 객체:각 문자의 마지막 등장 위치를 저장. lastIndex[s[i]]를 통해 해당 문자가 이전에 어디에서 등장했는지 빠르게 접근할 수 있다.for 루프:문자열을 순회하면서 문자가 이전에 등장한 적이 있는지 확인한다. lastIndex[s[i]] !== undefined를 통해 그 문자가 처음 등장한 것인지 아닌지 확인할 수 있다.이전에 등장했다면 현재 인덱스와 마지막 등장 위치의 차이를 계산하여 answer에 저장한다. 처음 등장한 문자라면 -1을 추가한다.마지막 등장 위치 갱신:각 문자가 처리된 후..

1. 프로젝트 개요소개 : MBTI 검사를 할 수 있고 다른 사람들의 검사 결과도 볼 수 있는 사이트 진행기간 : 2024. 09. 07 ~ 2024. 09. 11 https://mbti-test-app-omega.vercel.app/           2. 프로젝트 구조mbti-test-app├─ db.json├─ eslint.config.js├─ index.html├─ package.json├─ postcss.config.js├─ public│ └─ icon.svg├─ README.md├─ src│ ├─ api│ │ ├─ auth.js│ │ └─ testResults.js│ ├─ App.jsx│ ├─ axiosInstances│ │ ├─ authInstance.js│ │ └─ t..

문제 :  내 풀이 :function solution(numbers) { let resultSet = new Set(); for(let i = 0; i a - b )} 1. resultSet 선언 - Set은 중복된 값을 허용하지 않는 자료구조로 두 숫자의 합이 중복되더라도 Set에 저장해서 중복값을 제거한다. 2. 이중 반복문을 사용하여 숫자의 쌍을 찾기- 첫 번째 for문은 배열 numbers의 각 요소를 차례대로 선택한다. 인덱스 i가 첫 번째 숫자를 가리킨다.- 두 번째 for문은 선택된 첫 번째 숫자 이후의 숫자들을 선택한다. 즉, 인덱스 j가 i + 1부터 배열 끝까지 탐색한다. 이렇게 함으로써 중복된 쌍이 나오지 않게 보장된다. 3. 두 숫자의 합을 resultSet에 추..

01. memoization의 개념 (1) 리-렌더링의 발생 조건컴포넌트에서 state가 바뀌었을 때컴포넌트가 내려받은 props가 변경되었을 때부모 컴포넌트가 리-렌더링 된 경우 자식 컴포넌트는 모두(2) 최적화리액트에서 리렌더링이 빈번하게, 자주 일어난다는 것은 그렇게 좋은 소식은 아니에요. 비용이 발생하는 것은 최대한 줄여야 합니다. 이런 작업을 우리는 최적화(Optimization)이라고 불러요. 리액트에서 불필요한 렌더링이 발생하지 않도록 최적화하는 대표적인 방법이 바로memo(React.memo) : 컴포넌트를 캐싱useCallback : 함수를 캐싱useMemo : 값을 캐싱  02. memo(React.memo) (1) memo란? 리-렌더링의 발생 조건 중 3번째 경우. 즉, 부모 컴포..

01. useContext 소개  (1) react context의 필요성 우리는 일반적으로 부모 컴포넌트 → 자식 컴포넌트로 데이터를 전달해 줄 때, props를 사용했습니다.그러나 부모 → 자식 → 그 자식 → 그 자식의 자식 이렇게 너무 깊어지게  prop drilling 현상이 일어나요. prop drilling의 문제점은깊이가 너무 깊어지면 이 prop이 어떤 컴포넌트로부터 왔는지 파악이 어려워져요.어떤 컴포넌트에서 오류가 발생할 경우 추적이 힘들어지니 대처가 늦을 수밖에 없죠. 그래서 등장한 것이 바로 react context API라는 것이고, useContext hook을 통해 우리는 쉽게 전역 데이터를 관리할 수 있게 되었습니다.   (2) context API 필수 개념createCon..

01. useRef란?  (1) useRef hook 소개useState와 더불어 특정 값을 저장하기 위해 사용하는 대표적인 hook이라고 할 수 있어요. Re-rendering과 상관없이 값을 기억하기 위해 사용되는 것이 본질적 특징이죠. 이 특징을 이용해 자바스크립트 DOM API를 직접 사용하지 않고 DOM 요소를 다루기 위한 용도로도 자주 사용된답니다.  (2) 사용방법 import "./App.css";import { useRef } from "react";function App() { const ref = useRef("초기값"); console.log("ref", ref); return ( useRef에 대한 이야기에요. );}export default App;..

08 / 28 ~ 09 / 04 기간 동안 진행했던 devnote 프로젝트를 마무리 지었다. 시연영상         구현기능회원관리로그인 : 유효성 검사로 입력 양식 검증, supabase에 저장된 사용자의 정보와 일치하면 로그인처리회원가입 : 유효성 검사로 입력 양식 검증, supabase에 입력받은 정보를 저장정보 수정 : 사용자의 기본키값인 id로 로그인 한 사용자의 정보를 입력받은 값으로 수정로그아웃 : 사용자가 로그아웃하면 Supabase는 새로 고침 토큰을 취소하고 클라이언트 측에서 JWT를 삭제Context API로 user를 전역 상태 관리게시판작성 : 썸네일 이미지, 제목, 내용, 기술스택, 진행 기간 등 정보를 입력받아 DB에 저장수정 : 게시글에서도 작성한 사용자의 id를 가지고 있기..

Routerconst Router = () => { const { user } = useContext(UserContext); const publicRoutes = [ { path: '/', element: }, { path: '/detailpost/:id', element: } ]; // 로그인하지 않은(인증되지 않은) 사용자 전용 라우트 const routesForNotAuthenticatedOnly = [ { path: '/signin', element: }, { path: '/signup', element: } ]; const routesForAuthenticate..

1. supabase로 회원가입 프로젝트 기획 후 초반에 초기 세팅을 해두었고 .env 파일도 생성해 두었기 때문에 Supabase 클라이언트 설정을 아래와 같이 바로 하였다.import { createClient } from '@supabase/supabase-js';const supabaseUrl = import.meta.env.VITE_SUPABASE_URL;const supabaseKey = import.meta.env.VITE_SUPABASE_KEY;const supabase = createClient(supabaseUrl, supabaseKey);export default supabase;   나는 회원가입을 먼저 구현하기로 하고 만들어둔 pages/SignUp에서 작업을 진행했다. const..

오늘 팀장으로 새로운 React 프로젝트를 시작하게 되었다. 우리의 프로젝트 이름은 devnote이고, 본인의 프로젝트를 업로드하여 다른 사람들의 프로젝트를 보기도 하고, 내 프로젝트를 자랑하거나 알리기 위한 웹사이트이다. 와이어 프레임 (변동 가능성 99%...)SignIn / SignUp  메인 페이지  마이 페이지  글작성 및 수정  상세 페이지  개발 프로세스1. Vite 프로젝트 셋업 - 팀장인 내가 프로젝트 생성과 github repository를 만들고 공유했다.2. .prettierrc 파일 만들기 - 팀원들과 코드포맷팅 규칙을 동일하게 설정하기 위해 설정한다.{ "printWidth": 120, "tabWidth": 2, "useTabs": false, "semi":..