문제 상황일반 코드만 푸시할 때는 아무 문제가 없었는데,용량이 큰 PNG 또는 SVG 파일을 함께 푸시하자 다음과 같은 에러가 발생하였습니다.POST git-receive-pack (chunked)send-pack: unexpected disconnect while reading sideband packetfatal: the remote end hung up unexpectedlyEverything up-to-date 원인Git은 기본적으로 전송 가능한 파일 크기 제한(기본 약 1MB)이 설정되어 있습니다.큰 이미지나 리소스 파일을 푸시할 경우, 이 제한을 초과하면서 전송이 중단됩니다. 해결 방법아래 명령어를 통해 전송 버퍼 크기(postBuffer)를 늘려주면 해결됩니다. ✅ 로컬 저장소에만 적용git..

개발을 시작할 때 제일 먼저 고민하는 것 중 하나가 바로 프로젝트 구조입니다.코드가 커질수록 "이걸 한 저장소에 다 넣어아 하나?" "아니면 프로젝트별로 따로 관리해야 하나?" 하는 고민이 생깁니다. 이 글에서는 그런 고민을 정리해보려 합니다.1. 멀티레포에서 시작한 이유처음에는 각 프론트엔드 앱을 따로 관리하는 멀티레포 구조를 선택했습니다.각 앱이 독립적으로 배포되어야 했고, 기능도 달랐기 때문입니다. 하지만 곧 여러 문제가 발생했습니다. 공통 UI 컴포넌트의 중복 관리project1/src/components/Button.tsxproject2/src/components/Button.tsxproject3/src/components/Button.tsx같은 Button, Modal, Table 등의 컴포넌..

개발을 하다 보면 어느새 import 구문이 줄줄이 늘어져서 코드 위쪽만 봐도 스트레스가 쌓일 때가 있습니다.특히 컴포넌트가 많아지고 폴더가 깊어질수록 길어지는데,이럴 때 유용하게 쓸 수 있는게 바로 barrel export 구조입니다. Barrel Export란?Barrel export는 여러 모듈(파일)을 하나의 진입점(index.ts 또는 index.js 등)에서 모아서 export 해주는 방식입니다.이 방식을 사용하면 외부에서 그 폴더 내 모듈을 사용할 때 훨씬 간단하게 import 할 수 있습니다. [예시]아래 두가지 컴포넌트가 있다고 가정해보겠습니다.// components/Button.tsxexport const Button = () => { /* ... */ };// components/I..

요즘 프론트엔드 구조화 이야기할 때 빠지지 않는 것은 FSD (Feature-Sliced Design)입니다. 실제로 프로젝트에 FSD를 적용해보면서 느낀 건,"생각보다 경계가 애매하다", "사람마다, 팀마다 다르게 쓸 수도 있겠구나" 입니다. 이번 글에서는 제가 FSD를 직접 적용해보며 겪은 시행착오화 함께, 어떻게 구성했는지, 폴더 구조는 어떻게 짰는지, 그리고 어떤 고민이 있었는지를 솔직하게 정리해봤습니다. FSD 기본 구조: Layers, Slices, SegmentsFSD(Feature-Sliced Design)는 단순히 디렉토리를 나누는 것처럼 보일 수 있지만, 실제로는 명확한 개념 체계를 기반으로 한 설계 방식입니다. 이 구조를 이해하려면 세 가지 핵심 단어를 구분해야 합니다. 1. Laye..

지난 글에서 OAuth의 기본적인 개념을 파악했다면, 이번엔 OAuth 2.0을 파헤쳐볼 것이다!1️⃣ OAuth 2.0이란?OAuth 2.0은 비밀번호 없이 안전하게 인증하는 방법이다. 사용자의 계정을 보호하면서, 특정 서비스가 내 정보를 가져갈 수 있도록 허용하는 시스템이다.지난 글에서도 작성했지만, 간단하게 핵심 원리만 작성해보자면..(https://lucylog.tistory.com/9) ✅ OAuth 2.0 핵심 원리사용자가 로그인 요청 ➜ 서비스가 OAuth 제공자 (예: 구글, 카카오, 깃허브)로 이동시킴.OAuth 제공자가 사용자를 인증하고, 인가 코드(Authorization Code)를 앱에 전달함.앱이 인가 코드를 이용해 액세스 토큰(Access Token)을 발급 받음.액세스 토큰으..

1️⃣ Google Cloud Console 로그인Google Cloud Console에 로그인한다. 2️⃣ 프로젝트 선택 또는 생성Google Cloud Console에 로그인 한 후, 기존 프로젝트를 선택하거나 새로운 프로젝트를 생성한다.3️⃣ OAuth 동의검색란에 "OAuth 동의" 검색 후에 "OAuth 동의 화면"을 클릭한다. 만약 새로운 프로젝트가 선택된 경우라면 Google 인증 플랫폼이 아직 구성되지 않았으니, 앱 정보를 입력하라고 나온다. 이 때, 사용자 유형으로는 보통 외부 사용자를 선택하면 된다.4️⃣ OAuth 클라이언트 만들기이제 실제로 Client ID를 생성할 수 있다. 위와 같은 화면이 나타나지 않는다면,1. API 및 서비스 > 사용자 인증정보2. 상단에서 사용자 인증 정..

소셜로그인, 즉 구글, 카카오톡, 페이스북 같은 계정으로 한 방에 로그인 되는 그 기술이 바로 OAuth이다.근데 단순히 이게 로그인만 도와주는 게 아니라, 앱들이 사용자 정보를 안전하게 주고받을 수 있도록 도와주는 프로토콜이라는 것이다!이 OAuth가 뭔지, 어떻게 동작하는지 간단하게 정리해보았다. 🎯 OAuth의 기본 개념OAuth는 쉽게 말해서 내 비밀번호를 안 주고도, 다른 서비스가 내 정보를 사용할 수 있게 해주는 시스템이다. 예전 방식이라면 앱에 내 구글 계정 아이디랑 비밀번호를 줘야했는데, 이렇게 되면 보안이 완전 구멍이다.OAuth는 이런 문제를 해결하기 위해 토큰이란걸 사용한다.즉, 앱이 내 비밀번호를 몰라도, 구글이 준 사용 권한이 담긴 토큰만 있으면 필요한 정보에 접근할 수 있다.핵..

📍MapBox로 3D GeoJSON 표현하기GeoJSON 데이터를 MapBox에서 3D로 표현하고 싶다면, Height 속성을 이용해 3D 효과를 적용할 수 있다.1️⃣ MapBox 기본 세팅이전 글에서 MapBox 기본 세팅 방법을 다루었다. 기본 설정이 이미 되어있다면, 이 단계는 건너뛰어도 된다!React+Mapbox 초기 세팅 🌍2️⃣ GeoJSON 레이어 추가하기GeoJSON에 있는 height 속성을 기반으로 3D 효과를 주기 위해서, paint 속성을 설정해야 한다.여기서 중요한 점은 리터럴 함수를 사용하여 GeoJSON의 특정 필드를 참조할 수 있다는 점이다! 필요한 paint 속성:'fill-extrusion-color': 폴리곤의 색상. GeoJSON에 color 속성이 없으면, 직..