회사 서비스에서 리뷰어 프로필 이미지를 바꿔도 이전 이미지가 계속 보이는 문제가 있었다. 이미지 URL에 ?v= 파라미터를 붙여서 캐시를 피하도록 만들어 두었는데, 왜 동작하지 않았는지 정리해 둔다. 문제 상황 프로필 편집 화면에서 이미지를 변경하면 업로드는 성공한다 (API 응답 204) 그런데 화면에는 변경 전 이미지가 그대로 표시된다...

컴파일러 기본 정리 컴파일러(Compiler)는 사람이 작성한 소스 코드를 컴퓨터가 이해할 수 있는 형태로 변환해주는 프로그램이다. 개발자는 Java, C, TypeScript 같은 언어로 코드를 작성하지만, 컴퓨터는 이 코드를 그대로 이해하지 못한다. 그래서 컴파일러가 코드를 분석하고 실행 가능한 형태 또는 다른 언어의 코드로 변환한다. 1. ...

패키지 관리자 기본 정리 패키지 관리자(Package Manager)는 프로젝트에서 사용하는 라이브러리와 도구를 설치, 삭제, 업데이트, 관리해주는 프로그램이다. 개발을 하다 보면 외부 라이브러리를 자주 사용하게 되는데, 패키지 관리자를 사용하면 필요한 의존성을 쉽게 관리할 수 있다. 1. 패키지란? 패키지는 재사용할 수 있도록 배포되는 코드 ...

프론트엔드 라이브러리 기본 정리 프론트엔드 프로젝트에서는 화면을 만드는 코드뿐만 아니라 스타일 관리, 코드 품질 관리, 컴포넌트 문서화, 테스트를 위한 도구도 함께 사용한다. 이번 글에서는 실무 프론트엔드 프로젝트에서 자주 볼 수 있는 vanilla-extract, Biome, Storybook, Vitest에 대해 간단히 정리한다. 1. van...

React Hooks 기본 정리 React Hooks는 함수형 컴포넌트에서 상태 관리, 값 계산, 생명주기 처리 같은 기능을 사용할 수 있게 해주는 문법이다. 처음 Hooks를 공부할 때 useState, useMemo, useEffect가 비슷해 보일 수 있다. 특히 useMemo와 useEffect는 둘 다 두 번째 인자로 [] 배열을 받기 때...

React 기본 정리 React는 사용자 인터페이스(UI)를 만들기 위한 JavaScript 라이브러리이다. 화면을 여러 개의 컴포넌트로 나누어 관리할 수 있어 재사용성과 유지보수성이 좋다. 1. React의 핵심 개념 React에서 중요한 개념은 다음과 같다. Component: 화면을 구성하는 독립적인 UI 조각 JSX: JavaS...

JavaScript 기본 정리 JavaScript는 웹 페이지에 동작을 추가하는 프로그래밍 언어이다. HTML이 구조, CSS가 디자인을 담당한다면 JavaScript는 클릭 이벤트, 데이터 처리, 화면 변경 같은 기능을 담당한다. 1. JavaScript 사용 방법 HTML 파일에서 JavaScript 파일을 연결할 수 있다. <scri...

CSS 기본 정리 CSS(Cascading Style Sheets)는 HTML 요소에 디자인과 레이아웃을 적용하는 스타일 언어이다. HTML이 웹 페이지의 구조를 만든다면, CSS는 색상, 크기, 간격, 배치 등을 담당한다. 1. CSS 작성 방법 CSS는 HTML 안에 직접 작성할 수도 있고, 별도의 .css 파일로 분리해서 작성할 수도 있다....

HTML 기본 정리 HTML(HyperText Markup Language)은 웹 페이지의 구조를 만드는 마크업 언어이다. 브라우저는 HTML 문서를 읽고 제목, 문단, 이미지, 링크, 버튼 같은 요소를 화면에 표시한다. 쉽게 말하면 HTML은 웹 페이지의 뼈대 역할을 한다. 1. HTML 문서 기본 구조 HTML 파일은 보통 아래와 같은 형태...

회사 백엔드(Spring Boot)에는 리뷰가 등록되면 사내 Slack 채널로 알림을 보내는 기능이 있다. 이 알림은 Slack Incoming Webhook으로 보내고 있었는데, 보안상의 이유로 Webhook을 정리하게 되면서 사내 메시지 큐 서비스를 거쳐 Slack API로 보내는 방식으로 옮겼다. 코드 변경은 크지 않았다. 그런데 이 변경은 m...