티스토리

Antifreeze!

검색하기

블로그 홈

Antifreeze!

9yujin.tistory.com/m

https://github.com/9yujin

구독자: 44

방명록 방문하기

주요 글 목록

[두둥] Next.js 웹 성능 최적화 한달에 삼만얼마 짜리 요금제를 쓰고 있다. 처음에 제공된 데이터 몇기가를 전부 소진하면 그 이후론 속도제한이 걸린 채 무제한으로 사용할 수 있다. 말이 무제한이지, 웹서핑과 음악 스트리밍을 동시에 못하는 대역폭. 그럴 때 휴대폰으로 두둥을 들어가면 로딩이 굉장히 느려 답답했다. 포스터 이미지를 많이 불러오는 홈화면은 특히 그랬다. 웹 성능 최적화를 해보기로 했다. 그리고 이번 글은 그에 대한 기록. 초기 lightHouse 점수이다. 다행히 막 크게 안좋은 점수는 아니었다. 1. 폰트 최적화 * 웹폰트가 로드되는 동안 텍스트가 계속 표시되는지 확인하기 웹폰트를 렌더링하는 방식에는 두가지가 있다. 대체 글꼴이 새 글꼴로 바뀜 (FOUT - 스타일이 지정되지 않은 텍스트 플래시). "보이지 않는" 텍스트.. 공감수 3 댓글수 2 2023. 7. 13.
[두둥] 선언적인 코드 작성하기 개발을 할때 새로운 무언가를 맞닥뜨리는 경우가 줄어들어서 그런가, 코드를 이쁘게 짜는 것에 관심이 많아졌다. 두둥을 개발하면서 마주친 고민들을 공유해보려고 한다. 리액트로 개발하다보면 선언적인 코드에 대해서 고민하게 된다. 리액트 자체가 선언형이기 때문일수도. 선언적인 코드 명령형 프로그래밍과 선언형 프로그래밍에 대한 글들에선 흔히 'How'와 'What'의 차이로 설명한다. 반복문을 통해 배열의 원소를 순회하면서 html요소를 생성하고 보여주는 코드이다. 어떤 절차로 이루어지는지가 드러나 있다. const arr = [1, 2, 3, 4, 5]; return ( {arr.map((elem) => ( {elem} ))} ); React에서 jsx 문법을 사용하면 이렇게 표현할 수 있다. 핵심 데이터만 외.. 공감수 3 댓글수 1 2023. 3. 30.
[두둥] 모두를 위한 공연 라이프 - 기획과 디자인 1. 배경 고스락에서 공연을 해오면서 티켓 예매방식에 불편함을 느꼈다. 컴퓨터공학과 학회답게, 작년 3월부터 매 공연마다 고스락 내부 인원들로 예매서비스를 직접 개발해 사용했다. 500명이 넘는 인원이 우리 서비스를 실사용했던 경험이었다. 맨 처음 고스락 티켓을 기획하면서, 우리가 어떤 점이 불편했고 어떤 방식으로 해결하려 했는지에 대해서 기록했었다. https://www.9yujin.site/devlog/gosrock1/idea-220124 작년 3월 첫번째 프로젝트에선 가장 기본적인 기능으로 서비스를 했다. 전화번호와 이름을 별개로 입력받아 문자 인증을 통해 유저를 받았다. 코로나로 인해 최대 입장 가능 인원 제한이 있어 107명의 관객이 이 서비스를 통해 고스락 공연에 와주었다. QR코드 입장 확인.. 공감수 6 댓글수 1 2023. 3. 8.
[2.0] 랜딩페이지, GA, QA, 런칭! 벌서 고스락 티켓 회고 마지막 시리즈입니다. 분명히 '이건 적어놔야지' 했다가 까먹은게 있을텐데. (점점 기술 블로그가 일기장처럼 쓰이는것 같지만) 아주 멋진 프로젝트에 걸맞는 아주아주 멋진 공연이었습니다. 아직도 여운이 가시지 않는군요. 히. 그럼 시작해보겠습니다. 랜딩페이지 바로가기 한번이 어렵지, 두번은 그래도 할만하다. 3월공연이라는 아주 적합한 레퍼런스가 있었기 때문에. 이전과 페이지 구성에서 큰 차이는 없다. 대신 전체적으로 다크모드를 싹 걷어냈음. 검정 배경을 쓰니까 다른 색들을 사용하기가 너무 어렵다!! 디자인이 제일 힘들어. 다른 어느 페이지보다 제일 완성도가 중요한 부분이기 때문에 디테일 하나하나 챙기는게 꽤 스트레스였다. 덕분에 결과는 훨씬 이쁘게 나온 것 같아 좋다. 특히 반응형이 .. 공감수 3 댓글수 4 2022. 9. 14.
[2.0] 타입스크립트에서 Socket.io-client 사용하기 1차 프로젝트에 있는 코드를 그대로 옮겨오면 될거라 생각을 했는데, 예상보다 꽤 오랜 시간 삽질을 했다. 내가 못찾는건지 타입에 대한 정보가 별로 없었음. 일단 문서를 보고 이러쿵 저러쿵 하니 되긴 했는데, 이게 정확한 방법인지는 모르겠다. 일단 잘 돌아가니 기록. 저번과 마찬가지로 패키지 매니저에서 socket.io-client 를 설치해준다. 그리고 타입 정의를 해주려고 했는데, 안쓰는게 좋을 것 같다는건 알겠다.. 일단!! import io, { Socket } from 'socket.io-client'; io와 함께 Socket도 import 해준다. const [socket, setSocket] = useState(); 소켓 객체를 생성해 state에 저장하는 방식이었다. 원래 Socket 타입.. 공감수 0 댓글수 0 2022. 9. 12.
[2.0] React-Query 무한스크롤 (with useInfiniteQuery) 응원톡 페이지를 위해 무한스크롤을 구현했던 기록이다. 근데 이제 리액트쿼리의 useInfiniteQuery를 곁들인. 처음엔 단순하게 state를 이용해서 무한스크롤을 만드는 로직을 생각하고 접근했다가 삽질을 좀 했다. setList(prev => [...prev, ...res.data.list]); 새 데이터를 패칭을 하게 되면, 기존에 있던 배열 상태에 새로 받아온 데이터를 추가한다. 스프레드 연산자 또는 concat을 사용할 수 있다. 근데 useInfiniteQuery를 사용하면 살짜쿵 다름. 1. useInfiniteQuery const { data, fetchNextPage } = useInfiniteQuery( ['talks'], UsersApi.getTalks, { getNextPagePa.. 공감수 0 댓글수 0 2022. 9. 12.
[2.0] React Query 공통 에러 핸들링 프로젝트에 리액트 쿼리를 도입하면서 이것저것 해보고 싶은게 많았다. 아래는 리액트 쿼리의 장점이라고 하면 자주 나오는 것들이다. 패치해온 데이터들을 캐싱 stale한 데이터인지 아닌지를 구분해서 항상 신선한 데이터로 유지 서버 상태와 클라이언트 상태의 분리 success와 error 등의 패칭 상태를 관리 특히 에러를 처리하는 방법에 있어서 고민을 더 해보고 싶었다. axios로 매번 패칭해올때 트라이 캐치로 감싸서 에러를 처리하는 코드를 자주 사용한다. 그럴 때마다 비슷한 로직(보통은 그냥 콘솔로그..)을 여기저기 작성하거나, 여러 페이지에서 공통으로 사용되어야 하는 로직도 중복으로 쓰이는 경우가 많았다. 전부터 고민을 몇번 했었던 부분이었는데 마침 참고할만한 좋은 레퍼런스들이 있어서 프로젝트에 넣어보.. 공감수 4 댓글수 1 2022. 8. 12.
[2.0] 모달 전역으로 관리하기 with TypeScript 앱의 다양한 페이지에서 모달을 사용한다. 그리고 미리 지정되지 않은 오류에 대해서도 캐치해서 모달을 띄우도록 되어있다. 그렇기 때문에 모달을 전역으로 관리해서 사용해보기로. 뱅키즈와 비슷하게 사용하지만 조금은 다른 방식이다. 참고 6개월 전, 1차 프로젝트 중에 짰던 코드이다. import React from 'react'; const ModalComponent = ({ children }, ref) => { return ( { ref.current.classList.add('hidden'); }} > {children} ); }; export default React.forwardRef(ModalComponent); 이렇게 모달 컴포넌트를 만들어놓고, function TicketCodePage({ .... 공감수 2 댓글수 0 2022. 8. 10.
[2.0] 로그인 과정의 고민 (라우팅, Axios) 랜딩페이지와 로그인페이지는 토큰 없이도 접근할 수 있어야 하고, 마이페이지와 티켓팅 페이지는 인증이 되어 있는 상태에서만 접근할 수 있어야 한다. 티켓 QR코드 페이지는 인증이 되어 있지 않아도 접근할 수 있도록 했다. 한명이 티켓을 여러장을 사서 '공유하기'를 통해 친구들에게 줄 수 있어야 했기 때문에. 라우팅과 관련된 코드는 다음과 같다. 라우팅 return ( ); 문서에서 React-Route-dom 만을 이용해서 접근을 제한하는 방식에 대한 예시가 잘 되어 있어서 참고했다. 1차 프로젝트에서 사용했던 HOC로 만들어 컴포넌트를 인자를 넘기고 걸러서 리턴하는 방식에 비해 훨신 깔끔하고 직관적이어서 좋다. RequireAuth.tsx const RequireAuth = () => { const { .. 공감수 3 댓글수 2 2022. 8. 10.
[2.0] 기획, 디자인 개편 저번 3월 공연때 사용한 티켓 예매 서비스는 꽤 성공적이었다. 공연 예매는 물론 새 기수 선발에도 꽤 많은 신입생들이 지원을 했고, 웹서비스가 큰 영향을 끼쳤다고 생각한다. 103명 예약 ( 코로나 19 로 인한 최대 입장 가능 인원 ) 신입생 54명 면접 지원 ( 소모임 기능을 통한 접근성 , 웹페이지를 통한 홍보 ) 관리자 웹페이지 제공을 통한 입금 확인, 소모임 검색 기능 지원 QR 코드를 통한 빠른 입장 확인 , 입금 정산 storybook 을 활용한 npm 모듈제작, 디자인시스템 구축 이번 9월 공연에는 공연을 하고싶어하는 선후배들이 많아서 무려 12팀이나 나왔다. 어쩔 수 없이 공연을 이틀로 나누어 개강 후 첫 목요일과 금요일에 진행한다. 사회적 거리두기도 완화되어 공연장 최대 입장 가능 인원.. 공감수 7 댓글수 1 2022. 8. 10.
[티켓 예매 프로젝트] 7. 마무리 프로젝트가 벌써 마무리 단계에 있다. 21학번 메인 기수 친구들이 만들고 있는 학회 홍보물에 같이 껴서 뿌려질 계획이다. 그 친구들과 시간을 맞춰서 개발을 진행해왔다. 세세한 문구들을 마지막으로 다듬었고 테스트용으로 넣어놓은 것들, 콘솔.로그들, 등등을 지우고 마무리할 준비를 끝냈다. 두둥. 메인 랜딩 페이지 메인 랜딩 페이지 디자인은 좀 급하게 끝났다. 세로로 긴 형태의 카드뉴스(?)는 많이 만들어봤지만 데스크톱 원페이지 웹사이트는 처음이라.. 생각보다 생각해야할게 많더라. 스크롤 애니메이션은 주안이형이 맡아서 이쁘게 잘 해주었다. 큰 이미지는 여기서 볼 수 있다. (피그마) 구현을 하면서 기존 디자인과 달라진 부분들이 많다. 피그마에서 한 디자인과 실제로 한 것과 뭔지 모르게 다른게 있더라. 계속 .. 공감수 3 댓글수 0 2022. 2. 22.
[티켓 예매 프로젝트] 6. 실시간 입장 확인 (Socket.IO) 공연장 입장 시 QR코드 티켓을 찍고 입장 확인을 받은 후에 들어간다. 코드를 찍는 안드로이드 앱에서 입금 여부를 확인한 후에 직접 입장할 수도 있겠지만 아무래도 눈에 보이는 변화가 있으면 좋을거란 생각이 들었다. 소켓을 이용한 실시간 통신을 넣어보기로 했다. 서버에서 입장 확인이 되면 클라이언트(해당 관객 기기)로 데이터를 보내주는 방식이다. 백엔드 대장님이 작업한 백엔드 코드이다. 열심히 배워왔다. const { Server } = require('socket.io'); const { httpServer } = require('../index'); class SocketSingleton { constructor(httpServer) { // try catch 없이 초기 설정이 fail 하면 서버 바로.. 공감수 3 댓글수 2 2022. 2. 16.
[티켓 예매 프로젝트] 5. 코로나 대응 (기획, 디자인 수정) 거의다 완성되어간다고 느낄 즈음에 기획이 대폭 수정되었다. 17-19 OB들이 진행하는 프로젝트이지만 우리 좋자고 하는게 아니라 후배들 도와주려는 목적이 크기 때문에. 코로나 거리두기 때문에 공연에 들어올 수 있는 인원수가 제한이 걸렸다. 관련해서 21학번 임원 친구들과 회의를 진행했다. 크게 두가지이다. 인당 티켓은 1매씩만 구입할 수 있고 새내기는 공짜. 그리고 새내기의 경우에는 '공연 전 소모임'을 신청할 수 있도록. 보통은 처음 사귄 친구들끼리 삼삼오오 모여서 다같이 공연을 보러 왔었는데 코로나 시국에는 그러기가 어렵지 않을까 라는 의견에서 나온 기획이었다. 공연 이틀 전쯤에 예비대학처럼 새내기 몇명과 선배들 몇명이 미리 만나서 연을 맺고, 친해진 친구들끼리 공연을 올 수 있도록 하는... 잘 될.. 공감수 2 댓글수 2 2022. 2. 15.
[티켓 예매 프로젝트] 4. 고민한 것들 지난 몇주간 프론트 개발을 진행하면서 했던 여러 고민들과 해결들, 그리고 이것저것들을 기록해본다. 제목을 뭐라 지어야할지 한참 동안 고민했다. 적절한 제목 추천 받습니다. 1. 레이아웃 스토리북을 도입하면서 이걸 어떻게 하면 잘 쓸 수 있을까 생각하다가 전체 페이지에서 쓰는 컨테이너와 레이아웃을 모듈화시켜보기로 했다. 디자인한 페이지들의 레이아웃을 보면 세가지로 나눌 수 있다. [제목과 설명/내용(주로 인풋)/다음으로 버튼]으로 이루어진 페이지, [제목과 설명/내용(예매 관련 정보)]로 이루어진 페이지, 그리고 [티켓 콘텐츠] 하나로만 이루어진 페이지. 그리고 모든 페이지들에는 상태에 따라 뒤로가기 버튼이 있을 수 있지만 그와 상관 없이 항상 그만큼의 여백을 두었다. .InfoLayout { height.. 공감수 3 댓글수 0 2022. 2. 15.
[티켓 예매 프로젝트] 3. 얻어간 것들 프로젝트를 하면서 얻어간 지식과 경험을 몇개 정리해본다. 레오가 많이 알려주고 도와주었다. 1. 리덕스 활용 처음 리덕스를 공부할 때 읽었던 책에서 Ducks 패턴을 배웠다. 막상 써보려니까 괜히 복잡한 느낌이 들어서 그 후로 리덕스를 별로 안 좋아했던... 기억이.. 이번에 쓰게된 구조는 아래와 같다. 리덕스 공식 사이트에 적혀있는 것과 비슷할걸? 액션 타입, 액션 생성함수 그리고 리듀서를 각각 하나의 폴더에 담는다. 한가지 기능을 수정할 일이 생겼을 때 3개의 파일을 모두 건드려야 한다는 단점으로 어쩌구저쩌구 하는 글들을 많이 봤는데, 파일 하나에 타입, 액션, 리듀서 다 때려박아서 코드 길어지는게 더 오히려 불편했다. 개인적으로는 더 마음에 드는 방식이다. reducer/index.js 은 불러온 .. 공감수 4 댓글수 1 2022. 2. 10.
[티켓 예매 프로젝트] 2. CDD, Storybook 기획단계에서부터 컴포넌트의 재사용을 염두에 두고 페이지들을 꾸리고 디자인했다. 모든 페이지들의 레이아웃과 컴포넌트들이 일관성을 유지하는게 제일 중요하다. 기획한 페이지들의 일부이다. 제목과 설명, 인풋창, 버튼 등이 모두 재활용될 수 있는 컴포넌트들이다. 세부적인 것들 (글의 내용, 인풋의 placeholder와 오른쪽에 있는 인디케이터, 버튼의 내용과 색깔, 동그란 테두리 유무 등등) 만 바꾸고 모든 코드를 재활용할 것을 염두에 두고 디자인했다. 티켓 예매 프로젝트 (1) - 기획, 디자인 학과 밴드 동아리를 하고 있다. 그래도 명색이 컴퓨터공학과 동아리인데, 결과물 하나정도는 있어야지. 0. 프로젝트의 시작은 이렇다. 평소 공연이었다면 티켓을 종이 명함으로 제작해 친구들에 9yujin.tistory... 공감수 2 댓글수 0 2022. 2. 1.
[티켓 예매 프로젝트] 1. 어떻게 시작하게 되었나 / 기획, 디자인 학과 밴드 동아리를 하고 있다. 그래도 명색이 컴퓨터공학과 동아리인데, 결과물 하나정도는 있어야지. 0. 프로젝트의 시작은 이렇다. 평소 공연이었다면 티켓을 종이 명함으로 제작해 친구들에게 두세개씩 강매했겠지만 이번에는 다른 방법을 생각해야 했다. 직장생활 하시는 선배님들도 많이 오시기 때문에 티켓을 직접 판매하기가 힘들었다. 고민끝에 생각한 것은 카카오톡 채널 기능에 있는 쿠폰이었다. 고스락 채널 채팅방에서 바로 송금을 할 수 있도록 했다. 카카오톡 qr송금에서 만들어주는 qr 송금코드를 url로 바꾸어 버튼에 링크를 걸어주었다. 송금이 되면 채팅방을 통해 쿠폰을 보내주고, 현장에서 그 쿠폰을 보여주면 팜플렛과 티켓으로 교환해주고 입장을 시켜준다. 문제가 두개 있었다. 하나는, 상대방과 카카.. 공감수 4 댓글수 2 2022. 1. 24.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.