Archive

zero-runtime css-in-ts인 vanilla-extract는 런타임에 실행되는 css-in-js 방식( styled-components, emotion )과 달리 빌드타임에 실행되어 Next.js의 SSR에서 Hydration을 거치기 전에도 스타일시트를 가져올 수 있다.TailwindCSS 역시 빌드 타임에 스타일시트를 가져올 수 있지만 가독성이 좋지 않아 새롭게 시작하게 된 프로젝트에 vanilla-extract를 도입하기로 하였다. 1. vanilla-extract 설치// npm npm install @vanilla-extract/cssnpm install --save-dev @vanilla-extract/next-plugin// pnpmpnpm add @vanilla-extract/..

토큰이 만료되었을 경우, 토큰을 재발급하는 기능을 추가 중 아래와 같이 reissue api를 연속적으로 호출하는 오류 상황을 마주하였다.   내가 작성한 기존 로직은 다음과 같다.1. axios의 interceptors를 통하여 토큰 만료 오류를 감지한다.2. accessToken을 헤더에, refreshToken을 body에 넣어 reissue api를 호출한다.    a. 요청이 성공적으로 처리된 경우, 재발급된 토큰을 localStorage에 저장한다.    b. 그렇지 않은 경우, 다시 로그인하라는 모달을 표시하며, 로그인 페이지로 이동하게 한다.   문제원인 파악네트워크 탭에 들어가 요청을 자세히 살펴봤다. 가장 먼저 메인 페이지에서 토큰이 필요한 API인 user/ticket 요청에서 에러가..

안녕하세요.이번에 소프트웨어학과 4-1학기 캡스톤 프로젝트를 마치며 회고록을 남기고자 합니다.이 글을 통하여 뿌듯하기도 하지만 아쉬웠던 프로젝트를 회고해보겠습니다. 서비스 소개단통은 학우들의 학생회 행사 참여를 증진하고, 학생회의 폼 가공 업무를 간편화해주는 서비스입니다.학생회는 단통을 통하여 학생회 행사를 효과적으로 홍보하고, 학우는 행사 참여 정보, 진행 상황, 행사 일정 등을 편리하게 확인할 수 있습니다.단통은 학우들이 행사 폼을 제출할 때 번거로웠던 재학 인증 정보 (단국대학교 웹정보 화면 캡쳐, 전공과 학번 입력 등) 기입 절차를 회원가입시 단 한 번의 학교 이메일 인증으로 대체하고, 폼 응답 리스트를 엑셀로 추출하는 기능을 통하여 학생회의 업무 절차를 간소화합니다!이 프로젝트는 학생회의 도움..

아래와 동일하게 원형 차트를 구현하고자 한다. Setting npm install chartjs npm install --save chart.js react-chartjs-2 chartjs 라이브러리를 설치한다 기본적인 DoughnutChart 컴포넌트 작성 일단 정적 데이터를 기반으로 차트를 그려봤다. 차트 컴포넌트는 'data' props를 필수적으로 포함해야 한다. 차트에 필요한 데이터는 string 배열 'labels'와 number 배열 'data'이다. 아래 예시는 ['가','나','다','라','마'] 와 [1,2,3,4,5] 로 데이터를 설정하였다. DoughnutChart.tsx import { Chart as ChartJS, ArcElement, Tooltip} from 'chart.j..

리뉴얼될 총학생회 사이트는 회칙, 공지, 청원 페이지 등의 게시판 글 목록을 같은 레이아웃으로 Infinite Scroll하여 나타낸다. 이 페이지들은 레이아웃은 같아도 목록을 구성하는 컨텐츠가 각각 다르기 때문에 이를 어떻게 구현할지 고민하게 되었다.예전 같았으면 새로운 페이지를 작성할 때마다 기존 레이아웃의 코드를 복사 붙여넣기하여 몇몇 부분을 수정하였겠지만, 이번 프로젝트에서는 Atomic Pattern을 도입하기로 하여 개선해보기로 하였다!또한 이전 총학생회 사이트에서는 페이지마다 중복되는 함수들(axios(),useState()...)이 많아 수정사항이 있으면 페이지별마다 모두 바꿔야 했던 게 불편해서 이 점을 꼭 고치고 싶었다.그래서 이번에는 마음 먹고 새로운 페이지를 작성할 때 기존 레이아웃..