리액트 딥 다이브 정리 스터디 **Tanstack-Query의 QueryClient와 캐싱** 정리  설치 방법npm i @tanstack/react-query+) 여담으로 이전에는 그냥 react-query 였다. 이후 리액트 이상으로 사용 가능하게 업데이트 되며 이름이 변경되었다. (뷰, 넥스트…)세팅 방법앱의 최상위에서 QueryClientProvider로 앱을 감싸주기새로운 QueryClient인스턴스를 생성한 후, QueryClientProvider를 통해 앱 전체에서 생성한 QueryClient에 접근 가능하도록 해준다.import { QueryClient, QueryClientProvider } from '@tanstack/react-query';...const queryClient = ne..

모든 팀 프로젝트 폴더를 날려버렸다, 내가... 지난 팀 프로젝트 중, 정말 아찔한 실수가 있었다. GA 설정 작업을 위해 팀원들과 모여 작업을 진행하고 있었고, 모든 세팅을 마친 후 AWS S3에 배포하려고 했다. 배포를 위해 우리는 프로젝트 폴더인 'bang-ggood' 안으로 들어갔다고 생각했다.배포 시 종종 기존 파일이 덮어씌워지는 문제 때문에, 나는 늘 하던 대로 기존 파일들을 모두 삭제한 후 새 파일을 업로드하는 방식으로 진행했다. 그날도 다르지 않았다. 우리 프로젝트 폴더 안의 파일을 모두 선택하고 삭제를 진행했다. 아니 진행한 줄 알았다. 폴더에 잘 들어간 줄 알았다.순간적인 착오로 우리는 'bang-ggood' 폴더가 아닌 S3 버킷 내부 폴더 전체, 즉 모든 팀의 프로젝트 폴더를 삭제해..

우리가 기획하고 있는 서비스는 처음 방을 구하거나, 방을 많이 구해본 경험이 없는 사용자들이 방을 구할 때 꼼꼼하게 체크하여 더 좋은 방을 찾을 수 있도록 돕는 서비스이다.자세한 이야기는 기획 단계에 대해 작성한 글을 참고하자! 그러다 보니 우리 서비스의 목적은 “사용자가 우리 서비스를 통해 이전보다 더 꼼꼼하게 방을 체크할 수 있고, 이를 통해 더 좋은 방을 선택할 수 있다”는 것이다. 이 목표를 위해 지난 스프린트 기간 동안 기획과 기능 구현을 진행했고, MVP 기능이 모두 구현된 후에는 팀과 함께 직접 사용자가 되어 유저 테스트를 진행하기로 했다.부동산과 방을 함께 보는 유저가 페르소나였기 때문에, 팀원들을 두 팀으로 나누어 각자의 페르소나를 설정하고 부동산에 들러 집을 보기로 했다.팀을 구상한 과..

지치지 않고 협업하는 법팀 프로젝트는 `팀플빌런`, `무임승차`과 같은 말이 나올 정도로 여러 갈등과 고난을 겪는 경우가 많다. 사람과의 협업은 필수적이지만, 팀플은 왜 이렇게 어려운 걸까? 팀플을 하면 생각보다 지치기 쉽고, 갈등이나 어려움에 빠지는 경우가 많기 때문이다.나는 이번 우테코 팀플을 준비하면서 이전과는 다른 지치지 않는 팀플을 꿈꿔왔다.그렇다면, 어떻게 해야 지치지 않고 좋은 협업을 할 수 있을까?같이 소통하고 동일하게 이해하기협업은 다양한 사람들과의 소통이 핵심이다. 서로 다른 생각을 가진 팀원들이 모이다 보니 의견이 다를 때가 많지만, 이를 조율하는 과정에서 팀워크가 강화된다고 믿는다. 이전 팀플에서의 경험을 토대로, 이번 팀플을 시작할 때는 모든 팀원이 동일한 이해를 바탕으로 작업을 ..

