분류 전체보기

프로젝트에 리액트 쿼리를 도입하면서 이것저것 해보고 싶은게 많았다. 아래는 리액트 쿼리의 장점이라고 하면 자주 나오는 것들이다. 패치해온 데이터들을 캐싱 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를 사용하기로 결정. 사실 몇..

1. 배경 올해 상반기부터 CEOS 15기로 활동하고 있다. 신촌 연합 창업 동아리로, 개발자 뿐만 아니라 기획과 디자인 파트까지 함께 활동한다. 기획, 디자인, 프론트, 백엔드 각각 두명씩 꽉 찬 총 다섯 팀이 만들어진다. 기획과 디자인에 고민할 시간을 줄여 오로지 개발에만 쏟을 수 있다는 건 생각보다 더 좋았다. 그동안 전공자로서 프론트앤드를 깊게 공부한다는 것에 대한 고민이 많았다. 개발자를 지망하는 학교 동기들은 거의 다 백엔드를 공부하고 있다. 그 사이에서 혼자라는게 불안하지 않았을리가. 세오스 활동을 하면서 프론트를 계속 공부해야겠다는 확신이 생겼고, 내가 지금까지 공부해오던 것을 이번엔 제대로 활용해보고 싶다는 욕심이 있었다. 감사하게도 그 욕심을 채워줄 수 있는 팀에 들어가게 되었다. Ba..

1. 호이스팅 자바스크립트 엔진은 콜 스택에 전역 실행컨텍스트를 담는다. environmentRecord 현재 컨텍스트와 관련된 코드들의 식별자 정보들이 저장 매개변수 이름, 함수 선언, 변수명 등을 순서대로 수집 outerEnvironmentReference 바로 직전 컨텍스트(해당 함수가 선언된 위치)의 LexicalEvironment 정보를 참조 콜스택에서는 가장 최근에 실행된 실행컨텍스트만 활성화된다. 만약 함수 a에서 함수 b가 실행되면 또 실행 컨텍스트를 담는다. 함수 b의 실행을 마치고 함수 b가 종료되면 실행컨텍스트가 사라지고 다시 a로 돌아옴. 에이도 종료되면 전역 컨텍스트로. console.log(TVChannel) //undefined var TVChannel = "Netflix"; ..