Projects19 프로젝트 마무리 오늘 한 내용 날짜 select로 변경해 달별로 선택 가능 배경 색상 정리 배포 리드미 정리 오늘 배운 내용 Deployment: https://create-react-app.dev/docs/deployment Deployment | Create React App npm run build creates a build directory with a production build of your app. Set up your favorite HTTP server so that a visitor to your site is served index.html, and requests to static paths like /static/js/main..js are served with the contents of t.. 2021. 10. 28. 메인 페이지 구성 오늘 한 내용 박스 생성 박스 삭제 박스 색상 변경 화면 좌우 분할 실시간 수정 반영 오늘 배운 내용 화면 분할 flex-basis를 이용해 화면을 좌,우로 분할할 수 있다. box를 줄바꿈 속성을 이용하면 원하는 갯수 이상 출력시 다음 줄로 바꿔서 출력할 수 있다. getElementById 혹은 useRef를 이용해 요소를 선택할 수 있다. React에서는 useRef를 더 선호하는데 id는 자체가 중복될 가능성이 높아서 그렇다고 한다. select를 재사용할 일이 많고 option이 많을 경우 미리 정의해놓고 map으로 할당하는 것이 깔끔하다. 캡쳐 소감 그동안 다른 일을 처리 하느라 제대로 개발을 하지 못했다. 하루에 2~3시간밖에 코딩을 하지 못해 진도가 느리게 나갔고, 노트 정리하는 것에 소홀.. 2021. 10. 26. 로그인 지옥에 빠지다... 오늘 한 내용 이메일, 비밀번호 오류 시 한글 오류 출력 (그 외의 오류의 경우 영어로 그대로 출력) 이미지 파일 출력 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. 이전 1 2 3 4 다음
