Dev

개발을 하다 보면 어느새 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 속성이 없으면, 직..

Mapbox를 통해 GeoJSON 데이터를 테스트하기 위하여 React와 Mapbox를 연동하는 세팅을 진행하였다. 1️⃣ Create a React App with Vite1.  Vite를 사용하여 React 프로젝트를 생성한다.$ npm create vite@latest 'mapbox-react'  2. npm 모듈을 설치하고 실행한다.$ cd mapbox-react$ npm install$ npm run dev 3. http://localhost:5173/ 에 접속하면 다음과 같은 화면이 나타난다. 🎉2️⃣ Create a map container element1. Mapbox GL JS는 특정 HTML요소(div)에 맵을 추가하는 방식으로 동작한다. 이를 맵 컨테이너라고 하며, 크기와 위치를 C..