728x90
반응형
(심층)리액트트위터 클론코딩(with firebase) - 06
(심층)리액트2023. 2. 18. 18:09(심층)리액트트위터 클론코딩(with firebase) - 06

7. EDIT PROFILE 7-1. Get My Own Nweets 이제 해야 할 것은 프로필을 가져오는 것. => 프로필 화면을 만들 거임. 기존에 만들어뒀던 EditProfile.js은 없애고 Profile에서 작업을 해줄 거임. 7-2. Update Profile 7-3. Update Profile Bugfix

트위터 클론코딩(with firebase) - 05
(심층)리액트2023. 2. 14. 00:32트위터 클론코딩(with firebase) - 05

6. FILE UPLOAD 6-1. Preview Images - 게시글에 글과 함께 사진도 올리고 싶음. 이럴 때 쓰는 게 Storage. Storage는 이미지, 오디오, 동영상 같은 사용자가 생성한 파일을 저장하고 가져올 수 있게 하는 저장소. test mode로 해서 bucket 생성. bucket은 파일을 넣는 곳임. 이제 사진을 함께 올릴 것이기 때문에 Nweet하는 방법을 바꿔야 함. Home.js에 코드 추가. 이 input은 모든 이미지로 된 파일만 받아들인다는 의미. 그럼 화면에 이렇게 나타남. 우리가 원하는 것은 파일을 선택하고 이미지 선택을 눌렀을 때 사진을 미리보기 하는 것. 고로 우리는 파일이 string 형식으로 들어왔을 때 그걸 읽어올 수 있어야 함. onFileChange라..

[ 2023-02-13 ] 코딩 WIL 일지 (일주일을 돌아보면서 쓰는 일지)
1일1 스터디 후기2023. 2. 13. 04:28[ 2023-02-13 ] 코딩 WIL 일지 (일주일을 돌아보면서 쓰는 일지)

이번주는 정신이 너무 없었다... 아니, 정신이 없었다라는 것보다는 많이 멍했다는 표현이 더 맞는 것 같다. 요 근래 나는 열심히 트위터 클론 코딩을 하고 있었다. 계속해서 공부를 이어나가다 보니 여러 가지 의문점이 생겼던 거 같다. 파이어베이스는 정말이지, 손 쉽게 로그인, 회원가입, CRUD 등의 기능을 쓸 수 있게 해준다. 프론트엔드 개발자들이 복잡하게 로직을 짤 일이 없다는 뜻이다. 난 말 그대로, 파이어베이스를 쓰는 방법을 익히면서 로직을 짜는 방법도 함께 공부하려고 트위터 클론 코딩을 시작했다. 그런데, 웃기는 것은 정작 파이어베이스 덕에 로직을 많이 다룰 일이 없다는 것이었다. 그때부터 머리가 아파오기 시작했다. 공부를 잘못하고 있다는 생각이 자꾸만 들었다. 그때부터 불안함에 정보를 열심히 ..

트위터 클론코딩(with firebase) - 하나의 이메일로 여러 계정 생성이 안되는 문제 해결
(심층)리액트2023. 2. 9. 20:08트위터 클론코딩(with firebase) - 하나의 이메일로 여러 계정 생성이 안되는 문제 해결

- 하나의 이메일로 여러 계정 생성이 안되는 문제 firebase는 사용자가 다른 ID 공급업체를 사용하여 로그인하는 경우 로그인 시 계정을 자동 병합하도록 기본값이 설정. 그렇기 때문에 ID 공급업체 별로 계정을 생성할 수 있도록 설정을 변경해주면 동일한 이메일을 가지고 구글과 깃허브 계정 모두 생성할 수 있음. * 설정 경로: 콘솔 → 프로젝트 → authentication → settings → ID 공급업체 별로 여러 계정 만들기 클릭 후 저장

트위터 클론코딩(with firebase) - 04
(심층)리액트2023. 2. 7. 10:13트위터 클론코딩(with firebase) - 04

5. NWEETING 5-1. Form and Database Setup - Home.js에 input랑 useState 추가. 새로 생성해준 form 태그 내부에 input을 생성해줌. 하나는 text type의 input을, 하나는 submit type의 input을 생성해줌. - text type의 input : 최대 글자수를 120자로 제한해둠. 그리고 onChange event 실행시 onChange 함수가 함께 실행되도록 함. value는 nweet로 설정하여 nweet 값이 input에 들어오도록 함. useState를 하나 생성해줌. const [nweet, setNweet] = useState(""); 그리고 onChange 함수를 선언해준 후 매개변수로 event를 넣어줌. 함수 내부에..

[ 2023-02-06 ] 코딩 WIL 일지 (일주일을 돌아보면서 쓰는 일지)
1일1 스터디 후기2023. 2. 6. 02:59[ 2023-02-06 ] 코딩 WIL 일지 (일주일을 돌아보면서 쓰는 일지)

이렇게 또 일주일이 지나갔다. 요즘 공부하고 있는 것은 React X Firebase로 twitter 클론 코딩하긴데 노마드 강의의 경우 너무 예전꺼라 애를 많이 먹었다...(지금도 먹고 있다) Firebase 버전이 9로 업그레이드 되면서 코드가 많이 달라진 것이었다...ㅠ,ㅠ 그래도 이번주의 목표는 3일 안에 클론 코딩을 끝마치는 것이다 힘들어도 계속해서 공부를 이어나갈 생각... 얼른 트위터 클론 코딩을 끝마치고 스파르타 실무 리액트 인강도 들어봐야 한다는 사실... 아직 부족한 게 너무 많다보니 들어야 할 인강들이 산떠미다... 하지만 포기하지 않을 거라는 사실...! 이번주도 화이팅이다...!

728x90
반응형
image