최근 템플스테이를 다녀오면서 2025년에는 커리어리에서 얻는 수익을 기부하기로 결정했습니다.
현재 저는 커리어리 큐레이터로 활동하며 소정의 지원금을 받고 있는데요. 비록 크지는 않지만, 앞으로 이 수익 전액을 기부 단체에 전달하려고 합니다.

우리 사회가 조금이라도 더 따뜻해지기를 바라는 마음으로 이런 결정을 내렸는데요. 2025년에도 다른 개발자분들에게 도움이 될만한 더욱 의미 있는 글을 써내려갈 수 있도록 노력하겠습니다.

최근 템플스테이를 다녀오면서 2025년에는 커리어리에서 얻는 수익을 기부하기로 결정했습니다.현재 저는 커리어리 큐레이터로 활동하며 소정의 지원금을 받고 있는데요. 비록 크지는 않지만, 앞으로 이 수익 전액을 기부 단체에 전달하려고 합니다. 우리 사회가 조금이라도 더 따뜻해지기를 바라는 마음으로 이런 결정을 내렸는데요. 2025년에도 다른 개발자분들에게 도움이 될만한 더욱 의미 있는 글을 써내려갈 수 있도록 노력하겠습니다.

2025년 다짐. 커리어리 수익 기부

안녕하세요. 그린입니다 🍏이번 포스팅은 SwiftUI의 ScrollBounceBehavior에 대해 관련하여 알아보려 합니다 🙋🏻 생각보다 간단하지만 유용한 기능이니 가볍게 봐볼까요? ScrollBounceBehavior?iOS 16.4 이상에서부터 사용 가능한 타입으로, 스크롤 가능한 뷰가 컨텐츠 끝에 도달했을 때 튀어오르는 방식을 정의합니다. struct ScrollBounceBehavior 해당 구조체 타입에는 아래 세가지로 기본 정의가 되어 있어요. 1️⃣ automatic - 기본값으로 플랫폼과 상황에 따라서 적절한 바운스 동작을 자동으로 결정2️⃣ always - 컨텐츠 크기와 상관없이 항상 바운스 효과를 가짐3️⃣ basedOnSize - 컨텐츠 크기에 따라 바운스 효과가 결정 여기서 ..

SwiftUI - ScrollBounceBehavior

SwiftUI에서 iOS 16.4 이상부터 사용할 수 있는 모디파이어가 있습니다 🙋🏻
바로, scrollBounceBehavior인데요.
컨텐츠의 크기와 스크롤 뷰의 크기를 고려하여 스크롤 바운스 동작 효과를 활성/비활성화 할 수 있어요!

이를 통해서 실제 컨텐츠 크기가 스크롤 뷰보다 작다면 굳이 스크롤 동작을 제공하지 않도록 하여 사용자로 하여금 더 자연스러운 경험을 제공해줄 수 있습니다.

스크롤 뷰를 사용한다면, 간단한 적용으로 사용자 경험을 극대화할 수 있는 장치이니 한번 트라이!

SwiftUI에서 iOS 16.4 이상부터 사용할 수 있는 모디파이어가 있습니다 🙋🏻바로, scrollBounceBehavior인데요.컨텐츠의 크기와 스크롤 뷰의 크기를 고려하여 스크롤 바운스 동작 효과를 활성/비활성화 할 수 있어요! 이를 통해서 실제 컨텐츠 크기가 스크롤 뷰보다 작다면 굳이 스크롤 동작을 제공하지 않도록 하여 사용자로 하여금 더 자연스러운 경험을 제공해줄 수 있습니다. 스크롤 뷰를 사용한다면, 간단한 적용으로 사용자 경험을 극대화할 수 있는 장치이니 한번 트라이!

iOYES

ScrollBounceBehavior로 사용자 경험 높이기

소프트웨어 개발하시면서 여러분은 어떤 터미널 앱을 사용하시나요?

저는 운영체제 순정 터미널부터, iTerm2, PuTTY, Kitty, Hyper, Warp, 코드 편집기 내장 터미널까지 정말 여러가지 앱을 써봤는데요. 최근 개발자 커뮤니티에서 Ghostty라는 신상 터미널에 대한 칭찬이 자자하더라고요. 그래서 한 번 설치해봤는데 완전히 제 취향인 거 있죠? 😍 다른 분들께도 추천드리고 싶어서 Ghostty 소개 영상을 찍어보았습니다.

📺 동영상: https://youtu.be/GjRlyBXRc0M

Ghostty는 Hyper나 Warp처럼 화려한 UI나 다양한 부가 기능을 제공하지는 않지만, 터미널 본연의 기능에 아주 충실합니다. 깔끔하고 직관적인 UI 덕분에 사용자 경험이 다른 터미널에 비해서 월등히 좋구요. 차세대 자바스크립트 런타임인 Bun에서도 쓰인 Zig 언어로 작성되어 있어서 정말 가볍고 빠릿빠릿하죠.

Ghostty는 그냥 설치만 하면 대부분의 사용자가 바로 만족하면서 쓰실 수 있는 흔치 않은 터미널 앱이라고 생각합니다. 기본 설정이 정말 요즘 트랜드에 맞게 합리적으로 되어 있어서 건드리고 싶은 설정이 거의 없더라고요. 그래서 저는 딱 1주일 써보고 Ghostty로 완전히 갈아탔는데 여러분은 어떠실지 모르겠네요? 😸

소프트웨어 개발하시면서 여러분은 어떤 터미널 앱을 사용하시나요? 저는 운영체제 순정 터미널부터, iTerm2, PuTTY, Kitty, Hyper, Warp, 코드 편집기 내장 터미널까지 정말 여러가지 앱을 써봤는데요. 최근 개발자 커뮤니티에서 Ghostty라는 신상 터미널에 대한 칭찬이 자자하더라고요. 그래서 한 번 설치해봤는데 완전히 제 취향인 거 있죠? 😍 다른 분들께도 추천드리고 싶어서 Ghostty 소개 영상을 찍어보았습니다. 📺 동영상: https://youtu.be/GjRlyBXRc0M Ghostty는 Hyper나 Warp처럼 화려한 UI나 다양한 부가 기능을 제공하지는 않지만, 터미널 본연의 기능에 아주 충실합니다. 깔끔하고 직관적인 UI 덕분에 사용자 경험이 다른 터미널에 비해서 월등히 좋구요. 차세대 자바스크립트 런타임인 Bun에서도 쓰인 Zig 언어로 작성되어 있어서 정말 가볍고 빠릿빠릿하죠. Ghostty는 그냥 설치만 하면 대부분의 사용자가 바로 만족하면서 쓰실 수 있는 흔치 않은 터미널 앱이라고 생각합니다. 기본 설정이 정말 요즘 트랜드에 맞게 합리적으로 되어 있어서 건드리고 싶은 설정이 거의 없더라고요. 그래서 저는 딱 1주일 써보고 Ghostty로 완전히 갈아탔는데 여러분은 어떠실지 모르겠네요? 😸

😘 나의 최애 터미널 앱 Ghostty 👻

한번 써봐야 겠네요! 감사합니다~

YouTube에서 마음에 드는 동영상과 음악을 감상하고, 직접 만든 콘텐츠를 업로드하여 친구, 가족뿐 아니라 전 세계 사람들과 콘텐츠를 공유할 수 있습니다.

 - YouTube

