요즘 JS사용에서 TS로 추세가 넘어가고 있다더라고요. 특히 리액트와 타입스크립트 조합이 매우 유용하다해서 저도 공부를 시작했습니다! 타입스크립트 언어의 기본 사용법과 문법은 자바스크립트와 동일 💡 왜 타입스크립트를 사용하나요? 동적인 자바스크립트를 정적으로 → 타입 선언으로 컴파일 시, 에러를 사전에 잡아준다. 디버깅의 편의 : 에러 메시지가 구체적이고 자세하게 나온다. 이러한 이유로, 현재 TS를 사용하는 추세가 이어지고 있다고 합니다. React + TS react+ts는 기존 리액트와 구조는 동일합니다. 여기서 state, props, function, event 등에 타입을 선언해준다는 점이 기존 리액트와의 차이점입니다. 각각 리액트에서 어떻게 사용되는지 설명해보겠습니다. State 우선 리액트..

이전에 [리액트_ts를 이용하여, 카카오 로그인 구현]에 대해 포스팅했습니다. keeper.tistory.com [React]카카오 REST API 로그인_TS 소셜 로그인 중 가장 대표적으로 사용되는 것이 카카오 로그인입니다. 개발 문서도 자세히 나와있어서, 저도 카카오 로그인을 택했습니다 다만 보안 강화를 위해서 JWT를 추가적으로 이용하였습 keeper.tistory.com 이번에는 서버 측에서 처리한 카카오 로그인 구현에 대해 작성해볼게요 :-D 카카오 로그인 구현 토큰을 이용한 로그인의 전체적인 흐름은 다음과 같습니다. 로그인 → 인가 코드 발급 client 인가 코드 → 토큰 발급(access, refresh) client access토큰을 서버로 넘겨 사용자 인증 후 DB 저장 → JWT 토..

소셜 로그인 중 가장 대표적으로 사용되는 것이 카카오 로그인입니다. 개발 문서도 자세히 나와있어서, 저도 카카오 로그인을 택했습니다 다만 보안 강화를 위해서 JWT를 추가적으로 이용하였습니다 :-D 카카오 로그인 토큰 Access Token 사용자를 인증합니다. Android, iOS : 12시간 JavaScript: 2 시간 REST API : 6시간 Refresh Token 일정 기간 동안 다시 인증 절차를 거치지 않고도 액세스 토큰 발급을 받을 수 있게 해 줍니다. 2달 유효기간 1달 남은 시점부터 갱신 가능 Kakao Developers 카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다. developers...

💻 핵심 클로져 함수가 속한 렉시컬 스코프를 기억하여 렉시컬 스코프 밖에서도 스코프에 접근가능하도록 해주는 기능 예제 function foo(){ var a=2; function bar(){ console.log(a); } return bar(); } var baz= foo(); baz(); //2 함수 bar()는 foo() 내부 렉시컬 스코프에 존재하고, 이 bar()는 foo() 스코프에 대한 클로저를 가집니다. 변수에 foo()를 대입하여, 반환된 bar()함수를 호출하여, bar() 를 렉시컬 스코프 외부에서 실행 💡 bar()는 foo()의 호출이 끝나더라도, 여전히 해당 스코프에 대한 참조를 가짐 : 클로저 함수는 처음 선언된 곳의 스코프에 대한 참조를 유지 👉 어디에서 해당 함수를 실행하든..

자바스크립트는 순차적으로 코드가 실행되어 선언문 이후에 변수가 대입되어야 값을 이용할 수 있다고 생각합니다. 하지만, 컴파일러의 역할을 다시 생각해보면, 그것이 아니란 것을 알 수 있습니다. a = 2; var a; console.log( a ); // 출력 : 2 💻 컴파일러는 두번 공격한다. 자바스크립트의 컴파일레이션 단계에서 '렉시컬 스코프' : 모든 선언문을 찾아 적절한 스코프에 연결해주는 과정 var a = 2 var a; a = 2; 자바스크립트는 위 구문을 선언문과 대입문으로 나누어 처리합니다. 선언문: 컴파일레이션 단계에서 처리 대입문: 실행단계에서 처리 👉 '호이스팅' : 변수와 함수 선언문은 선언된 위치 스코프에서 최상단으로 끌어올려지는 동작 ❗ 선언문은 컴파일레이션 단계에서 처리되어,..

💻 redux-saga를 이용한 비동기 액션처리 비동기 액션을 처리하는 라이브러리 리덕스에서 액션 처리후, 비동기 처리를 통해 상태값을 변경시키고 싶을 경우 사용 redux-thunk redux-observable (RxJS 패키지 기반) redux-saga : 제너레이터 기반, 활용도가 높고/ 테스트 코드 작성에 쉬움. 💡 제너레이터 제너레이터는 function*와 같이 작성. function* f1() { console.log('f1-1'); yield 10; console.log('f1-2'); yield 20; console.log('f1-3'); return 'finished'; } const gen = f1(); console.log(gen.next()); /* 실행구간 console.log(..