전체 글32 GIT: Push 된 커밋 메시지 수정 ❗ 문제 상황 push까지 해버린 상태에서 중간에 작성한 commit 내용을 수정해야하는 상황이 발생했다. ✅ 해결 방법1. 가장 최근 커밋 수정수정하고 싶은 커밋이 바로 직전 커밋이라면 간단하게 해결할 수 있다.// 커밋 수정git commit --amend -m "수정할 커밋 메시지"// remote에 force pushgit push --force origin 브랜치명 2. 중간 커밋 수정 (rebase)여러 커밋 중 중간에 있는 커밋을 수정해야 한다면 git rebase -i를 사용해야 한다.1단계 — 수정할 커밋 확인git log --oneline e82f93c feat: commit334ca7c2 feat: commit2 ← 이걸 수정하고 싶다b3158d2 first commit수정하고 싶.. 2026. 3. 31. FOUC: App Router 환경 Ant Design v5 SSR 설정 ❗ 문제 상황Next.js 15(App Router) 환경에서 Ant Design v5를 사용해 구현한 SelectBox 컴포넌트가 페이지 새로고침 시 일시적으로 스타일이 풀리는 문제를 겪었다.첫 렌더링 시 레이아웃이 깨짐잠깐 기본 스타일로 보였다가 다시 정상 적용FOUC(Flash of Unstyled Content) 증상이 발생🔍 발생 원인Ant Design v5는 전통적인 CSS 파일을 사용하는 대신 CSS-in-JS 방식으로 런타임에 스타일을 생성한다.서버에서 HTML만 내려오고 CSS는 클라이언트 JS가 실행된 뒤에야 생성되는 것이다.1. 서버 → 스타일 없는 HTML 전달2. 브라우저 → HTML 먼저 렌더링3. 클라이언트 JS 실행4. Antd 스타일 생성 및 주입이 과정에서 스타일이 없.. 2026. 2. 4. [Flutter] Flutter 프로젝트 Firebase login 연동 ❗️안드로이드 앱 기준으로 진행 Flutter 앱에 Firebase를 연동하면 로그인, 푸시 알림, 데이터베이스 등 다양한 기능을 간편하게 구현할 수 있다.❗️node 설치 확인firebase 설치를 위해서는 node가 설치되어 있어야 한다.node - v 명령어를 이용해 node가 설치되어 있는지 확인 후 설치되지 않은 경우 설치가 필요하다.[node 설치 링크]https://nodejs.org/en/ ✅ firebase-tools 설치https://www.npmjs.com/package/firebase-tools 터미널에 명령어를 통해 firebase-tools를 설치한다.permission 관련 에러가 발생하면 sudo 명령어를 이용해서 설치하면 된다.npm install -g firebase-to.. 2025. 10. 31. [Error] Exception: /System/Library/Frameworks/Ruby.framework/... ❗ 에러 상황개발 환경: flutter 프로젝트 terminal증상: firebase flutter 프로젝트 연동 과정에서 명령어 실행 시 에러 발생flutterfire configure --project=프로젝트명 Exception: /System/Library/Frameworks/Ruby.framework/Versions/2.6/usr/lib/ruby/2.6.0/rubygems/core_ext/kernel_require.rb:54:in `require': cannot load such file -- xcodeproj (LoadError)from /System/Library/Frameworks/Ruby.framework/Versions/2.6/usr/lib/ruby/2.6.0/rubygems/core_.. 2025. 10. 30. [Flutter] 앱 아이콘 적용하기 Flutter 프로젝트를 완성도 있게 보이게 만드는 첫 단계는 바로 앱 아이콘 변경이다.물론 Android와 iOS 각각의 아이콘 이미지를 직접 교체하는 방법도 있지만, flutter_launcher_icons 라이브러리를 사용하는 더 간단한 방법이 있다.💁🏻 적용 가이드flutter_launcher_icons 장점- 한 번 설정으로 양쪽 플랫폼 아이콘 자동 적용- 모든 해상도 자동 생성 → 수동 작업 불필요- 실수 없이 일관된 결과물 보장- 아이콘 변경 시 명령 한 줄로 재적용 가능 1. 아이콘 준비원하는 아이콘을 1024*1024 사이즈의 png 파일로 준비한다.assets > icons > app_icon.png 파일을 저장한다.아이콘 파일에 접근 가능하도록 pubspec.ymal에 설정을 추.. 2025. 10. 29. query 기반 필터 안전하게 가져오는 방법 리스트 페이지에서 PATH?category=fruit&name=apple 같은 URL query 값으로 필터 초기값을 설정했을 때, 새로고침 시 기존에 선택한 필터가 초기화되는 문제가 발생했다.이는 Next.js Page Router(pages/ 디렉토리) 환경에서 router.query를 사용할 때 자주 겪는 현상으로, 새로고침 시 query 값이 비어 있기 때문에 발생한다. import { useRouter } from 'next/router';import { useState, useEffect } from 'react';export default function TestPage() { const router = useRouter(); const [filters, setFilters] = useS.. 2025. 10. 13. [Error] Error Opening Emulator ❗ 에러 상황개발 환경: android studio증상: emultor open 시 에러 발생 INFO | Android emulator version 35.3.11.0 (build_id 12836668) (CL:N/A) INFO | Graphics backend: gfxstream INFO | Found systemPath /Users/test/Library/Android/sdk/system-images/android-35/google_apis_playstore/arm64-v8a/ INFO | Checking system compatibility: IINFO | Checking: hasSufficientDiskSpace INFO | Ok: Disk space requirements to run avd:.. 2025. 9. 25. 얕은 복사(shallow copy) vs 깊은 복사(deep copy) 프로그래밍을 하다 보면 객체나 배열을 복사(copy) 해야 하는 경우가 자주 발생한다. 이때 중요한 개념이 바로 얕은 복사(Shallow Copy) 와 깊은 복사(Deep Copy)이다.두 가지 복사 방식이 실제 코드에서 어떤 차이를 만들어내는지 이해해야 의도치 않은 버그를 피할 수 있다.💁🏻 적용 가이드얕은 복사 먼저 고려하기 - 대부분의 UI 상태 변경은 얕은 복사로 충분하다.깊은 복사는 신중하게 - 데이터 크기가 클수록 성능 부담이 커진다.라이브러리 활용- lodash.cloneDeep() 같은 유틸 라이브러리를 쓰면 안정적으로 깊은 복사를 구현할 수 있다. ✅ 얇은 복사(Shallow Copy)얕은 복사는 한 단계까지만 복사한다.즉, 객체의 1차 속성은 새로운 메모리에 복사되지만, 그 안에 .. 2025. 9. 8. [알고리즘] 동적 계획법(Dynamic Programming) 프로그래밍 문제를 풀 때, 재귀적 접근은 직관적이지만 시간 복잡도가 커서 비효율적일 수 있다. 이런 문제를 효율적으로 해결하는 방법이 바로 동적 계획법이다. 💁🏻 적용 가이드“문제를 쪼갰을 때 중복 계산이 생기고, 큰 문제의 최적해가 작은 문제 최적해로 구성 가능하며, 상태를 수치화할 수 있다면 DP" 1. 동적 계획법이란?동적 계획법(DP, Dynamic Programming)은 복잡한 문제를 여러 개의 작은 문제로 나누어 해결하고, 그 결과를 재사용하여 전체 문제를 효율적으로 해결하는 알고리즘 설계 기법이다.예를 들어, 피보나치 수열을 재귀로 구현하면:function fib(n) { if (n fib()가 중복 계산됨계산량이 지수적으로 증가 → 시간 복잡도 O(2^n)DP를 적용하면:funct.. 2025. 9. 1. React input 포커스 풀림: key 관리 React에서 리스트를 렌더링할 때 key를 부여하는 건 필수적이다. 종종 input 요소를 map으로 뿌려야하는 경우가 있는데 이때 key를 nanoid()와 같은 랜덤한 고유값으로 주면 한 글자 입력 시 포커스가 풀리는 현상이 발생한다. 🔍 발생 원인React에서 map으로 요소를 렌더링할 때 nanoid()를 사용하면 충돌 가능성이 없는 고유한 key를 쉽게 부여할 수 있다. 하지만 nanoid()는 호출할 때마다 새로운 key를 생성하기 때문에, input을 map으로 뿌릴 때 매번 key가 바뀌게 된다. 이 경우 React는 기존 DOM을 재사용하지 않고 새로운 DOM으로 인식해 다시 그리게 되므로, 입력 중이던 값이나 포커스가 사라지는 문제가 발생한다. 즉, 해당 현상은 map 때문이 아.. 2025. 8. 27. Zod z.preprocess 활용 string 형태의 value 값을 갖는 셀렉트 박스에서 아무 것도 선택 안 하면 undefined가 들어올 수 있는데,이 경우 nonempty가 아니라 "Required" 같은 다른 메시지가 나와서 UI 일관성이 깨지는 현상이 발생할 수 있다. // csPhoneNumber : ''csPhoneNumber: z.string().nonempty('문의자 전화번호를 선택해 주세요.') //문의자 전화번호를 선택해 주세요.,// csType : undefinedcsType: z.string().nonempty('문의 타입을 선택해 주세요.') // required,위처럼 nonempty를 사용하면 빈 문자열("")일 때는 메시지가 잘 뜨지만,값이 **undefined**인 경우에는 string 타입 체크 단.. 2025. 8. 14. MAC 환경에서 공유 폴더 접속 협업이 일상인 요즘, 로컬 네트워크를 통해 공유 폴더로 파일을 주고받는 일이 종종 발생한다. 회사 내에서 문서를 주고받는 방법은 이메일, USB, 클라우드 등 다양하지만, 그중 공유 폴더는 마치 개인 폴더를 사용하는 것처럼 파일을 넣기만 하면 공유가 가능해 편리하다. 💁🏻 적용 가이드맥북에서의 공유 폴더 접속은 ⌘K 단축키를 활용하면 쉽다.공유 폴더는 같은 사내망 또는 같은 공유기망 내에서 사용 가능하다.공유 폴더는 현업에서는 빠른 파일 전달이나 임시 보관 용도로 자주 활용된다.보안에 주의하자. ✅ 공유 폴더 IP 주소 연결보통 IT 담당자나 동료로부터 아래와 같은 IP 주소 형태의 경로를 받게 된다.192.168.0.10 Finder 열기상단 메뉴에서 이동 > 서버에 연결...(⌘K)을 클릭3... 2025. 7. 17. 이전 1 2 3 다음
