본문 바로가기

전체 글125

로그인 지옥에 빠지다... 오늘 한 내용 이메일, 비밀번호 오류 시 한글 오류 출력 (그 외의 오류의 경우 영어로 그대로 출력) 이미지 파일 출력 oauth 로그인 시 화면 이동 불가 오류 수정 오늘 배운 내용 firebase의 이메일 중복을 처리하는 api는 따로 없는 듯하다. form에 onSubmit를 설정하면 그 안에 있는 모든 버튼에 onSubmit가 설정된다. csshake를 이용해 요소들을 떨리게 만들 수 있다. 사진을 업로드하기 위해서는 input에 설정을 하고 button이 input의 설정을 받아 파일 창을 띄우는 방식으로 접근해야 함.await authService.signInWithPopup(provider)을 선언하고 (나는 data라고 선언) if(data){history.push("/home")};으로 .. 2021. 10. 7.
firebase를 이용한 로그인, 로그아웃 오늘 한 내용 node를 이용한 로그인 firebase를 이용한 인증 → 로그인 firbase를 이용한 google, github로그인 firebase를 이용한 로그아웃 오늘 배운 내용 로그아웃시 페이지를 이동하고 싶다면 useHistory를 사용하면 됨. const history = useHistory(); //로그아웃 const onLogout = () => { authService.signOut(); history.push("/"); }; 캡쳐 소감 node로 로그인을 구현했다. 며칠에 걸쳐 힘들게 완성한 것이라 눈물이 날 뻔 했다. 자랑한다고 보여주는데 두둥... firebase로 구현한 google, github 로그인이 오류가 나는 것이었다. 버전 오류라는 사람도 있고, firebase 자체의.. 2021. 10. 1.
로그인 화면 디자인 - react , postCSS 오늘 한 내용 로그인 페이지 css 스타일링 node 강의 듣고 환경 설정 리액트 jsx 작성 color common 파일 정리 mongoDB사용 오늘 배운 내용 input의 타입을 password로 설정하면 *** 형태로 출력됨 캡쳐 소감 본격적으로 시작한 프로젝트. 구글링을 통해 로그인 하는 법을 열심히 검색했지만 완성된 코드만 덜렁 올라가있는 경우가 많아 하나도 알아 들을 수 없었다. node로 로그인 부분만 back 구현을 해볼까 했지만 포기하고 말았는데 그때 빛처럼 나타난 인프런 무료 강의! 예전에 팀원분께 추천받았던 강의였다. 프론트만 따라하다가 back 부분 없이 다음 챕터로 넘어갈 수 없어 디자인만 완성해두고 back으로 돌아갔다. 오랜만에 한 css는... 왜 다들 css를 기피하는지 살.. 2021. 9. 23.
로그인 페이지 구현 - Firebase 사용 로그인 페이지 구현 오늘 한 내용 React 개발 환경을 구축하고 로그인 페이지를 구현 firebase를 이용해 구글, 깃허브 로그인 캡쳐 음... 오타 남.... 깃허브 로그인은 이미 한 상태여서 캡쳐할 수가 없었음. 로그아웃 기능을 아직 안 만듦. 동영상은 노션에 추가했음. 여기 동영상 넣기 너무 까다로움. 다음 일지에는 움짤로 만들어서 첨부해야겠음. 폴더 구조 src → components → 각 components 폴더 (ex login header ...) → jsx, css 파일 구성 폴더 구성 소문자 시작 .jsx 파일 js 파일은 따로 service 폴더 안에 정리 css는 PostCss로 module화 소감 원래는 node를 사용해 oauth를 사용해보려고 하였으나 무슨 소린지 이해할 수.. 2021. 9. 16.
프로젝트 기획 💵 프로젝트 기획 💵 프로젝트에 대해 프로젝트 명: Work it! 고단한 알바생에게 한줄기 힘이 되기 위해,,, 프로젝트 기획 의도 알바 시간을 적는데 애매하게 끝나면 시간 계산 하기 번거로움. 하루의 일한 시간과 일당, 한달 일한 시간과 일당을 구하고 싶음. 리액트를 연습해보는 계기 틈틈히 배우는 node도 첨가해보자! 프로젝트 기술 스택 Front : React Back: Node, Firebase (front 위주, back은 최소화) 참여자 hae-on ( 나 >< ) 🌧 https://github.com/hae-on 프로젝트 진행 화, 수, 목, 금 위주 진행 깃허브 활용 기능 로그인 → 구글 OAuth, node를 활용한 회원가입 및 로그인 각 일을 선택하는 상자 ( 고용주는 각 사람을 선택.. 2021. 9. 15.
PostCSS Post CSS CSS 전처리기 중 하나인 Post CSS에 대해 알아보도록 해요. 처음 Post CSS를 접했을 때가 생각나요. 프로젝트에서 CSS를 맡게 되었는데 Post CSS에 대해 정말 무지한 상태였거든요. 그냥 'React에서는 이렇게 CSS를 작성하는구나.'하고 지나쳤던 기억이 있네요. Post CSS인 걸 모르고 React만의 CSS 작성법인 줄 알았던 거죠. CSS 전처리기 하면 LESS나 SASS 등이 있어요. 사용하려면 프레임 워크에 맞게 문법을 공부해야 하죠. 특히 SASS의 경우 RUBY를 배워야 하는 번거로움이 있답니다. 하지만 Post CSS는 JavaScript를 기반으로 해 간편하게 사용이 가능해요. Post CSS의 장점 Post CSS의 장점으로는 무엇이 있을까요? 먼저.. 2021. 9. 10.

티스토리툴바