본문 바로가기

웹30

리덕스(redux) 이해하기 1 리덕스는 자바스크립트에서 상태관리를 위해 사용하는 라이브러리로 리액트에서 전역으로 상태 관리를 하고자 react-redux를 사용한다. 리덕스를 이용한 데이터 흐름구조는 다음과 같다. Action : 상태변화가 필요하면 일어나는 것에 대한 정의. Dispatch : Action을 발생시키는 것. store : 어플리케이션 내부에 1개의 store만 존재하며 상태들을 store라는 객제에 저장해둔다. 간단하게 흐름에 대해서 설명하자면 action에 상태관리할 데이터에 대한 행동(action)을 정의 해둔다. dispatch를 이용하여 action을 실행시키고 store에는 변화된 값에 대해서 저장을 한다. 이를 화면에 띄워주게 되는것이고 다시 화면에서는 상태에 대한 action을 수행하여 dispatch를.. 2022. 11. 13.
구글 소셜 로그인 로그인 버튼 결과물이다. 구글 로그인 버튼이 세션 상태에 따라 모습이 변하는 형태로 바뀌어서 로그인 버튼도 한번이라도 로그인을 하게 된다면 아래와 같이 변경된다. // button 모양 window.google.accounts.id.renderButton( googleButtonRef.current, { theme: "outline", size: "large" } ) 아래 링크에서 확인이 가능하다 : https://developers.google.com/identity/gsi/web/guides/personalized-button 2022. 11. 11.
구글 소셜 로그인 (구글 로그인) - 클라이언트 ID 1. 클라이언트 ID만들기 진행 과정 1. GCP(Google Cloud Platform)로 이동 해서 콘솔 화면으로 가서 프로젝트를 생성하거나 이미 있던 프로젝트로 들어간다. 2. API 및 서비스 > 사용자 인증 정보 > + 사용자 인증정보 만들기 > OAuth 클라이언트 ID 3. 동의 화면 구성 > OAuth 동의 화면 구성 > User Type - 외부 선택 4. 동의 화면에서 "앱 이름" / "사용자 지원 이메일" 입력 - 앱 이름 : 구글 로그인 팝업에서 보여지게되는 앱이름 - 사용자 지원 이메일 : 클릭하면 본인 사용 이메일이 표시됨 - 개발자 연락처 정보 : 본인 이메일 입력 - 다음으로 5. 저장 후 계속 6. 테스트 사용자 - 저장 후 계속 7. 앱 등록 수정 - 대시보드로 돌아가기 .. 2022. 11. 7.
javascript 날짜 더하기 날짜 데이터를 가져오는 도중 9시간이 모자른 경우가 생겨서 찾아놨던걸 메모한다. 물론 이후엔 서버에서 9시간이 차이나는것을 매꿨지만 일단 기록! 아래 코드를 보면 순차적으로 1달 더하기 1일 더하기 1시간 더하기 10분 더하기를 한다. let date = new Date("2022-12-24"); console.log(date); // 2022-12-24T00:00:00.000Z date = new Date("2022-12-24"); let addOneMonth = date.setMonth(date.getMonth() + 1); addOneMonth = new Date(addOneMonth); console.log(addOneMonth); // 2023-01-24T00:00:00.000Z date = n.. 2022. 10. 31.

티스토리툴바