전체 글

위의 데이터를 firestore에서 받아왔다. 위의 state에 저장을 해야한다. 어김없이 생기는 에러 useState에 무슨 타입인지 주진 않고 배열이라는 것말 알려줬으니 위와 같은 에러가 생긴다. 이 친구들도 never 타입이 아니라면서 경고를 내뿜는다. 여기서 문제는 둘다 해결할 방법을 찾지 못했다는 것이다. 하나를 해결한다해도 하나만 해결되고 나머지는 해결되지 않았다. 위같이 해준다면 마찬가지로 title,spentTime,progress가 {id:string}이 아니라고 하는데 이 부분은 왜 이렇게 경고가 나오는지 이해가 안된다. 해결된다면 다시 포스팅해야겠다.

Modal 만들기 - 프로젝트가 커질수록 유지보수 측면이나 빌드시간 감소 측면에서 공통인 컴포넌트로 뺴는게 좋다. 또한 협업할 때도 더 좋다. React Query - 서버로부터 받아온 데이터를 리덕스 리코일에서 저장하면 서버의 데이터가 바뀔 때 업데이트 되지 않는 다는 단점이 있는데 리액트 쿼리는 주기적으로 request를 보낸다. 오픈소스 컨트리뷰션 MDN 관련한 설명을 들었다. 팀프로젝트에 관해 찾아봤다 프론트엔드의 경우 테스트를 하는 경우는 드물다고 한다. 좋은 소스코드를 많이 보는 것이 중요. 같이 할 수 있는 사람. 멘토님께서 공부하셨던 경험 -- 공식문서 퀵스타트 -> 프로젝트 적용 라이브러리 공부하다보면 어느정도 비슷비슷 리액트 쿼리 왜 생겼는가 다른 건 뭐가 있는가 이건 쓸만한가 라이브러..

enum Alphabet{ A, B, C, D, } console.log(Alphabet.A) // 0 console.log(Alphabet.B) // 1 console.log(Alphabet.C) // 2 console.log(Alphabet.D) // 3 이게 끝이다 ㅎ

타입스크립트 기본형 종류 타입 문자열 string 숫자형 number 불린형 boolean undefined undefined null null 배열과 튜플 const cart: string[] = []; cart.push('c001'); cart.push('c002'); // 배열의 배열 const carts: string[][] = [ ['c001', 'c002'], ['c003'], ]; // 튜플 let mySize: [number, number, string] = [175, 30, 'L']; 객체 타입 let product: { id: string; name: string; price: number; membersOnly?: boolean; // 필수가 아닌 프로퍼티 sizes: string[]..

컴포넌트로 나눌 때 컴포넌트에 스타일링을 적용해야 할 때 컴포넌트 안에 static하게 스타일을 추가하기 보다는 위 같은 방식을 이용하는 것을 생각을 했다. 현업에서는 이런 방식을 쓰나? 어떤 방법을 쓸까? [글수정] 코드를 피드백을 받았다. 이 코드는 잘 생각하고 만든 코드라고 하셨다. 아무래도 컴포넌트 자체는 static한 스타일이 포함되어 있다면 안되기 때문이다.

1차 작업 회고 2주차 멘토링을 반영하여 위와같이 메인페이지를 이틀만에 완성할 수 있었다. 이전과 다르게 훨씬 코드가 깔끔해졌다. 역시 TopDown 방식으로 생각하니 코드의 구성이 더 완벽해지고 완벽해지니 코딩하는 것도 재밌다. 이전에 bottom up 방식으로 했을 때는 코드가 너무 엉망이고 네이밍도 아무런 규칙없이 난잡했었다... (반성) recoil을 쓰며.. recoil을 사용했다. 왜냐하면 나는 처음부터 개발할때 컴포넌트를 나눠 놓았다. 서로 부모 자식 관계도 아닌 컴포넌트에서 같은 데이터를 공유해야 하는 일이 생겼다. 좀 더 자세하게 말하자면 잔디를 클릭할 때 달성 과정의 월 일이 바뀌어야 했다. 이 텍스트는 index.tsx에 있으므로 이를 기존의 react 방식으로 구현하기란 어렵다. 물..

프로그램 구조 잡는법 공통된 부분을 컴포넌트로 만들자! 변형이 필요하다면 props를 통해 해결할 수 있다. 커밋메세지 gitmoji 한글로 작성해도 된다. 과제 goalItem 컴포넌트 만들기, 잔디밭 구성하기

오늘 해피하게 코딩을 하다가 next.js로 인해 당황을 좀 하였다. 분명 예쁘게 잘 정리가 되어 있던 것이 새로고침만 하면 스타일이 적용이 안 되는 문제이다. 또한 오류메세지는 위와 같다. 이는 명백한 next.js 이슈다. 내 코드를 다시 살펴 봤다. 위 코드에서 shift는 state이다. next.js 서버에서 styled-components의 shift를 인식 못했기 때문일 것이다. 저 부분을 어떻게 고치면 좋을까 나의 로직을 유지 하면서 바꿀 수 있는 방법이 있을까? state문제가 아니었다. 이는 서버에서와 브라우저 각각에서 styled-components의 해시값이 달라서 생기는 문제였다. babel-plugin-styled-components를 설치하고 babelrc를 만들어 위와 같이 ..