1. 하루? 하루 우테코를 함께했던 나 이외 2명의 크루를 포함, 3명이서 진행하는 출석부 프로젝트이다. 프로젝트 동기와 기획에 관해서는 다음 글에 잘 정리되어 있다. 출석부 웹 서비스 만들기 — 1. 프로젝트 동기 이번 신년 맞이 기념으로 새로운 프로젝트를 해보려고 한다. 나는 주로 실생활에서 반복적이고 시간이 걸리는 작업을 프로그램으로 해결하는 것을 좋아한다. 물론 프로그램을 만드는데 시간이 echo724.medium.com 출석부 웹 서비스 만들기 — 2.기획 지난번 동기편에 나온 작업 방식을 기반으로 서비스를 기획했다. 사실 처음에는 개발자 나 혼자, 그리고 디자이너 친구와 둘이서 서비스를 제작하려고 했다. 하지만 동기편을 공유하고 나서 같 echo724.medium.com 2. 개발 전 고려사항..
분류 전체보기
1. 합류 컨셉비 팀에 프론트엔드 개발자로서 중간 합류하게 되었다. 맨날 집에서 칼만 갈고있지 실제로 써먹을 일이 없었어서, 이번 합류는 나에게 되게 긍정적이다. 2. 도메인 분석 팀 합류 전 가장 먼저 해본 일은 레포를 받아 실행하는 일이었다. 팀 합류 결정 이후 기존 멤버에게 대충 구두로 설명을 듣고 초대받은 피그마와 코드를 보며 도메인을 분석했다.(피그마에 많은 정책들이 쓰여 있었다.) 예전 인턴할때도 느꼈지만, 기존에 있는 도메인을 분석하는 일은 꽤 힘든 일이다. 관련 지식이 없다면 더 그럴것이고.. 하지만 이 프로젝트는 전문적인 지식을 요구하는 것이 아니라서 이해하기는 편했다. 3. 어떻게 일을 해나갈까 컨셉비 팀은 생긴 지 꽤 오래되었는데, 개발 쪽에서 아직 성과를 내지 못해 아쉬운 상황인 것..
1. 서론 서버에서 데이터를 불러오기까지 보여줘야 할 대체 UI로 Skeleton을 가끔 사용하곤 한다. 그럴 때마다 그저 다른 사람의 코드를 긁어오곤 했는데, 직접 만들어보며 Skeleton에 주로 쓰이는 css 속성을 학습하고자 한다. Skeleton을 만들 때 사용하는 핵심 css 속성은 다음과 같다. background: 배경색 linear-gradient: 색상을 그러데이션으로 만든다. background-size: 배경의 크기를 조절한다. background-position: 배경의 위치를 조절한다. animation: 애니메이션을 정의한다. keyframes: 애니매이션 시작점과 끝점의 css 속성을 정의하고, 이를 부드럽게 연결시켜 준다. background-position을 이용해 배경을..
1. 들어가기 Form은 회원가입, 개인정보수정 등 데이터를 업데이트해야 하는 상황에서 자주 쓰인다. 데이터를 가져오는 것(Query), 수정하는 것(Mutation)를 편하게 하기 위해 React Query를 사용한다면, Form과의 통합은 피할 수 없다. 데이터를 변경하고 싶을 때 서버 상태와 클라이언트 상태의 경계가 약간 모호해지기 시작하고, 여기서 복잡하다고 느낄 수 있다. 2. 서버 상태와 클라이언트 상태 비교 서버 상태는 클라이언트가 소유하지 않은 상태로, 비동기 스냅샷 데이터이다. 여기서 비동기는 서버와 통신을 해야 한다는 의미이고, 스냅샷은 서버로부터 응답을 받은 그 시점의 데이터를 의미한다. 클라이언트 상태는 프론트엔드가 모든 권한을 가지고 있고, 동기 정확 데이터이다. useState를..
React Query가 없던 시절 리덕스를 사용할때는 서버에서 데이터를 가져온뒤 리덕스에 보관해서 전역상태로 보관했다.1. Server State란그래서 서버 상태를 다른 클라이언트 상태와 똑같이 취급했다.하지만 서버 상태(사용자 정보, 글 목록 등)의 경우 클라이언트가 소유하지 않는 정보이다.유저에게 가장 최신 버전을 화면에 표시하기 위해 서버에서 빌려온 것일 뿐이다. (데이터를 소유하는 것은 서버임)2. 기본값 설명먼저 React Query는 기본 staleTime이 0인 경우에도 매번 리렌더링할때 queryFn을 호출하지 않는다.staleTimequery(데이터)를 fresh하게 놔둘 시간(fresh -> stale 시간), 기본값 0staleTime 내에 다시 query 요청 시 fetch하지 않..
1. 문제상황 및 설정 미리보기 import를 할때 파일 위치가 깊어질수록 "../" 의 압박이 심해진다. 위 import 경로에서 ../를 지워보자 2. tsconfig, vite.config 설정하기 src/ 내부 1-depth의 파일들을 절대경로로 import 하는 것을 목적으로한다. 2.1 tsconfig 1. baseUrl을 "./src"로 설정 (L9) - 타입스크립트가 코드 상에서 import 경로를 해석할때 설정한 경로를 기준으로하여 찾는다 2. paths를 "src/*": ["../src/*]로 설정 (L10 ~ L12) - 타입스크립트가 코드 상에서 import 경로를 해석할때 설정한 경로로 매핑하여 이해한다. - 설정 경로는 "baseUrl" 기준이라는 것에 유의하자. 2.2 vi..
1. 서울에서의 첫 자취 대학시절 4년 동안 기숙사에 살았었는데, 처음으로 혼자 살아본 1년이었다. 쓰레기 배출일 준수하기, 벌레 잡기, 막힌 세면대 뚫기, 방 습도 올리기, 화장실 배수구 냄새 차단하기, 방 꾸미기 등 살면서 느끼는 불편함들을 해결하고, 소소한 이벤트들을 경험하면서 인생 경험치들을 쌓을 수 있었다. 요리는 밖에서 사 먹는 경우가 대부분이라 생각보다 많이 하지 않았다. 조금 여유가 생긴 이제야 조금씩 해보는 중이다. 처음이라 그런지 기본적인 집안일들을 배워가는 게 즐겁다. 2. 우아한테크코스 우아한테크코스 5기 프론트엔드 과정을 수료했다. 열정적인 사람들과 함께할 수 있어서 행복했다. 걱정 없이 공부할 수 있는 게 좋았고, 내 생각을 공유하고 남의 생각도 들을 수 있는 환경이 가장 좋..
1. 문제상황 vite + react 기반의 프로젝트에서 실행 시 첫번째 페이지를 /products 로 리다이렉트 하고싶었다. App 컴포넌트는 뼈대인 Header 컴포넌트를 가지고 있고, Outlet을 이용해 나머지 페이지들을 렌더링한다. 처음에는 react router dom에서 제공하는 useNavigate 훅을 이용해서 구현했으나 useEffect가 거슬린다. 코드 자체가 명령적이고 App 내부에 숨겨져 있어 기능을 추적하기 까다롭다. 2. 해결방법 react router dom에서 제공하는 Navigate 컴포넌트가 있다. A element changes the current location when it is rendered. It's a component wrapper around useNa..
