관심사와 경험, 문제를 해결하며 배운 내용을 기록합니다. https://bluemiv.github.io/ 2026-08-09T11:25:00.000Z Bluemiv https://bluemiv.github.io/articles/react-useeffect-vs-uselayouteffect/ 2025-01-09T13:28:36.000Z 2026-08-09T11:25:00.000Z Bluemiv

React의 render, commit, browser paint 흐름을 기준으로 useEffect와 useLayoutEffect의 차이를 설명합니다. DOM 측정, 화면 깜빡임, SSR 사례를 통해 어떤 Hook을 선택해야 하는지 정리합니다.

https://bluemiv.github.io/articles/build-github-pages-blog-with-nextjs/ 2025-01-07T11:13:19.000Z 2026-08-09T02:59:07.000Z Bluemiv

Next.js 16의 Static Export로 GitHub Pages에 정적 블로그를 만드는 과정을 정리했어요. 이 글에서는 MDX 기반 글 작성과 코드 하이라이트, sitemap.xml, robots.txt를 활용한 SEO 설정까지 다루고 있어요.

https://bluemiv.github.io/articles/what-is-kotlin/ 2025-12-28T01:37:24.000Z 2025-12-28T01:37:24.000Z Bluemiv

Kotlin이 어떤 언어인지, 어디에 사용되는지, Java와 비교했을 때 기본 문법은 어떻게 다른지 정리합니다.

https://bluemiv.github.io/articles/plain-old-java-object/ 2025-12-26T00:15:42.000Z 2025-12-26T00:15:42.000Z Bluemiv

Java의 POJO 개념과 왜 POJO를 사용해야 하는지, Spring에서 POJO가 어떻게 활용되는지 설명합니다.

https://bluemiv.github.io/articles/spring-requestparam-vs-pathvariable/ 2025-09-04T11:19:05.000Z 2025-09-04T11:19:05.000Z Bluemiv

Spring MVC에서 URL의 query string과 경로 변수를 받는 방법, 그리고 두 어노테이션을 구분하는 기준을 알아봅니다.

https://bluemiv.github.io/articles/spring-http-methods-request-mapping/ 2025-08-31T19:33:46.000Z 2025-08-31T19:33:46.000Z Bluemiv

REST API에서 GET, POST, PUT, PATCH, DELETE를 구분하는 기준과 Spring의 매핑 어노테이션 사용법을 알아봅니다.

https://bluemiv.github.io/articles/spring-restcontroller-basics/ 2025-08-30T03:05:18.000Z 2025-08-30T03:05:18.000Z Bluemiv

@RestController가 필요한 이유와 REST API 컨트롤러를 만드는 기본 구조를 입문자 관점에서 알아봅니다.

https://bluemiv.github.io/articles/spring-bean-scope/ 2025-08-27T08:58:52.000Z 2025-08-27T08:58:52.000Z Bluemiv

Spring Bean Scope의 의미와 Singleton, Prototype, 웹 Scope의 차이, 실무에서 선택하는 기준을 알아봅니다.

https://bluemiv.github.io/articles/spring-bean-lifecycle/ 2025-08-24T23:42:37.000Z 2025-08-24T23:42:37.000Z Bluemiv

Spring Bean이 생성되고 초기화되며 종료될 때 정리되는 흐름과 생명주기 콜백 사용법을 알아봅니다.

https://bluemiv.github.io/articles/spring-configuration-class/ 2025-08-22T13:31:14.000Z 2025-08-22T13:31:14.000Z Bluemiv

@Configuration이 필요한 이유와 @Bean을 조합해 외부 객체와 설정 코드를 관리하는 방법을 알아봅니다.

https://bluemiv.github.io/articles/spring-autowired-dependency-injection/ 2025-08-20T06:16:29.000Z 2025-08-20T06:16:29.000Z Bluemiv

@Autowired를 사용한 의존성 주입과 생성자, 필드, setter 주입 방법을 비교합니다.

https://bluemiv.github.io/articles/spring-bean-and-component/ 2025-08-16T18:49:56.000Z 2025-08-16T18:49:56.000Z Bluemiv

Spring의 @Bean과 @Component 어노테이션의 차이점과 사용법을 알아봅니다.

https://bluemiv.github.io/articles/spring-ioc-and-dependency-injection/ 2025-08-15T02:27:41.000Z 2025-08-15T02:27:41.000Z Bluemiv

