Web19 리액트 카카오(kakao) 소셜로그인 구현 카카오 소셜 로그인 구현 (React - Spring) 여기서 프론트엔드는 카카오에게서 인가코드를 받아서 백엔드에게 전달만 하면 끝이다!1. 애플리케이션 등록https://developers.kakao.com/ Kakao Developers카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다.developers.kakao.com먼저 여기서 Kakao Developers에 로그인 후 애플리케이션 생성하고 REST API 키 및 Redirect URI를 설정해야 한다.2. 카카오 로그인 요청 사용자가 '카카오 로그인' 버튼을 클릭하면 카카오 인증 페이지(https://kauth.kakao.com/oauth/authoriz.. 2025. 1. 23. React Daum Postcode(카카오 우편번호 서비스) 방법이 두가지가 있었다.1. 다음 우편번호 서비스 API 사용하기(react-daum-postcode)https://www.npmjs.com/package/react-daum-postcode react-daum-postcodeDaum Postcode service for React. Latest version: 3.1.3, last published: a year ago. Start using react-daum-postcode in your project by running `npm i react-daum-postcode`. There are 24 other projects in the npm registry using react-daum-postcode.www.npmjs.com 2. 카카오 우편번호 .. 2024. 11. 29. [모던 리액트 Deep Dive] 타입스크립트 TypeScript is JavaScript with syntax for types자바스크립트 문법에 타입을 가미한것이 타입스크립트이다. 타입스크립트는 자바스크립트의 한계를 벗어나 타입 체크를 정적으로 런타임이 아닌 빌드 타임에 수행할 수 있게 해준다.런타임까지 가지 않더라도 코드를 빌드하는 시점에서 이미 에러가 발생할 가능성이 있는 코드를 확인할 수 있다.타입스크립트 활용법any 대신 unknown을 사용하자any모든 타입을 허용하므로 타입 안전성이 낮다.타입 추론이 어렵다.unknown모든 타입을 허용하지만, 실제 사용 시 타입 검사가 필요하므로 타입 안전성이 높다.다른 타입으로 좁혀질 수 있어, 타입 추론이 용이하다. 타입 가드를 적극 활용하자조건문 + 타입가드를 사용하면 타입을 효과적으로 좁힐 수.. 2024. 4. 30. [모던 리액트 Deep Dive] 리액트에서 자주 사용하는 자바스크립트 문법 구조 분해 할당배열 또는 객체의 값을 말 그대로 분해해 개별 변수에 즉시 할당하는 것.배열 구조 분해 할당 : 배열의 요소를 개별 변수에 할당하는 방법기본 사용법 ▼const array = [1, 2, 3, 4, 5]let [first, second, third, fourth ,fifth] = array;console.log(first); // 1console.log(second); // 2console.log(third); // 3console.log(fourth); // 4console.log(fifth); // 5 일부 요소 건너뛰기 ▼쉼표를 사용하여 배열의 일부 요소 건너뛰기const array = [1, 2, 3, 4, 5]let [first, , , ,fifth] = array;console.. 2024. 4. 29. [모던 리액트 Deep Dive] 이벤트 루프와 비동기 통신의 이해 싱글 스레드 자바스크립트싱글 스레드는 자바스크립트의 코드의 실행이 하나의 스레드에서 순차적으로 이루어지는 것을 의미한다.이는 코드를 한 줄 한 줄 실행하는 것을 의미하며, 궁극적으로 하나의 작업이 끝나기 전까지 뒤이은 작업이 실행되지 않는다는 것을 의미한다. 이러한 특징은 'Run-to-completion'이라고 하며, 동시성을 고민할 필요가 없다는 점에서는 아주 큰 장점이 된다. 자바스크립트는 싱글 스레드에서 동기방식으로 작동한다. 일반적으로 한 번에 하나의 작업을 처리할 수 있는 것이다.동기 방식은 직렬 방식으로, 하나의 작업을 처리할 동안 다른 모든 작업은 대기한다. 과거에는 자바스크립트가 기초적인 수준에서만 제한적으로 사용되었기 때문에 싱글 스레드가 더 합리적인 방식이었다.오히려 멀티 스레딩을 지.. 2024. 4. 28. [모던 리액트 Deep Dive] 클로저 클로저란? : 함수와 함수가 선언된 어휘적 환경(Lexical Scope)의 조합function add() { const a = 10 function innerAdd() { // innerAdd() 은 내부 함수이며, 클로저다. const b = 20 console.log(a + b); } innerAdd(); }add();함수가 중첩된 상황에서 a 변수의 유효범위는 add 전체이고, b 변수의 유효범위는 innerAdd 전체이다.선언적 어휘적 환경이란, 변수가 코드 내부에서 어디서 선언됐는지를 말하는 것이다.변수의 유효범위, 스코프(Scope)변수의 유효범위에 따라서 어휘적 환경이 결정된다. 이러한 변수의 유효 범위를 스코프(scope)라.. 2024. 4. 28. 이전 1 2 3 4 다음
