HTTP 통신에서 사용하는 headers 중 Content-Type과 Accept, 그리고 XHR 프로퍼티중 하나인 responseType에 대해 비교하고 정리해보고자 합니다. Content-Type Content-Type은 Client가 서버로 보내는 HTTP요청의 Message Body가 가지고 있는 리소스 타입에 대해 알려주는 역할을 합니다. 예를 들어, 아래처럼 간단한 HTTP POST요청을 한다고 하였을 때, body에 들어가 있는 타입을 알려주는 역할을 한다는 것입니다. 여기에서는 json 형식이니, "application/json"을 넣어 주었습니다. fetch('some/url', { method: 'POST', headers: { 'Content-Type': 'application/jso..
전체보기
최근에 Next.js를 이용해서 내 블로그를 직접 만들고 있습니다. 작업하는 와중에 form 유효성 검사를 좀 간단히 할 수 있는 hook을 만들고 싶어져 zod를 활용하여 한번 만들어 보게 되었습니다. useForm이라는 라이브러리가 있는 것도 알고 있지만, 간단한 것은 직접 만드는게 좋아 직접 만들어 보게 되었고, 공유하고자 글을 정리해봅니다. 어떻게 구현했는지는 코드를 보면 알 수 있으니, 구현하면서 겪었던 문제점과 해당 문제점을 어떻게 해결했는지 위주로 정리했습니다. Features 우선, 완성된 form은 아래처럼 작동 하게 될 것입니다. useForm 작동 영상 useForm이라는 커스텀 훅에서 제가 원하는 기능은 아래와 같습니다. 각 input을 유효성 체크하는 함수와 에러 메시지를 z.ob..
간만에 머리도 풀어볼 겸, 프로그래머스에서 알고리즘 문제를 풀어봤다. lv1은 쉽게 풀었지만, 2에서는 효율성에서 실패가 떴고 푸는데 조금 고민을 하게 되어 정리를 해보고자 한다. 문제 링크는 다음과 같다. https://school.programmers.co.kr/learn/courses/30/lessons/250136 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr function solution(land) { var answer = 0; const depth = land.length; const width = land[0].length; //이중배열 ..
문뜩 Vue-cli 사이트에 들어갔다가 Vue CLI가 Maintenance 모드에 들어갔으며, 앞으로의 프로젝트들은 Vite기반으로 생성 하는 것을 권장한다는 것을 보게 되었다. 이번 포스트에서는 왜 vue-cli에서 Vite로 넘어가게 되었는지, 그리고 실질적인 migration 방법에 대해 정리 해보고자 한다. Why Vite? 기존의 웹팩과 같은 번들링 툴은 프론트엔드에서 ES Module을 사용할 수 있게 해 생태계를 확장시키는데 엄청난 기여를 했다. 하지만, 프로젝트가 커짐에 따라 데브 서버를 키는 속도가 점점 느려지는 문제가 있었다 Vite는 이 문제를 네이티브 ESM을 사용해 필요한 모듈을 그때그때 불러오도록 해 개발 서버의 시작시간을 프로젝트의 크기와 상관없이 빠르게 유지시켜준다. 이러한..
사내에서 차량의 위치 정보를 실시간으로 받아오는 기능 개발이 필요했다. 해당 기능을 구현하기 위해서는 어떤 방법들이 있는지, 그리고 실제로 어떤 방법으로 구현을 했는지 정리해보고자 한다. 구현 필요 기능 명세 다수의 차량 위치정보를 실시간으로 화면에 출력해주는 기능이 필요했습니다. 각 차량의 정보를 수신하는 주기는 500ms으로 생각하고 있었으며, 최대 차량의 개수는 100대 였습니다. 일반적인 HTTP 통신을 하게 되면 클라이언트 측 부담이 커지게 때문에, 서버쪽에서 바로 차량 위치 정보를 보낼 수 있는 방향으로 가닥을 잡았습니다. 서버가 클라이언트에게 데이터를 보내면 클라리언트가 이를 인지하고, 데이터 처리를 해주는 방법은 크게 WebSocket과 SSE 두 가지가 존재합니다. WebSocket vs..