오늘은 Controlled 컴포넌트와 Uncontrolled 컴포넌트
장단점을 분석 해보았습니다.

수월한 이해를 돕기 위해, 회원 가입 Form 을 각각의 방식으로 구현한
예제 코드를 가져왔어요.

여러분이 실무에서 각 방식을 비교하여 선택하실 수 있도록,
여러분만의 선택 기준을 세우기 위해 필요한 지식 위주로
설명 드리려 노력했습니다.

그럼 오늘도 함께 공부하는 모든 분들 화이팅입니다. 🤗

오늘은 Controlled 컴포넌트와 Uncontrolled 컴포넌트장단점을 분석 해보았습니다. 수월한 이해를 돕기 위해, 회원 가입 Form 을 각각의 방식으로 구현한예제 코드를 가져왔어요. 여러분이 실무에서 각 방식을 비교하여 선택하실 수 있도록,여러분만의 선택 기준을 세우기 위해 필요한 지식 위주로설명 드리려 노력했습니다. 그럼 오늘도 함께 공부하는 모든 분들 화이팅입니다. 🤗

youtu.be

The Mom Test는 새로운 비즈니스를 시작하려는 사람들을 위한 고객 인터뷰/고객 개발(Customer Development) 방법론에 관한 짧은 책이다. 우리가 창업 등의 아이디어를 어머니께 말씀드리면, 어머니는 이해가 안되거나 좋은 아이디어가 아니라고 생각해도 "아이고 우리 아들/딸, 정말 좋은 생각이구나!"라고 할 가능성이 아주 높다. 하지만 이건 진정한 피드백이 아니다. Mom Test는 이런 상황을 피하고 진짜 인사이트를 얻을 수 있는 인터뷰 방법을 이야기한다. 개인적으로 이 책 소개를 블라인드의 공동창업자 김성겸님으로부터 소개받았는데 큰 도움이 되었으며 UX 리서치에 관심을 갖는 계기가 되었다.

Mom Test는 어머니조차도 거짓말할 수 없는 방식으로 질문하는 것에 대한 것이다. 즉, 상대방의 진짜 생각을 듣는 방법에 관한 것이다. The Mom Test의 핵심 내용을 몇 개의 요점으로 정리해봤다.

 1. 유도 질문을 피하기: 친구, 가족, 잠재 고객에게 당신의 아이디어가 좋은지 묻지 말자 (예: "이거 좋은 생각이라고 생각해?"). 사람들은 보통 감정을 상하지 않게 하려고 공손하지만 도움 안 되는 피드백을 주기 쉽다.
 2. 그들의 문제에 집중하기: 네 아이디어를 장황하게 홍보하지 말고, 그들의 실제 경험, 어려움, 일하는 방식에 대해 물어보자. 해결책을 제시하기 전에 그들의 문제를 깊이 이해해야 한다.
 3. 의견이 아닌 사실을 물어보기: 가상의 시나리오가 아닌 구체적인 과거 행동을 물어보면서 실행 가능한 인사이트를 모아보려 하자 ("이걸 쓸 것 같아?"가 아니라 "지난번엔 이 문제를 어떻게 해결했어?").
 4. 대화를 편하고 열린 분위기로 유지하기: 너무 준비하거나 형식적으로 만들지 말자. 고객 인터뷰를 친근한 대화처럼 다뤄서 사람들이 더 편하게 진솔한 피드백을 공유할 수 있게 하자.
 5. 실질적인 commitment 찾기: 진정한 검증은 막연한 관심이나 칭찬이 아니라, 선주문, 파일럿 프로그램 참여 동의, 또는 다른 사람 소개해주기 같은 구체적인 관심과 행동 (commitment)에서 발생한다.

특히 창업 초기 단계에서 "이 사업 아이템이 정말 고객의 문제를 해결하는가?"를 검증하는 데 관심이 있다면 이 책을 강력 추천한다.

The Mom Test는 새로운 비즈니스를 시작하려는 사람들을 위한 고객 인터뷰/고객 개발(Customer Development) 방법론에 관한 짧은 책이다. 우리가 창업 등의 아이디어를 어머니께 말씀드리면, 어머니는 이해가 안되거나 좋은 아이디어가 아니라고 생각해도 "아이고 우리 아들/딸, 정말 좋은 생각이구나!"라고 할 가능성이 아주 높다. 하지만 이건 진정한 피드백이 아니다. Mom Test는 이런 상황을 피하고 진짜 인사이트를 얻을 수 있는 인터뷰 방법을 이야기한다. 개인적으로 이 책 소개를 블라인드의 공동창업자 김성겸님으로부터 소개받았는데 큰 도움이 되었으며 UX 리서치에 관심을 갖는 계기가 되었다. Mom Test는 어머니조차도 거짓말할 수 없는 방식으로 질문하는 것에 대한 것이다. 즉, 상대방의 진짜 생각을 듣는 방법에 관한 것이다. The Mom Test의 핵심 내용을 몇 개의 요점으로 정리해봤다. <ol ><li>유도 질문을 피하기: 친구, 가족, 잠재 고객에게 당신의 아이디어가 좋은지 묻지 말자 (예: "이거 좋은 생각이라고 생각해?"). 사람들은 보통 감정을 상하지 않게 하려고 공손하지만 도움 안 되는 피드백을 주기 쉽다.</li><li>그들의 문제에 집중하기: 네 아이디어를 장황하게 홍보하지 말고, 그들의 실제 경험, 어려움, 일하는 방식에 대해 물어보자. 해결책을 제시하기 전에 그들의 문제를 깊이 이해해야 한다.</li><li>의견이 아닌 사실을 물어보기: 가상의 시나리오가 아닌 구체적인 과거 행동을 물어보면서 실행 가능한 인사이트를 모아보려 하자 ("이걸 쓸 것 같아?"가 아니라 "지난번엔 이 문제를 어떻게 해결했어?").</li><li>대화를 편하고 열린 분위기로 유지하기: 너무 준비하거나 형식적으로 만들지 말자. 고객 인터뷰를 친근한 대화처럼 다뤄서 사람들이 더 편하게 진솔한 피드백을 공유할 수 있게 하자.</li><li>실질적인 commitment 찾기: 진정한 검증은 막연한 관심이나 칭찬이 아니라, 선주문, 파일럿 프로그램 참여 동의, 또는 다른 사람 소개해주기 같은 구체적인 관심과 행동 (commitment)에서 발생한다.</li></ol> 특히 창업 초기 단계에서 "이 사업 아이템이 정말 고객의 문제를 해결하는가?"를 검증하는 데 관심이 있다면 이 책을 강력 추천한다.

책 The Mom Test 요약

한글판이 있는지 모르겠지만 영문판의 136 페이지다. 

https://www.amazon.com/Mom-Test-customers-business-everyone/dp/1492180742
https://www.momtestbook.com/

Next.js automatically traces which files are needed by each page to allow for easy deployment of your application. Learn how it works here.

next.config.js Options: output | Next.js

Next.js 프로젝트에서 Docker 이미지를 빌드할 때는 
Vercel
의 권고대로
standalone
옵션을 사용합니다.
standalone
은 독립 실행형(standalone)이라는 뜻으로, Next.js프로젝트 에서 웹 애플리케이션 실행에 필요한 최소한의 코드만 추출하여 최적화된 빌드 결과물을 생성한다는 것을 뜻하는데요. 어떻게 Docker 이미지의 용량이 획기적으로 줄어드는지 정리해보았습니다.

