전체 글

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

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

[ 오류기록 / Firebase ] Firebase: Error (auth/account-exists-with-different-credential). 해결법

Firebase: Error (auth/account-exists-with-different-credential). 알고 보면 아주 간단한 에러이지만 나와 같은 코딩 병아리들에게는 오류 하나하나가 고난이기 때문에 작성해본다. 해결 방법 🔨 1. firebase의 console에서 내 프로젝트에 들어간다. 2. Authentication(인증) 파트를 클릭한다 3. 좌측 상단부 캡쳐사진. 여기서 Sign-in method 클릭. - 위 agenda는 내가 현재 만들고 있는 개인 프로젝트 이름😻🔥 4. 스크롤을 내려서 화면 중앙부에 있는 '고급' 여기서 '변경'을 눌러준다 5. 동일한 이메일 주소로 여러 계정을 만들 수 있습니다. 선택하고 저장 끝! 에러 발생 이유 : 같은 이메일이 다른 인증 방법으로 접속..

[ 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를 사용해..

🔧[ recoil ] recoil로 react 상태관리 하기

1. 등장 배경 & 이용 목적 2. 설치 / 사용 방법 3-1 설치 3-2 RecoilRoot 3-3 Atom 3. 사용 후기 4. 정리 참고 1. 등장 배경 & 이용 목적 react의 특징 중 하나는 데이터가 단방향으로 흐른다는 점이다 즉, 부모 component에서 자식 component로 props가 옮겨오는 식의 형태를 띄고 있다. 따라서 모든 component에서 쓰여야 하는 상태(ex 유저 정보)가 있다면 이 정보를 계속 부모에서 자식으로, 또 그 자식으로 전달해야 하는 어려움이 있다. 따라서 Redux를 통해 상태관리를 시행했지만 React에 최적화되어있지 않아서 사용에 불편함이 있었다고 한다 그 때 facebook에서 react에 최적화된 상태 관리 툴이라는 이름으로 recoil을 내보이게..

🥜 [ React ] react 학습내용 나름대로 정리하기 1

드림코딩, 노마드코더, 게임으로 배우는 react 강의 수강. React란? 웹 UI를 만들 수 있는 컴포넌트로 이루어진 UI 라이브러리이다. (그러나 프레임워크에 더 가깝다) 싱글페이지 어플리케이션에 최적화되어있으며 웹앱의 느낌을 내기 때문에 사용자 경험에 좋다 특징 - component - jsx - virtual dom - 단방향 데이터 바인딩 1. component -독립적 -고립됨 -재사용가능 헤더, 푸터, 버튼, 아티클 단위로 묶어서 한 가지 기능을 전문적으로 수행하는 컴포넌트 단위로 관리할 수 있다. 따라서 특정 부분에 오류가 발생했을 시, 그 컴포넌트만 수정하는 것으로 해결할 수 있어 유지보수에 좋다. 또한 한번 사용한 컴포넌트를 다시 사용할 수 있는 재사용성이 높다. React 설치 re..

🔧[ React Query ] 리엑트 쿼리 사용법

react query란? Fetch, cache and update data in your React and React Native applications all without touching any "global state". => react나 react native에서 전역상태를 건드리지 않고 데이터를 fetch, cache, update할 수 있게 하는 상태 관리 도구. 서버 상태를 관리하는 라이브러리이다. '서버와 클라이언트 사이 비동기 로직을 쉽게 다루게 해주는 도구.' 성능 복잡한 코드를 몇 줄의 코드로 교체할 수 있다. 새로운 데이터 소스를 연결하는 것이 편리해진다. 복잡하고 계속되는 데이터 소스의 re-road를 막을 수 있다. 메모리 성능을 높일 수 있다 설치 npm i react-que..

🔧[ React-router-dom ] react-router-dom v6 달라진 점

react 강의를 들으면서 react-router-dom의 버전이 맞지 않아 고생을 꽤 했다. 만약 엘리 드림코딩 [ 리액트 개념 정리 + 유튜브 클론 코딩 외 실전 프로젝트 완성 ] 이나 노마드 코더 [트위터 클론코딩] 을 들으면서 버전에 어려움을 겪는다면.. 댓글로 물어봐주시면 한번 들어본 초보자로서 제가 아는 정보 내에서 최대한 알려드릴게요👼🤍 react 버전차이를 설명해주는 좋은 글이 많았지만 어쨌든 나도 써보려고 한다 설치 npm $ npm install react-router-dom@6 Yarn $ yarn add react-router-dom@6 pnpm $ pnpm add react-router-dom@6 사용 방법 router을 만들고 싶은 곳에 import { BrowserRouter ..