https://bluemiv.github.io/ 관심사와 경험, 문제를 해결하며 배운 내용을 기록합니다. ko-KR Sun, 09 Aug 2026 10:50:00 GMT https://bluemiv.github.io/articles/react-useeffect-vs-uselayouteffect/ https://bluemiv.github.io/articles/react-useeffect-vs-uselayouteffect/ React useEffect와 useLayoutEffect 차이를 render, commit, paint 흐름으로 설명합니다. DOM 측정, 화면 깜빡임, SSR 주의사항과 선택 기준을 예제로 정리합니다. Thu, 09 Jan 2025 13:28:36 GMT 2026-08-09T10:50:00.000Z frontend react useEffect useLayoutEffect https://bluemiv.github.io/articles/build-github-pages-blog-with-nextjs/ https://bluemiv.github.io/articles/build-github-pages-blog-with-nextjs/ Next.js 16의 Static Export로 GitHub Pages에 정적 블로그를 만드는 과정을 정리했어요. 이 글에서는 MDX 기반 글 작성과 코드 하이라이트, sitemap.xml, robots.txt를 활용한 SEO 설정까지 다루고 있어요. Tue, 07 Jan 2025 11:13:19 GMT 2026-08-09T02:59:07.000Z frontend nextjs react GitHub Pages Static Export MDX SEO https://bluemiv.github.io/articles/what-is-kotlin/ https://bluemiv.github.io/articles/what-is-kotlin/ Kotlin이 어떤 언어인지, 어디에 사용되는지, Java와 비교했을 때 기본 문법은 어떻게 다른지 정리합니다. Sun, 28 Dec 2025 01:37:24 GMT 2025-12-28T01:37:24.000Z backend kotlin java JVM https://bluemiv.github.io/articles/plain-old-java-object/ https://bluemiv.github.io/articles/plain-old-java-object/ Java의 POJO 개념과 왜 POJO를 사용해야 하는지, Spring에서 POJO가 어떻게 활용되는지 설명합니다. Fri, 26 Dec 2025 00:15:42 GMT 2025-12-26T00:15:42.000Z backend java spring POJO OOP https://bluemiv.github.io/articles/spring-requestparam-vs-pathvariable/ https://bluemiv.github.io/articles/spring-requestparam-vs-pathvariable/ Spring MVC에서 URL의 query string과 경로 변수를 받는 방법, 그리고 두 어노테이션을 구분하는 기준을 알아봅니다. Thu, 04 Sep 2025 11:19:05 GMT 2025-09-04T11:19:05.000Z backend spring java Spring Boot REST API Request Parameter Path Variable https://bluemiv.github.io/articles/spring-http-methods-request-mapping/ https://bluemiv.github.io/articles/spring-http-methods-request-mapping/ REST API에서 GET, POST, PUT, PATCH, DELETE를 구분하는 기준과 Spring의 매핑 어노테이션 사용법을 알아봅니다. Sun, 31 Aug 2025 19:33:46 GMT 2025-08-31T19:33:46.000Z backend spring java Spring Boot HTTP REST API Request Mapping https://bluemiv.github.io/articles/spring-restcontroller-basics/ https://bluemiv.github.io/articles/spring-restcontroller-basics/ @RestController가 필요한 이유와 REST API 컨트롤러를 만드는 기본 구조를 입문자 관점에서 알아봅니다. Sat, 30 Aug 2025 03:05:18 GMT 2025-08-30T03:05:18.000Z backend spring java Spring Boot REST API REST Controller https://bluemiv.github.io/articles/spring-bean-scope/ https://bluemiv.github.io/articles/spring-bean-scope/ Spring Bean Scope의 의미와 Singleton, Prototype, 웹 Scope의 차이, 실무에서 선택하는 기준을 알아봅니다. Wed, 27 Aug 2025 08:58:52 GMT 2025-08-27T08:58:52.000Z backend spring java Spring Boot Bean Scope Singleton Prototype https://bluemiv.github.io/articles/spring-bean-lifecycle/ https://bluemiv.github.io/articles/spring-bean-lifecycle/ Spring Bean이 생성되고 초기화되며 종료될 때 정리되는 흐름과 생명주기 콜백 사용법을 알아봅니다. Sun, 24 Aug 2025 23:42:37 GMT 2025-08-24T23:42:37.000Z backend spring java Spring Boot Bean Lifecycle https://bluemiv.github.io/articles/spring-configuration-class/ https://bluemiv.github.io/articles/spring-configuration-class/ @Configuration이 필요한 이유와 @Bean을 조합해 외부 객체와 설정 코드를 관리하는 방법을 알아봅니다. Fri, 22 Aug 2025 13:31:14 GMT 2025-08-22T13:31:14.000Z backend spring java Spring Boot Configuration https://bluemiv.github.io/articles/spring-autowired-dependency-injection/ https://bluemiv.github.io/articles/spring-autowired-dependency-injection/ @Autowired를 사용한 의존성 주입과 생성자, 필드, setter 주입 방법을 비교합니다. Wed, 20 Aug 2025 06:16:29 GMT 2025-08-20T06:16:29.000Z backend spring java Spring Boot @Autowired Dependency Injection https://bluemiv.github.io/articles/spring-bean-and-component/ https://bluemiv.github.io/articles/spring-bean-and-component/ Spring의 @Bean과 @Component 어노테이션의 차이점과 사용법을 알아봅니다. Sat, 16 Aug 2025 18:49:56 GMT 2025-08-16T18:49:56.000Z backend spring java Spring Boot Bean Component https://bluemiv.github.io/articles/spring-ioc-and-dependency-injection/ https://bluemiv.github.io/articles/spring-ioc-and-dependency-injection/ Spring의 핵심 원리인 IoC(Inversion of Control)와 DI(Dependency Injection)를 이해합니다. Fri, 15 Aug 2025 02:27:41 GMT 2025-08-15T02:27:41.000Z backend spring java Spring Boot IoC Dependency Injection https://bluemiv.github.io/articles/spring-boot-application-configuration/ https://bluemiv.github.io/articles/spring-boot-application-configuration/ Spring Boot의 환경 설정 파일인 application.yml과 application.properties 사용법을 알아봅니다. Tue, 12 Aug 2025 09:55:03 GMT 2025-08-12T09:55:03.000Z backend spring java Spring Boot Configuration YAML https://bluemiv.github.io/articles/spring-boot-project-structure/ https://bluemiv.github.io/articles/spring-boot-project-structure/ Spring Boot 프로젝트의 폴더 구조와 주요 파일들의 역할을 이해합니다. Sat, 09 Aug 2025 21:38:25 GMT 2025-08-09T21:38:25.000Z backend spring java Spring Boot Project Structure https://bluemiv.github.io/articles/create-first-spring-boot-project/ https://bluemiv.github.io/articles/create-first-spring-boot-project/ Spring Initializr를 사용하여 첫 번째 Spring Boot 프로젝트를 생성하는 방법에 대해 설명합니다. 그리고 간단한 API도 생성합니다. Thu, 07 Aug 2025 12:12:48 GMT 2025-08-07T12:12:48.000Z backend spring java Spring Boot Spring Initializr https://bluemiv.github.io/articles/spring-boot-development-environment/ https://bluemiv.github.io/articles/spring-boot-development-environment/ Spring Boot 개발을 위한 JDK, Gradle/Maven 설치 및 환경 설정 방법에 대해 설명합니다. Tue, 05 Aug 2025 00:45:32 GMT 2025-08-05T00:45:32.000Z backend spring java Spring Boot Gradle Maven Setup https://bluemiv.github.io/articles/spring-vs-spring-boot/ https://bluemiv.github.io/articles/spring-vs-spring-boot/ Spring Framework와 Spring Boot의 차이점에 대해 설명하고, 왜 Spring Boot를 사용하는게 좋은지 설명합니다. Sat, 02 Aug 2025 05:23:17 GMT 2025-08-02T05:23:17.000Z backend spring java Spring Boot https://bluemiv.github.io/articles/getting-started-with-bun/ https://bluemiv.github.io/articles/getting-started-with-bun/ 런타임 실행이 가능하고, npm, yarn 과 같이 패키지 매니저 역할도 하며, 번들러 & 트랜스파일러 역할도 하는 bun에 대해서 설명하고, bun을 사용하여 React 프로젝트를 생성하는 방법에 대해 설명합니다. Fri, 01 Aug 2025 05:22:57 GMT 2025-08-01T05:22:57.000Z frontend tooling javascript Bun https://bluemiv.github.io/articles/cloud-firestore-collections-and-documents/ https://bluemiv.github.io/articles/cloud-firestore-collections-and-documents/ Firebase의 Cloud Firestore에서 사용되는 개념인 컬렉션(collection)과 문서(document)에 대해 설명합니다. 그리고, flutter에서 어떻게 사용하는지 예제를 통해 알아봅니다. Thu, 12 Jun 2025 02:47:31 GMT 2025-06-12T02:47:31.000Z backend firebase Flutter Dart Collection Document https://bluemiv.github.io/articles/html-semantic-elements/ https://bluemiv.github.io/articles/html-semantic-elements/ 시맨틱(semantic) 태그는 HTML5에 등장한 개념입니다. 문서 구조에 의미를 부여하여 사람뿐 아니라 검색 엔진 등 기계(robot)이 컨텐츠를 이해하기 쉽도록 도와주는 역할을 합니다. 본 글에서는 시맨틱 태그의 종류를 설명하고, 왜 사용해야 하는지 설명합니다. Mon, 02 Jun 2025 00:53:29 GMT 2025-06-02T00:53:29.000Z frontend html Semantic HTML https://bluemiv.github.io/articles/javascript-event-loop/ https://bluemiv.github.io/articles/javascript-event-loop/ JavaScript는 비동기 작업을 효율적으로 처리하기 위해 이벤트 루프(Event Loop) 라는 개념을 사용합니다. 본 글에서는 이벤트 루프의 동작 원리에 대해 설명하고 코드를 예시로 어떻게 동작하는지 살펴봅니다. Sun, 01 Jun 2025 14:11:18 GMT 2025-06-01T14:11:18.000Z frontend javascript Event Loop Macrotask Microtask Queue Callback Queue Task Queue https://bluemiv.github.io/articles/react-vitest-unit-testing/ https://bluemiv.github.io/articles/react-vitest-unit-testing/ Vitest를 사용하여, Vite 기반의 React 프로젝트에서 unit test 환경을 구축하는 방법에 대해 소개합니다. 그리고, CI 단계에서 자동화 테스트를 위해, Github Actions과 연동하는 방법도 같이 소개합니다. Fri, 30 May 2025 12:20:33 GMT 2025-05-30T12:20:33.000Z frontend react tooling Vite Vitest Unit Testing GitHub Actions https://bluemiv.github.io/articles/nextjs-utterances-comments-theme/ https://bluemiv.github.io/articles/nextjs-utterances-comments-theme/ GitHub Issues 기반의 댓글 시스템인 utterances를 Next.js에 적용하여, 자신의 블로그에 댓글 기능을 추가하는 방법에 대해 소개합니다. 그리고 블로그 테마 변환에 따른 댓글 UI도 같이 변환 되도록 하는 방법에 대해서도 같이 설명합니다. Thu, 29 May 2025 13:17:54 GMT 2025-05-29T13:17:54.000Z frontend nextjs react Blog utterances https://bluemiv.github.io/articles/react-wordle-troubleshooting/ https://bluemiv.github.io/articles/react-wordle-troubleshooting/ React로 Wordle 게임을 만들어 보며, 겪었던 문제와 고민에 대해 설명합니다. Thu, 22 May 2025 14:35:49 GMT 2025-05-22T14:35:49.000Z frontend react Wordle https://bluemiv.github.io/articles/binary-search-algorithm/ https://bluemiv.github.io/articles/binary-search-algorithm/ 이진 탐색(Binary Search)은 정렬된 배열에서 원하는 값을 빠르게 찾는 알고리즘입니다. 본 글에서는 이진 탐색에 대해 설명하고 예제를 통해 실제로 어떻게 문제를 해결하는지 설명합니다. Fri, 09 May 2025 13:48:26 GMT 2025-05-09T13:48:26.000Z computer-science algorithm Binary Search Python https://bluemiv.github.io/articles/hashmap-frequency-counting/ https://bluemiv.github.io/articles/hashmap-frequency-counting/ 해시맵은 키와 값으로 이루어진 데이터 구조로, 해시맵을 이용하여 빈도 계산하는 알고리즘에 대해 설명합니다. 또한, 예제를 통해 실제로 어떻게 문제를 해결하는지 같이 소개합니다. Fri, 09 May 2025 12:17:09 GMT 2025-05-09T12:17:09.000Z computer-science algorithm Hash Hash Map Python https://bluemiv.github.io/articles/sliding-window-algorithm/ https://bluemiv.github.io/articles/sliding-window-algorithm/ 슬라이딩 윈도우(Sliding Window)는 배열이나 문자열처럼 선형 구조에서 연속된 구간(윈도우)을 효율적으로 탐색할 때 쓰는 기법입니다. 투 포인터와 비슷하지만 약간의 차이가 있고, 본 글에서는 슬라이딩 윈도우에 대해 설명합니다. Tue, 06 May 2025 12:44:10 GMT 2025-05-08T14:09:17.000Z computer-science algorithm Sliding Window Python 백준 https://bluemiv.github.io/articles/two-pointers-algorithm/ https://bluemiv.github.io/articles/two-pointers-algorithm/ 투 포인터는 배열이나 문자열처럼 선형 구조에서 2개의 인덱스(포인터)를 사용해 원하는 조건을 만족하는 해를 효율적으로 찾는 기법입니다. 본 글에서는 투 포인터에 대해 설명하고 예제 문제도 같이 풀이합니다. Sat, 01 Mar 2025 03:11:48 GMT 2025-05-08T14:09:17.000Z computer-science algorithm Two Pointers Python 프로그래머스 https://bluemiv.github.io/articles/nextjs-google-analytics-4/ https://bluemiv.github.io/articles/nextjs-google-analytics-4/ Next.js 15에서 Google Analytics 4 설정하는 방법을 소개합니다. 또한, nextjs의 Script 컴포넌트에 대해 자세하게 설명합니다. Fri, 02 May 2025 03:47:31 GMT 2025-05-02T03:47:31.000Z frontend nextjs react Blog GA4 Script https://bluemiv.github.io/notes/database-index-basics/ https://bluemiv.github.io/notes/database-index-basics/ 데이터베이스 인덱스의 개념과 종류, 장단점을 짧게 정리합니다. Tue, 29 Apr 2025 10:55:09 GMT 2025-04-29T10:55:09.000Z notes Database Index https://bluemiv.github.io/notes/nextjs-environment-variables/ https://bluemiv.github.io/notes/nextjs-environment-variables/ 환경 변수의 개념과 Next.js에서 클라이언트와 서버 변수를 구분해 선언하는 방법을 정리합니다. Mon, 28 Apr 2025 12:32:48 GMT 2025-04-28T12:32:48.000Z notes Next.js Environment Variables Frontend https://bluemiv.github.io/articles/prettier-plugin-sort-imports/ https://bluemiv.github.io/articles/prettier-plugin-sort-imports/ React 프로젝트에서 import 문들의 순서를 자동으로 정리할 수 있도록 도와주는 @trivago/prettier-plugin-sort-imports 플러그인 적용하는 방법을 소개하고, 사용벙을 설명합니다. Thu, 24 Apr 2025 12:13:22 GMT 2025-04-24T12:13:22.000Z frontend tooling typescript Prettier ESLint Import Sorting trivago https://bluemiv.github.io/articles/add-swagger-to-gin/ https://bluemiv.github.io/articles/add-swagger-to-gin/ Go 언어의 웹 서버 프레임워크인 Gin 프레임워크에서 Swagger를 적용하고, 활용하여 REST API 문서를 자동으로 생성하고 관리하는 방법에 대해 설명합니다. Wed, 23 Apr 2025 11:34:09 GMT 2025-04-23T11:34:09.000Z backend go Gin Swagger API REST API API Documentation https://bluemiv.github.io/articles/turborepo-react-storybook/ https://bluemiv.github.io/articles/turborepo-react-storybook/ Turborepo를 사용하는 Monorepo 프로젝트에서, React 패키지에 Storybook을 설정하는 방법을 설명합니다. 추가적으로 tailwindcss를 적용하는 방법도 설명합니다. Sun, 20 Apr 2025 12:31:48 GMT 2025-04-20T12:31:48.000Z frontend react tooling Turborepo Storybook Monorepo Tailwind CSS https://bluemiv.github.io/articles/nextjs-pwa-blog-caching/ https://bluemiv.github.io/articles/nextjs-pwa-blog-caching/ PWA는 웹 애플리케이션을 네이티브 앱처럼 동작하게 만드는 기술입니다. 본 글에서는 Next.js 15에서 Progressive Web App(PWA)을 설정하는 방법을 설명합니다. Thu, 16 Jan 2025 10:47:29 GMT 2025-04-15T13:13:07.000Z frontend nextjs react PWA Service Worker https://bluemiv.github.io/articles/getting-started-with-gin-web-server/ https://bluemiv.github.io/articles/getting-started-with-gin-web-server/ 성능이 뛰어나면서도 라우팅, 미들웨어, JSON Serialization, HTML 렌더링, 요청 바인딩, 유효성 검사 등 웹 개발에 필요한 다양한 기능을 제공 Go의 웹 프레임워크 Gin을 소개합니다. Tue, 08 Apr 2025 14:13:25 GMT 2025-04-08T14:13:25.000Z backend go Gin API Web Server https://bluemiv.github.io/articles/go-basic-syntax-types-variables-operators/ https://bluemiv.github.io/articles/go-basic-syntax-types-variables-operators/ Go 언어의 기본 문법과 타입, 변수 선언 방식, 연산자에 대해 소개합니다. Mon, 07 Apr 2025 14:58:44 GMT 2025-04-07T14:58:44.000Z backend go https://bluemiv.github.io/articles/why-go-compiles-fast/ https://bluemiv.github.io/articles/why-go-compiles-fast/ 구글에서 개발한 Go 언어는 상대적으로 다른 언어에 비해 컴파일 속도가 빠릅니다. 이 글에서는 Go의 컴파일 속도가 빠른 이유들을 기술적인 측면에 대해 소개합니다. Mon, 07 Apr 2025 13:21:14 GMT 2025-04-07T14:33:18.000Z backend go Compiler https://bluemiv.github.io/articles/install-go-on-macos-with-homebrew/ https://bluemiv.github.io/articles/install-go-on-macos-with-homebrew/ 구글에서 개발한 Go 언어에 대해 소개하고, Go 언어의 장단점에 대해 구체적인 예제와 함께 살펴봅니다. 그리고, MacOSX 환경에서 brew를 사용하여 설치하는 방법을 소개합니다. Mon, 07 Apr 2025 12:41:30 GMT 2025-04-07T13:48:30.000Z backend go macOS Homebrew https://bluemiv.github.io/articles/typescript-type-naming-conventions/ https://bluemiv.github.io/articles/typescript-type-naming-conventions/ Frontend 개발자로서 typescript를 사용하면서 타입을 정의할 때, 어떤 규칙을 사용하고 있는지에 대해 작성한 글입니다. 속해있는 팀과 개인 취향에 따라 다를 수 있으니 참고만 해주시면 좋겠습니다. Tue, 11 Feb 2025 11:19:22 GMT 2025-02-11T11:19:22.000Z frontend typescript react Type Naming Conventions Interface https://bluemiv.github.io/articles/browser-rendering-reflow-repaint/ https://bluemiv.github.io/articles/browser-rendering-reflow-repaint/ HTML, CSS, JavaScript로 만들어진 웹 페이지가 브라우저에서 어떻게 화면에 그려지는지 그 과정을 상세히 설명합니다. Sun, 02 Feb 2025 09:38:11 GMT 2025-02-02T09:38:11.000Z frontend browser Rendering Rendering Pipeline HTML CSS JavaScript Repaint Reflow https://bluemiv.github.io/articles/tailwindcss-vs-styled-components/ https://bluemiv.github.io/articles/tailwindcss-vs-styled-components/ 최근에는 사용할 수 있는 스타일링 도구가 많습니다. 본 글에서는 보편적으로 사용하는 Tailwind CSS와 Styled-components의 특징, 장단점, 그리고 프로젝트 상황에 따른 선택 기준을 설명합니다. Wed, 29 Jan 2025 11:12:11 GMT 2025-01-29T11:12:11.000Z frontend react styling CSS-in-JS Tailwind CSS styled-components https://bluemiv.github.io/articles/nextjs-dark-light-theme-without-flicker/ https://bluemiv.github.io/articles/nextjs-dark-light-theme-without-flicker/ 최근 웹 사이트에서 거의 필수적으로 다크 테마를 구현합니다. 본 글에서는 Next.js에서 화면 깜빡임 없이 다크/라이트 테마를 구현하는 방법에 대해 설명합니다. Mon, 13 Jan 2025 12:55:14 GMT 2025-01-13T12:55:14.000Z frontend nextjs react Theme Tailwind CSS https://bluemiv.github.io/articles/react-feature-sliced-design/ https://bluemiv.github.io/articles/react-feature-sliced-design/ 프로젝트를 시작할 때마다 항상 폴더 구조를 고민합니다. 프론트 영역은 특히 빠르게 변화하다보니 백엔드 영역과 다르게 보편적으로 사용되는 폴더 구조가 없습니다. 여러가지 프로젝트 구조가 있지만, 본 글에서는 FSD(Feature-Sliced Design)라는 아키텍처 패턴을 소개합니다. Fri, 10 Jan 2025 12:44:28 GMT 2025-01-10T12:44:28.000Z frontend react Feature-Sliced Design