🤸‍♀️ 내 프로젝트

[ 리팩토링 ] firebase upload / download 로직 분리하기

0. 현재 상태 firebase 로직이 모든 페이지에 따로따로 존재하는 상태. ToDo를 관리하는 페이지에서도 firebase에서 로직을 받고 / 업로드하고 Calendar... Project 컴포넌트에서도 동일하다. 이 로직을 AuthService처럼 하나로 묶게 되면 유지보수하기 쉽지 않을까? ✍ FireStore.ts로 로직 관리하기 📌 FireStore.ts downloadData(progressRef: any) { onSnapshot(progressRef, (querySnapshot: any) => { querySnapshot.forEach(async (doc: any) => { if (doc.data().goals) { console.log(doc.data().goals); return awa..

[ 리팩토링 ] Auth_service 관련 동작 분리하기 + 컴포넌트 결합하기

0. 현재 상태 유저를 로그인하거나 로그아웃하거나, 유저의 존재를 확인하는 모든 함수들이 각 컴포넌트마다 뿔뿔이 흩어져있다. 중복되는 코드도 많아지고 비효율적이라 리팩토링을 다짐 하지만 어렵다... 알려줘... 아무튼 시작 ✍ AuthService.tsx으로 로직 관리하기 AuthService.js 유저의 존재를 확인할 수 있는 class를 만들어 유저 관련 함수를 집어넣었다. logout할 때마다 Calendar.tsx파일에서 에러가 발생했다 Uncaught FirebaseError: Function collection() cannot be called with an empty path. firebase에 저장된 일정 정보를 가져올 때 사용하는 collection함수는 empty path에서 사용할 수..

[MBTI 과몰입 테스트] 프로젝트 다시 열어보기

✍ 계기 집 근처 도서관에서 Clean Code 빌려 읽어내려가면서 내가 열심히 공부하고 써내려왔던 지난날의 코드들을 다시 생각해보게 되었다. 그것도 React를 막 배우고 어서빨리 사용해보고 싶어서 후다닥 만들어보았던 코드가 계속 밟혔다. 그래서 책을 잠시 덮고 내 코드를 살펴보게 되었고 생각보다 더 엉망이었다. Clean Code에서 제안하는 방식으로 봐도 엉망이었고 무엇보다 코드의 퀄리티를 수정하기 전에 수정할 것들이 자꾸 눈에 밟혔다. 조금 더 React에 대해서 알게 된 현재의 내가 봐도 엉망이었다. 따라서 계획해두었던 새 웹은 잠시 미뤄두고 React로 만든 첫 웹인 Mbti 과몰입 테스트를 다시 뜯어보기로 했다. 🩰 디자인 처음으로 뜯어고친 부분은 디자인이었다. 이유 급박한 기능적인 문제가 ..

[ Nomad coders ] (의식의 흐름으로 쓰는) twitter clone 타입스크립트로 다시 만들어보기 4

#3.4 ~ #4.0 #4.1 ~ # 💻 거의 firestore 내용 기본적으로 생성하는 form은 useForm을 써서 만들고 있고 firebase는... 강의 내용과 버전이 다르기 때문에 그냥 공식문서를 참고해서 사용하고 있다. useForm에서 input img를 사용하려고 했다. 노마드코더 트위터 클론코딩에서는 useform을 사용하지 않고 img가 onChange될 때 자신이 올릴 이미지의 사진을 보여주는 식으로 구성이 되었다. 이 코드를 useform을 이용해서 짜려고 하니 몇 가지 문제가 나왔다. 1. form 안에 input이 들어있어서 발생하는 문제. form 안에 input이 들어있기 때문에 form에 걸어놓은 onSubmit함수에 이미지 경로를 넣게 되면 이미지가 변경될 때(onCha..

[ Nomad coders ] (의식의 흐름으로 쓰는) twitter clone 타입스크립트로 다시 만들어보기 3

#3.0 ~ #3.3 이번에도 진도는 볼품없다 진도를 팍팍 빼서 쓰고 싶은데 다른것들과 병행하느라 너무 바빠.. ts는 어느정도 익숙하게 다루고 있다 아직 모르겠다 싶으면 쓰는 any의 남발이 문제기는 하지만 그건 ts를 더 배우며 나아질것 현재 내가 할 수 있는 최선을 다해 주어진 과제를 해결하는게 목표. 💻 이용한 라이브러리 react-hook-form 저번주까지는 그냥 한번 타입만 넣은 클론코딩을 하려고 생각했던 것 같은데 react hook form 정도는 괜찮지 않을까..? 하고 이용했다. react hook form에 대해서는 블로그로 다시 포스팅 할 예정 그리고 여러 자식 컴포넌트를 타고 내려오는 props가 등장하면서 recoil도 몹시 사용하고 싶지만 이건 꾹 참는중 firestore을 ..

[ Nomad coders ] (의식의 흐름으로 쓰는) twitter clone 타입스크립트로 다시 만들어보기 2

#2.3 ~ #2.6 볼품없는 진도. 원래는 ts를 사용하는 것 이외에도 새로 배운 것들을 이용해서 구현하려고 했지만 ts도 벅차다.. 기본형 ts를 제대로 배우지 않고 react에 적용시키는 연습을 하고 있어서 그런지 아주 기본적인 부분에서 턱턱 막힐 때마다 ts를 제대로 배워야겠다는 의욕이 샘솟는다. 아마 다음주부터 시작하지 않을까. 💻 firebase로 로그인을 구현하는 부분 뿐이어서 그런지 대단한 문제는 생기지 않았다. 따라서 이번에 작성할 내용은 다양하게 직면한 문제들이 아니라 firebase를 이용해서 진행한 다른 강의의 내용 일부와 twitter 클론 코딩 강의 내용 중 일부를 비교하는 내용이 될 예정이다. 1. 비교하려고 생각한 이유 react 공부를 시작할 때 twitter 강의를 듣고 ..

[ Nomad coders ] (의식의 흐름으로 쓰는) twitter clone 타입스크립트로 다시 만들어보기

#0.0 ~ #2.2 nomad coders의 twitter clonecoding은 진작 한 번 해봤다. react를 막 배우기 시작했을 때 해보고 정말 기뻐했던 기억이 난다. 그랬던 트위터 클론코딩을 다시 시작하게 된 이유 1. 타입스크립트 + 리엑트 실력 향상을 위해 2. 현재 속해있는 react 스터디에서 함께 진도를 나가고 있는 강의 중 하나가 twitter clone coding이기 때문에 3. 새롭게 배운 것들을 이전에 배운 내용에 적용해보면서 새 라이브러리의 쓰임에 익숙해지고 라이브러리의 존재 이유를 스스로 깨닫기 위해 과정 새로운 트위터 클론 코딩 프로젝트를 타입스크립트 + 리액트로 빌드하고 진작 들었던 강의를 빠르게 들으면서, 각 주 차에 해당하는 학습 내용을 typescript를 사용해..

MBTI 과몰입 테스트

일단 링크부터 https://userju.github.io/MBTI-over-immersion-TEST/ MBTI 과몰입 테스트 userju.github.io 12/22일 부터 1월 8일까지 하루에 3~4시간씩. 약 19일에 걸쳐 만들었다. 크리스마스를 맞아 서울에서 3박 4일 연말기념으로 부산에서 1박 2일 친구와 다이빙을 하러 가고 또 서울을 3박 4일동안 갔다가 드디어 배포를 완료하고 친구들에게 링크를 보냈다. 하지만 이게 끝이 아니다 내 목표는 이 프로젝트를 끝내는 것이 아니라 프로젝트를 통해 무언가를 배워가는 것이기 때문에 아직 내 프로젝트는 끝나지 않았다. 언제 끝날련지... 프로젝트 진행 이유 나는 한번 부딪혀보기 전까지는 '내가 제대로 배운 것이 맞나?' 끊임없이 의심하는 사람 중 한명이다..