1. 불필요한 파일 제거
기본적으로 Docker 이미지를 만들 때는
node_modules
를 포함한 전체 프로젝트가 필요하지만,
standalone
옵션을 적용하면 실행에 반드시 필요한 파일만 포함하는 최소한의 환경이 구성됩니다. 즉, 개발 환경에서 사용되던 불필요한 파일들(
node_modules
,
pages/
,
app/
등)이 대부분 제거되어 이미지 용량이 크게 줄어듭니다.

2.
node_modules
최적화
Next.js는
standalone
모드를 활성화하면 실행에 필요한
node_modules
만 포함하도록 최적화합니다. 기본적으로
node_modules
는 모든 종속성을 포함하기 때문에 매우 무겁지만,

standalone
모드에서는 Next.js 실행에 필요한 패키지만 남기고, 불필요한 개발용 패키지(
devDependencies
, ESLint, TypeScript 등)는 제외됩니다.

사실상 꼭 실행에 꼭 필요한
node_modules
만 남기고 나머지를 제거하는게 포인트입니다.
그리고 당연한 이야기겠지만, Docker 이미지 크기를 줄이면 배포 시간도 단축할 수 있습니다. 일반적으로 도커 이미지는 AWS ECR, Docker Hub 등 원격 레지스트리에 이미지를 푸시하는데요. 용량이 줄어든 만큼 전송 속도가 크게 향상됩니다.

Next.js의
standalone
모드는 불필요한 파일을 제거하고, 실행에 필요한 최소한의 환경만 남겨 Docker 이미지를 최적화하는 유용한 기능입니다. 이를 활용하면 배포 속도 개선, 인프라 비용 절감, 더 빠른 컨테이너 시작 시간 등의 효과를 얻을 수 있습니다.

https://nextjs.org/docs/pages/api-reference/config/next-config-js/output

Next.js 프로젝트에서 Docker 이미지를 빌드할 때는 <code >Vercel</code>의 권고대로 <code >standalone</code> 옵션을 사용합니다. <code >standalone</code> 은 독립 실행형(standalone)이라는 뜻으로, Next.js프로젝트 에서 웹 애플리케이션 실행에 필요한 최소한의 코드만 추출하여 최적화된 빌드 결과물을 생성한다는 것을 뜻하는데요. 어떻게 Docker 이미지의 용량이 획기적으로 줄어드는지 정리해보았습니다. 1. 불필요한 파일 제거기본적으로 Docker 이미지를 만들 때는 <code >node_modules</code>를 포함한 전체 프로젝트가 필요하지만, <code >standalone</code> 옵션을 적용하면 실행에 반드시 필요한 파일만 포함하는 최소한의 환경이 구성됩니다. 즉, 개발 환경에서 사용되던 불필요한 파일들(<code >node_modules</code>, <code >pages/</code>, <code >app/</code> 등)이 대부분 제거되어 이미지 용량이 크게 줄어듭니다. 2. <code >node_modules</code> 최적화Next.js는 <code >standalone</code> 모드를 활성화하면 실행에 필요한 <code >node_modules</code>만 포함하도록 최적화합니다. 기본적으로 <code >node_modules</code>는 모든 종속성을 포함하기 때문에 매우 무겁지만, <code >standalone</code> 모드에서는 Next.js 실행에 필요한 패키지만 남기고, 불필요한 개발용 패키지(<code >devDependencies</code>, ESLint, TypeScript 등)는 제외됩니다. 사실상 꼭 실행에 꼭 필요한 <code >node_modules</code>만 남기고 나머지를 제거하는게 포인트입니다.그리고 당연한 이야기겠지만, Docker 이미지 크기를 줄이면 배포 시간도 단축할 수 있습니다. 일반적으로 도커 이미지는 AWS ECR, Docker Hub 등 원격 레지스트리에 이미지를 푸시하는데요. 용량이 줄어든 만큼 전송 속도가 크게 향상됩니다. Next.js의 <code >standalone</code> 모드는 불필요한 파일을 제거하고, 실행에 필요한 최소한의 환경만 남겨 Docker 이미지를 최적화하는 유용한 기능입니다. 이를 활용하면 배포 속도 개선, 인프라 비용 절감, 더 빠른 컨테이너 시작 시간 등의 효과를 얻을 수 있습니다. https://nextjs.org/docs/pages/api-reference/config/next-config-js/output

nextjs.org

Next.js Standalone 모드로 Docker 이미지 최적화하기

I was using ChatGPT only to have a discussion.
For long time, I had have a mind to use any other AI for a next app.

Working using Cursor in Xcode

I was using ChatGPT only to have a discussion.
For long time, I had have a mind to use any other AI for a next app.

https://toyboy2.medium.com/working-using-cursor-in-xcode-ee64369d97d6

I was using ChatGPT only to have a discussion.For long time, I had have a mind to use any other AI for a next app. https://toyboy2.medium.com/working-using-cursor-in-xcode-ee64369d97d6

Medium

Cursor로 Xcode 프로젝트 작업하기

최근 FBI와 CISA가 발표한 '제품 보안 나쁜 사례' 문서를 살펴봤습니다.
이 가이드라인은 소프트웨어 제조업체들이 피해야 할 13가지 주요 보안 위험 사례를 제시하고 있는데요, 특히 중요 인프라나 국가 핵심 기능과 관련된 소프트웨어에 초점을 맞추고 있습니다.

주요 내용을 크게 세 가지 카테고리로 나누어 설명하고 있습니다.

 1. 제품 속성: 메모리 안전성이 검증되지 않은 C/C++ 사용 지양, SQL/명령어 인젝션 취약점 방지, 기본 패스워드 사용 금지
 2. 보안 기능: 다중인증(MFA) 의무 지원, 침입 증거 수집을 위한 로깅 기능 구현
 3. 조직 프로세스: CVE 적시 발행, 취약점 공개 정책(VDP) 수립, 제품 지원 기간 명확한 커뮤니케이션

이 가이드라인은 강제성은 없지만, 현대 소프트웨어 개발에서 반드시 고려해야 할 보안 요소들을 잘 정리하고 있습니다. 개발자분들에게 일독을 추천드립니다.

https://www.ic3.gov/CSA/2025/250117.pdf

최근 FBI와 CISA가 발표한 '제품 보안 나쁜 사례' 문서를 살펴봤습니다.이 가이드라인은 소프트웨어 제조업체들이 피해야 할 13가지 주요 보안 위험 사례를 제시하고 있는데요, 특히 중요 인프라나 국가 핵심 기능과 관련된 소프트웨어에 초점을 맞추고 있습니다. 주요 내용을 크게 세 가지 카테고리로 나누어 설명하고 있습니다. <ol ><li>제품 속성: 메모리 안전성이 검증되지 않은 C/C++ 사용 지양, SQL/명령어 인젝션 취약점 방지, 기본 패스워드 사용 금지</li><li>보안 기능: 다중인증(MFA) 의무 지원, 침입 증거 수집을 위한 로깅 기능 구현</li><li>조직 프로세스: CVE 적시 발행, 취약점 공개 정책(VDP) 수립, 제품 지원 기간 명확한 커뮤니케이션</li></ol> 이 가이드라인은 강제성은 없지만, 현대 소프트웨어 개발에서 반드시 고려해야 할 보안 요소들을 잘 정리하고 있습니다. 개발자분들에게 일독을 추천드립니다. https://www.ic3.gov/CSA/2025/250117.pdf