Spring의 핵심 원리인 IoC(Inversion of Control)와 DI(Dependency Injection)를 이해합니다.

https://bluemiv.github.io/articles/spring-boot-application-configuration/ 2025-08-12T09:55:03.000Z 2025-08-12T09:55:03.000Z Bluemiv

Spring Boot의 환경 설정 파일인 application.yml과 application.properties 사용법을 알아봅니다.

https://bluemiv.github.io/articles/spring-boot-project-structure/ 2025-08-09T21:38:25.000Z 2025-08-09T21:38:25.000Z Bluemiv

Spring Boot 프로젝트의 폴더 구조와 주요 파일들의 역할을 이해합니다.

https://bluemiv.github.io/articles/create-first-spring-boot-project/ 2025-08-07T12:12:48.000Z 2025-08-07T12:12:48.000Z Bluemiv

Spring Initializr를 사용하여 첫 번째 Spring Boot 프로젝트를 생성하는 방법에 대해 설명합니다. 그리고 간단한 API도 생성합니다.

https://bluemiv.github.io/articles/spring-boot-development-environment/ 2025-08-05T00:45:32.000Z 2025-08-05T00:45:32.000Z Bluemiv

Spring Boot 개발을 위한 JDK, Gradle/Maven 설치 및 환경 설정 방법에 대해 설명합니다.

https://bluemiv.github.io/articles/spring-vs-spring-boot/ 2025-08-02T05:23:17.000Z 2025-08-02T05:23:17.000Z Bluemiv

Spring Framework와 Spring Boot의 차이점에 대해 설명하고, 왜 Spring Boot를 사용하는게 좋은지 설명합니다.

https://bluemiv.github.io/articles/getting-started-with-bun/ 2025-08-01T05:22:57.000Z 2025-08-01T05:22:57.000Z Bluemiv

런타임 실행이 가능하고, npm, yarn 과 같이 패키지 매니저 역할도 하며, 번들러 & 트랜스파일러 역할도 하는 bun에 대해서 설명하고, bun을 사용하여 React 프로젝트를 생성하는 방법에 대해 설명합니다.

https://bluemiv.github.io/articles/cloud-firestore-collections-and-documents/ 2025-06-12T02:47:31.000Z 2025-06-12T02:47:31.000Z Bluemiv

Firebase의 Cloud Firestore에서 사용되는 개념인 컬렉션(collection)과 문서(document)에 대해 설명합니다. 그리고, flutter에서 어떻게 사용하는지 예제를 통해 알아봅니다.

https://bluemiv.github.io/articles/html-semantic-elements/ 2025-06-02T00:53:29.000Z 2025-06-02T00:53:29.000Z Bluemiv

시맨틱(semantic) 태그는 HTML5에 등장한 개념입니다. 문서 구조에 의미를 부여하여 사람뿐 아니라 검색 엔진 등 기계(robot)이 컨텐츠를 이해하기 쉽도록 도와주는 역할을 합니다. 본 글에서는 시맨틱 태그의 종류를 설명하고, 왜 사용해야 하는지 설명합니다.

https://bluemiv.github.io/articles/javascript-event-loop/ 2025-06-01T14:11:18.000Z 2025-06-01T14:11:18.000Z Bluemiv

JavaScript는 비동기 작업을 효율적으로 처리하기 위해 이벤트 루프(Event Loop) 라는 개념을 사용합니다. 본 글에서는 이벤트 루프의 동작 원리에 대해 설명하고 코드를 예시로 어떻게 동작하는지 살펴봅니다.

https://bluemiv.github.io/articles/react-vitest-unit-testing/ 2025-05-30T12:20:33.000Z 2025-05-30T12:20:33.000Z Bluemiv

Vitest를 사용하여, Vite 기반의 React 프로젝트에서 unit test 환경을 구축하는 방법에 대해 소개합니다. 그리고, CI 단계에서 자동화 테스트를 위해, Github Actions과 연동하는 방법도 같이 소개합니다.

https://bluemiv.github.io/articles/nextjs-utterances-comments-theme/ 2025-05-29T13:17:54.000Z 2025-05-29T13:17:54.000Z Bluemiv

