삽질 기록..

next.config.js에서 rewrites 옵션을 사용하면 next 서버가 일종의 proxy 역할을 하도록 구현할 수 있다. 요청 url을 숨기고 싶을 때 따로 API를 구현하지 않아도 되고 머리 아픈 CORS 에러도 간단하게 해결할 수 있어서 종종 사용하는데, url에 를 적용하다가 삽질했던 기록을 남겨본다. path parameter 제대로 이해하기 와 같은 요청을 처리하고 싶을 때, 해당 요청의 path는 이다. source 필드에 정규표현식으로 query parameter key를 매치해보려고 시도하면 안된다.. 404 만남!😅 has 사용하기 대신 특정 query parameter가 포함되어 있는지 확인하기 위해 사용할 수 있는 필드가 있는데, 바로 이다. query parameter의 value 값을 그대로 destination에 넣고 싶다면, named capture group을 사용해야 한다. (query key를 변수처럼 사용할 수는 없다.) 는 query pa…

app router를 사용했어요

이것저것 다양한 기술들을 사용해볼 겸 인터렉티브한 웹 포트폴리오를 만들고 있다! 어느정도 구현된 포트폴리오를 로 만들어봤는데, 그 과정을 기록해보려고 한다. PWA (Progressive Web Apps) 구글 PWA 학습 가이드를 차근차근 읽어보면서 PWA가 어떤 기술인지, 왜 적용하면 좋은지를 이해할 수 있었다. 웹의 접근성과 네이티브 앱의 안정성, 성능을 동시에 가져갈 수 있기 때문에 사용자에게 훨씬 좋은 웹앱 경험을 제공할 수 있다. PWA의 이점을 극대화하려면 서비스워커와 다양한 캐싱 전략 등을 적용해보는 것이 좋을 것 같다. 사실 지극히 개인적인 포트폴리오 사이트를 PWA로 만드는 것이 과하다는 생각이 들긴 하지만, 시도해보기 딱 적당한 사이즈의 프로젝트라 도전해봤다. 🤓 2023.11.02 - UPDATE 서비스 워커가 등록되지 않아 레포 이슈를 확인해봤더니 pages를 기준으로 동작하는 라이브러리이기에 app router와 호환성 문제가 있는 것 같았고, 라이브러리…

근데 이제 타입 가드를 곁들인~

최근 다독다독 프로젝트를 진행하면서 Axios 에러 처리와 관련된 고민을 많이 했었다. 타입스크립트에 익숙치 않았을 뿐더러 커스텀 에러 코드를 사용하면서 구글링도 쉽지 않았는데..🥹 고민의 과정을 적어보려고 한다. Custom Error Code API 요청이 실패한 경우, 다독다독 서버는 Error Response body에 아래와 같이 사전에 정의된 에러 코드를 함께 보내주고 있다. 클라이언트 측에서는 에러 코드에 따라 필요한 핸들링을 하면 된다. 커스텀 에러 코드들은 아래와 같이 string 리터럴 타입으로 미리 선언해 두었다. 서버에서 에러에 대한 설명이 담긴 메세지도 보내주지만, 어떤 처리 없이 바로 사용하기에는 무리가 있어 보였다. 그래서 클라이언트 측에서 사용할 에러 메세지도 별도로 관리하면 좋을 것 같았다. 필요한 것들은 어느정도 정의한 것 같으니.. 이제 응답에서 에러 코드만 잘 뽑아서 사용하면 될 것 같은데..!?! 역시 타입스크립트는 마음처럼 쉽게 되지 않았…