FBI & CISA의 '제품 보안 나쁜 사례' 가이드라인 살펴보기

The fastest online video converter, powered by WebCodecs. No upload required, no watermarks, no limits.

Remotion Convert - Fast video conversion in the browser

웹브라우저만으로 비디오 컨버트되니 편하네요
보통의 무료 프로그램과 다르게 광고없어서 너무 편안하네요

https://www.remotion.dev/convert

웹브라우저만으로 비디오 컨버트되니 편하네요보통의 무료 프로그램과 다르게 광고없어서 너무 편안하네요 https://www.remotion.dev/convert

www.remotion.dev

No 광고, 오직 로컬! 비디오 컨버트

프론트엔드 일타강사로 유명한 이정환님을 모시고 인터뷰를 진행했어요. 이번 편에선 정환님이 만들고 계신 한입 커뮤니티와 2025년 계획에 대해 들어봤어요.

아래 링크에서 자세한 이야기를 확인해보세요!

https://youtu.be/UkSHIIzMs2Q?si=S7sIDSNXMk0Y0eI-

프론트엔드 일타강사로 유명한 이정환님을 모시고 인터뷰를 진행했어요. 이번 편에선 정환님이 만들고 계신 한입 커뮤니티와 2025년 계획에 대해 들어봤어요. 아래 링크에서 자세한 이야기를 확인해보세요! https://youtu.be/UkSHIIzMs2Q?si=S7sIDSNXMk0Y0eI-

주니어 개발자를 위한 커뮤니티는 없나요?

변경하기 쉬운 프론트엔드 코드를 위한 지침서

Frontend Fundamentals

토스에서 프론트엔드 코드를 위한 지침서를 공개했습니다.

https://frontend-fundamentals.com

GitHub를 통해 공개된 문서를 기반으로 하고 있는 웹사이트입니다. 아직 기여 가이드는 만들어지지 않았네요.

하지만 GitHub Discussions 페이지에서 의견을 교류할 수 있다고 합니다.

토스에서 프론트엔드 코드를 위한 지침서를 공개했습니다. https://frontend-fundamentals.com GitHub를 통해 공개된 문서를 기반으로 하고 있는 웹사이트입니다. 아직 기여 가이드는 만들어지지 않았네요. 하지만 GitHub Discussions 페이지에서 의견을 교류할 수 있다고 합니다.

frontend-fundamentals.com

[1] 해야 할일 리스트 만들기 > [2] 우선 순위 정하기 > [3] 정해진 시간 안에 수행하기 > [4] 피드백 과정 거치기

시간이 지날수록, 시간은 금이라는 말이 점점 실감이 납니다.
무엇을 제대로 한것도 없는데 벌써 2025년 1월의 중반을 지나고 있으니 말입니다.

올해 4월에 대학원 졸업과 취업 준비라는 큰 이벤트를 앞둔 저에게도 앞으로 해나가야 할 다양한 숙제들과 프로젝트를 생각하고 나면 벌써부터 마음이 무거워지고 한숨이 절로 납니다.

하지만, 이대로 그냥 한숨만 쉬면 포기하고 있을 수는 없죠. 우리의 앞길에 놓인 중요한 프로젝트들을 성공적으로 수행하기 위해 제가 작년부터 사용하고 있는 방법을 공유해보려 합니다.

저는 매일 약 4-5개의 투두 리스트(To-do List)를 만들고 그 리스트를 하루 동안 수행하고 있습니다. 그리고 작년까지 약 70개의 해야 할 업무 및 일정들을 큰 문제없이 잘 처리해왔습니다.

그럼 첫번째 단계인 [1] 해야 할일 정하기 부터 이야기해 볼까요?

[1] 해야 할일 정하기

매일 여러분들은 해야 할 일들 리스트를 의식적으로 만들고 수행하고 있나요?
해야 할일이 정해진 삶이란 단조롭고 기계적이라고 느낄수도 모르겠습니다.
하지만 실제로 투두 리스트를 만들고 나면, 마음이 생각보다 편해지는 걸 느낄 수 있습니다.

특히 저처럼 하고 싶은 것들이 많은 욕심쟁이들에게는
하루하루가 매일 다른 일들을 벌려놓고 흐지부지 끝나는 경우들이 많습니다.

이 때 우리가 그날 해야 하는 일들을 정하는 것이 도움이 될 수 있습니다.
이 때의 포인트는 리스트는 5개가 넘어가면 안된다는 점입니다.

여러분들이 5개 이상의 리스트를 만드는 순간,
그 때부터 여러분들의 하루는 롤러코스터가 될 가능성이 매우 높습니다.

하루 정도는 괜찮지만, 매일 그런 삶을 살고 싶지는 않으시겠죠? 해야 할일 리스트를 만들어보세요. 사소한 것이라도 좋습니다, 만들면서 여러분들은 깨닫게 될거에요.

우리가 하루 동안 정말 어떤 일들을 하고 있는지를 말이죠.

다음 편에서 [2] 우선 순위 정하기에 대해 이야기 해볼게요 :)

[1] 해야 할일 리스트 만들기 &gt; [2] 우선 순위 정하기 &gt; [3] 정해진 시간 안에 수행하기 &gt; [4] 피드백 과정 거치기 시간이 지날수록, 시간은 금이라는 말이 점점 실감이 납니다. 무엇을 제대로 한것도 없는데 벌써 2025년 1월의 중반을 지나고 있으니 말입니다. 올해 4월에 대학원 졸업과 취업 준비라는 큰 이벤트를 앞둔 저에게도 앞으로 해나가야 할 다양한 숙제들과 프로젝트를 생각하고 나면 벌써부터 마음이 무거워지고 한숨이 절로 납니다. 하지만, 이대로 그냥 한숨만 쉬면 포기하고 있을 수는 없죠. 우리의 앞길에 놓인 중요한 프로젝트들을 성공적으로 수행하기 위해 제가 작년부터 사용하고 있는 방법을 공유해보려 합니다. 저는 매일 약 4-5개의 투두 리스트(To-do List)를 만들고 그 리스트를 하루 동안 수행하고 있습니다. 그리고 작년까지 약 70개의 해야 할 업무 및 일정들을 큰 문제없이 잘 처리해왔습니다. 그럼 첫번째 단계인 [1] 해야 할일 정하기 부터 이야기해 볼까요? [1] 해야 할일 정하기 매일 여러분들은 해야 할 일들 리스트를 의식적으로 만들고 수행하고 있나요? 해야 할일이 정해진 삶이란 단조롭고 기계적이라고 느낄수도 모르겠습니다. 하지만 실제로 투두 리스트를 만들고 나면, 마음이 생각보다 편해지는 걸 느낄 수 있습니다. 특히 저처럼 하고 싶은 것들이 많은 욕심쟁이들에게는 하루하루가 매일 다른 일들을 벌려놓고 흐지부지 끝나는 경우들이 많습니다. 이 때 우리가 그날 해야 하는 일들을 정하는 것이 도움이 될 수 있습니다. 이 때의 포인트는 리스트는 5개가 넘어가면 안된다는 점입니다. 여러분들이 5개 이상의 리스트를 만드는 순간, 그 때부터 여러분들의 하루는 롤러코스터가 될 가능성이 매우 높습니다. 하루 정도는 괜찮지만, 매일 그런 삶을 살고 싶지는 않으시겠죠? 해야 할일 리스트를 만들어보세요. 사소한 것이라도 좋습니다, 만들면서 여러분들은 깨닫게 될거에요. 우리가 하루 동안 정말 어떤 일들을 하고 있는지를 말이죠. 다음 편에서 [2] 우선 순위 정하기에 대해 이야기 해볼게요 :)

