FE

오프닝 Flutter 프로젝트를 처음 생성하면 많은 파일과 폴더가 생기고, 각 파일이 어떤 역할을 하는지 헷갈릴 수 있다. flutter create 명령어로 프로젝트를 만든 뒤, 전체 구조와 각 요소의 용도를 이해하면 개발 속도와 효율이 올라간다.…

사전 점검 Flutter 프로젝트를 VS Code로 열어 두었고, 좌측 익스플로러에 lib/main.dart가 보이는 상태가 기본이다. 하단 상태 바(왼쪽)의 Dart/Flutter 플러그인 활성 표시와 오른쪽의 디바이스 선택 영역이 보이면 준비가 …

상황 Flutter 프로젝트를 iOS 시뮬레이터에서 실행하려고 했는데, 빌드 중에 아래와 같은 오류가 발생했다. Error (Xcode): Framework 'Pods_Runner' not found Error (Xcode): Linker comma…

배경 현재 macOS 26.0 베타 환경에서 Flutter로 iOS 앱을 개발하고 있었다. 기본적으로 설치되어 있던 시뮬레이터는 iOS 17.5 버전이었고, flutter doctor를 실행하니 다음과 같은 경고가 출력되었다. 이 상태에서 flutt…

시작하며 Next.js 15에서는 TailwindCSS를 도입하는 방식이 예전과 다르게 바뀌었다. 특히, 프로젝트 초기화 시 tailwind.config.js 파일이 생성되지 않거나, globals.css 파일이 예전처럼 구성되지 않는 점에서 많은 …

오프닝 TailwindCSS를 사용하다 보면 “우리 프로젝트만의 색상, 폰트, 여백” 등을 디자인 시스템처럼 통일해서 쓰고 싶을 때가 많다. Tailwind v4에서는 CSS 변수를 활용해서 커스텀 유틸리티 클래스를 만드는 방식이 굉장히 자연스럽고 …

오프닝 Next.js 기반 프로젝트에서 소셜 로그인을 사용하고 싶었다. Next.js에서는 자체적인 Auth기반 패키지를 지원하고 있고, 이를 통해 보다 간편하게 소셜 로그인을 구현할 수 있었다. 오늘은 Next.js 기반에서 소셜 로그인을 Next…

시작하며 지난 번에는 CI/CD에 대한 개념을 배웠다면, 이번에는 Vercel과 GitHub Actions를 활용해 CI/CD를 구축한 전체 과정을 기록해보려고 한다. Github Actions를 활용한 CI/CD 파이프라인 구축에 대해 이론적으로 …

“TS로 전환했으면 다 TS로 써야지, 왜 JS가 남아있지?” 실제로 팀에 들어가 보면 src/utils/legacy.js나 scripts/deploy.js 같은 파일들이 여전히 살아있는 경우가 많다. 누군가는 이렇게 생각할지도 모른다. ? “그건 …

Next.js는 React 기반 프레임워크로, CSR(Client Side Rendering)과 SSR(Server Side Rendering)을 모두 지원한다. 단순히 개념만 아는 게 아니라, Next.js에서는 이걸 어떻게 구현하는지가 핵심이다.…

문제 상황 Next.js에서 모바일 햄버거 메뉴를 만들던 중 아래와 같은 에러가 발생했다. Error: Hydration failed because the server rendered HTML didn't match the client. 처음에는 단…

1. 문제 상황 소개 Next.js 기반의 개인 프로젝트에서 move.gif 애니메이션을 사용했다. 처음에는 잘 작동하는 듯했지만, Netlify에 배포하고 Lighthouse 성능 점수를 확인해보니 로딩 시간 지연과 성능 저하가 발생했다. 용량: …