PROJECT INFO

개인 프로젝트의 보일러플레이트 파일을 줄이기 위해 설계 및 개발, 배포한 유틸리티 라이브러리

modal → 모달 내부 UI만 정의하여 쉽게 모달을 구현 가능함.

loading → Next.js App Router상에서 페이지 이동 시 화면 상단에 로딩바를 표시함.

toast → 네 가지 종류의 토스트 메시지를 별도의 훅 선언 없이 사용할 수 있음.

api-client → SSR, CSR 환경에서의 서버 통신 인터페이스를 통일한 API 유틸리티 모듈.

turborepo와 pnpm을 사용하여 여러 모듈 라이브러리를 하나의 레포지토리에서 관리.

CONTRIBUTIONS

모달 내부의 UI만 정의하여 사용하는 유틸리티 라이브러리를 구현하였습니다.

간편한 모달 유틸리티를 구현해 재사용성과 중첩 모달 관리를 지원했습니다.

API는 modal.open()과 modal.close() 형태로 단순화되어 있습니다.

@toss/use-overlay의 인터페이스에서 영감을 얻어 제작하게 되었습니다.

Next.js에서 App Router를 이용한 페이지 전환 시 로딩바를 보여주는 라이브러리를 구현하였습니다.

0% ~ 95% 까지는 랜덤한 간격으로 로딩바를 채우다가 95% 지점에서 페이지 이동 시 100%로 전환되고 로딩바가 사라지도록 구현하였습니다.

Git-Task 프로젝트에서 구현하였던 페이지 로딩 처리를 개선하고자 하였으며, 화면 상단에 로딩바를 띄우는 방식으로 개선하여 사용자의 서비스 이용이 멈추는 상황을 방지했습니다.

제목과 내용을 담아 토스트 메시지로 만드는 유틸리티 라이브러리를 구현하였습니다.

성공, 실패, 경고, 정보 네 가지 종류가 존재하며 토스트 메시지의 아이콘으로 구별됩니다.

toast.메서드(“제목” , “내용”) 형식으로 사용할 수 있습니다.

SSR과 CSR에서의 API 요청 인터페이스를 통일하고 쿠키를 포함 여부를 메서드 체이닝으로 구현하였습니다.

Next.js의 SSG/ISR 기능을 사용할 수 있는 fetch를 래핑하여, .withCookie() .withISR() .withSSG() 체이닝을 통해 API 요청에 쿠키를 포함하거나 SSG/ISR을 활성화할 수 있습니다.

next.js의 SSR에서 API 요청 시 쿠키를 포함하면 DynamicServerError가 빌드 타임에 발생하므로 필요한 곳에서만 사용할 수 있도록 구성해야 했으며, axios의 간편한 HTTP 요청 인터페이스에 영감을 받아
메서드 체이닝 방식을 채택하였습니다.

TROUBLE SHOOTINGS

css-in-js를 사용하여 대부분의 css 코드를 대체하며 문제를 해결했습니다.

css의 반응형 코드는 useEffect와 resize이벤트를 이용하여 대체하였으며, 애니메이션의 경우 Styled JSX를 렌더링 시 주입하여 대체하였습니다.

Styled JSX를 Next.js에서 사용시 h y dra tion 에러가 발생하기 때문에, DOM 커밋이 끝난 시점에 useEffect를 통해 코드를 주입하여 에러를 피할 수 있었습니다.

빌드 타임에 “use client”를 삽입하여 문제를 해결하였습니다.

코드에 “use client”를 작성했지만, pnpm build 시 “use client” 키워드가 무시되는 현상이 발생하였습니다.

문제를 해결하기 위해 package.json의 build 스크립트를 수정하여 빌드된 파일의 최상단에 “use client”를 삽입하도록 구현하였습니다.

React를 포함한 의존 중인 라이브러리를 peerDependencies에 등록하여 문제를 해결하였습니다.

한 프로젝트 내의 라이브러리 인스턴스가 1개보다 많으면 해당 라이브러리의 런타임 컨텍스트가 서로 달라져 예측하지 못하는 문제가 발생할 수 있기 때문에 @cher1shrxd 라이브러리 내부에서 사용하는 의존성들은 모두 peerDependencies로 등록하여 프로젝트에 설치된 라이브러리를 사용하도록 하였습니다.