GitHub Issues 기반의 댓글 시스템인 utterances를 Next.js에 적용하여, 자신의 블로그에 댓글 기능을 추가하는 방법에 대해 소개합니다. 그리고 블로그 테마 변환에 따른 댓글 UI도 같이 변환 되도록 하는 방법에 대해서도 같이 설명합니다.

https://bluemiv.github.io/articles/react-wordle-troubleshooting/ 2025-05-22T14:35:49.000Z 2025-05-22T14:35:49.000Z Bluemiv

React로 Wordle 게임을 만들어 보며, 겪었던 문제와 고민에 대해 설명합니다.

https://bluemiv.github.io/articles/binary-search-algorithm/ 2025-05-09T13:48:26.000Z 2025-05-09T13:48:26.000Z Bluemiv

이진 탐색(Binary Search)은 정렬된 배열에서 원하는 값을 빠르게 찾는 알고리즘입니다. 본 글에서는 이진 탐색에 대해 설명하고 예제를 통해 실제로 어떻게 문제를 해결하는지 설명합니다.

https://bluemiv.github.io/articles/hashmap-frequency-counting/ 2025-05-09T12:17:09.000Z 2025-05-09T12:17:09.000Z Bluemiv

해시맵은 키와 값으로 이루어진 데이터 구조로, 해시맵을 이용하여 빈도 계산하는 알고리즘에 대해 설명합니다. 또한, 예제를 통해 실제로 어떻게 문제를 해결하는지 같이 소개합니다.

https://bluemiv.github.io/articles/sliding-window-algorithm/ 2025-05-06T12:44:10.000Z 2025-05-08T14:09:17.000Z Bluemiv

슬라이딩 윈도우(Sliding Window)는 배열이나 문자열처럼 선형 구조에서 연속된 구간(윈도우)을 효율적으로 탐색할 때 쓰는 기법입니다. 투 포인터와 비슷하지만 약간의 차이가 있고, 본 글에서는 슬라이딩 윈도우에 대해 설명합니다.

https://bluemiv.github.io/articles/two-pointers-algorithm/ 2025-03-01T03:11:48.000Z 2025-05-08T14:09:17.000Z Bluemiv

투 포인터는 배열이나 문자열처럼 선형 구조에서 2개의 인덱스(포인터)를 사용해 원하는 조건을 만족하는 해를 효율적으로 찾는 기법입니다. 본 글에서는 투 포인터에 대해 설명하고 예제 문제도 같이 풀이합니다.

https://bluemiv.github.io/articles/nextjs-google-analytics-4/ 2025-05-02T03:47:31.000Z 2025-05-02T03:47:31.000Z Bluemiv

Next.js 15에서 Google Analytics 4 설정하는 방법을 소개합니다. 또한, nextjs의 Script 컴포넌트에 대해 자세하게 설명합니다.

https://bluemiv.github.io/notes/database-index-basics/ 2025-04-29T10:55:09.000Z 2025-04-29T10:55:09.000Z Bluemiv

데이터베이스 인덱스의 개념과 종류, 장단점을 짧게 정리합니다.

https://bluemiv.github.io/notes/nextjs-environment-variables/ 2025-04-28T12:32:48.000Z 2025-04-28T12:32:48.000Z Bluemiv

환경 변수의 개념과 Next.js에서 클라이언트와 서버 변수를 구분해 선언하는 방법을 정리합니다.

https://bluemiv.github.io/articles/prettier-plugin-sort-imports/ 2025-04-24T12:13:22.000Z 2025-04-24T12:13:22.000Z Bluemiv

React 프로젝트에서 import 문들의 순서를 자동으로 정리할 수 있도록 도와주는 @trivago/prettier-plugin-sort-imports 플러그인 적용하는 방법을 소개하고, 사용벙을 설명합니다.

https://bluemiv.github.io/articles/add-swagger-to-gin/ 2025-04-23T11:34:09.000Z 2025-04-23T11:34:09.000Z Bluemiv

Go 언어의 웹 서버 프레임워크인 Gin 프레임워크에서 Swagger를 적용하고, 활용하여 REST API 문서를 자동으로 생성하고 관리하는 방법에 대해 설명합니다.

https://bluemiv.github.io/articles/turborepo-react-storybook/ 2025-04-20T12:31:48.000Z 2025-04-20T12:31:48.000Z Bluemiv

Turborepo를 사용하는 Monorepo 프로젝트에서, React 패키지에 Storybook을 설정하는 방법을 설명합니다. 추가적으로 tailwindcss를 적용하는 방법도 설명합니다.

