ice rabbit programming

웹 개발을 하다 보면 에러를 상당히 자주 접하게 된다. 에러 코드를 보면 500, 400, 404, 401 등 자주 접하는 코드들은 의미를 바로바로 알게 되지만, 가끔 생소한 경우도 있다. 본인도 개발하다가 411 에러는 처음 봐서 포스팅으로 작성한다. 411 에러는 Length Required로, HTTP 1.1부터 발생하는 에러인데 웬만해서는 기본 헤더에 length가 지정되어 있으므로 나올 일이 많지 않다. 이번에 본인은 curl 요청을 보내는 중에 발생하였다. 해결법은 쉽다. Content-Length를 헤더에 추가해주면 된다. curn -H "Content-Length: 0" http://myurl.com

CSS, SCSS를 사용할 때 color 값 지정은 굉장히 많이 발생한다. 자주 쓰이는 색깔들은 표준적으로 정해져 있기도 하지만, 투명도를 조절하거나 정해져 있지 않는 경우에는 아래와 같이 hex값(#ffffff 등)이나 RGBA(rgba(255,255,255,0.5) 등)를 사용하여 지정한다. .element { color: #ffffff; } 예시로 든 것은 그냥 흰색이지만, 만약 키워드가 없는 색상을 굉장히 많이 지정해야 한다면? 프로그래밍을 맨 처음 배울 때의 변수의 필요성과 같이, 반복 및 유지보수 용이성을 위해서는 색상을 키워드로 하는 것이 좋을 것이다. vuetify와 같은 UI 프레임워크를 사용한다면, 이전에 vuetify에서 색상 지정하는 글에서 썼던 것처럼 color를 지정하고, cla..

공식 문서 설명 : router.vuejs.org/kr/guide/essentials/history-mode.html HTML5 히스토리 모드 | Vue Router HTML5 히스토리 모드 vue-router의 기본 모드는 hash mode 입니다. URL 해시를 사용하여 전체 URL을 시뮬레이트하므로 URL이 변경될 때 페이지가 다시 로드 되지 않습니다. 해시를 제거하기 위해 라우터의 router.vuejs.org vue는 SPA로, 처음에 모든걸 받아서 내부 router를 이용해 이동한다. 디폴트 모드로 사용하면 경로에 hash(#)가 들어가있는 것을 볼 수 있다. 예를 들어 https://my-page.com/#/home과 같은 식이다. 이 때 vue router 설정에서 history mode를..

PATCH 방식 통신 RESTful API로 통신할 때, 수정을 위해서는 주로 PUT 방식으로 request를 날릴 것이다. 다만 좀 세부적으로 들어가면, 전체를 날려서 수정하는 것은 PUT 통신, 일부(partial)를 날려서 수정하는 것은 PATCH 통신을 이용하는 것이 올바른 방식이다. API를 구현하는 측에서 PUT 통신에도 일부만 와서 일부가 null인 경우에는 수정하지 않도록 처리를 해 두었으면 PUT 방식에서도 일부만 request로 보내도 괜찮으나, 만약 그런 처리가 되어있지 않다면 보내지 않는 부분이 null이 되는 불상사가 일어날 수 있다. 그렇기 때문에 partial하게 수정할 수 있는 방식은 PATCH를 명확하게 사용하는 편이 좋다. JSON PATCH 상술한 것처럼 일부만을 보내는..

이전 글에서 nginx의 proxy_pass에 대해서 포스팅했었다. 이번 포스팅에서는 reverse proxy할 때, 인증을 거칠 수 있는 auth_request에 관해 포스팅하려 한다. 대개의 웹 서비스는 인증/권한 관리 시스템을 갖추고 있고, 허용된 요청에 한해서만 정상적인 response를 반환한다. 예를 들어 로그인이 되어 있지 않은 사용자는, 로그인이 필요한 페이지에 접근 시에 로그인 페이지로 redirect 하는 경우가 있다. API 레벨이나 프론트엔드에서도 각각 처리가 필요하지만, 기본적으로 nginx에서 일차적으로 걸러주는 것이 필요하다. 이럴 때 auth_request를 사용할 수 있다. auth_request는 말 그대로 인증이 유효한지를 보내는 것인데, token을 사용한다면 이 to..

nginx는 아파치와 더불어 굉장히 널리 쓰이는 웹 서버이다. 2021년 기준으로 아파치가 약 41.48%로 1위, nginx가 약 26.41%로 2위의 점유율을 보이고 있다. 2000년대~2010년대 초반까지만 해도 아파치가 거의 60%에 육박하거나 상회하는 수준이었다는 것을 생각하면 nginx의 성장세가 무섭다고 할 수 있다. 어쨌거나 웹 서버는 HTTP 서버라고도 할 수 있는데, 클라이언트의 요청에 따라 서버 쪽에서 처리하여 정보를 제공하는 소프트웨어라고 할 수 있다. nginx가 제공하는 기능이 여러가지 있는데, 그 중에 이번 포스팅에서는 reverse proxy를 간단하게 다루려고 한다. reverse proxy Flask나 Express.js 등 자체적으로 serving을 지원하는 프레임워크를..

웹 API를 테스트하는 툴은 여러 개가 있는데, 대표적으로 Postman과 Insomnia가 있다. 필자는 예전부터 Insomnia를 많이 사용해 왔고, 이번 기회에 사용법을 정리 및 설명해 보고자 한다. 기본적으로 URI에 정해진 Method를 통해 request를 보내고 response를 받아 원하는 동작을 제대로 하는지 확인하면 된다. 정상적인 응답과 에러 코드가 나오니 테스트하기에 좋다. https://insomnia.rest/download/ Insomnia Download the Insomnia app insomnia.rest 위 링크에서 설치가 가능하다. 설치하면 다음과 같은 화면이 나온다. 이 화면을 부분별로 나누어 어떤 기능인지 살펴보자. 중앙 상단 부분이다. HTTP Method를 지정..