Have a fruitful vacation

error가 발생했다npx create-react-app winter를 해주었는데5.0.0. 버전이 베포되었다고 create-react-app을 삭제 후 다시 설치하라고 한다....왜...?npx는 최신 버전 노드 패키지를 데스크톱에 설치해주는 도구로 직접 삭제, 설치

firebase로 ver 9를 이용해서 로그인 인증을 하던 중 책과는 다른 문법과 방법들이 계속 생겨나기 시작했고 구글링해도 아직 version9에 대한 정보는 찾기가 힘들었다,,,, 두시간 정도 이것저것 해보다가 처음 접해보는 firebase에서 이대로 진행하다가는

어제까지 로그인 기능을 마무리했으니 이제 로그아웃 기능을 추가해야한다. 그러기위해서는 먼저 라우터를 좀 더 설정해줘야하는데 오늘은 react-router-dom이 속을썩였다ㅎㅎ 분명 redirect, switch, useHistory 모두 이번학기에 팀플할때까지만 해도

오늘은 과외가기 전 미드 쉐도잉을하느라 코딩을 별루 못했다. 집도착 후 운동 후 1시가 되서야 시작한다. 대신 기능 구현 끝까지 완성하고 잘꺼다 그리고 내일 css를 손보고 추가 기능을 넣을것이다. Let's go!! 먼저 firebase DB를 생성한다. cf)

먼저 어제 끝낸 storage에 대한 정리를 해보자면 firebase의 다른 기능들과 마찬가지로 storage도 firebase에서 받아와 export를해줘야한다. input의 type을 file로하여 파일을 받을 수 있도록 하고 (accept속성으로 받을수 있는 파

만족스럽지는 못하지만 책에있는 모든 기능구현을 끝내고 오늘부터 React JS 공부를 다시 시작했다. 첫 챕터부터 매우 만족스러웠다 팀플할때 애먹었던 부분중 하나가 styled-component를 사용하여 CSS를 할 때 였는데 이번 챕터에서 가려운 부분을 많이 긁어주

이번에는 typescipt에 대해서 공부했다. typescript를 간단하게 설명하자면 javasciprt + type인 언어로 JS의 superset이다. js의 장점이자 단점은 type의 정의가 필요없다는 점이다. js에서 알아서 변환하기 때문에 디버깅시에는 알 수

어제 공부했던 Typescript를 이용해서 이전에 클론코딩했던 winter를 JS => TS로 변환해보았다.그리고 생각보다.... 많은 시간과 노력이 필요했다...아직 타입이 익숙지 않아 구글링하는데 많은시간이 걸렸다ㅜㅜ 꾸준히 써가면서 익히고 TS 문서를 정독해봐야

async await fetch하는것과react-query를 사용하는 것의 차이점 그냥 fetch하는 것은 url이 바뀌면 data가 사라지지만 react-query를 사용하면 cashing되기 때문에 url이 바뀌어도 data가 사라지지 않는다. react-quer

이제 coin page에서 nesting router로 탭을 구현하고 그 안에서 chart를 보여줄 것이다. 먼저 Coins, Coin을 만들어준 것과 같이 coin.tsx안에 chart, price 라우터와 들어갈 수 있는 링크를 만들어준다. 여기서 신기함점이 백

이번에는 recoil을 연습하기 위해서 ToDoList를 만들어본다.그전에 앞서서 form을 간편하게 만들게 도와주는 react-hook-form부터 배워보았다.먼저 기존의 방식으로 form을 만들때는 이렇게 만들어줬었다. 만약 여기서 input이 더 늘어난다면 그것에

이렇게 컴포넌트를 나누고 각각의 버튼을 누를때 카테고리를 바꿀 수 있다. 이제 reocil의 selector을 사용해 볼 것이다. 공식 문서에서 > selector는 derived state를 나타냅니다. derived state는 어떤 방법으로든 주어진 상태를

먼저! 어제 하다만 ToDoList부터 마무리를 시작했다. 현재까지는 toDo를 작성할때 "TO_DO" category로 고정을 시켜놨지만 내가 원하는 category로 들어가도록 변경해주자 먼저 CreateToDo에서 categoryState의 값을 받아와 toD

저번에 넘거갔던 selector의 기능 중 set에 대해서 알아보자 set은 atom state를 수정(set)하는 것을 도와주는 속성이다. 쉽게말해 selector({key: 'value', get: ()=>{}, set: ()=>{} })에서 key는 select

어제 작업한 곳에 스타일을 조금 입혔다아직 onDragEnd 함수를 완성하지 못하여 옮겨지지는 않지만 여러개의 board와 card가 정상적으로 뜬다.atom의 state가 하나의array일때 했던것처럼 먼저 어떤 정보를 받아오는데 test해보면 동일하게 drag한 d

reference는 JS 코드를 이용해 HTML요소를 지정하고 가져올 수 있는 방법이다. 바닐라JS에서 document.getElementById를 해서 HTML요소를 가져오는 것 처럼 useRef를 이용해서 요소를 가져올 수 있다. 예를들어 이렇게 사용하면 but

먼저 해야할 작업을 정리해보자 > 1. user의 입력을 받아 card를 만들 수 있는 form을 작성한다. user의 입력을 받을 수 있게 atom state를 수정한다. card를 수정/삭제 할 수 있는 기능을 추가해 준다. user의 입력을 받아 board를

Farmer motion을 사용해서 여러가지 애니메이션 동작을 공부해볼 것이다.사용법은 먼전 npm i framer-motion으로 설치해주고 import를 해준 후import { motion } from "framer-motion";모든 HTML tag들을 <d

계획보다 react가 늦어진 관계로 오늘은 python 공부를 시작했다ㅜ (챌린지 하려면 해야지!)먼저 http통신을 위해서 requests 라이브러리를 설치해준다.pip install requests(참고 : https://docs.python-request

파이썬을 설치하고 여러가지 작업들을 할때 라이브러리가 업데이트되면서 호환이 안 될 수 있다. 그러면 이전 라이브러리로 매번 다시 설치해야되는 번거로움이 발생하는데 파이썬에서는 이를 해결하주는 방법으로 가상환경이라는 개념을 사용한다. 가상환경안에 필요한 라이브러리를

이번에는 슬라이더 기능과 카드 기능을 만들어 볼 것이다. framer motion을 이용하면 슬라이더 기능이 개 쉽게 만들어진다... 놀랍다,,,, 먼저 슬라이더를 만들 때는 이전에 사용하지 않은 animation이 하나 더 추가된다. 이전에는 초기, 진행, 애니

방학동안 배운 것들을 이용해서 만들 토이 프로젝트를 계획해 볼 것이다. 먼저 내가 배운것들이 무엇이 있는지 정리해보자 > firebase 파이어베이스를 이용해서 로그인 구현 Db구축 storage에 사진저장 > styled-componenet + TypeScri

저번학기때 공부한 workflow를 적용해서 개발해보기로 했다. git flow setting gitflow를 사용해서 개발해보자! 먼저 WSL에서 gitflow을 설치해준다. sudo apt-get instll git-flow gitflow을 사용할 곳에 디렉

환경 구축 초기설정 로딩하기 전에 이미지와 폰트같은 assets들을 받아와야 하기 때문에 startAsync, onFinsh, onError 설정을 해줘야 한다. > startAsync 로딩되기 전의 설정으로 assets들과 font를 받아온다. 원격이미지를