자바스크립트로 날짜를 다뤄본 분이라면 한 번쯤은 Date 객체에 좌절해본 경험이 있을 텐데요. 월(month)이 0부터 시작하는 건 왜 그런 건지, 시간대 변환은 왜 이리 복잡한 건지, setDate()를 호출했더니 원본 객체가 변해버리는 건 또 뭔지... 🤦 그래서 moment.js나 date-fns, Day.js 같은 외부 라이브러리 없이는 날짜를 제대로 다루기 어려웠죠. 그런데 드디어 자바스크립트에 Temporal이라는 새로운 날짜/시간 API가 등장했습니다! State of JS 설문에서 "가장 기대하는 새 기능" 1위를
웹 개발자라면 한 번쯤은 CORS 문제 때문에 골치아팠던 적이 있으시죠? Cross-Origin Resource Sharing, 줄여서 CORS는 웹 페이지가 다른 도메인의 리소스에 안전하게 접근할 수 도와주는 브라우저의 기능입니다. 이번 포스팅에서는 CORS의 기본 개념부터 작동 원리, 요청 흐름 그리고 실제 구현 방법까지 자세히 다루도록 하겠습니다. 동일 출처 정책 CORS를 제대로 이해하려면 우선 브라우저의 기본 보안 기능인 Same-Origin Policy, 즉 동일 출저 정책에 대해서 알고 있어야 합니다. 브라우저는 현재
최근에 사이드 프로젝트를 하다가 매우 신기한 경험을 하게 되어 공유드리려고 해요. OpenAI 회원 가입을 하면 소정의 무료 크레딧을 주죠? 제가 몇 달전에는 가입할 때는 $18을 줬는데, 요즘에는 $5로 줄어든 것 같더라고요. 처음에는 이 크레딧이 얼마나 많은 건지 몰랐는데, 제가 한 달동안 ChatGPT에 대해서 공부하면서 블로그 글을 쓰고, 유튜브 영상을 찍으면서 OpenAI의 API를 정말 물쓰듯이 호출해보았지만, $1도 못 썼다는 것을 알게 되었습니다. 😅 그래서 남아도는 OpenAI의 무료 크레딧을 어떻게 하면 좀 더
URL이 바뀔 때 마다 새로운 페이지를 서버로 요청하지 않는 SPA(Single Page Application)에서는 보통 클라이언트 단에서 라우팅(routing)을 하는데요. 그래서 React, Svelte, Vue.js와 같은 대부분의 프론트엔드 프레임워크을 사용할 때는 이러한 클라이언트 단 라우팅을 지원하는 라이브러리와 함께 쓰는 경우가 많습니다. 그런데 이러한 라우팅 라이브러리는 대부분은 내부적으로 자바스크립트의 History API를 사용하고 있다는 것을 알고 계셨나요? 이번 글에서는 클라이언트 단 라우팅을 이해하는데 핵심
지난 포스팅에서는 URL API의 URL을 사용하여 좀 더 안전하게 웹 주소 다루는 방법에 대해서 살펴보았는데요. 이번 포스팅에서는 URL API에서 제공하는 또 다른 유용한 기능인 URLSearchParams를 이용하여 웹 주소의 구성 요소 중에서도 가장 다루기 어려운 쿼리 스트링(Query String) 다루는 방법에 대해서 알아보겠습니다. URLSearchParams 객체의 필요성 자바스크립트의 URLSearchParams에 대해서 본격적으로 배우기 전에 먼저 URL의 쿼리 스트링에 대해서 짚고 넘어가는 게 좋을 것 같아요.
웹 개발에서 URL을 다루는 일은 참 빈번하게 발생하죠? 프론트엔드에서는 URL로 다른 웹페이지로 링크를 걸고, CSS와 자바스크립트 코드를 불러오며, 이미지, 오디오, 비디오와 같은 멀티미디어도 제공할 수 있습니다. 반면에 백엔드에서는 요청 URL의 경로에 따라서 DB에 저장되어 있는 데이터를 조회하고 URL의 쿼리 스트링으로 넘어온 매개변수에 따라서 다른 데이터 처리를 해줄 수 있습니다. 이번 글에서는 웹 주소를 좀 더 안전하게 다룰 수 있도록 도와주는 자바스크립트의 URL API에 대해 알아보겠습니다. URL이란? 우리는 거의
ChatGPT와 같은 LLM(Large Language Model, 대형 언어 모델)이 등장하면서 웹에서 텍스트를 스트리밍하는 사례가 점점 늘어나고 있는데요. 그에 따라 별다른 라이브러리없이도 웹에서 스트림을 쓰고 읽을 수 있는 자바스크립트의 Streams API가 다시 주목받고 있는 것 같습니다. 이번 포스팅에서는 자바스크립트의 Streams API을 사용하여 스트림을 생성하고 데이터를 읽는 방법에 대해서 알아보겠습니다. 읽을 수 있는 스트림 생성 자바스크립트에서 데이터를 읽을 수 있는 스트림을 만들 때는 ReadableStrea
깃허브(GitHub)는 개발자들이 소프트웨어 프로젝트를 관리하고 협업하는 데 필요한 다양한 기능을 제공하는 매우 인기있는 플랫폼인데요. 일상적인 개발을 할 때는 깃허브의 웹사이트를 통해서 대부분의 작업을 처리할 수 있지만 개발 과정을 자동화하거나 다른 개발 도구와 통합할 때는 프로그래밍적으로 접근해야 할 때가 있습니다. 이럴 때는 깃허브에서 제공하는 REST API를 사용하면 되는데요. 이번 포스팅에서는 터미널에서 curl로 깃허브의 REST API를 실제로 같이 호출해보면서 기본적인 API 사용 방법에 대해서 알아보겠습니다. 터미
이번 포스팅에서는 ChatGPT API를 활용하여 파이썬으로 GhatGPT와 유사하지만 터미널 상에서 돌아가는 간단한 챗앱을 구현해보겠습니다. OpenAI API 키 설정 OpenAI에서 회원 가입 후에 API 키를 발급받는 방법은 별도 포스팅에서 자세히 다루었으니 참고 바랍니다. 사전 준비로 터미널을 열고 OPENAI_API_KEY라는 환경 변수에 OpenAI에서 발급받은 API 키를 설정해줍니다. 이렇게 API 키를 환경 변수로 저장해놓으면 Python 코드를 실행할 때 os 모듈의 getenv() 함수를 통해 쉽게 환경 변수를
이번 포스팅에서는 파이썬으로 ChatGPT API를 호출하는 방법에 대해서 알아보겠습니다. OpenAI API 키 설정 OpenAI에서 회원 가입 후에 API 키를 발급받는 방법은 별도 포스팅에서 자세히 다루었으니 참고 바랍니다. 사전 준비로 터미널을 열고 OPENAI_API_KEY라는 환경 변수에 OpenAI에서 발급받은 API 키를 설정해줍니다. 이렇게 API 키를 환경 변수로 저장해놓으면 Python 코드를 실행할 때 os 모듈의 getenv() 함수를 통해 쉽게 환경 변수를 읽어올 수 있습니다. Python에서 환경 변수를
이번 포스팅에서는 ChatGPT API를 활용하여 자바스크립트로 GhatGPT와 유사하지만 터미널 상에서 돌아가는 간단한 챗앱을 구현해보겠습니다. 사전 준비 최대한 간단한 예제를 위해서 GhatGPT API를 호출할 때 외부 라이브러리를 사용하지 않고 Node.js에 내장되어 있는 fetch() 함수를 사용하려고 합니다. Node.js에서는 v17.5 이상부터 fetch() 함수를 지원하고 있으므로 본인 컴퓨터에 v17.5 이전 Node.js가 설치되어 있다면 현재 LTS 버전인 v18로 업그레이드를 추천드리겠습니다. 원격 API를
이번 포스팅에서는 터미널에서 curl을 이용하여 ChatGPT API 직접 호출해보면서 ChatGPT와 어떻게 메시지를 주고 받을 수 있는지 알아보겠습니다. 터미널에서 간단한 명령어를 입력하여 웹 페이지나 API 데이터를 요청하고 받을 수 있는 HTTP 클라이언트 도구인 curl에 대한 자세한 설명은 관련 포스팅을 참고 바랍니다. ChatGPT API 키 발급 ChatGPT API를 사용하려면 반드시 OpenAI의 API 키가 있어야 합니다. API키가 없으신 분들은 이전 글을 따라서 OpenAI 웹사이트에 가입을 하시고 API 키
이번 포스팅에서는 ChatGPT 앱 개발을 위한 첫걸음인 API 키를 발급 받는 방법에 대해 알아보겠습니다. ChatGPT API OpenAI에서는 누구나 ChatGPT를 기반으로 새로운 애플리케이션을 개발하거나 기존 서비스에 ChatGPT를 통합하기 용이하도록 ChatGPT API를 제공하는데요. ChatGPT API는 OpenAI에서 제공하는 인공지능 모델을 활용하여 자연어 대화를 생성하는 기능을 제공합니다. 구글이나 페이스북의 API처럼 ChatGPT API는 HTTP 프로토콜 기반 Rest API 형태로 되어 있어 네트워크를
분산 시스템 환경에서 가장 흔하게 접할 수 있는 백엔드(backend) 애플리케이션은 아마도 특정한 도메인의 데이터를 관리해주는 REST API일 텐데요. 이번 포스팅에서는 NestJS를 이용하면 얼마나 효과적으로 이러한 전형적인 REST API를 개발할 수 있는지 알아보겠습니다. 실습 프로젝트 구성 먼저 간단한 실습을 위해서 NestJS 프로젝트가 하나 필요할 것 같은데요. 터미널에서 NestJS CLI 도구의 nest new 명령어를 실행하여 새로운 프로젝트를 구성하도록 하겠습니다. NestJS CLI를 설치하고 NestJS 프
이번 포스팅에서는 다국어 지원을 할 때 정말 유용하게 쓸 수 있는 자바스크립트의 Intl API에 대해 알아보도록 하겠습니다. Intl API 소개 여러 가지 언어로 서비스를 할 수 있도록 웹 애플리케이션을 설계하고 구현하는 과정을 흔히 국제화(internalization, i18n)라고 합니다. 이를 위해서는 웹페이지 상에 사용된 문구들을 단순히 번역하여 표시해주는 것만 뿐만 아니라 동일한 데이터를 언어나 지역별로 다른 형식으로 보여줘야 하는데요. 예를 들어, 12/11/21로 표시된 날짜 데이터를 한국 사용자들은 2012년 11
requests는 파이썬으로 HTTP 통신이 필요한 프로그램을 작성할 때 가장 많이 사용되는 라이브러리입니다. 특히 원격에 있는 API를 호출할 때 유용하게 사용할 수 있는데요. 이번 포스팅에서는 requests 라이브러리를 사용하는 방법에 대해서 알아보겠습니다. 패키지 설치 파이썬의 패키지 매니저인 pip를 이용해서 requests 패키지을 설치합니다. 설치가 잘 되었는지 파이썬 인터프리터를 실행하여 확인해봅니다. requests 라이브러리로 구글에 접속을 해보니 상태 코드 200이 응답이 되는 것을 볼 수 있습니다. 🎉 API
JavaScript, API, Markup를 근간으로 하는 JAM stack이 모던 웹 개발의 새로운 트랜드가 되고 있습니다. 이에 따라, 예전처럼 서버 단에서 대신 API를 호출해주기 보다는 클라이언트 단에서 직접 API를 호출하는 경우가 많아지고 있습니다. (이렇게 브라우저에서 직접 비동기로 HTTP 통신을 하는 것을 한 때 소위 Ajax라고도 일컬었죠...) 이번 포스팅에서는 원격 API를 간편하게 호출할 수 있도록 브라우저에서 제공하는 fetch() 함수에 대해서 살펴보겠습니다. 라이브러리? 원격 API 호출하면 제일 먼저