🎀 프로젝트

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

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

Django Channels로 실시간 알람 기능 만들기 (2)

2022.07.04 - [프로젝트/capstone] - Django Channels로 실시간 알람 기능 만들기 (1) Django Channels로 실시간 알람 기능 만들기 (1) 배경 실시간 아동학대 알림 웹 서비스에서 가장 중요한 부분인 실시간 알림 기능을 구현해야합니다 우선 예상 시나리오를 보면 폭력행위 발생 -> DB에 해당 내용 저장 -> 해당 DB 내용을 클라이언 min-kyung.tistory.com 위 글에서는 websocket을 이용해 Vue.js와 Django를 연결했습니다. DB에 데이터가 저장되면 프론트로 알림 전송하기 오늘 만들 기능은 DB에 데이터가 저장되면 프론트로 알림을 전송하는 기능입니다. 폭력행위가 발생하면 DB에 데이터가 저장되고 해당 데이터가 프론트로 전송되어야합니다...

Django Channels로 실시간 알람 기능 만들기 (1)

배경 실시간 아동학대 알림 웹 서비스에서 가장 중요한 부분인 실시간 알림 기능을 구현해야합니다 우선 예상 시나리오를 보면 폭력행위 발생 -> DB에 해당 내용 저장 -> 해당 DB 내용을 클라이언트에게 전송 DB에 내용이 저장되면 해당 데이터를 바로 프론트로 날려줘야하는 실시간 기능이 필요했습니다 이를 위해 Websocket을 사용하기로 했습니다! 🤷 왜 Websocket? 클라이언트가 DB에 내용이 저장되었다는 것을 알려면 클라이언트와 서버가 양방향 통신을 해야하는건 알겠는데 왜 하필 웹소켓을 사용했을까요? 양방향 통신에는 총 2가지가 있습니다. 1. polling 양방향 통신 중 하나로 n초마다 request를 날려서 response를 전달 받는 방식입니다. 이 방식은 n이 작아질 수록 서버의 부담이..