FindNewThing FindNewThing

코딩테스트 기본 유형 총정리 (핵심 예시 + 풀이 논리)1.문자열 처리 - 예시 문제문자열을 뒤집어서 출력하시오.입력: "hello" → 출력: "olleh" - 풀이 논리문자열은 배열처럼 접근 가능JS에서는 split("") → reverse() → join("") 패턴이 기본 function reverseStr(s) { return s.split("").reverse().join(""); } [개념정리]1.split()- split 함수는 건네받은 특정 문자열로 구분하여 배열을 반환한다. 안에 ""로 빈 문자열을 건네면 원본 문자열의 각 문자가 배열의 개별 요소가 된다. 2.reverse()- reverse() 함수는 해당 배열의 순서를 역순으로 정리한다. 3.join()- Array 인스턴스의..

Zustand (상태 관리): 클라이언트의 상호작용에 의해 변경되는 데이터를 관리합니다. (예: 다크 모드 토글)React Query (데이터 페칭): 서버에 의해 관리되고 제공되는 데이터를 관리합니다.이전 포스팅에서 서버에서 가져오는 데이터(상태)는 React Query로 관리하는 것이 효율적이라고 했다.왜일까? 1. 네트워크 비용 증가- 페이지를 전환할 때마다 네트워크에 새로운 데이터를 요청한다면 ? 또 그게 fireStore같은 접근단위로 과금이 되는 구조라면? 2. 응답 속도 저하/ 서버 부하 / 비효율- 위와 같은 이유로 이미 있는 것을 또 호출할 필요가 없다. 3. 데이터 일관성 문제- 여러 컴포넌트에서 동시에 요청한다면, 데이터 갱신 타이밍이 다를 수 있다. React Query같은 서버..

이전 포스팅에서는 React에서 상태관리 카테고리와 종류에 대해서 정리했다.https://findnewthing.tistory.com/27 [React] React에서 상태관리1프론트엔드 기술들이 우후죽순으로 많아졌다. 그래서 상태관리에 대해서 기록하는 겸 정리를 해보겠다.참고하실 분들 있으면 참고하면 좋을 것 같습니다. ## 상태관리컴포넌트 간에 데이터(상findnewthing.tistory.com그렇다면 어떤 상황에서 무엇을 사용해야할까?일단 상황별로는 크게 세가지가 있다.1) 해당 페이지에서만 사용하는 상태2) props로 전달해야할 상태(다른 컴포넌트에서도 사용할 데이터)3) 서버에 요청해서 가져온 상태 1번 처럼 따로 전달할 필요가 없는 것은 평소처럼 useState로 해당 컴포넌트에서 관리하면..

현재 개발 중인 애플리케이션은 NoSQL기반의 fireStore를 쓰고 있다. NoSQL을 사용하는 것은 이번이 처음인데,SQL만 사용했던 나로선 초반에 구조를 짜는데 애를 먹었다. 내가 겪었던 것들을 정리해보겠다. 나는 문서형 NoSql을 사용햇는데, 기본 특징은 비슷할테이니만약 당신이 NoSql을 처음 사용한다면이글이 조금이라도 도움이 되기를 바란다. [기본 개념]## 데이터 베이스관계형 데이터베이스(SQL) VS 비관계형 데이터베이스(NoSQL)### 관계형 데이터베이스(SQL)- 구조화 쿼리 언어(SQL)를 사용하고 미리 정의된 스키마가 있다.- 테이블 기반 - 정형화된 데이터에 적합 ### 비관계형 데이터베이스(NoSQL)- 구조화되지 않은 동적 스키마 - 문서, 키 - 값, 그래프 또는 와..

프론트엔드 기술들이 우후죽순으로 많아졌다. 그래서 상태관리에 대해서 기록하는 겸 정리를 해보겠다.참고하실 분들 있으면 참고하면 좋을 것 같습니다. ## 상태관리컴포넌트 간에 데이터(상태)를 어떻게 주고받고 유지할지 방법론 [종류]1. 리액트 자체 상태관리(useState,props) - 규모가 작거나 데이터 흐름이 단순한 경우 - 하지만 컴포넌트의 규모가 늘어나면 계속 늘어나는 props Drilling을 방지하기 위해 상태관리 라이브러리를 사용2. Context API - 리액트에서 제공하는 전역 상태 공유 도구(React 자체 기능) - 여러 단계의 props 전달을 생략하고 트리 전체에서 데이터 접근 가능 해당 상태를 사용하는 모든 하위 컴포넌트들이 리렌더링 되는 이슈로 불필요한 렌더링과 ..

기존에는 resize 이벤트 리스너를 호출해서 창이 변할떄마다 창의 크기를 탐지해 조건부 렌더링을 했었다. useEffect(()=>{ const checkMobile = () => setIsMobile(window.innerWidth window.removeEventListener("resize",checkMobile); } ,[])하지만 이렇게 하면 창의 크기가 'resize'될 때마다 호출되기 때문에 요청 폭탄이다. 떄문에 matchMedia라는 것을 사용해서 해결했다. useEffect(()=>{ if(typeof window === 'undefined') return; const mq = window.matchMedia('(max-widt..

요즘 반응형 사이트들은 화면의 전환을 가로가 아닌 세로 스크롤을 통해서 하는게 대부분이다.이럴때 스크롤 이벤트를 적용하려면 기존에는 window.addEventListener("scroll", () => { const pos = window.scrollY; // 각 섹션의 위치 계산 // activeTab 업데이트});이런식으로 각 위치를 스크롤 마다 계산을 했다고 한다. 그러니 얼마나 CPU에 부담이 되었을까 때문에 현재에는 IntersectionObserver방식을 사용한다. 해당 방식은 위에처럼 스크롤마다 호출되는 것이 아닌섹션을 나누어서(뷰포트) 얼마정도가 보여질때(노출 비율) 호출하도록 하는 거라 확실히 부담이 덜하다 [개념 요약]IntersectionObserver 생성자는 두 개의 인자..

개인프로젝트에서 막 client 개발을 끝내고 기분좋게 커밋하고 나가려고 하는데 ^^rebase상태여서 빨리 되돌리려고함원래는 소스트리를 사용해서 이런적이 없지만 별 생각없이 git rebase --abort ..금일 작업한거 다날아감 ^^ 얻은 교훈중간 중간 커밋하자!