바로 직전 글이 [업비트 웹소켓 API의 Origin별 Rate Limit 우회하기](https://blog.coinsect.io/posts/bypass-upbit-websocket-rate-limit)였다. 결론적으로 거기까진 성공적이었으나, 모든 트래픽이 죄다 내 ec2 인스턴스로 들어오는 터에 비용이 갑자기 엄청나게 증가했다. ![](https://d1085v6s0hknp1.cloudfront.net/boards/coi...

필자가 운영중인 암호화폐 시세 정보 제공 사이트 [코인충](https://coinsect.io)에서는 업비트 웹소켓 API에 자주 붙는다. 일례로 메인 화면에는 아래와 같은 영역이 있고,  김프가와 비슷하게 아래와 같은 페이지도 ...

## Options API Vue 2 에서는 아래와 같이 작성하는 Options API가 주류였다. ```javascript <script> export default { props: { // 부모로부터 넘겨받는 값들 }, methods: { // 메소드들 }, computed: { // 계산된 값들 }, data: () => { // 데이터 }, mounted(...

커리어 초창기에 일했던 회사에서 나는 golang으로 백엔드에 입문했다. 물론 그 이전에도 PHP + Codeigniter 조합으로~~틀~~ SSR을 했던 경험이 있긴 한데, 본격적으로 백엔드 + 프론트엔드가 분리된 웹앱을 만들어본 경험에서 첫 도구는 golang이었다. 그리고 이 때 받았던 인상은 너무나 긍정적이었어서, 지금도 최애인 nodejs와 병용하고 있다. ## 마스코트 ![](https://go.dev/blog/g...

간만에 무한반복 중인 곡이 생겼다. 일단 곡이 정말 잘 뽑혔고 뮤비나 음악의 전반적인 디렉팅의 디테일 하나하나도 너무나 좋다. ## 뮤직비디오 [](https://youtu.be/IajeQM00yfE) ## 리뷰 ![](https://d1085...

운영중인 사이트 [코인충](https://coinsect.io/)에는 박호두, 사또, 짭구 등 유명 스트리머들의 포지션을 거의 실시간에 가깝게 계속 추적해서 보여주는 기능이 있다.  코인충 관리자 페이지의 '실시간 포지...

자바스크립트에 네이티브로 반응형 값을 선언할 수 있는 방식을 추가하자는 [제안](https://github.com/tc39/proposal-signals)이 있다. 아직 Stage 1이며, [폴리필](https://github.com/proposal-signals/signal-polyfill)까지 구현이 완료된 상태이다. 개인적으로 정말로 크게 기대되는 부분이다. 반응형 프로그래밍은 오랜 역사를 가지고 있다. 아마 스프레드시...

그야말로 생성형 AI의 시대이다. 이제 **좋은 검색 결과를 얻기 위한 핵심 키워드**를 잘 입력하는 것에 목을 멜 필요가 없다. 검색엔진이 아닌 [ChatGPT](https://chatgpt.com/)나 [Gemini](https://gemini.google.com/)에 접속해 전문가와 대화하듯 자연어로 '실제 질문'을 하면 된다. 그러면 AI들은 자기들이 인터넷을 뒤져서 최적의 답변을 해준다. 온 마켓이 그야말로 blood...

프론트엔드 코딩을 하다보면 `console.log`를 넣을 일이 매우 많다. 나는 특히 크롬의 디버깅 툴을 쓰기보다는 필요한 곳들에 로깅을 하면서 개발하는 것을 선호한다. 그런데 자바스크립트는 함수가 실행될 때 주변의 환경을 기억하는 클로저라는 기능이 있다. 이 때문에, 참조되는 변수는 메모리에서 GC의 대상이 되지 않고 남아있게 된다. 아래의 상황을 생각해보자. ```javascript const myArr = new Ar...

Universal Rendering을 하는 모던 웹앱에는 Hydration이라는 개념이 존재한다. 단순한 SPA(Single-Page Application)와 달리 서버에서 일단 HTML을 온전히 렌더링해서 내려준 뒤, 클라이언트에서 자바스크립트 다운로드 & 해석이 끝나면 갖고 있는 HTML에 필요한 이벤트들을 바인딩하는 작업을 하는 것을 일컫는다. 이렇게 하면 검색엔진에도 대응할 수 있고(SEO), 첫 요청 이후로는 SPA로...

퍼블리싱을 하다보면 리스트를 많이 보게 된다. 아래와 같은 목록에서, 자녀들 사이의 간격을 8px로 설정하고 싶다면 어떻게 코드를 쓸 것인가? ```markup <div class="parent"> <div>1</div> <div>2</div> <div>3</div> </div> ``` 아마도 아래와 같은 코드를 쓸 것이다. ```css .parent { div:not(:last-child) { m...

SEO란 Search Engine Optimizing, 검색 엔진 최적화를 말한다. 검색엔진(특히 구글)이나 SNS들이 내가 만든 웹사이트의 내용을 잘 읽고 내용을 이해할 수 있게 하는 작업이다. 이것은 브랜드 인지도와 마케팅에 큰 영향을 줄 수 있다. 구글은 대개 양질의 정보를 상단에 띄워주는 경향이 있고, 사람들이 많이 검색해볼 법한 키워드들에서 내 컨텐츠가 상위권에 노출된다면 웹사이트 유입을 늘리는데 큰 도움이 된다. 이...

나는 [비트코인 블로그](https://btc.coinsect.io)를 운영중이다. 사람들이 흔히 갖는 비트코인에 대한 FUD(Fear / Uncertainty / Doubt), 궁금해하는 점들 또는 기타 기술적 질문들에 대해 매번 답변하는 것이 귀찮아 글로 잘 정리한 뒤 링크만 전달해주기 위해 시작한 블로그이다. 반면 이 블로그는, 개발과 IT 및 개인적 관심사들에 관한 이야기를 하기 위한 공간이다. 그리고 이력서에 Rea...

### 1. Vue와 React의 간단 비교 React는 오랜 기간 왕좌를 차지해온 jQuery의 아성을 깨고 엄청난 인기를 얻는데 성공한 모던 프론트엔드의 대표 **UI 라이브러리**이다. 2024년 현재까지도 React의 지대한 인기는 식을 줄을 모른다. ![NPM 트렌드](https://d1085v6s0hknp1.cloudfront.net/chat/10368a5d-3977-48f1-acb3-5d4e1fb8f90f_ima...

[비트코인 블로그](https://btc.coinsect.io)는 글을 HTML로 퍼블리싱하고 있는데, 이 개인 블로그는 마크다운으로 진행해보려 한다. 링크를 걸 때도 []와 ()의 조합을 쓰는 것이 일일히 `<a>` 태그를 사용하는 것보다 쉬운 감도 있기도 하고, 아래와 같은 코드 블록의 스타일링도 마크다운 형태로 작성해 서드파티에 의존하는게 훨씬 용이하다고 느껴지는 부분도 있다. ```javascript // etern...