삽질 기록..

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 리터럴 타입으로 미리 선언해 두었다. 서버에서 에러에 대한 설명이 담긴 메세지도 보내주지만, 어떤 처리 없이 바로 사용하기에는 무리가 있어 보였다. 그래서 클라이언트 측에서 사용할 에러 메세지도 별도로 관리하면 좋을 것 같았다. 필요한 것들은 어느정도 정의한 것 같으니.. 이제 응답에서 에러 코드만 잘 뽑아서 사용하면 될 것 같은데..!?! 역시 타입스크립트는 마음처럼 쉽게 되지 않았…

반복문없이 스마트하게 배열 채우기~

을 사용하면 다양한 값으로 배열을 채울 수 있다. 첫번째 매개변수로 혹은 를 전달하면 이를 얕게 복사해서 새로운 Array 객체를 만든다. optional 매개변수로 콜백을 전달할 수 있는데, 중간에 다른 배열을 생성하지 않는다는 점을 제외하면 와 같다. 1차원 배열 하나의 수로 채우기 ES6에서 도입된 메소드를 사용하여 배열을 한번에 채우는 방법도 있다. 1씩 증가하는 배열 만들기 1씩 증가하는 배열을 만들고 싶다면 의 두번째 인자인 index를 활용하면 된다. 0부터 1씩 증가하는 배열을 만들 때 로 배열의 인덱스를 추출하여 만들 수도 있다. 2부터 2씩 증가하는 배열은 다음과 같이 만들면 된다. 2차원 배열 빈 배열로 채우기 하나의 수로 채우기 그래프 탐색, 최소 비용 알고리즘 등에 많이 사용된다. 참고 JS팁_1. 배열 채우기 MDN Array.from() 1차원 배열 하나의 수로 채우기 1씩 증가하는 배열 만들기 2차원 배열 빈 배열로 채우기 하나의 수로 채우…

보기 좋은 떡이 먹기도 좋은 법!

README.md 파일을 활용해서 머찐 을 만들어 보자! 1. username/README.md 생성 은 특별한 레포이다. ✨ 자신의 Github username과 같은 이름의 레포를 만들면, 해당 레포의 README.md 파일을 통해 Gihub에 프로필을 띄울 수 있다. 아래 사진처럼 , 을 선택하고 Repository를 생성한다. 이미 gxxrxn이라는 레포를 만들었기 때문에 빨간색 경고 메시지가 뜬다. 처음이라면 별다른 경고 없이 레파지토리를 생성할 수 있다! 2. README.md 꾸미기 레포 생성을 했다면, 아래 사진과 같이 자신의 Profile에 README 파일의 내용이 보일 것이다. 본격적으로 README를 꾸며보도록 하자! Shields.io로 뱃지 넣기 Shields.io로 아래와 같은 뱃지를 넣을 수 있다. Shields.io Sample Icons 1. username/README.md 생성 2. README.md 꾸미기 Shields.io로 뱃지 넣기