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는 이런 문제를 해결하기 위해 토큰이란걸 사용한다.즉, 앱이 내 비밀번호를 몰라도, 구글이 준 사용 권한이 담긴 토큰만 있으면 필요한 정보에 접근할 수 있다.핵..

이번 영상을 보고 느낀점:"나는 말하는 감자다...🥔" 하지만 이제 공부 하면 되지...생소한 용어들이 쏟아져서 머리가 띵했다. 그래서 먼저 용어들을 '아주 간단히' 정리해보았다. 🧐 용어 정리✔️ Currying (커링) & 부분 적용: 여러 개의 매개변수를 받는 함수를 쪼개서, 일부 매개변수만 적용할 수 있도록 만드는 기법.const multiply = (a) => (b) => (c) => a * b * c;console.log(multiply(2)(3)(4)); // 24 ✔️ 파이프라이닝 (Pipelining): 여러 개의 함수를 연결해서 코드를 읽기 쉽게 만드는 방법const double = x => x * 2;const increment = x => x + 1;const square = x..

🥸 코드 퀄리티..개발을 하면서 가장 힘들었던 순간 중 하나는 예상하지 못한 버그를 마주하고 그 버그를 해결하기 위해 몇 시간, 길게는 며칠동안 에너지를 쏟았을 때였다! 🤯분명 간단한 코드인데, 막상 실행하면 이상한 동작을 하고, 사이드 이펙까지 터져서 "도대체 왜 이렇게 동작하지?"라는 혼잣말을 중얼중얼 읊었던 기억들이 있다.그리고 결국 원인을 돌아봤을 때 정말 사소한 문제였던 적이 많다. 그러면서 "좀 더 좋은 코드로 짤 수는 없을까?"라는 고민이 커졌다. ✨ 좋은 코드란 무엇일까내가 생각하는 좋은 코드란, 남이 이해하기 좋은 코드이다. 주석으로 주절주절 설명을 달 수도 있지만, 그 전에 명확한 함수명과 변수명, 그리고 쉽게 풀어진 로직들로 충분히 남을 이해시킬 수 있는 코드가 좋은 코드라고 생각..

📍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..

🌐 SOP와 CORS의 등장🛡️SOP(Same-Origin Policy)란?SOP(동일 출처 정책)는 보안을 위해 같은 출처(origin)에서만 리소스를 로드할 수 있도록 제한하는 정책이다. 📌 출처(Origin)란?출처는 Protocol(스키마) + Host(도메인) + Port로 구성된다.예를 들어, https://lucylog.tistory.com/manage/newpost/4?type=something 라면 https://lucylog.tistory.com/ 까지가 출처이다. 🔒SOP가 없으면?해커가 악성 스크립트를 포함해 사용자를 해킹할 수 있다.아래와 같은 방식(XSS)으로 쿠키 탈취 및 세션 하이재킹이 가능하다.fetch('http://google.com').then(...) // 이..

웹 브라우저에는 데이터를 저장할 수 있는 Local Storage, Session Storage, Cookies같은 저장 공간이 존재한다.HTML5부터는 새로운 웹 저장소인 Web Storage(Local Storage & Session Storage) 개념이 추가되었다. 보통 변수에 데이터를 저장하면 새로고침하면 사라지지만, 브라우저 저장소를 활용하면 새로 고침을 해도 유지할 수 있다.그럼 각 저장 방식의 차이점을 한 번 살펴보자! 🔍1️⃣ Web Storage 🗃️☑️ Local Storage (영구 저장소)데이터를 브라우저에 영구적으로 저장할 수 있다.브라우저를 종료해도 데이터가 유지된다.단, 같은 도메인에서만 접근 가능하다.☑️ Session Storage (임시 저장소)데이터를 브라우저에 영..