🐬 긴호흡/고스락 티켓

한달에 삼만얼마 짜리 요금제를 쓰고 있다. 처음에 제공된 데이터 몇기가를 전부 소진하면 그 이후론 속도제한이 걸린 채 무제한으로 사용할 수 있다. 말이 무제한이지, 웹서핑과 음악 스트리밍을 동시에 못하는 대역폭. 그럴 때 휴대폰으로 두둥을 들어가면 로딩이 굉장히 느려 답답했다. 포스터 이미지를 많이 불러오는 홈화면은 특히 그랬다. 웹 성능 최적화를 해보기로 했다. 그리고 이번 글은 그에 대한 기록. 초기 lightHouse 점수이다. 다행히 막 크게 안좋은 점수는 아니었다. 1. 폰트 최적화 * 웹폰트가 로드되는 동안 텍스트가 계속 표시되는지 확인하기 웹폰트를 렌더링하는 방식에는 두가지가 있다.  대체 글꼴이 새 글꼴로 바뀜 (FOUT - 스타일이 지정되지 않은 텍스트 플래시). "보이지 않는" 텍스트..

개발을 할때 새로운 무언가를 맞닥뜨리는 경우가 줄어들어서 그런가, 코드를 이쁘게 짜는 것에 관심이 많아졌다. 두둥을 개발하면서 마주친 고민들을 공유해보려고 한다. 리액트로 개발하다보면 선언적인 코드에 대해서 고민하게 된다. 리액트 자체가 선언형이기 때문일수도. 선언적인 코드 명령형 프로그래밍과 선언형 프로그래밍에 대한 글들에선 흔히 'How'와 'What'의 차이로 설명한다. 반복문을 통해 배열의 원소를 순회하면서 html요소를 생성하고 보여주는 코드이다. 어떤 절차로 이루어지는지가 드러나 있다. const arr = [1, 2, 3, 4, 5]; return ( {arr.map((elem) => ( {elem} ))} ); React에서 jsx 문법을 사용하면 이렇게 표현할 수 있다. 핵심 데이터만 외..

1. 배경 고스락에서 공연을 해오면서 티켓 예매방식에 불편함을 느꼈다. 컴퓨터공학과 학회답게, 작년 3월부터 매 공연마다 고스락 내부 인원들로 예매서비스를 직접 개발해 사용했다. 500명이 넘는 인원이 우리 서비스를 실사용했던 경험이었다. 맨 처음 고스락 티켓을 기획하면서, 우리가 어떤 점이 불편했고 어떤 방식으로 해결하려 했는지에 대해서 기록했었다. https://www.9yujin.site/devlog/gosrock1/idea-220124 작년 3월 첫번째 프로젝트에선 가장 기본적인 기능으로 서비스를 했다. 전화번호와 이름을 별개로 입력받아 문자 인증을 통해 유저를 받았다. 코로나로 인해 최대 입장 가능 인원 제한이 있어 107명의 관객이 이 서비스를 통해 고스락 공연에 와주었다. QR코드 입장 확인..

벌서 고스락 티켓 회고 마지막 시리즈입니다. 분명히 '이건 적어놔야지' 했다가 까먹은게 있을텐데. (점점 기술 블로그가 일기장처럼 쓰이는것 같지만) 아주 멋진 프로젝트에 걸맞는 아주아주 멋진 공연이었습니다. 아직도 여운이 가시지 않는군요. 히. 그럼 시작해보겠습니다. 랜딩페이지 바로가기 한번이 어렵지, 두번은 그래도 할만하다. 3월공연이라는 아주 적합한 레퍼런스가 있었기 때문에. 이전과 페이지 구성에서 큰 차이는 없다. 대신 전체적으로 다크모드를 싹 걷어냈음. 검정 배경을 쓰니까 다른 색들을 사용하기가 너무 어렵다!! 디자인이 제일 힘들어. 다른 어느 페이지보다 제일 완성도가 중요한 부분이기 때문에 디테일 하나하나 챙기는게 꽤 스트레스였다. 덕분에 결과는 훨씬 이쁘게 나온 것 같아 좋다. 특히 반응형이 ..

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({ ....