Bundling Fundamentals들어가며 프론트엔드에서 번들링을 이해하는 과정은 웹 성능 최적화를 위해서 꼭 짚고 넘어가야할 부분이다.토스에서 작성해둔 bundling Fundamentals 과정을 통해서 번들링이 '어디서 어떻게' 일어나는지 함께 이해해보자! 번들링이란 번들링은 여러개의 웹 개발에 필요한 리소스 파일들을 하나 또는 몇 개의 파일로 묶는 작업을 얘기하고, 이렇게 묶인 파일Mar 30, 2026·1 min read
JavaScript Error 객체와 Axios Error 객체 정리들어가며 프론트엔드에서 에러 처리를 하다 보면JavaScript 기본 Error와 Axios에서 발생하는 Error를 구분하지 못해헷갈리는 경우가 많다. 이 글에서는 두 에러 객체의 차이와 구조를 정확히 정리하고,서버에서 내려주는 에러 응답이 Axios 에러 객체의 어디에 담기는지까지 설명한다. 1. JavaScript 기본 Error 객체 JavaScript에서 에러는 Error 객체를 기준으로 동작한다. throw new Error('에러 ...Jan 16, 2026·3 min read
Promise 제대로 사용하는 법 — 동기값 반환 때문에 발생하는 .then 오류와 해결들어가며 JavaScript에서 비동기 작업을 다룰 때 Promise를 일관되게 반환하는 것이 중요합니다. 함수가 Promise 대신 동기값(또는 undefined)을 반환하면 호출부에서 .then/.catch를 호출할 수 없어 런타임 오류가 납니다. 문제 사례 (실제 오류) 에러: Uncaught TypeError: User.isDuplicateLogin(...).then is not a function 원인: isDuplicateLogi...Jan 8, 2026·2 min read
ESLint와 Prettier로 일관된 코드 스타일 자동화하기들어가며 여러 명이 함께 개발하다 보면 코드 스타일이 제각각이 되기 쉽다.들여쓰기, 세미콜론, 사용하지 않는 변수 같은 사소한 차이들이 쌓이면 코드는 읽기 어려워지고 유지보수 비용이 커진다. 이 문제를 해결하기 위해 사용하는 도구가 Lint다.이 글에서는 ESLint와 Prettier의 역할, 설치 및 사용법, 자동화 방법까지 정리한다. Lint란 무엇인가 Lint는 코드에 붙은 보푸라기를 제거하는 도구다.코드는 동작하지만 보기 싫고 관리하기...Jan 6, 2026·3 min read
Javascript 동기 비동기Ajax는 개념적으로 비동기 통신을 위한 패러다임을 가리키며, XMLHttpRequest와 fetch는 실제로 이를 구현하는 기술이다. HTTP 통신을 하기위해서 사용되는 브라우저 내장 객체에는 XMLHttpRequest (XHR) 객체가 있습니다. XHR을 사용하면 페이지의 새로고침 없이도 URL에서 데이터를 가져올 수 있습니다. 이를 활용하면 사용자의 작업을 방해하지 않고 페이지의 일부를 업데이트할 수 있다는 장점이 있습니다. 이름에 XM...Dec 17, 2025·2 min read
자료구조, 배열배열이란 인덱스를 가진 자료구조다. 자바스크립트에서는 메모리상 일직선으로 저장되지 않는 특성이 있지만 대체적으로 메모리상에 순차대로 저장된다고 생각하면 된다. 자바스크립트는 타입이 다른 메모리를 한 배열에 저장할 수 있지만 추천하진 않는다. 데이터타입이 지정된 배열을 쓰게되면 그 외의 데이터타입을 넣게되면 에러가 발생한다. → 타입스크립트 배열 생성 방법 let array = new Array(2) < 사이즈를 전달할수 있음 let ar...Nov 19, 2025·5 min read
이제 실전이다! React + Next.js 환경에서 WebSocket으로 실시간 채팅 구현해보기-(2)WebSocket을 구현하기 위해 도움을 주는 친구들, SocketJS 와 STOMP ! 기본적으로 WebSocket API 는 아주 간단한 기능들만을 제공한다.예를들어, 해당 메시지가 어떤 요청인지, 어떤 포맷으로 오는지, 메시지 통신 과정을 어떻게 처리해야 하는지 정해져 있지 않다는 것이다.이것을 일일이 구현하게 되면 굉장히 까다로워지고 코드의 복잡성이 증가할 수 있다.따라서 SockJS 라이브러리를 추가적으로 사용하고,STOMP 라는 프로...Feb 22, 2024·3 min read
