리액트로 구글 아이디로 로그인 구현하기 ❓상황 회원가입 대신, SNS 로그인 기능 구현해보고 싶어서 진행했다. 📖 SNS 로그인 구현 더보기 구글 로그인을 적용하는 방법 1. 새 프로젝트 생성 2. 사용자 인증 정보 생성 3. 구글 플랫폼 라이브러리 가져오기 4. 구글 클라이언트 초기화하기 5. 구글 로그인 버튼 추가 6. 사용자 프로필 정보 가져오기 7. 로그아웃 Google Cloud Platform Setting 홈페이지 접속 새 프로젝트 생성 사용자 인증 정보 생성 사용자 인증 정보 사용자 정보에 접근할 수 있도록 사용자에게 동의를 구하도록 한다. OAuth 동의 화면 구성하기 OAuth 클라이언트 ID로 들어가면, 제품이름을 설정해야한다고한다. 동의 화면 구성을 클릭해서 설정하자 구글 계정을 가..

숏폼 모바일 팀프로젝트 [마감] 디자인-프론트-백엔드 연계 모바일용 웹 서비스 만들기 챌린지 챌린지 일정표 www.numble.it ❓상황 해당 팀프로젝트 하기 전까지 제대로된 팀프로젝트를 해보지 못해서 아쉬웠었는데, 넘블에서 디자인-프론트-백엔드 연계하여 팀프로젝트를 진행한다고 해서 지원하게 되었다. 🏫 전체 과정 진행 기간 : 22. 4. 15. 금 ~ 22. 5. 15. 일 (31일간) 챌린지 주제 : 숏폼 모바일용 웹 서비스 만들기 내가 기여한 개발내용 : 회원가입 페이지, 영상 재생 페이지, 마이페이지 사용한 기술스택 : React, Typescript, Axios 결과 및 성과 느낀점 🎥 진행 기간 🗒️ 주요 내용 숏폼 모바일용 웹 서비스 만들기 🚀 본인이 기여한 점 회원가입 페이지 영상 재생..

리액트로 네이버 아이디로 로그인 구현하기 ❓상황 회원가입 대신, SNS 로그인 기능 구현해보고 싶어서 진행했다. 📖 SNS 로그인 구현 Naver Developers setting 홈페이지 접속 네이버 로그인 클릭 오픈 API 신청 이용약관 동의하기 이용약관 동의하기 휴대폰 인증하면, 이렇게 표시된다. 애플리케이션 등록 카카오와 다르게 바로 애플리케이션을 등록한다. 이렇게 안내해주는 것이 편리해서 더 좋은거 같다. 검수 요청하기 검수요청은, 실제 네이버 로그인이 가능하도록 네이버에 요청하는 것이다. 나는 테스트용으로 네이버 로그인을 할 예정이니, 검수요청은 따로 하지 않을것이다. 나중에 기회가 된다면, 실제 네이버 로그인을 구현해봐야겠다. 멤버관리 네이버 로그인을 관리할 수 있는 관리자와, 테스트용 로그..

Uncaught TypeError: Cannot read properties of null (reading 'firstChild') The above error occurred in the component: ❓상황 네이버 로그인 기능구현시 발생하는 오류 🔎 원인 파악 id값이 naverIdLogin인 태그가 없어서 발생한 문제 ✨ 해결 방법 id값이 naverIdLogin인 태그 추가 return ( );

국민내일배움카드로 국비지원받고 프론트엔드 학습 열공 챌린지 6주차 🎥 목차 더보기 1. 목표 2. 알게된 점 3. 좋았던 점 4. 아쉬운 점 🚀 목표 패스트 캠퍼스에서 학습주차별로 구분지어줬기 때문에, 6주차 학습강의 듣기가 학습 목표이다. 💡 알게된 점 Javascript vs React : 리렌더링 Javascript는 리렌더링이 Element 단위로 진행된다. 반면에, React는 리렌더링이 변경되는 부분만 진행된다. 이 차이로 인해, React의 성능이 더 빠르다. React : 재조정 기존의 바닐라 자바스크립트는 Element 타입이 다르면, 이전 Element를 버리고 새로운 Element를 그린다. React의 경우에는, Element 타입을 비교하고 Element의 key를 비교했을때 같다..