성공적인 프로젝트 관리의 4단계 프로세스

스크리닝, 코딩, 시스템 디자인, Behavioral 인터뷰, 팀 매칭, 오퍼

Meta SWE 면접 합격 후기

요즘 채용이 조심스럽게 되살아나고 있고 메타도 채용을 많이 하고 있는거 같습니다. 

블라인드 앱 보면 주위 개발자 25%가 메타 면접을 보고 있는거 같다는 글도 보이는데요. 저도 메타 인터뷰 관련해서 DM을 많이 받았습니다. 특히 다른 회사에는 없는 '팀 매칭' 단계에 대해서 질문이 많았는데 이 부분 포함해서 좀 더 상세히 글로 정리했습니다.

https://www.nyprogrammer.com/p/meta-swe-interview

요즘 채용이 조심스럽게 되살아나고 있고 메타도 채용을 많이 하고 있는거 같습니다.&nbsp; 블라인드 앱 보면 주위 개발자 25%가 메타 면접을 보고 있는거 같다는 글도 보이는데요. 저도 메타 인터뷰 관련해서 DM을 많이 받았습니다. 특히 다른 회사에는 없는 '팀 매칭' 단계에 대해서 질문이 많았는데 이 부분 포함해서 좀 더 상세히 글로 정리했습니다. https://www.nyprogrammer.com/p/meta-swe-interview

www.nyprogrammer.com

“혼자서 앱을 개발해 나간다는 게 쉬운 작업이 아닌데, 혹시 스터디나 모임도 활용하셨는지 궁금합니다.”
“활용하지 않습니다.”

스터디그룹에 참여해 보지 않았던 것은 아닙니다.
20대에는 무슨 스터디만 한다 하면 어떻게든 시간을 내서 참여했습니다.

내가 발표할 시간이 되면 스트레스받아 가면서 시간에 쫓겨 자료를 만들고…
남들 발표 시간에는 편안한 마음으로 듣기도 하고…
스터디에 많이 참여하니 항상 바쁘게 쪼개서 시간을 썼는데, 그에 비해 배움은 크지 않은 것 같았습니다.
이상하다. 마치 헛공부만 하고 있는 느낌이랄까…?
이런 경험이 반복되면서 스터디에 참여하는 것을 점점 주저하게 됐습니다.

스터디 그룹에 참여하면 누가 떠먹여 주지 않을까 하는 생각이 그렇게 만들었던 건 아닐까?
어차피 공부는 누가 떠먹여 주는 것이 아니라 내가 해야 하는 것인데.

가만히 생각해 보면 제대로 학습했다는 느낌이 들었던 순간은 언제나 제 책상 앞이었습니다.
혼자 끙끙대면서 스스로에게 질문하고 답하는 시간을 더 많이 갖고 싶습니다.

“혼자서 앱을 개발해 나간다는 게 쉬운 작업이 아닌데, 혹시 스터디나 모임도 활용하셨는지 궁금합니다.”“활용하지 않습니다.” 스터디그룹에 참여해 보지 않았던 것은 아닙니다.20대에는 무슨 스터디만 한다 하면 어떻게든 시간을 내서 참여했습니다. 내가 발표할 시간이 되면 스트레스받아 가면서 시간에 쫓겨 자료를 만들고…남들 발표 시간에는 편안한 마음으로 듣기도 하고…스터디에 많이 참여하니 항상 바쁘게 쪼개서 시간을 썼는데, 그에 비해 배움은 크지 않은 것 같았습니다.이상하다. 마치 헛공부만 하고 있는 느낌이랄까…?이런 경험이 반복되면서 스터디에 참여하는 것을 점점 주저하게 됐습니다. 스터디 그룹에 참여하면 누가 떠먹여 주지 않을까 하는 생각이 그렇게 만들었던 건 아닐까?어차피 공부는 누가 떠먹여 주는 것이 아니라 내가 해야 하는 것인데. 가만히 생각해 보면 제대로 학습했다는 느낌이 들었던 순간은 언제나 제 책상 앞이었습니다.혼자 끙끙대면서 스스로에게 질문하고 답하는 시간을 더 많이 갖고 싶습니다.

스터디 그룹에 참여하지 않는 이유

우연히 보게 된 유투브(링크는 댓글 참고)인데 서울대내에서 어떤 학생들이 학점이 좋은지 그리고 공통적인 학습방법이 있는지 찾아보려는 연구에 관한 이야기이다. 뭔가 도움이되는 흥미로운 결과를 기대하고 시작한 이 연구는 기대와는 완전히 다르게 진행되었다.

학점을 좋게 받는 학생들의 공통점은 질문을 하거나 본인의 생각을 가지려고 하는게 아니라 주입식으로 교수님의 강의를 달달 외운 경우였다. 교수님의 의견에 동의하지 않는 경우 시험 문제에서 본인의 의견을 그래도 주장하겠냐는 질문에 다들 점수를 잘 받기 위해서 교수님의 생각을 적겠다고 답을 했다.

동일한 연구자가 미국 미시간 대학의 학생들을 대상으로 조사를 해보니 강의시간에 교수님의 이야기를 그대로 적는 사람들은 거의 없었고 대부분 흥미로운 부분이나 자기의 생각을 필기했다고 답했고 교수님 강의 필기와 학점 간에 별다른 상관관계가 없었다. 또한 인터뷰에 응한 모든 학생들이 교수님의 의견과 본인의 의견이 다른 경우 그래도 본인의 의견을 적겠다고 했다.
영상 중 아래 문장들이 참 슬프게 다가왔다.

"질문왕 승현이는 이제 더 이상 질문을 하지 않습니다"
"너는 어떠한 생각도 가져서는 안되고 네 생각이 아무리 좋아도 교수님과 다르면 버려야 되고 교수님의 말씀을 단 한마디도 빼놓지 않고 적어야 하고 이게 서울대학교의 교육이라고 과연 이야기할 수 있을까?"

두 학교 학생들은 모두 열심히 하지만 방향이 다르며 (수용적 vs. 비판적) 결국 학점이란 게임의 룰이 다르다보니 결국 학생들의 성향까지 변화시킨다. 정답을 찾으라는 교육과 아닌 교육의 차이점이다.

이 유튜브 비디오는 대학생으로 국한해서 연구를 했지만 개발자를 대상으로 해도 크게 다를지 않을 것 같다. 사람의 능력은 한국이나 미국이나 크게 다르다고 생각하지 않는다. 질문을 꺼리는 환경과 장려하는 환경, 순응하기를 원하는 환경과 비판을 허용하는 환경, 환경의 차이가 사람의 성장에 차이를 가져온다.

