🐬 긴호흡

1차 프로젝트에 있는 코드를 그대로 옮겨오면 될거라 생각을 했는데, 예상보다 꽤 오랜 시간 삽질을 했다. 내가 못찾는건지 타입에 대한 정보가 별로 없었음. 일단 문서를 보고 이러쿵 저러쿵 하니 되긴 했는데, 이게 정확한 방법인지는 모르겠다. 일단 잘 돌아가니 기록. 저번과 마찬가지로 패키지 매니저에서 socket.io-client 를 설치해준다. 그리고 타입 정의를 해주려고 했는데, 안쓰는게 좋을 것 같다는건 알겠다.. 일단!! import io, { Socket } from 'socket.io-client'; io와 함께 Socket도 import 해준다. const [socket, setSocket] = useState(); 소켓 객체를 생성해 state에 저장하는 방식이었다. 원래 Socket 타입..

응원톡 페이지를 위해 무한스크롤을 구현했던 기록이다. 근데 이제 리액트쿼리의 useInfiniteQuery를 곁들인. 처음엔 단순하게 state를 이용해서 무한스크롤을 만드는 로직을 생각하고 접근했다가 삽질을 좀 했다. setList(prev => [...prev, ...res.data.list]); 새 데이터를 패칭을 하게 되면, 기존에 있던 배열 상태에 새로 받아온 데이터를 추가한다. 스프레드 연산자 또는 concat을 사용할 수 있다. 근데 useInfiniteQuery를 사용하면 살짜쿵 다름. 1. useInfiniteQuery const { data, fetchNextPage } = useInfiniteQuery( ['talks'], UsersApi.getTalks, { getNextPagePa..

프로젝트에 리액트 쿼리를 도입하면서 이것저것 해보고 싶은게 많았다. 아래는 리액트 쿼리의 장점이라고 하면 자주 나오는 것들이다. 패치해온 데이터들을 캐싱 stale한 데이터인지 아닌지를 구분해서 항상 신선한 데이터로 유지 서버 상태와 클라이언트 상태의 분리 success와 error 등의 패칭 상태를 관리 특히 에러를 처리하는 방법에 있어서 고민을 더 해보고 싶었다. axios로 매번 패칭해올때 트라이 캐치로 감싸서 에러를 처리하는 코드를 자주 사용한다. 그럴 때마다 비슷한 로직(보통은 그냥 콘솔로그..)을 여기저기 작성하거나, 여러 페이지에서 공통으로 사용되어야 하는 로직도 중복으로 쓰이는 경우가 많았다. 전부터 고민을 몇번 했었던 부분이었는데 마침 참고할만한 좋은 레퍼런스들이 있어서 프로젝트에 넣어보..

앱의 다양한 페이지에서 모달을 사용한다. 그리고 미리 지정되지 않은 오류에 대해서도 캐치해서 모달을 띄우도록 되어있다. 그렇기 때문에 모달을 전역으로 관리해서 사용해보기로. 뱅키즈와 비슷하게 사용하지만 조금은 다른 방식이다. 참고 6개월 전, 1차 프로젝트 중에 짰던 코드이다. import React from 'react'; const ModalComponent = ({ children }, ref) => { return ( { ref.current.classList.add('hidden'); }} > {children} ); }; export default React.forwardRef(ModalComponent); 이렇게 모달 컴포넌트를 만들어놓고, function TicketCodePage({ ....

랜딩페이지와 로그인페이지는 토큰 없이도 접근할 수 있어야 하고, 마이페이지와 티켓팅 페이지는 인증이 되어 있는 상태에서만 접근할 수 있어야 한다. 티켓 QR코드 페이지는 인증이 되어 있지 않아도 접근할 수 있도록 했다. 한명이 티켓을 여러장을 사서 '공유하기'를 통해 친구들에게 줄 수 있어야 했기 때문에. 라우팅과 관련된 코드는 다음과 같다. 라우팅 return ( ); 문서에서 React-Route-dom 만을 이용해서 접근을 제한하는 방식에 대한 예시가 잘 되어 있어서 참고했다. 1차 프로젝트에서 사용했던 HOC로 만들어 컴포넌트를 인자를 넘기고 걸러서 리턴하는 방식에 비해 훨신 깔끔하고 직관적이어서 좋다. RequireAuth.tsx const RequireAuth = () => { const { ..

저번 3월 공연때 사용한 티켓 예매 서비스는 꽤 성공적이었다. 공연 예매는 물론 새 기수 선발에도 꽤 많은 신입생들이 지원을 했고, 웹서비스가 큰 영향을 끼쳤다고 생각한다. 103명 예약 ( 코로나 19 로 인한 최대 입장 가능 인원 ) 신입생 54명 면접 지원 ( 소모임 기능을 통한 접근성 , 웹페이지를 통한 홍보 ) 관리자 웹페이지 제공을 통한 입금 확인, 소모임 검색 기능 지원 QR 코드를 통한 빠른 입장 확인 , 입금 정산 storybook 을 활용한 npm 모듈제작, 디자인시스템 구축 이번 9월 공연에는 공연을 하고싶어하는 선후배들이 많아서 무려 12팀이나 나왔다. 어쩔 수 없이 공연을 이틀로 나누어 개강 후 첫 목요일과 금요일에 진행한다. 사회적 거리두기도 완화되어 공연장 최대 입장 가능 인원..

디자이너가 프로젝트에 함께 한다는건 축복이다. 디자인이나 기획에 시간을 쏟지 않고 개발에만 집중할 수 있다는 것 외에도 얻어가는 것이 꽤 있다. 디자인 팀에서 넘겨 받은 피그마 화면을 차근차근 뜯어보면서 많이 배웠다. 디자이너들은 어떤 방식으로 작업하는지, 피그마의 이 기능은 어떻게 활용하는지, 협업은 어떻게 하는지. 이전 프로젝트에서 디자인을 맡아서 할 땐 작업을 효율적으로 하는 방법을 전혀 몰랐다. 제목과 서브 텍스트의 간격은 항상 24픽셀로 해야지, 이 컴포넌트는 항상 화면 너비에 채워지도록 해야지, 하는 나름의 기준들을 나 혼자서만 생각하고 있으니까 같이 개발하는 팀원들과 소통이 안돼서 일을 두번씩 하는 경우도 여러번 생겼다. 각 페이지에서 통일해야 하는 디자인들도 여러명이서 작업을 하다보니 신경..

다른 팀에 비해 볼륨은 배로 큰 상황이었지만 제일 천천히 진도를 나갔다. 할 수 있는 고민은 다 하고 시작하지만, 그래도 개발을 하다보면 어긋나는게 생긴다. 이번 글은 뱅키즈 프로젝트의 초기 세팅에 대한 기록. 팀 프로젝트 직전에 마지막으로 했던 팀 협동 스터디에서 사용했던 코드와, 이전에 고티켓 플젝에서 사용했던 스택들이 많은 도움이 되었다. 여기서 세팅하면서 배운 것들은 이제 막 시작한 두번째 고티켓 프로젝트에서 또 요긴히 사용할 예정. 다음은 이 글에서 언급할 내용들이다. 리덕스 툴킷 디렉토리 구조 깃허브 액션과 도커를 이용한 자동 배포 세팅 1. 리덕스 툴킷 상태관리를 위해 어떤 라이브러리를 사용할지에 대한 이야기가 많았다. 리덕스 떵크, 리코일 등등 고려했지만 RTK를 사용하기로 결정. 사실 몇..