최근 교환학생으로 참여한 팀 프로젝트에 대해 많은 분들이 궁금해 하셔서, 회고록을 작성해보려고 합니다. 그동안 일상 블로그에서 자잘하게 언급했던 팀 프로젝트 내용을 하나의 글로 정리해보려 합니다.  제가 미국 교환학생으로 참여한 팀 프로젝트는 Senior Design으로, 한국의 졸업 캡스톤과 유사한 과정입니다. 하지만 한국의 캡스톤이 대부분 같은 과 학생들과 함께 진행하는 반면, 이 학교의 시니어 디자인은 다양한 전공의 학생들이 모여 팀을 구성하여 프로젝트를 진행합니다. 저 역시 기계공학, 토목공학, 컴퓨터공학, 전자공학 등 여러 전공의 친구들과 팀을 이루었습니다. 이 팀 프로젝트에 합류하게 된 계기는 학기 초 교수님과의 미팅에서 저의 꿈에 대해 이야기했을 때였습니다. 당시 2학년 때 친구들과 함께 진..

** 이 글은 레벨 3 시작 2주차 진행 과정 중 작성한 글입니다. 유저 플로우 설계, 왜 중요할까?프로젝트를 시작하면서 가장 먼저 했던 일은 MVP(최소 기능 제품)를 정의하는 것이었어요. 그다음으로 중요한 건 유저 플로우를 정리하는 것이었죠.유저 플로우는 간단히 말해, 우리 서비스를 어떻게 사용할지에 대한 유저 시나리오라고 생각합니다. 이 과정은 개발자의 시선이 아닌, 유저의 시선에서 서비스를 바라볼 수 있도록 도와줍니다. 결국, 유저들이 어떤 흐름으로 서비스를 이용할지 미리 그려보는 작업이죠. 기존 여러 프로젝트를 진행하면서 기획자들이 이 페르소나를 가장 먼저 설정하고 생각하는 걸 보고 배운 후 적용해보고 있어요. 서비스를 기획하는 과정은 꽤나 흥미로운거 같습니다.가상 유저, 페르소나 설정우리 팀은..

** 이 글은 레벨 3 시작 2주차 진행 과정 중 작성한 글입니다. 프로젝트를 시작하기 앞서 주어진 요구사항에 맞게 기본 프로젝트를 세팅해야 했다.진행해야 하는 것은 다음과 같았다. 프로젝트 환경 세팅개발 컨벤션 정하기스타일링 방법 선택 등 사용할 기술 스택 정하기타겟 환경 정하기 프로젝트 환경 세팅가장 먼저, 프로젝트 환경 세팅에서는 기존에 Vite나 CRA를 주로 사용했던 것과 달리, 이번에는 Webpack을 기반으로 React와 TypeScript 환경을 세팅하기로 결정했다. Webpack은 자바스크립트 모듈을 번들링 하는 도구로, 다양한 로더와 플러그인을 사용해 코드 최적화와 빌드 환경을 구성할 수 있다. webpack을 선택한 이유는, 물론 요구사항이기도 했지만, Webpack이 모듈 번들러로서..

문제 링크 프로그래머스코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요.programmers.co.kr 문제 해석문제는 벽에 페인트를 다시 칠해야 하는 구역들이 주어졌을 때, 최소한의 횟수로 페인트칠을 하는 방법을 찾는 것이다.벽의 길이는 `n` 미터이며, 각 구역은 1미터씩 나누어져 있고, 롤러의 길이는 `m` 미터이다.페인트칠을 할 수 있는 최소 횟수를 구해야 한다. 접근 방법1. 페인트칠이 필요한 구역 파악하기: 주어진 `section` 배열은 페인트칠이 필요한 구역의 번호를 담고 있다. 이 배열의 각 요소는 구역 번호를 나타낸다.  2. 롤러의 범위 확인:롤러는 한 번에 연속된 `m`미터를 칠할 ..

디자인을 처음 접하는 개발자들에게 이 글을 바칩니다. 근데 사실 본인도 디자이너는 아니고 그냥 UI/UX에 관심 있는 개발자이기 때문에 디자인 처음하는 개발자만 보시길~ ❌ 디자이너들은 출입금지입니다… ❌   이 글은 개발자인 우리가 울며 겨자 먹기로 디자인을 해야 할 때 도움이 될 만한 팁들로 채워져 있습니다. 아마 읽고 있는 당신도 디자이너 없이 프로젝트를 시작해서 개발자인데도 디자인을 해야 하는 상황일 겁니다.디자인에 대해 아무것도 모르지만, 이 가이드를 따라 하면  야 너두 디자인할 수 있어…~~~!  🍀  먼저 프로젝트 디자인을 진행하는 일반적인 과정은 다음과 같습니다. 1. IA(정보 구조) 작성하기2. 레퍼런스 찾기3. 와이어프레임 작성하기4. 디자인 시스템 설정하기5. GUI(그래픽 사용..