우연히 보게 된 유투브(링크는 댓글 참고)인데 서울대내에서 어떤 학생들이 학점이 좋은지 그리고 공통적인 학습방법이 있는지 찾아보려는 연구에 관한 이야기이다. 뭔가 도움이되는 흥미로운 결과를 기대하고 시작한 이 연구는 기대와는 완전히 다르게 진행되었다. 학점을 좋게 받는 학생들의 공통점은 질문을 하거나 본인의 생각을 가지려고 하는게 아니라 주입식으로 교수님의 강의를 달달 외운 경우였다. 교수님의 의견에 동의하지 않는 경우 시험 문제에서 본인의 의견을 그래도 주장하겠냐는 질문에 다들 점수를 잘 받기 위해서 교수님의 생각을 적겠다고 답을 했다. 동일한 연구자가 미국 미시간 대학의 학생들을 대상으로 조사를 해보니 강의시간에 교수님의 이야기를 그대로 적는 사람들은 거의 없었고 대부분 흥미로운 부분이나 자기의 생각을 필기했다고 답했고 교수님 강의 필기와 학점 간에 별다른 상관관계가 없었다. 또한 인터뷰에 응한 모든 학생들이 교수님의 의견과 본인의 의견이 다른 경우 그래도 본인의 의견을 적겠다고 했다.영상 중 아래 문장들이 참 슬프게 다가왔다. "질문왕 승현이는 이제 더 이상 질문을 하지 않습니다""너는 어떠한 생각도 가져서는 안되고 네 생각이 아무리 좋아도 교수님과 다르면 버려야 되고 교수님의 말씀을 단 한마디도 빼놓지 않고 적어야 하고 이게 서울대학교의 교육이라고 과연 이야기할 수 있을까?" 두 학교 학생들은 모두 열심히 하지만 방향이 다르며 (수용적 vs. 비판적) 결국 학점이란 게임의 룰이 다르다보니 결국 학생들의 성향까지 변화시킨다. 정답을 찾으라는 교육과 아닌 교육의 차이점이다. 이 유튜브 비디오는 대학생으로 국한해서 연구를 했지만 개발자를 대상으로 해도 크게 다를지 않을 것 같다. 사람의 능력은 한국이나 미국이나 크게 다르다고 생각하지 않는다. 질문을 꺼리는 환경과 장려하는 환경, 순응하기를 원하는 환경과 비판을 허용하는 환경, 환경의 차이가 사람의 성장에 차이를 가져온다.

서울대안에서는 누가 A+를 받을까?

원문: https://frontendatscale.com/issues/17

(번역) 프런트엔드 아키텍처 시각화하기

오늘은 12월 이진우님이 공유해주신 2024 프론트엔드 뉴스 한 방에 몰아 보기 글에서 알게 된 C4 모델을 활용해 아키텍처를 시각화하는 방법에 대한 글을 번역해 봤습니다. C4 모델은 소프트웨어 시스템을 다양한 추상화 수준(시스템 컨텍스트, 컨테이너, 컴포넌트, 코드)에서 시각화하는 방법론으로 다양한 분야에서 사용하고 있는데요. 이 글에서는 저자가 프런트엔드 계층을 추상화 수준에 맞춰 정리하고 시각화하는 방법에 대해 이야기하고 있습니다. 도움이 되셨으면 좋겠습니다. 😃

링크: https://bit.ly/3WdXidn

오늘은 12월 이진우님이 공유해주신 2024 프론트엔드 뉴스 한 방에 몰아 보기 글에서 알게 된 C4 모델을 활용해 아키텍처를 시각화하는 방법에 대한 글을 번역해 봤습니다. C4 모델은 소프트웨어 시스템을 다양한 추상화 수준(시스템 컨텍스트, 컨테이너, 컴포넌트, 코드)에서 시각화하는 방법론으로 다양한 분야에서 사용하고 있는데요. 이 글에서는 저자가 프런트엔드 계층을 추상화 수준에 맞춰 정리하고 시각화하는 방법에 대해 이야기하고 있습니다. 도움이 되셨으면 좋겠습니다. 😃 링크: https://bit.ly/3WdXidn

Google Docs

프런트엔드 아키텍처 시각화하기

Guidelines for easily modifiable frontend code

https://frontend-fundamentals.com/

"프론트엔드에서 '좋은 코드'란 '변경하기 쉬운 코드'"라는 기준점을 제시하면서, 가독성, 예측 가능성, 응집도, 결합도 4가지 기준을 바탕으로 좋은 코드를 작성하는 전략에 대해서 소개하는 문서입니다.

읽어보니 이론적인 내용 보다는 전반적으로 실무에서 사용할 법한 코드 예시를 중점으로 소개하고 있어서 이해하기가 쉬웠습니다.

코드 리뷰할 때 참고 문서로 활용하기도 좋을 것 같습니다.

https://frontend-fundamentals.com/ "프론트엔드에서 '좋은 코드'란 '변경하기 쉬운 코드'"라는 기준점을 제시하면서, 가독성, 예측 가능성, 응집도, 결합도 4가지 기준을 바탕으로 좋은 코드를 작성하는 전략에 대해서 소개하는 문서입니다. 읽어보니 이론적인 내용 보다는 전반적으로 실무에서 사용할 법한 코드 예시를 중점으로 소개하고 있어서 이해하기가 쉬웠습니다. 코드 리뷰할 때 참고 문서로 활용하기도 좋을 것 같습니다.

토스에서 만든 FE 코드 지침서

원고지 글자수를 쉽게 계산하세요. 원고지 매수 자동 계산, 글자수 세기, A4 용지 변환까지 한번에 해결하는 무료 원고지 계산기입니다.

원고지 계산기 - 글자수 세기, 원고지 매수 자동 변환

"마케터 -> 개발자"로 살다가,
24년 2월에 퇴사를 했습니다.

그 후 완전 새로운 일을 시작했는데요. 다음과 같습니다.

1. 고시원 2개 인수(1개는 24년 12월에 매도했습니다)
2. 파티룸 창업 후 운영중(네이버지도에 "건대 오아시" 검색!)
3. 일은 아니지만 "결혼"

-

비교적 시간이 많아져서(위 사업은 자동사냥이 되버림)
올해는 해보고 싶은 것(하고 있는 것)도 자연스레 많아졌습니다.
아래와 같이요!

1. 단편 소설 1개 쓰기(꾸준히 글 쓰는중)
2. 일본인과 대화하기(학원 다니고 있음)
3. 트레이딩 공부해서 10일 연속 수익 내보기(강의 듣고 있음)

-

무튼, 글을 쓰면서 문학상도 한번 넣어보고 싶어서 봤는데,
대부분 문학상이 원고지 200자 기준 N매 따위의 조건이 있더라고요..!

전(?)개발자긴 했지만 안 쓰니 까먹어서..
cursor의 도움으로 하루이틀만에 급하게 "원고지계산기"라는 앱을 만들었습니다.
다크모드는 대응 안됐는데, 이대로도 괜찮아서(?) 쓰려고 합니다.
무튼 cursor가 뚝딱해주는 거 보고 개발하기 쉬워졌다(?) 생각이 들었네요.

