분류 전체보기

[인사이트아웃] Next.js의 parallel route를 이용하여 페이지 성능 개선하기

배경 매우 느리던 자기소개서 페이지의 로딩 속도를 개선한 사례를 소개하고자 한다. Next.js의 parallel route를 사용하여 페이지 로딩 속도를 약 94% 개선한 내용을 공유한다. 인사이트아웃은 사용자 경험을 위해 자기소개서 작성 페이지를 접속하면 가장 최근에 작성했던 자기소개서를 보여준다. 이 페이지를 접속하기까지는 약 10초가 걸리는 치명적인 문제점이 있었다. 원인 문제의 원인은 자기소개서 작성 라우팅 방식때문이었다. 자기소개서 작성하기 메뉴를 클릭하면 /resumes/${questionId}로 이동한다. questionId는 가장 최근에 작성했던 자기소개서로, 자기소개서 목록 조회 API 조회 후 가장 첫번째 자기소개서 질문 항목이 questionId이다. 자기소개서 레이아웃은 아래와 같..

[인사이트아웃] React-Query 무한스크롤 적용기

TL;DR - 무한스크롤 - Intersection Observer API - React-Query와 Intersection Observer API를 사용해 무한스크롤 구현하기 - 실제 서비스에 적용하기 배경 인사이트아웃에서는 내가 가진 경험을 정리하고 이를 '경험 카드'로 저장할 수 있다. 이 경험카드는 본격적으로 자기소개서를 작성할 때 참고하여 작성할 수 있다. 이 때, 한 페이지에서 내가 가진 경험카드의 내용을 확인하고 이를 토대로 자기소개서를 작성을 빠르게 할 수 있도록 기획하였다. 무한스크롤 무한스크롤은 사용자가 스크롤을 아래로 내리면 새로운 콘텐츠가 자동으로 로드되어 보여주는 방식이다. 사용자가 페이지를 이동하지 않아도 계속해서 새로운 콘텐츠를 볼 수 있어 편리한 사용자 경험을 제공할 수 있다..

[네트워크] IP / TCP, UDP

어떻게 컴퓨터 2대가 인터넷을 통하여 통신을 할 수 있을까? IP IP주소에 따라서 통신할 수 있다. 지정한 IP 주소에 데이터를 전달할 수 있다. 패킷이라는 통신 단위로 데이터를 전달한다. IP 패킷 정보 - 출발 IP - 목적 IP - 전송 데이터 ... 클라이언트 패킷 전달 서버 패킷 전달 IP 프로토콜의 한계 1. 비연결성 2. 비신뢰성 3. 프로그램 구분 불가능 1. 비연결성 패킷을 받을 대상이 없거나 서비스 불능 상태여도 패킷을 전송한다. 2. 비신뢰성 중간에 패킷이 사라질 수 있다. 인터넷 망의 문제, 서버 문제 등으로 중간에 패킷이 소실될 수 있다. 패킷이 순서대로 오지 않을 수 있다. 패킷 용량이 큰 경우, 패킷을 나눠서 전송하게 된다. 이 때, 패킷이 순서대로 도착하지 않을 수 있다. ..

2022년 회고 - 웹 개발자를 꿈꾸다

학교 공부를 열심히 하던 학생 1월 시작하자마자 2021년도 종강 일주일전까지 진행했던 프로젝트에 대해 상을 받았다. 3학년의 나 .. 인생 최저 몸무게 찍었다.. 그리고 지금은 10kg 찜 하~ 4학년이 시작되고 고마운 과거의 나에게 또 선물을 받았다. 1학년 1학기 빼고 다 장학금을 받았지만 그래도 여전히 자랑하고 싶어서 긁어왔다 .. 웹 개발을 시작하다. 졸업프로젝트 인공지능 관련 전공인 나는 열심히 인공지능에 대해서 공부했다. 특히 컴퓨터 비전에 관심이 많아서 졸업 프로젝트도 비전과 관련된 주제로 정했다. 아동학대 관련된 주제로 학대 행위를 감지하는 프로젝트를 진행했다. 다양한 데이터를 구축하려고 저 마네킹을 들고 여기저기 다니면서 엄청 때렸다.. CCTV로 행동을 감지하는 것 뿐만 아니라 웹서비..

Chromatic으로 Storybook 지속적 배포하기 (Github Actions)

TL;DR 1. 스토리북을 도입하게 된 계기 2. chromatic으로 스토리북 배포하기 3. Github Actions를 이용해 Pull Reqeust에서 바로 컴포넌트 확인하기 스토리북을 도입하게 된 계기 협업을 진행하면서 여러 사람이 컴포넌트를 개발하게 되었습니다. 아래와 같은 컴포넌트 코드들이 PR로 올라오기 시작했습니다. PR을 열심히 작성하더라도 위 코드를 보고 쉽게 머리에 컴포넌트를 떠올리기는 어렵습니다. 게다가, PR을 열심히 작성한다는 것은 개발자가 매번 꼼꼼히 작성해야하고 PR을 읽는 개발자는 또 신경써서 읽어야합니다. 불필요하게 높은 소통 비용이 발생하고 있었습니다. 그리고 매번 pull을 받아서 개발 서버를 실행하고 어떤 UI인지 확인하고 제대로 작동하는지 손수 테스트를 진행해야했습..

chrome에서 set-cookie 작동하지 않을 때

현재 백엔드에서 set-cookie 해주는 response는 아래와 같다 access-control-allow-credentials: true allow: POST, OPTIONS connection: close content-length: 21 content-type: application/json date: Wed, 22 Feb 2023 03:04:31 GMT referrer-policy: same-origin server: gunicorn set-cookie: access_token=value; expires=1:00:00; HttpOnly; Path=/; SameSite=None set-cookie: refresh_token=value; expires=14 days, 0:00:00; HttpOnl..