호박고구마

Type instantiation is excessively deep and possibly infinite 에러 발생

리액트에서 tailwind-styled-components 라이브러리를 사용하는 과정에서 에러가 발생했다.

tailwind styled components에 props를 전달하는 과정에서, 에러가 발생했는데 구글을 검색해보니
타입스크립트의 버전으로 인해 발생한 것으로 확인되었다.

현재 내가 사용했던 타입스크립트의 버전은 4.8.4이였는데, 3.4.3로 변경하니 다시 잘 작동이 되었고, Props에 변수도 전달이 잘 되었다.

버전을 낮으면 해결되는 걸로 보여진다. (참고 URL)

오늘 한 일 

→ React, Typescript

• useQuery 공부
• 처음으로 Typescript 이용하여 React 사용해보기
• dog api 사용하여 프로젝트 만들기 
• Tailwindcss 설치

• tsconfig.json 설정 안 하면 발생하는 에러

느낀점

1. 회고록을 작성하게 된 이유

요즘에 공부를 하는데 머릿속에 많이 기억이 남지도 않고, 매번 까먹어서 공부를 해도 한 거 같지 않은 느낌이 많았다.
그리하여 공부법을 좀 바꾼 게 회고록 작성이다.

처음으로 회고록을 작성해봤는데, 작성해보니 머릿속에도 기억에 많이 남고 시간이 나면 매일 써야겠다는 생각이 든다.
이걸 작성하게 된 이유는 예전에 회사에서 입사 때 매일 뭘 했는지 노트로 작성하고 끝나기 전에 발표를 했었는데 그게 머릿속에 많이 기억에 남았었는데 매우 도움이 되었던 걸로 기억이 나서, 오늘부터 작성해보고자 시간이 나면 앞으로 계속해서 작성해볼 예정이다.

2. React에 Typescript 첫 적용

지금까지 작은 여러 프로젝트를 기본 자바스크립트만으로 이용했는데 확실히 타입스크립트를 이용하니까 오류도 좀 더 줄일 수 있고, 
타입에 대한 부분을 신경쓰다보니 많이 공부가 되었다.

3. dog api 사용 및 useQuery 사용

useQuery를 사용해보고자 간단한 강아지 사이트를 만들어 보려고한다. 이제 막 fetch를 사용하여, useQuery를 사용해보았다. 이전에는 useEffect를 사용해서 만들었는데, useQuery를 사용해보니까 로딩도 만들기가 쉬워진거같고, 훨씬 더 코드도 간결해져서 보기도
편한 것 같다.

(간단하게 이미지 사진만 불러서 만들어봤다..)

react typescript can't resolve './app' 

tsconfig.json 파일이 없어서 발생하는 에러

프로젝트가 시작하는 루트 디렉토리에 tsconfig.json 파일을 만들고 복붙해주고 저장하면 에러 해결

{
    "compilerOptions": {
      "target": "es5",
      "lib": [
        "dom",
        "dom.iterable",
        "esnext"
      ],
      "allowJs": true,
      "skipLibCheck": true,
      "esModuleInterop": true,
      "allowSyntheticDefaultImports": true,
      "strict": true,
      "forceConsistentCasingInFileNames": true,
      "noFallthroughCasesInSwitch": true,
      "module": "esnext",
      "moduleResolution": "node",
      "resolveJsonModule": true,
      "isolatedModules": true,
      "noEmit": true,
      "jsx": "react-jsx"
    },
    "include": ["src/**/*.tsx", "src/**/*.ts", "src/**/*.d.ts"]

  }

공식 문서에도 있지만 좀 더 세세하게 설치 하는 방법을 적어두려한다. 

1. tailwindcss 설치 방법

npx create-react-app my-project
cd my-project

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p // tailwind.config.js 생성 됨

위의 명령어 대로 입력 하면 tailwind.config.js가 생성된다.

2. tailwind.config.js 생성이 되면 다음과 같이 작성

// tailwind.config.js

module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

위의 파일의 content부분이 비어있을텐데, 이 부분을 위의 코드대로 수정해주자.

3. index.css파일에 모듈 추가

// index.css

@tailwind base;
@tailwind components;
@tailwind utilities;

.....

그리고 간헐적으로 저렇게 수정한 후 index.jsx 파일에 index.css 모듈을 추가 안해줘서 안되는 경우가 있는데 꼭 넣어주자.

4. 프로젝트 시작

yarn start

5. 테스트

export default function App() {
  return (
    <h1 className="text-3xl font-bold underline">
      Hello world!
    </h1>
  )
}

MongoDB 설치 방법

1. 설치 → 공식문서

xcode-select --install
brew tap mongodb/brew
brew update
brew install mongodb-community@6.0

2. 디비 시작

일반 프로세스 시작

brew services start mongodb-community@6.0

백그라운드 실행

mongod --config /usr/local/etc/mongod.conf --fork

3. 디비 중지

일반 프로세스 중지

brew services stop mongodb-community@6.0

백그라운드 중지

mongod --config /opt/homebrew/etc/mongod.conf --fork

4. 프로세스 실행 확인

brew services list

ps aux | grep -v grep | grep mongod

5. 몽고디비 Shell 명령어

디비와 Shell과 연결해주는 명령어

mongosh // 예전엔 mongo라는 명령어였음

database를 보여줌

show dbs

function solution(a, b) {
  const day = {
    0: "SUN",
    1: "MON",
    2: "TUE",
    3: "WED",
    4: "THU",
    5: "FRI",
    6: "SAT",
  };

  const date = new Date(2016, a - 1, b);

  const answer = day[date.getDay()];
  return answer;
}

https://school.programmers.co.kr/learn/courses/30/lessons/12901

https://school.programmers.co.kr/learn/courses/30/lessons/77884?language=javascript

const isOdd = (value) => value % 2 === 0;

const findMeasureCount = (value) => {
  let count = 0;
  for (i = 1; i <= value; i++) {
    if (value % i === 0) {
      count += 1;
    }
  }
  return count;
};

function solution(left, right) {
  let answer = 0;

  let count = 0;
  for (num = left; num <= right; num++) {
    count = findMeasureCount(num);
    if (isOdd(count)) {
      answer += num;
      continue;
    }
    answer -= num;
  }

  return answer;
}

https://school.programmers.co.kr/learn/courses/30/lessons/86051

function solution(numbers) {
    let values = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
    
    let results = values.filter((value)=> numbers.indexOf(value) === -1);    
    let answer = results.reduce((acc, cur) => acc += cur, 0);
    return answer;
}