Don't be afraid of challenges

스토리북이란 ?UI 컴포넌트와 페이지를 독립적으로 생성하여, 직접 접근하기 어려운 state나 엣지 케이스를 애플리케이션 전체를 살피지 않고도 쉽게 개발하고 공유하도록 해주는 도구시작하기npx storybook@latest init수정한 storybook 코드 업데이트하기npx storybook@latest upgradeframework가 안깔려져있으면npm install --save-dev @storybook/nextjs 여기까지해서 폴더 구조를 보면 .storybook이라는 폴더가 생긴다. import type { StorybookConfig } from "@storybook/nextjs";const config: StorybookConfig = { stories: ["../src/**/*.mdx"..

'수정'을 거친 후 데이터베이스가 업데이트 되고,그 후 업데이트된 데이터를 다시 브라우저에 불러와야 한다.  이 방법을 수행할 수 있는 몇 가지 방법 1. tanstack query (권장)tanstack query는 클라이언트에서 서버 데이터를 쉽게 관리하고 갱신하는데 유용한 라이브러리.이를 사용하면 데이터가 변경된 후 자동으로 데이터를 새로 불러오거나, 수정된 데이터를 서버에서 가져와 UI 갱신 가능주요 장점 :- refetching : 데이터가 수정되면 해당 데이터를 자동으로 다시 불러오거나, 수동으로 refetch 트리거하여 최신 데이터 반영- optimistic updates : 데이터 수정 요청이 서버에 성공하기 전에 UI에서 미리 예상 결과를 보여주어, UX 개선- 캐시 관리 : 요청 결과는..

2025-01-09 저녁, 인턴업무를 수행하던 와중 검색, 필터링 구현을 시작하게 되었다.지금까지는 그냥 데이터를 다 받은 다음 프론트 단에서 데이터를 slice하고 그랬었는데 몇 달전 내배캠에서 최종프로젝트를 같이하던 팀원분이 검색로직을 맡았었는데 searchParam을 이용하여 로직구현을 하던것을 보았다.그땐 시간도 없고 내 업무 처리하느라 바빠서 저게 뭐지 ..? 하고 넘겼었는데 이제 본인이 그 업무를 맡게 된 것이다.그래서 관련 블로그를 찾아보니 url에 쿼리스트링을 조작하여 상태정보를 저장할 수 있는 방법을 보게 되었다. 지금까지 쿼리를 이용하여 검색로직을 구현해야하는 것에 대해 굳이..? 라는 생각이 들었다.사용자가 검색창에 검색을 하고 필터링을 직접 조작하면 되는 것이 아닌가라고 생각했었는데..

1. pnpm이란 ?pnpm이란 패키지 관리 도구로, 빠르고 효율적인 의존성 설치를 제공한다. npm이나 yarn과 비슷한 기능을 제공하지만, 의존성을 하드링크하여 더 적은 디스크 공간을 사용하고 속도 또한 빠르다. 이는 특히 모노레포 프로젝트나 대규모 프로젝트에서 효율적이다.더보기모노레포 란 ?버전 관리 시스템에서 두 개 이상의 프로젝트 코드가 동일한 저장소에 저장되는 소프트웨어 개발 전략2. 주요 기능과 특징하드 링크 저장 : pnpm은 모든 패키지를 전역 저장소에 설치하고, 하드 링크를 통해 프로젝트에 연결한다. 이 덕분에 중복된 패키지 설치를 방지하고 디스크 공간을 절약할 수 있다.빠른 설치 속도 : pnpm은 의존성의 중복 다운로드를 방치하고, 네트워크 트래픽을 줄여 npm보다 빠르게 설치할 수..

이슈 템플릿 작성  칸반보드 생성  마일스톤 작성이정표 역할, 이슈라고 불리는 태스크 카드들을 그룹화하는데 사용된다. 마일스톤에 연결된 태스크 카드들이 완료되면, 각 마일스톤의 진행상황을 업데이트 할 수 있다. 이러한 마일스톤의 기능은 관련 이슈들의 추적 및 진행상황을 한눈에 파악하는데 큰 장점을 제공한다. 스프린트나 단계별 구현에 관련된 유사 이슈들을 개별적으로 추적하는 대신, 마일스톤을 사용하여 관리 과정을 간소화 할 수 있다테스트 카드 활용github에서 태스크 카드를 활용하여 프로젝트를 효율적으로 관리할 수 있다. 먼저, 이슈 카드를 통해 프로젝트의 세부 사항을 명확하게 정의하고 할당할 수 있다. 이는 작업의 우선순위를 결정하는데 큰 도움이 된다. 또한, 각 이슈의 진행상황을 실시간으로 추적할 수..

로컬 레포지토리와 연결할 유저 정보 설정$ git config --global user.name "[firstname lastname]"# 버전 히스토리를 식별할 때 사용할 이름을 설정합니다.$ git config --global user.email “[valid-email]”# 각 기록과 연결할 이메일 주소를 설정합니다. 도움말 보기help 명령어를 이용하여 각 명령어 및 옵션의 기능에 대해 살펴 볼 수 있다$ git help --all# git에서 제공하는 모든 명령어를 볼 수 있습니다.$ git [command] -help# 특정 command에서 사용할 수 있는 모든 옵션을 볼 수 있습니다. 세팅 및 초기화레포지토리를 초기화하거나 존재하는 레포지토리를 클론할 수 있다$ git init# 현재 디렉..

"describe" argument( name, fn) : 여러 관련 테스트를 그룹화하는 블록을 만든다."it" same as test argument ( name,fn, timeout) : 개별 테스트를 수행하는 곳. 각 테스트를 작은 문장처럼 설명 "expect" : expect 함수는 값을 테스트할 때마다 사용, expect 함수 혼자서는 거의 사용하지 않으며 matcher와 함께 사용"matcher" : 다른 방법으로 값을 테스트 하도록 "matcher"를 사용test('two plus two is four', ()=>{ expect(2+2).toBe(4) // 여기서 toBe가 matcher});test('two plus two is not five', ()=>{ expect(2+2).not.t..

RTL (React Testing Library)React Testing Library는 React 구성요소 작업을 위한 API를 추가하여 DOM Testing Library 위에 구축된다.DOM Testing Library란 DOM 노드(Node)를 테스트 하기 위한 매우 가벼운 솔루션이다. CRA로 생성된 프로젝트는 즉시 React Testing Library를 지원하지만 그렇지 않은 경우 밑의 npm을 통해 추가해야한다.npm install --save-dev @testing/library/react RTL은 에어비엔비에서 만든 Enzyme을 대처하는 솔루션Enzyme이 React 개발자에게 React 구성 요소의 내부를 테스트할 수 있는 유틸리티를 제공하는 동안 RTL은 한 걸음 물러서서 "Rea..

prisma란 ?자바스크립트와 타입스크립트 커뮤니티에서 주목받고 있는 차세대 ORM(Object Relational Mapping) 프레임워크데이터베이스와 상호작용하는 응용 애플리케이션을 개발할 때, 프로그래머가 직접 SQL을 작성하지 않아도 되므로, 개발 생산성을 높여준다.효과적인 데이터 모델링을 위한 간단하지만 강력한 자체적인 스키마 문법을 제공하고 이 스키마를 통해 DB 마이그레이션과 클라이언트 코드 생성을 완전히 자동으로 생성해준다.개발자입장에서는 데이터베이스에 접근하기 위해 작성해야하는 코드가 비약적으로 줄어들고 스키마 파일 하나만 관리하면 되기때문에 유지보수 용이하다. prisma 설치npm i -D prisma prisma commandinitset up Prisma for your appg..

리스트에 순차적으로 접근해야할 때 두 개의 점 위치를 기록하면서 처리하는 알고리즘1차원 배열에서 각자 다른 원소를 가리키고 있는 2개의 포인터를 조작하면서 원하는 값을 찾을 때 까지 탐색하는 알고리즘 [동작방식]보통 left, right / start, end 등의 포인터 변수 생성처음에는 start = end = 0이고 두 포인터 관계는 start 현재 부분 합이 target과 같다면 카운트현재 부분 합이 target보다 작다면 end++;현재 부분 합이 target보다 크거나 같다면 start++;모든 경우를 확인할 때 까지 3~5 과정 반복[예시 : 프로그래머스 Lv.2 구명보트]function solution(people, limit) { var answer = 0; people.sor..