"마케터 -&gt; 개발자"로 살다가, 24년 2월에 퇴사를 했습니다. 그 후 완전 새로운 일을 시작했는데요. 다음과 같습니다. 1. 고시원 2개 인수(1개는 24년 12월에 매도했습니다) 2. 파티룸 창업 후 운영중(네이버지도에 "건대 오아시" 검색!) 3. 일은 아니지만 "결혼" - 비교적 시간이 많아져서(위 사업은 자동사냥이 되버림) 올해는 해보고 싶은 것(하고 있는 것)도 자연스레 많아졌습니다. 아래와 같이요! 1. 단편 소설 1개 쓰기(꾸준히 글 쓰는중) 2. 일본인과 대화하기(학원 다니고 있음) 3. 트레이딩 공부해서 10일 연속 수익 내보기(강의 듣고 있음) - 무튼, 글을 쓰면서 문학상도 한번 넣어보고 싶어서 봤는데, 대부분 문학상이 원고지 200자 기준 N매 따위의 조건이 있더라고요..! 전(?)개발자긴 했지만 안 쓰니 까먹어서.. cursor의 도움으로 하루이틀만에 급하게 "원고지계산기"라는 앱을 만들었습니다. 다크모드는 대응 안됐는데, 이대로도 괜찮아서(?) 쓰려고 합니다.무튼 cursor가 뚝딱해주는 거 보고 개발하기 쉬워졌다(?) 생각이 들었네요.

www.xn--989a2bt9ciz7b65g7qe.kr

💠 cursor로 하루이틀만에 간단한 앱 만든 이야기

React로 단일 페이지 애플리케이션(SPA)을 개발하고 Spring Boot를 통해 배포하는 과정에서, 사용자들이 특정 페이지로 이동한 후 새로고침을 하면 404 오류가 발생하는 경우가 있습니다. 이는 React와 Spring Boot가 라우팅을 처리하는 방식의 차이에서 비롯된 문제로, 많은 개발자가 마주하는 흔한 이슈입니다.
 
문제 상황: 새로고침 시 404 오류 발생
React 애플리케이션에서 BrowserRouter를 사용하여 클라이언트 사이드 라우팅(Client-Side Routing)을 처리할 때, 새로고침 시 다음과 같은 404 오류가 발생할 수 있습니다.
GET https://example.com/purchased-product 404 (Not Found)

이 상황은 브라우저가 /purchased-product 경로에 대한 요청을 서버로 보냈지만, Spring Boot 서버가 해당 경로를 처리하는 방법을 알지 못해 404 Not Found를 반환했기 때문에 발생합니다.
 
React는 클라이언트에서 모든 라우팅을 처리하도록 설계되었으나, 브라우저는 새로고침하거나 직접 URL을 입력했을 때 서버에 요청을 보내는 기본 동작을 따릅니다. 따라서 Spring Boot 서버가 이러한 요청을 적절히 처리하지 않으면 위와 같은 문제가 발생합니다.
 
문제 원인: React와 Spring Boot 라우팅 처리 방식의 차이
[React의 클라이언트 사이드 라우팅]
React에서 BrowserRouter는 브라우저의 주소(URL)를 변경하지만 실제로 서버에 요청을 보내지 않습니다. 대신, 클라이언트 측에서 라우팅이 이루어지며, 경로에 매핑된 React 컴포넌트를 렌더링합니다.
 * URL 변경은 브라우저 주소창에서만 이루어집니다.
 * React 내부에서 지정된 컴포넌트가 로드됩니다.
 
[브라우저의 기본 동작]
반면, 브라우저에서 새로고침하거나 URL을 직접 입력하면 해당 경로에 대한 요청을 서버로 보냅니다.
 * 서버는 경로에 대해 정의된 처리가 없는 경우, 404 Not Found를 반환합니다.
 * 이는 서버가 클라이언트 사이드 라우팅 경로에 대해 무지한 상태이기 때문입니다.
 
React와 브라우저의 동작 차이를 이해했으니, 이제 이를 해결하기 위한 Spring Boot 설정 방법을 살펴보겠습니다.
 
해결 방법: Spring Boot에서 React 경로 처리하기
Spring Boot 서버가 React 애플리케이션의 모든 경로를 처리하도록 설정하면, 브라우저가 서버로 보내는 모든 요청에 대해 React의 index.html 파일을 반환할 수 있습니다. 이렇게 하면 브라우저는 React 애플리케이션을 다시 로드하고, 클라이언트 측에서 올바른 경로를 렌더링할 수 있습니다.
 
[구현 방법]
Spring Boot에서 React 라우팅을 처리하기 위한 WebController를 다음과 같이 작성할 수 있습니다.
import org.springframework.boot.web.servlet.error.ErrorController;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;

@Controller
public class WebController implements ErrorController {

    @GetMapping({
        "/purchased-product"
    })
    public String index() {
        // Spring Boot가 React의 index.html 파일을 반환하도록 설정
        // index.html은 /resources/static 또는 /resources/public에 위치
        return "index.html";
    }
}

 위 코드는 React 애플리케이션의 경로를 명시적으로 나열하고, 해당 경로에 대한 요청이 들어오면 index.html을 반환하도록 설정합니다. 이렇게 하면 React의 라우터가 클라이언트 측에서 경로를 처리할 수 있는 환경을 제공하게 됩니다.
 
결론
Spring Boot와 React를 통합할 때, 클라이언트 사이드 라우팅으로 인해 발생하는 새로고침 404 오류는 React와 브라우저의 기본 동작 차이에서 발생합니다. 서버에서 React의 모든 경로를 처리하도록 설정함으로써 문제를 쉽게 해결할 수 있습니다.

React로 단일 페이지 애플리케이션(SPA)을 개발하고 Spring Boot를 통해 배포하는 과정에서, 사용자들이 특정 페이지로 이동한 후 새로고침을 하면 404 오류가 발생하는 경우가 있습니다. 이는 React와 Spring Boot가 라우팅을 처리하는 방식의 차이에서 비롯된 문제로, 많은 개발자가 마주하는 흔한 이슈입니다.&nbsp;문제 상황: 새로고침 시 404 오류 발생React 애플리케이션에서 BrowserRouter를 사용하여 클라이언트 사이드 라우팅(Client-Side Routing)을 처리할 때, 새로고침 시 다음과 같은 404 오류가 발생할 수 있습니다.<pre ><code class="language-bash">GET https://example.com/purchased-product 404 (Not Found)</code></pre>이 상황은 브라우저가 /purchased-product 경로에 대한 요청을 서버로 보냈지만, Spring Boot 서버가 해당 경로를 처리하는 방법을 알지 못해 404 Not Found를 반환했기 때문에 발생합니다.&nbsp;React는 클라이언트에서 모든 라우팅을 처리하도록 설계되었으나, 브라우저는 새로고침하거나 직접 URL을 입력했을 때 서버에 요청을 보내는 기본 동작을 따릅니다. 따라서 Spring Boot 서버가 이러한 요청을 적절히 처리하지 않으면 위와 같은 문제가 발생합니다.&nbsp;문제 원인: React와 Spring Boot 라우팅 처리 방식의 차이[React의 클라이언트 사이드 라우팅]React에서 BrowserRouter는 브라우저의 주소(URL)를 변경하지만 실제로 서버에 요청을 보내지 않습니다. 대신, 클라이언트 측에서 라우팅이 이루어지며, 경로에 매핑된 React 컴포넌트를 렌더링합니다.<ul ><li>URL 변경은 브라우저 주소창에서만 이루어집니다.</li><li>React 내부에서 지정된 컴포넌트가 로드됩니다.</li></ul>&nbsp;[브라우저의 기본 동작]반면, 브라우저에서 새로고침하거나 URL을 직접 입력하면 해당 경로에 대한 요청을 서버로 보냅니다.<ul ><li>서버는 경로에 대해 정의된 처리가 없는 경우, 404 Not Found를 반환합니다.</li><li>이는 서버가 클라이언트 사이드 라우팅 경로에 대해 무지한 상태이기 때문입니다.</li></ul>&nbsp;React와 브라우저의 동작 차이를 이해했으니, 이제 이를 해결하기 위한 Spring Boot 설정 방법을 살펴보겠습니다.&nbsp;해결 방법: Spring Boot에서 React 경로 처리하기Spring Boot 서버가 React 애플리케이션의 모든 경로를 처리하도록 설정하면, 브라우저가 서버로 보내는 모든 요청에 대해 React의 index.html 파일을 반환할 수 있습니다. 이렇게 하면 브라우저는 React 애플리케이션을 다시 로드하고, 클라이언트 측에서 올바른 경로를 렌더링할 수 있습니다.&nbsp;[구현 방법]Spring Boot에서 React 라우팅을 처리하기 위한 WebController를 다음과 같이 작성할 수 있습니다.<pre ><code class="language-java">import org.springframework.boot.web.servlet.error.ErrorController;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;

