리액트 딥 다이브 정리 스터디 **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 버킷 내부 폴더 전체, 즉 모든 팀의 프로젝트 폴더를 삭제해..

최근 교환학생으로 참여한 팀 프로젝트에 대해 많은 분들이 궁금해 하셔서, 회고록을 작성해보려고 합니다. 그동안 일상 블로그에서 자잘하게 언급했던 팀 프로젝트 내용을 하나의 글로 정리해보려 합니다.  제가 미국 교환학생으로 참여한 팀 프로젝트는 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(그래픽 사용..

** 이 글은 레벨 3 시작 1주차 진행 과정 중 작성한 글입니다. ((아직도 1주차임))  우테코에서는 프론트엔드, 백엔드, 안드로이드 트랙만 있기 때문에 기획자나 디자이너가 따로 없다.그 말인즉, 팀을 이루는 프론트와 백엔드 개발자들이 기획부터 디자인, 그리고 개발까지 모두 맡아야 한다는 뜻이다. 사실 기획 부분은 크게 부담스럽지 않았다. 비즈니스 모델을 고려하지 않고, 사용자에게 필요한 아이디어를 중심으로 기획할 수 있다고 생각했기 때문이다. 팀 프로젝트에서는 수익보다는 사용자 경험과 아이디어의 가치가 더 중요하다고 느끼기 때문이다. 하지만 디자인은 전혀 다른 이야기였다.여러 팀 프로젝트를 거치면서, 디자인의 퀄리티가 프로젝트 전체의 퀄리티에 얼마나 큰 영향을 미치는지 이해하고 있었다. 특히, 같은..

** 이 글은 레벨 3 시작 1주차 진행 과정 중 작성한 글입니다.  팀 프로젝트 시작 전..우테코 레벨 3에서는 내가 직접 기획하고 개발하며 협업하는 팀 프로젝트를 진행한다.그래서 방학 기간 동안 어떤 프로젝트를 하고 싶은지, 어떤 기능을 구현해보고 싶은지 고민하며 시간을 보냈다. 내가 떠올린 프로젝트 아이디어는 현재 우리 팀이 진행 중인 자취방 체크리스트 서비스와 아직 공개되지 않은 기타1 프로젝트였다. 그리고 구현해보고 싶은 기능으로는 웹 푸시 알림, 애니메이션 효과, 결제 시스템이 있었다. 방학 동안 나는 다양한 아이디어를 떠올리며 아이디어 수첩에 정리했다.((여담이지만, 이렇게 모은 아이디어들을 나는 ‘아이디어 쿠키’라고 부르며, 기회가 될 때마다 하나씩 실현해 나가고 있다.))    이전에 자..