분류 전체보기

소셜로그인을 구현할겁니다.firebase 페이지 - Authentication - 로그인 방법 탭을 클릭합니다."새 제공업체 추가" 를 클릭하고 저는 Github 로그인을 넣을거기 때문에 github로 선택합니다. 사용설정은 켜줍니다.https://github.com/settings/developers GitHub: Let’s build from hereGitHub is where over 100 million developers shape the future of software, together. Contribute to the open source community, manage your Git repositories, review code like a pro, track bugs and fea....

사용자가 잘못되거나 중복된 정보를 입력해서 계정을 생성하려 한다면 오류가 날텐데 이 오류를 나타내는 작업을 할겁니다.우선 create-account.tsx로 가서 catch 블럭에 console.log(e);를 작성하고 중복된 이메일로 계정을 생성해봅니다.결과는 화면에 보이는 것과 같이 콘솔창에 firebaseError가 찍힙니다.좀더 알아보기 위해 catch 블럭에 에러코드와 메세지를 찍어봅니다.catch (e) { if(e instanceof FirebaseError){ console.log(e.code, e.message); } }이 오류코드들을 이용해서 오류마다 보여줄 메세지를 설정할 수 있습니다.메세지를 사용자에게 보..

로그인 된 사용자는 ProtectRoute를 볼 수 있고, 로그인이 되어있지 않다면 로그인 페이지나 계정생성 페이지로 가게되는 로직을 작성할겁니다.components에 Protected-route.tsx를 생성합니다.위와 같이 작성하는데, 조건을 통해 만약 user가 null이라면 비로그인 상태기 때문에 /login 즉, 로그인 페이지로 연결시켜줍니다.로그인이 되어있다면 children으로 리턴합니다.App.tsx로 와서 Layout을 ProtectedRoute로 감싸줍니다.home과 profile은 layout의 children이기에 layout만 감싸줘도 적용이 됩니다.브라우저로 가서 새로고침을 하면 홈페이지가 뜨는것을 알 수 있습니다. 로그인이 된 상태니 Protected-Route를 사용할 수 있..

Loading이 Ture면 아직 프로세스 처리중이라는 뜻이 되기 때문에 함수를 일찍 종료하고,name, email, password 중 하나라도 비어있으면 안되니까 일찍 종료하는 조건을 걸어줍니다.이메일과 비밀번호를 사용한 계정생성 함수는 이미 있으니 가져다 써주고,await는 async function 안에서만 사용이 가능하기 때문에 아래와 같이 수정해줍니다.createUserWithEmailAndPassword 는 성공시 credential을 반환하니 const credentials 로 넣어줍니다.const credentials = await createUserWithEmailAndPassword(auth, email, password);계정 생성과 동시에 사용자의 이름을 저장하기위해 updatePr..

이제 create-account 를 완성할 차례입니다.Wrapper로 감싼 후 Form을 만들고 그 속에 input을 작성합니다. 이름, 이메일, 비밀번호가 필요하고 계정생성 버튼이 필요합니다.위 사진과 같이 작성을 합니다.결과를 확인해보면 이쁘진 않지만 그럴듯한 결과가 완성되었습니다.받아온 값들을 저장하기위해 useState를 사용할겁니다.각 Input에 value값을 넣어서 연결해줍니다. 이제 onChange Listener를 사용합니다.name에 값이 들어오면 setName 새로운 값을 업데이트 합니다.마찬가지로 각 Input에 onChange를 적용해줍니다.결과 확인을 위해 onSubmit을 작성해주고 Form에 적용해줍니다. 이때, 동작방지를 위해 e.preventDefault();를 추가해줍니..

Firebase authentication을 적용할겁니다.Firebase authentication은 Firebase SDK와 Firebase server로 작동합니다.사용자가 서비스로 들어오게되면 쿠키와 토큰으로 서버를 통해 로그인 여부를 확인하게 됩니다. 그리고 사용자 정보를 가져오는데,이 과정에서 잠깐의 시간동안 로딩 화면을 보여줄건데, 이걸 먼저 작성해봅시다.이제 components 파일에 loading-screen.tsx를 만들고작성해줍니다. Wrapper와 Text는 정의해줘야 합니다.다시 App.tsx로 돌아와서 RouterProvider 부분에 삼항연산자를 사용해줍니다.isLoading이 ture라면 로딩페이지를, false라면 RouterProvider를 랜더링 하도록 설정해주고테스트를 ..

이제 Login을 만들겁니다. 로그인과 계정생성이 필요하기 때문에,routes 밑으로 login.tsx와 create-account.tsx를 생성해줍니다.사진과 같이 코딩해주고, layout에서 랜더링되는건 원치 않기에아랫쪽에 별도로 만들어줍니다. 이후 결과를 확인해보면layout에 묶여있지 않고 /create-account로 접속했을때 해당 tsx 파일이 랜더링 되는것을 확인할 수 있습니다.이제 style components를 사용해서 전역 스타일을 적용해볼겁니다.App.tsx에 GlobalStyles로 전역스타일을 설정해줄겁니다. 백틱을 사용하여 작성합니다.reset으로 css를 초기화 해줍니다.그 후 전체 디자인과 Body 디자인을 정의해줍니다.이후 function에 GlobalStyles를 선언해..

이제 Dependency를 설치할겁니다. vscode 내부 터미널을 열고 아래 Command를 순서대로 입력합니다.npm i react-router-dom@6.14.2npm i styled-resetnpm i styled-components@6.0.7npm i @types/styled-components -D이번 챌랜지는 버전을 위와 같이 사용하니 필히 버전 맞춰서 설치해줍니다.이제 Router를 만들어줍니다.App.tsx에 router를 만들어주고 src 아래 components 폴더를 만들고 layout.tsx를 생성합니다.layout.tsx에는 아래와 같이 코드를 작성합니다.이후 src 밑으로 routes 폴더를 생성하고 폴더안에 home.tsx를 만들어줍니다.home.tsx에는이렇기 기본틀을 만들..