서론 서비스가 성장하면서 서버 한 대로는 감당이 안 되는 시점이 온다. 드디어 그 시점을 맞이했고, NCP(Naver Cloud Platform)에서 서버를 1대에서 2대로 늘리고 로드밸런서를 붙이고, 오토스케일링까지 적용하는 작업을 진행했다. 그런데… 예상치 못한 곳에서 서비스가 완전히 멈춰버렸다. 기존 인프라 구조 먼저 우리 서비스의 구...

서론 React 프로젝트에서 모달을 구현하다가 이상한 현상을 발견했습니다. 분명 CSS로 fixed 포지션과 flexbox를 사용해 중앙 정렬했는데, 모달이 나타날 때 화면 중앙이 아닌 다른 위치에서 시작해 중앙으로 이동하는 듯한 깜빡임이 발생했습니다. 처음엔 단순한 CSS 문제라고 생각했지만, 알고 보니 React의 렌더링 순서와 DOM 트리 구...

서론 JavaScript에서 HTTP 요청을 보내는 방법은 다양하지만, 대부분의 개발자는 두 가지를 많이 사용합니다: fetch: 브라우저에 기본 내장된 표준 API axios: 풍부한 기능을 갖춘 오픈소스 HTTP 클라이언트 라이브러리 그렇다면 이 둘의 차이점은 무엇이고, 언제 어떤 것을 사용하는 것이 적합할까요? 이번 글에서는 f...

서론 Next.js로 프론트엔드 프로젝트를 진행하면서 가장 먼저 마주치는 선택지 중 하나는 스타일링 방식입니다. 우리는 보통 다음 중 하나를 선택하게 됩니다. Styled Components: 런타임 기반 CSS-in-JS Sass/SCSS: 전통적인 CSS 확장 문법 Tailwind CSS: Utility-first CSS 프레임워크...

서론 진행하던 프로젝트에서 “분석 시작” 기능을 버튼으로 만들었는데, 예상치 못한 문제가 생겼습니다. <button> 태그로 구성한 이 버튼을 마우스 휠 클릭(가운데 클릭)으로 눌렀을 때, 새 탭에서 실행되지 않는 현상이 있었던 겁니다. 사용자 입장에서는 “링크처럼 생긴 요소”를 가운데 클릭하면 새 탭에서 열리길 기대하는 경우가 많습니다...

서론 Jekyll 블로그를 운영하다 보면 Markdown을 사용해 포스트를 작성하는 일이 매우 잦습니다. Markdown은 간결하고 직관적인 문법으로 콘텐츠를 손쉽게 구성할 수 있게 해주며, 특히 개발자나 기술 블로거에게 적합한 도구입니다. 이 문서는 Jekyll 블로그에서 활용할 수 있는 다양한 Markdown 문법들을 예시와 함께 정리한 것으로...