vitamin3000 님의 블로그

이번 포스트에서는 카카오/구글 로그인 기능 구현에 대해 작성해보고자 한다. 카카오카카오 디벨로퍼 사이트에서 애플리케이션을 등록해 관련 키를 발급 받는다 이러한 키를 .env 파일로 관리하여 원격 저장소에서 노출되지 않도록 하였다..VITE_KAKAO_REST_API = ''VITE_GOOGLE_CLIENT_ID = ''VITE_GOOGLE_CLIENT_SECRET = ''VITE_YOUTUBE_CLIENT_ID = ''VITE_YOUTUBE_CLIENT_SECRET= ''VITE_API_URL= ''VITE_CALLBACK_URL = ''VITE_OAUTH_API_URL = ''VITE_OAUTH_CALLBACK_URL = '' 카카오 로그인 요청을 보냈을 때의 리턴 값 타입은 다음과 같다.이때 닉네임..

이번 포스트 에서는 지난 포스트에 이어 회원정보 입력 컴포넌트에서 이메일 인증에 관련된 부분이다.  이메일 인증은 다음의 절차로 진행된다1. 사용자로부터 이메일을 입력받는다2. 입력한 이메일로 인증 코드를 전송한다3. 전송받은 인증 코드를 입력받는다4. 입력받은 코드값과 서버 코드 값을 비교하여 검증한다 이전에 구현했던 zod 이메일 형식에 맞게 값을 입력하여 유효성 검사가 통과되고, 이메일 인증을 누르면 아래의 이메일 확인 번호 input 및 button 컴포넌트가 출력된다.우선 api 관련 url 설정 및 쿠키 설정에 관련된 Axios 코드를 정의한다.const api = axios.create({ baseURL: import.meta.env.VITE_API_URL, withCredentials:..

이번 포스트에서는 회원가입 마지막 단계인 회원정보 입력 컴포넌트에 대해 기술하고자 한다 구현된 UI는 다음과 같다. 이메일, 비밀번호, 비밀번호 확인 input이 존재하고, 이메일 인증이 존재한다 이메일, 비밀번호, 비밀번호 확인 유효성 검사 저번 토이3에서 사용했었던 zod 라이브러리를 사용하여 유효성검사를 구현하였다. 이전에 입력받았었던 이름, 전화번호를 포함하여, 이메일,.비밀번호, 그리고 이메일 인증에 따른 code 일치를 확인하기 위한 type을 선언한다export type SignUpSchemaType = { code: string; email: string; password: string; name: string phone?: string}; 그리고 zod 라이브러리의 email, ..

이번 포스트에서는 회원가입 절차 중 전화번호 인증에 관련된 부분이다. 먼저 , 구현된 UI는 다음과 같다.먼저, 부모 컴포넌트에서 자식 컴포넌트로 Input에 관련된 변경 값을 추적하도록 해야한다.왜냐하면 props로 전달받은 값이 아닌, 자식 컴포넌트에서 독립적으로 선언하여 값을 입력해봤자 부모 컴포넌트로 전달되지 않아 값이 입력되지 않기 때문이다. 부모 컴포넌트인 SIgn-in 컴포넌트에서 아래의 함수를 추가하여 변경되는 값에 따른 값을 추적하도록 한다. function handleInputChange(e: React.ChangeEvent) { const { key, value } = e.target; setFormData((prevData) => ({ ...prevData, ..

이번 포스트에서는 저번 포스트에 이어서 회원가입 약관 컴포넌트에 관련된 내용이다. 약관 동의 모달 컴포넌트아래와 같이, 각 항목마다 관련 내용을 출력하는 모달을 구현하였다.  우선 전체 동의에 대한 코드이다. type에 대한 선언은 리터럴 타입으로 정의해 미리 정의된 값만을 사용하도록 하였다. type ModalType = 'privacy' | 'terms' | 'marketing' | 'youtube'; 우리는 각 항목별에 대한 boolean값을 아래와 같이 정의했었다. const [agreements, setAgreements] = useState( savedAgreements || { privacy: false, terms: false, marketing: fals..

이번 포스트에서는 구현한 회원가입에 내용에 대해 기술하고자 한다 1. 회원가입 페이지는 약관 동의 컴포넌트, 전화번호 인증 컴포넌트,  회원정보 입력 컴포넌트로 구분한다.이때, 현재 진행하고있는 페이지에 대한 구분을 위해 아래 사진과 같이 구현하였다.  코드는 다음과 같이 작성하여 현재 컴포넌트 단계에 대한 값을 저장하고,const [currentStep, setCurrentStep] = useState(0); 아래와 같이 그에따라 step에 알맞는 컴포넌트를 출력하게 하였다. const renderComponent = () => { if (currentStep === 0) { return (   추가적으로 이전 또는 다음 버튼을 누르면 항목별로 이동해야 한다. 다음(Next)..

깃허브 레포 링크는 다음과 같다. https://github.com/FC-DEV2-FinalProject/Charmander_FE GitHub - FC-DEV2-FinalProject/Charmander_FEContribute to FC-DEV2-FinalProject/Charmander_FE development by creating an account on GitHub.github.com 배포된 사이트는 다음과 같다.https://charmander.xyz Vite + React + TS charmander.xyz 내가 구현한 기능은 다음과 같다., 1. 회원가입2. 로그인3. 무한스크롤 이제 위 내용에 대한 자세한 포스트를 작성할 예정이다.

이전에도 말했듯, '정책'은 어떤 상태에서 행동을 선택할 확률이다. 상태가치함수와 행동가치함수를 이용해 상태가치와 행동가치를 계산한 후 최적의 행동을 계산한 정책이 최적 정책이라 할 수 있다. 이때 π의 값은 계속해서 바뀐다.최적의 가치함수란 여러 정책 π중에서 가장 가치가 높은 정책을 나타내는 함수라는 의미로 위첨자로 *가 붙는다 처음에는 임의의 정책 π0에서 출발하여 여러 시행착오를 통해 π1, π2로 보상을 통해 정책이 평가되고 개선된다.이러한 시행착오를 통해 최종적으로 높은 가치함수를 갖는 정책이 탄생하는데, 이것이 최적 정책이라한다 자, 정리해보자면 정책 π 을 가치(상태가치함수, 행동가치함수)를 기준으로 평가하는데, 이때 상태가치함수와 행동가치함수에서는 π을 가지고 계산하기에 서로 필요하다. ..

강화학습에서 에이전트는 보상의 크기로 행동의 좋고 나쁨을 판단하고 받을 수 있는 보상의 총합인 수익G를 최대화하는 행동을 학습한다고 하였다. 간단히 설명하면, 각 상태의 가치나 각 상태에서 가능한 행동들의 가치를 계산해두고 가치가 큰 상태나 행동을 선택하는 방법으로 학습하는 것이다. 상태가치 : 에이전트가 시행착오를 거쳐 각 상태의 값행동가치 : 각 상태에서 가능한 4가지(예를들어) 행동 위,오른쪽, 아래, 왼쪽의 가치를 계산한 값 학습이 끝난 에이전트는 각 상태에서 행동가치가 높은 행동을 선택해서 이동하다보면 도착지점에 도착한다는 것을 알 수 있다. V π : (상태가치 함수) 상태 s에서 얻을 수 있는 수익G(보상r의 총합)을 말한다.강화학습에서는 가치판단이나 행동 선택은 에이전트가 가지고 있는 어떤..

강화학습은 마르코프 의사결정과정으로 정의된 문제를 푸는 것과 같으며, 구성 요소는 다음과 같다.1. S(state)2. A(action)3. P(state transition Probability)4. R(reward)5. r(discount factor) 우리는 P를 1로 설정한 결정론적 환경이라 가정한다. 에이전트는 환경과의 상호작용으로 시행착오를 통해 학습을 진행한다. 시간  t일 때 환경은 에이전트에게 현재 상태에 대한 정보 St를 제공한다.에이전트는 정보를 바탕으로 현재 상태에서 가능한 행동 중 하나를 선택하는데, 이떄 선택하는 기준은 가치가 가장 높은 것이고,가치를 측정하는 기준이 상태가치와 행동가치로 나뉜다.둘 중 하나만, 또는 둘 다 사용하기도 한다. 환경이 에이전트가 의사결정한 행동에 대..