https://bluemiv.github.io/articles/nextjs-pwa-blog-caching/ 2025-01-16T10:47:29.000Z 2025-04-15T13:13:07.000Z Bluemiv

PWA는 웹 애플리케이션을 네이티브 앱처럼 동작하게 만드는 기술입니다. 본 글에서는 Next.js 15에서 Progressive Web App(PWA)을 설정하는 방법을 설명합니다.

https://bluemiv.github.io/articles/getting-started-with-gin-web-server/ 2025-04-08T14:13:25.000Z 2025-04-08T14:13:25.000Z Bluemiv

성능이 뛰어나면서도 라우팅, 미들웨어, JSON Serialization, HTML 렌더링, 요청 바인딩, 유효성 검사 등 웹 개발에 필요한 다양한 기능을 제공 Go의 웹 프레임워크 Gin을 소개합니다.

https://bluemiv.github.io/articles/go-basic-syntax-types-variables-operators/ 2025-04-07T14:58:44.000Z 2025-04-07T14:58:44.000Z Bluemiv

Go 언어의 기본 문법과 타입, 변수 선언 방식, 연산자에 대해 소개합니다.

https://bluemiv.github.io/articles/why-go-compiles-fast/ 2025-04-07T13:21:14.000Z 2025-04-07T14:33:18.000Z Bluemiv

구글에서 개발한 Go 언어는 상대적으로 다른 언어에 비해 컴파일 속도가 빠릅니다. 이 글에서는 Go의 컴파일 속도가 빠른 이유들을 기술적인 측면에 대해 소개합니다.

https://bluemiv.github.io/articles/install-go-on-macos-with-homebrew/ 2025-04-07T12:41:30.000Z 2025-04-07T13:48:30.000Z Bluemiv

구글에서 개발한 Go 언어에 대해 소개하고, Go 언어의 장단점에 대해 구체적인 예제와 함께 살펴봅니다. 그리고, MacOSX 환경에서 brew를 사용하여 설치하는 방법을 소개합니다.

https://bluemiv.github.io/articles/typescript-type-naming-conventions/ 2025-02-11T11:19:22.000Z 2025-02-11T11:19:22.000Z Bluemiv

Frontend 개발자로서 typescript를 사용하면서 타입을 정의할 때, 어떤 규칙을 사용하고 있는지에 대해 작성한 글입니다. 속해있는 팀과 개인 취향에 따라 다를 수 있으니 참고만 해주시면 좋겠습니다.

https://bluemiv.github.io/articles/browser-rendering-reflow-repaint/ 2025-02-02T09:38:11.000Z 2025-02-02T09:38:11.000Z Bluemiv

HTML, CSS, JavaScript로 만들어진 웹 페이지가 브라우저에서 어떻게 화면에 그려지는지 그 과정을 상세히 설명합니다.

https://bluemiv.github.io/articles/tailwindcss-vs-styled-components/ 2025-01-29T11:12:11.000Z 2025-01-29T11:12:11.000Z Bluemiv

최근에는 사용할 수 있는 스타일링 도구가 많습니다. 본 글에서는 보편적으로 사용하는 Tailwind CSS와 Styled-components의 특징, 장단점, 그리고 프로젝트 상황에 따른 선택 기준을 설명합니다.

https://bluemiv.github.io/articles/nextjs-dark-light-theme-without-flicker/ 2025-01-13T12:55:14.000Z 2025-01-13T12:55:14.000Z Bluemiv

최근 웹 사이트에서 거의 필수적으로 다크 테마를 구현합니다. 본 글에서는 Next.js에서 화면 깜빡임 없이 다크/라이트 테마를 구현하는 방법에 대해 설명합니다.

https://bluemiv.github.io/articles/react-feature-sliced-design/ 2025-01-10T12:44:28.000Z 2025-01-10T12:44:28.000Z Bluemiv

프로젝트를 시작할 때마다 항상 폴더 구조를 고민합니다. 프론트 영역은 특히 빠르게 변화하다보니 백엔드 영역과 다르게 보편적으로 사용되는 폴더 구조가 없습니다. 여러가지 프로젝트 구조가 있지만, 본 글에서는 FSD(Feature-Sliced Design)라는 아키텍처 패턴을 소개합니다.