전체 글

애플 로그인은 OAUTH 2.0을 기반으로 동작합니다. 애플 로그인 프로세스 로그인 프로세스는 다음과 같습니다. 사용자가 계정 정보를 입력 후 로그인 요청을 합니다. 애플은 사용자의 아이디와 이메일을 암호화 하고 해당 정보들을 포함하는 ID 토큰을 생성합니다. ID 토큰과 함께 사용자를 웹 사이트로 리디렉션 합니다. 리디렉션 된 웹의 URL에서 토큰을 추출하고 디코딩 하면 사용자의 애플 계정 정보를 가져옵니다. 해당 정보를 바탕으로 웹에서 사용자를 인증하고 세션이 생성됩니다. 애플 로그인 설정 애플 로그인 시 service ID, client ID, redirect URL등을 설정해야 합니다. https://developer.apple.com/account/resources 페이지에 접속합니다. Appl..

카카오 로그인은 기본 방식인 권한 부여 승인 코드 방식을 채택하고 있습니다 작동 방식 1. 사용자가 서비스에서 카카오 로그인 버튼을 클릭하면 카카오 인증 서버로 인가 코드 발급을 요청합니다. 2. 카카오 인증 서버는 사용자에게 인증을 요청합니다. - 카카오톡으로 로그인: 카카오톡 실행, 카카오톡에 연결된 카카오계정의 자격정보(Credentials)로 사용자 인증 - 카카오계정으로 로그인: 계정 정보를 입력해 로그인하는 화면 출력, 해당 카카오계정의 자격정보로 사용자 인증 3. 카카오 인증 서버는 사용자 인증 성공 시, 서비스 앱의 동의 항목 설정을 바탕으로 사용자에게 동의 화면을 출력합니다. 4. 사용자가 필수 동의 항목에 동의하고 로그인을 요청하면, 카카오 인증 서버는 인가 코드(Authorizatio..

구글 로그인은 기본 방식인 권한 부여 승인 코드 방식을 채택하고 있습니다. Google Developers 설정 1. https://console.cloud.google.com 접속 2. API 및 서비스 -> 사용자 인증 정보 -> OAuth 2.0 클라이언트 ID에서 id 생성 필수 정보 입력 애플레이케이션 유형 항목에 '웹 애플리케이션' 선택 애플리케이션 이름 입력 승인된 자바스크립트 원본 항목에 구글 로그인을 사용할 홈페이지 주소 입력 승인된 리디렉션 URI 항목에 구글 로그인 후 Redirect할 주소 입력 로컬에서 테스트가 필요하므로 https://localhost:3000을 추가해주세요 해당 과정이 완료되면 아래와 같이 클라이언트 ID를 발급받습니다. 구현 방법 프론트에서는 아래와 같이 구현..

회사 프로젝트를 진행하던중 사이트가 렌더링 되는 속도가 느린것을 발견하여 최적화를 진행해 보기로 했다. 컴포넌트 성능을 측정하기 위해 react profiler를 사용하였다. 처음 성능을 측정한 결과 상품을 보여주는 카드 컴포넌트가 스크롤이 될때마다 새로 렌더링이 계속 되어 사이트 성능에 영향을 주고 있는것을 확인하였다. function CardItem({item, isProfile}: {item: C2CRelatedGoods; isProfile?: boolean}){ const {price, createdAt, product, mainImage, id, user, discount, sellPrice, titleImage, code, originalPrice} = item ... return ( ... ..

서론 회사 프로젝트에서 소셜 로그인 기능을 추가하면서 알아간 사실을 적어봅니다. 카카오, 구글, 애플 소셜 로그인을 구현했는데 각각 다른거 같으면서도 모두 다 OAUTH2.0을 기반으로 동작하는것을 알았습니다. OAUTH란? 인터넷 사용자들이 비밀번호를 제공하지 않고 다른 웹사이트 상의 자신들의 정보에 대해 웹사이트나 애플리케이션의 접근 권한을 부여할 수 있는 공통적인 수단으로서 사용되는, 접근 위임을 위한 개방형 표준 쉽게 말해, 서비스를 이용하는 유저의 타사 플랫폼 정보에 접근하기 위해서 권한을 타사 플랫폼으로부터 위임 받는 것이다. 흐름도 사용자(User) : 서비스 제공자와 소비자를 사용하는 계정을 가지고 있는 개인 소비자(Conusmer) : Open API를 이용하여 개발된 OAuth를 사용하..

회사에서 진행하는 프로젝트가 redux를 사용하는 것을 알고 공부를 하면서 이해한 내용을 적어본다. redux란? redux는 자바스크립트 상태관리 라이브러리이다. redux의 세 가지 원칙 1. Single source of truth 동일한 데이터는 항상 같은 곳에서 가지고 온다. 즉, 스토어라는 하나뿐인 데이터 공간이 있다는 의미이다. 2. State is read-only 리액트에서는 setState 메소드를 활용해야만 상태 변경이 가능하다. 리덕스에서도 액션이라는 객체를 통해서만 상태를 변경할 수 있다. 3. Changes are made with pure functions 변경은 순수함수로만 가능하다. 리듀서와 연관되는 개념이다. Store(스토어) – Action(액션) – Reducer(리..

부트캠프에서 진행한 Todo list 개인 프로젝트 프로젝트 GitHub - hyeon17/todolist Contribute to hyeon17/todolist development by creating an account on GitHub. github.com KPT Keep 기존 중복 코드를 최대한 덜어내 함수 형태로 작성하여 코드의 가독성을 높였다. 기존에 구현한 우선순위 기능을 새로고침 하여도 유지되게 수정하였다. Problem 우선순위를 설정 시 로컬스토리지에 정보를 저장했는데 우선순위를 바꾸면 기존에 저장되어 있던 데이터가 바뀌지 않았다. 로컬스토리지에 저장된 우선순위 데이터가 화면에 삭제되어도 로컬스토리지에는 삭제되지 않고 유지되었다. Try 우선순위가 변동될 시 변동된 데이터의 id가 로..

프로젝트 실제 기업과 협업하여 진행한 증권사 PB 중개 플랫폼 GitHub - FINALALT1/money-bridge Contribute to FINALALT1/money-bridge development by creating an account on GitHub. github.com KPT Keep swagger를 통해 Web API를 자동으로 문서화하여 백엔드와의 소통이 원활했다 노션을 통해 문서를 정리하고 이를 바탕으로 체계적으로 개발을 진행하여 효율적으로 작업을 했다. 저녁 스크럼 시간 때는 모여서 함께 PR을 진행하고 해당 PR에 대한 코드 리뷰, 질의응답을 진행하며 서로의 코드에 대한 이해도를 높였다. 팀 내 코어 타임 규칙을 통해 해당 시간(낮 1시 ~ 밤 10시)에는 디스코드에 상주함으로..