루루의 우당탕탕 개발 스토리 루루의 우당탕탕 개발 스토리

네이버, 카카오, 구글 3사의 소셜 로그인을 오로지 React 웹 서버를 통한 구현방식을 우선 소개하고, 백엔드를 이용하여 보안을 강화하는 방법도 함께 소개하겠다. OAuth 란? 구글, 페이스북, 트위터와 같은 다양한 플랫폼의 특정한 사용자 데이터에 접근하기 위해 제3자 클라이언트(우리의 서비스, 앱)가 사용자의 접근 권한을 위임(Delegated Authorization)받을 수 있는 표준 프로토콜이다. 쉽게 말하자면, 우리의 서비스가 우리 서비스를 이용하는 유저의 타사 플랫폼 정보에 접근하기 위해서 권한을 타사 플랫폼으로부터 위임 받는 것 이다. 우선 전체적인 OAuth의 구동방식은 아래와 같다. 우리는 우선 웹서버를 통하여 구현할 예정이니 위 그림을 참고하자. 우리의 웹 서버에서 카카오 로그인 요..

vite + typescript 절대경로를 지정하기 위해서는 아래 두 파일을 건드려줘야한다. vite.config.ts, tsconfig.json 1. vite.config.ts import { defineConfig } from 'vite'; import react from '@vitejs/plugin-react'; import tsconfigPaths from 'vite-tsconfig-paths'; // https://vitejs.dev/config/ export default defineConfig({ base: './', plugins: [react(), tsconfigPaths()], }); 에서 base: './'를 추가하고, vite-tsconfig-paths를 설치하여 pulgins추가해..

일단, 리액트 라우터를 알기 전에 리액트가 SPA를 쉽게 만들수 있도록 하는 라이브러리라는 점에 주목해야한다. SPA의 경우 브라우저상으로 뒤로 가기, 앞으로 가기와 같은 내비게이션 사용이 불가하다. 그 이유는 기존방식은 url 변경시 새로고침되며 모든 페이지를 reload하여 로드 시간이 오래 걸렸지만, React는 SPA 체제로 새로고침 대신 Router를 사용하여 변경된 소스만 바뀌도록 하기 때문에 속도를 개선한다. 하지만 페이지에 따라 주소를 각각 만들기 위한 Routing이 필요하고 리액트에서는 다양한 라이브러리를 통해 이러한 기능을 제공한다. 그러한 라이브러리 중 대표적으로 React Router가 있다. React Router는 여러 화면으로 구성된 웹 애플리케이션을 만들 때 클라이언트 사이..

클로저 상태를 안전하게 변경하고 유지하기 위해 사용한다. 다시말해, 상태가 의도치 않게 변경되지 않도록 상태를 안전하게 은닉하고 특정 함수에게만 상태 변경을 허용하기 위해 사용한다. 변수 값은 누군가에 의해 언제든지 변경될 수 있어 오류 발생의 근본적 원인이 될 수 있다. 외부 상태 변경이나 가변 데이터를 피하고 불변성을 지향하는 함수형 프로그래밍에서 부수효과를 최대한 억제하여 오류를 피하고 프로그램의 안정성을 높이기 위해 클로저는 적극적으로 사용된다. 아래는 함수형 프로그래밍에서 클로저를 활용하는 간단한 예제다. // 함수를 인수로 전달받고 함수를 반환하는 고차 함수 // 이 함수는 카운트 상태를 유지하기 위한 자유 변수 counter를 기억하는 클로저를 반환한다. function makeCounter..

this 바인딩은 함수 호출 방식, 즉 함수가 어떻게 호출되었는지에 따라 동적으로 결정된다. 함수의 상위 스코프를 결정하는 방식인 렉시컬 스코프는 함수 정의가 평가되어 함수 객체가 생성되는 시점에 상위 스코프를 결정한다. 하지만 this 바인딩은 함수 호출 시점에 결정된다. this는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수다. this를 통해 자신이 속한 객체 또는 자신이 생성할 인스턴스의 프로퍼티나 메서드를 참조할 수 있다. 아래는 일반 함수 내부, 메서드 내부, 생성자 함수 내부에서의 this 사용의 예시이다. // this는 어디서든지 참조 가능하다. // 전역에서 this는 전역 객체 window를 가리킨다. console.log(this); //window fu..

코드의 문맥은 렉시컬 환경으로 이뤄진다. 렉시컬 환경이란 코드가 어디서 실행되며 주변에 어떤 코드가 있는지를 뜻하며 이를 구현한 것이 실행컨텍스트이다. 모든 코드는 실행컨텍스트에서 평가되고 실시된다. 스코프는 실행 컨텍스트와 깊은 관련이 있다. 스코프? 실행컨텍스트? 렉시컬 환경? 모두 어려운 개념이지만 너무나 중요한 개념이다. 우선 이 개념들을 짚고 가기 전에 스코프에 대한 개념을 설명해보고자 한다. 스코프의 종류 전역/지역 구분 설명 스코프 변수 전역 코드의 가장 바깥 영역 전역 스코프 전역 변수 지역 함수 몸체 내부 지역 스코프 지역 변수 이 때 변수는 자신이 선언된 위치(전역 또는 지역)에 의해 자신이 유효한 범위인 스코프가 결정된다. 즉, 전역에서 선언된 변수는 전역 스코프를 갖는 전역 변수이고..

자바스크립트의 함수는 "일급 객체"이다. 함수가 일급객체라는 것은 함수를 값처럼 자유롭게 사용할 수 있다는 의미이다. 함수가 객체라는 사실은 다른 프로그래밍 언어와 구별되는 자바스크립트의 중요한 특징이다. 함수는 일급 객체이므로 함수 리터럴로 생성한 함수 객체를 변수에 할당할 수 있다. 이러한 함수 정의 방식을 함수 표현식이라고 한다. // 무명 함수 표현식 var add = function(x, y) { return x + y; }; console.log(add(2, 5)); //7 // 기명 함수 표현식 var add = function foo (x, y) { return x + y; }; console.log(add(2, 5)); // 7 console.log(foo(2, 5)); // Refere..

React 앱의 마운트 과정 1. 함수 컴포넌트 호출 2. 구현부 실행 - props 취득, hook 실행, 내부 변수 및 함수 생성 - 이 때 hook에 등록해 둔 상태값, 부수함수 효과등은 별도 메모리에 저장되어 관리된다. (useMemo, useCallback등을 활용한 케이스) cf. useMemo vs useCallback 차이 및 각각의 특징과 언제쓰는지에 대한 포스팅 3. return 실행 - 렌더링 단 4. 렌더 단계 (렌더 트리 구축) - 새로운 가상 Dom 생성 후, 이전 가상 DOM과 비교하여 달라진 부분을 탐색하고 실제 DOM에 반영할 노드들을 결정한다. - DOM 트리에 있어도 display: none 속성이 있거나 head등 표시되지 않는 태그의 경우 화면에 표시되지 않을 수 있..