@Controller
public class WebController implements ErrorController {

 @GetMapping({
 "/purchased-product"
 })
 public String index() {
 // Spring Boot가 React의 index.html 파일을 반환하도록 설정
 // index.html은 /resources/static 또는 /resources/public에 위치
 return "index.html";
 }
}</code></pre>&nbsp;위 코드는 React 애플리케이션의 경로를 명시적으로 나열하고, 해당 경로에 대한 요청이 들어오면 index.html을 반환하도록 설정합니다. 이렇게 하면 React의 라우터가 클라이언트 측에서 경로를 처리할 수 있는 환경을 제공하게 됩니다.&nbsp;결론Spring Boot와 React를 통합할 때, 클라이언트 사이드 라우팅으로 인해 발생하는 새로고침 404 오류는 React와 브라우저의 기본 동작 차이에서 발생합니다. 서버에서 React의 모든 경로를 처리하도록 설정함으로써 문제를 쉽게 해결할 수 있습니다.

🕊️ Spring Boot&React에서 새로 고침 404 오류 

1
반대해야 하는 상황에 직면했을 때 대응 매뉴얼을 만들었다.

2
첫째, 상대 의견을 부정하지 않고 인정해 준다.

3
둘째, 공통점을 찾는다.

4
셋째, 내 의견을 피력하기 위한 자락을 만들어둔다. “이렇게 말씀드려 죄송합니다만”

5
넷째, 반대 의사를 표명한다. 이유와 근거, 대안을 포함해 말해야 한다.

#강원국의어른답게말합니다

1 반대해야 하는 상황에 직면했을 때 대응 매뉴얼을 만들었다. ​ ​2 첫째, 상대 의견을 부정하지 않고 인정해 준다. ​ ​3 둘째, 공통점을 찾는다. ​ ​4 셋째, 내 의견을 피력하기 위한 자락을 만들어둔다. “이렇게 말씀드려 죄송합니다만” ​ ​5 넷째, 반대 의사를 표명한다. 이유와 근거, 대안을 포함해 말해야 한다. #강원국의어른답게말합니다

< 매너 있게 반대하는 4단계 >

다른 API의 결과가 필요한 API가 있을 수도 있지만,

그렇지 않다면 사용자를 덜 기다리게 하기위해 동시에 호출해야겠죠.

호출은 각각 하지만 기능을 사용하기 위해 모든 API 결과가 필요할 때는 어떻게 해야 할까요?

이 글은 Swift에서 사용할 수 있는 모든 API 호출 결과를 받을 수 있는 여러 방법과 각각의 장/단점을 소개 합니다.

여러분은 어떤 방법을 사용하고 계신가요?

https://youtu.be/dmORl8iHcUo

다른 API의 결과가 필요한 API가 있을 수도 있지만, 그렇지 않다면 사용자를 덜 기다리게 하기위해 동시에 호출해야겠죠. 호출은 각각 하지만 기능을 사용하기 위해 모든 API 결과가 필요할 때는 어떻게 해야 할까요? 이 글은 Swift에서 사용할 수 있는 모든 API 호출 결과를 받을 수 있는 여러 방법과 각각의 장/단점을 소개 합니다. 여러분은 어떤 방법을 사용하고 계신가요? https://youtu.be/dmORl8iHcUo

CJ ENM 커머스 부문 백엔드 개발자

전여철

비투텍 개발자

김강산

안녕하세요 소프트웨어 개발자 김강산 입니다.

프론트엔드 개발자

#개발자 #디자이너 #웹디자인 #프론트엔드 #React #끊임없이배우기

여러 네트워크 API를 동시에 호출해보신 적 있나요?

모빌리티 / 교통

javascript

Java

React Native

typescript

Github

Objective-C

Android

킥고잉 앱 개발, 기술 로드맵 제시, 더 좋은 개발환경 고민

킥고잉 App 외국어 표시, 채널톡, 동네지도, 전기자전거, 길 안내 기능 개발
Rendering, 데이터 사용량 최적화, 코드 개선
React-Native 업그레이드 ~0.68

Mobile Tech Lead

금융 / 핀테크

정부 / 공공

swift

c언어

PDF 기반 iPad Presentation 앱(현 '폴라리스 쇼') 개발 총괄 및 핵심 아이디어 제시
국내 3대 통신사 서비스/플랫폼 개발 및 유지보수
삼성물산 건물 통합관리 시스템 클라이언트 개발 리드
SMS 기반 자체 보안 솔루션 유지보수


개발자

라이프스타일

관련주식검색기(+서버), 게임도우미, 공인중개사요약집, ShowNote, 문자행동, 누군지다알아, 말해봐 번역기, 술마셔건배사, 보내봐 단체문자, 우리어디가?, 로아도우미

개인 iOS 앱 개발자

교육 / 에듀테크

외국어 교육 1위 서비스 iPhone/iPad 수강앱 신규 개발
영상 플레이어 Pods 라이브러리로 개발하여 재활용
ReactNative, Unity 등 신규 Framework 선행 학습 및 파일럿 프로젝트 리드

iOS App Developer

3년제 전산과에서 분과된 소프트웨어 전공 학과
사내 벤쳐 동아리 활동/교내 대회 출품
졸업 작품: WIPI Designer
- Windows Forms 처럼 그리면 실행했을 때 동일한 화면이 나오도록 코드 생성
- WINAPI(Visual C)로 개발


소프트웨어 전공

이영준

Naver

링크드인

KT 협력사 SI 그만 두고 집에서 혼자 개인 iOS 일년 동안 출시했고 시원스쿨의 iOS를 밑바닥 부터 개발 킥고잉에서 Mobile Tech Lead를 했다. 현재 프리랜서 SKT 대리점 관리/고객센터 iOS 앱 운영

#앱개발자 #iOS개발자 #SwiftUI

여러 네트워크 API를 동시에 호출해보신 적 있나요?

댓글 0

비슷한 게시물

주간 인기 TOP 10

추천 프로필