웹소켓이지!! 실시간 통신하면 웹소켓이 가장 먼저 떠오른다. 그렇지만 한정된 자원, 특정 상황에서는 대안으로 http long polling기법을 사용할 수 있다. 회사에서 새로 시작한 프로젝트에서 동시성 이슈가 발생했다. 그래서 그에 대한 해결로 웹소켓에 관한 이야기가 나왔고 적용예정이다. 하지만 이번 동시성 이슈가 발생한 페이지는 일반적인 페이지가 아니고 특정 사용자만 접근이 가능한 페이지이다.특정 사용자들끼리 동시에 접속하는 경우도 특별한데 데이터 요청도 빈번한 편은 아니다. 그래서 대안으로 생각해 놓은 게 http long polling이다. 웹소켓을 구축해 놓으면 물론 동시성이슈에 대해 거의 모든 부분을 커버할 수 있지만 초기 개발에 대한 개발자의 리소스가 너무 많이 들어가고 일정이 더 늘어..
크롬 익스텐션? 현재 다니는 회사의 출근과 퇴근을 찍을 수 있고 연차신청도 할 수 있는 사내 툴이 있는데 이 사이트가 자동로그인 없어서 너무 불편했다. 하루에 무조건 2번 이상은 들어가는데 자동로그인 기능이 없다는 거에 불편함을 많이 느껴서 개선의 필요성을 느꼈다. 처음에는 사이트에 자동로그인 버튼이 있었다. 체크해도 자동로그인이 되진 않았지만 앞으로 개발 예정이겠거니 생각했는데 언제부턴가 아이디 저장으로 바뀌었고 그 기능은 동작을 한다. 그래서 자동로그인 기능이 앞으로 개발되지 않을 거라고 판단해서 개발을 마음먹었다. 개발 전 어떤식으로 로그인이 진행이 되는지 네트워크 탭을 확인해 봤는데 아이디랑 비밀번호를 넣으면 HTTP 요청을 보내기 전 암호화가 되어서 보내진다. 암호화하는 알고리즘은 내가 알아..
Next.js Conf에서 발표했듯이, Next.js 14는 우리의 가장 집중적인 릴리즈이에요: Turbopack: App & Pages Router에 대한 5,000개의 테스트가 통과됨 53% 더 빠른 로컬 서버 시작 Fast Refresh와 함께 94% 더 빠른 코드 업데이트 Server Actions (안정화): 점진적으로 향상된 변화 캐싱 및 재검증과 통합 단순한 함수 호출, 또는 폼과 자연스럽게 작동 Partial Prerendering (미리보기): 빠른 초기 정적 응답 + 동적 콘텐츠 스트리밍 Next.js Learn (신규): App Router, 인증, 데이터베이스 등을 교육하는 무료 강좌 Next.js Compiler: Turbocharged Next.js 13부터, 우리는 Next.j..
대부분 리스트를 순회하는 코드를 작성해 보라고 하면 다음과 같이 작성한다. const list = [1, 2, 3]; for (let i = 0; i < list.length; i++) { console.log(list[i]) } // 1 // 2 // 3 // undefined 하지만 ES6이후 새롭게 추가된 문법으로 위와 같은 코드를 조금 더 간결하고 직관적으로 표현할 수 있다. const list = [1, 2, 3]; for (const a of list) console.log(a) // 1 // 2 // 3 // undefined 그렇다면 Set 자료구조도 위와 같은 코드로 순회가 가능할까? const set = new Set([1, 2, 3]); for (const a of set) conso..
고양이를 너무 좋아하는 나는 이번 주말에 Canvas로 언덕을 뛰어다니는 고양이를 구현해보려고 한다. Canvas 초기 세팅 index.html style.css * { outline: 0; margin: 0; padding: 0; } html { width: 100%; height: 100%; } body { width: 100%; height: 100%; background-color: #C2DEDC; // 내가 좋아하는 색상 } canvas { width: 100%; height: 100%; } app.js class App { constructor() { this.canvas = document.createElement("canvas"); this.ctx = this.canvas.getContex..
저번에 웹소켓을 이용하여 React로 채팅을 구현한 경험이 있다. [바로가기] 리액트 웹소켓(Stomp) 이번 토이프로젝트로 MBTI 유형을 선택해서 채팅을 할 수 있는 서비스를 구현했다. 서버는 Java, Spring을 사용했고 클라이언트는 React, Typescript를 사용했다. 처음에 버전이 안 맞아서 조금 헤매었었 1yoouoo.tistory.com 위의 글에선 사용자가 채팅을 이용할 때 네트워크 연결에 성공한 케이스만 다뤘었다. 하지만 언제나 그렇듯 항상 행복한 상황만 나오진 않는다. 실패 케이스도 처리를 해줘야 한다. 그래서 어떠한 방법이 있는지 구글링을 통해 알아냈고, 이를 블로깅 하려고 한다. 어렵지 않은 내용이니 글을 모두 읽으면 구현하는데 어렵지 않을 거라고 믿는다. 우선, 네트워크..
개발을 진행하면서 HTTP 요청을 다루게 되는데, 이때 많은 경우에 반복되는 패턴이나 코드를 발견할 수 있다. 토큰을 헤더에 포함시키거나, 공통된 에러처리 등이 그 예다. 이러한 반복적인 코드를 줄이고, 더 효과적으로 코드를 관리하기 위해 Axios 인스턴스와 인터셉터를 사용하는 방법에 대해 알아보자. Axios 인스턴스 생성 먼저, 반복적으로 사용되는 Axios 설정을 추상화하기 위해 Axios 인스턴스를 생성한다. Axios 인스턴스는 주어진 설정으로 초기화된 새로운 Axios 요청을 만들어낸다. 이렇게 생성된 인스턴스는 설정이 미리 적용되어 있으므로, 각 요청에서 이 설정을 반복하지 않아도 된다. // customApi.ts import axios, { AxiosInstance } from 'axi..
웹에서 애니메이션은 사용자 경험을 향상하고, 사용자의 관심을 끌며, 사용자에게 시각적 피드백을 제공하는 데 사용됩니다. 이런 애니메이션을 생성하는 데는 크게 두 가지 접근 방법이 있다: CSS 애니메이션과 JavaScript 애니메이션이다. 이 두 가지 방법은 각각 장점과 단점이 있으며, 프로젝트 정책에 따라 다른 방법이 더 적합할 수 있다. 그렇다면 두 방법의 차이는 무엇이고 어떤 경우에 어떤 방법을 선택해야 하는지, 그리고 이 모든 것을 이해하기 위해 브라우저의 렌더링 원리부터 간단하게 알아보자. 브라우저 렌더링 원리: Reflow와 Repaint 브라우저가 웹페이지를 렌더링하는 과정은 크게 Layout, Paint, Composite 세 단계로 이루어진다. Layout(Reflow): 브라우저가 요..
