프로젝트 yarn berry 도입

https://www.jerrynim.dev/post/yarn-berry-typescript-cannot-find-module

https://www.zigae.com/yarn2/ 

https://minify.tistory.com/40

https://medium.com/wantedjobs/yarn-berry-%EC%A0%81%EC%9A%A9%EA%B8%B0-2-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-%EC%A0%81%EC%9A%A9%EA%B8%B0-45f1ba67c24c

https://medium.com/wantedjobs/yarn-berry-%EC%A0%81%EC%9A%A9%EA%B8%B0-1-e4347be5987

https://helloinyong.tistory.com/341

 

yarn berry 선택 이유

 

새로운 프로젝트를 시작하게 되면서 어떤 package manager를 사용할지 고민을 했었다.

 

원래라면 아무 생각 없이 yarn 1 버전을 사용했겠지만 

최근 yarn berry와 monorepo에 대해 알게 되면서 둘 다 사용해보기로 했다.

 

yarn berry 

• pnp를 통한 의존성 관리
  • zipfs를 통한 패키지 관리를 가능하게 하여 node_modules보다 적은 용량 사용
• zero-install
  • clone를 받거나 bracnch를 변경할 때 마다 package를 install 해주지 않아도 됨
• 근데 왜 모노레포는 yarn berry를 사용하는 게 좋다는 거지?

monorepo

•  

yarn berry cannot find module

 

 

아래처럼 폴더 구조를 할까 

https://github.com/kasterra/todo-proj/tree/frontend

GitHub - kasterra/todo-proj: @kasterra와 @kadrick이 함께하는 토이 프로젝트

 

이것처럼 폴더 구조를 할까 고민 했음

https://github.com/kimik-hyum/yarn-berry-monorepo

GitHub - kimik-hyum/yarn-berry-monorepo

위가 공유하는게 보여 맞다고 판단

 

 

yarn set version berry

clone 받을 때 마다 해줘야 함 

( 지금 보니까 구라임)

 

 

 

zero install이라 clone 받고 새 프로젝트 시작시 yarn install 안 해줘도 되는 줄 알았는데 에러 발생

yarn 해주니까 실행

노드 모듈스는 안 생기는 것 보니 맞게 한 것 같다.

 

 

yarn을 안 해주면 다음과 같은 에러가 발생하는데

Failed to load SWC binary for darwin/arm64, see more info here: https://nextjs.org/docs/messages/failed-loading-swc

 

알고보니 제로 인스톨은 yarn install을 한 번도 안해도 되는 게 맞는 거였다.

 

Next.js가 Rust 기반 컴파일러 SWC를 사용하여 JavaScript / TypeScript를 컴파일하기 때문에 오류가 발생하고 있으며이 SWC에는 시스템과 호환되는 바이너리를 다운로드해야 합니다

https://stackoverflow.com/questions/69816589/next-failed-to-load-swc-binary

Next failed to load SWC binary

 

 

msa는 백엔드가 쓰는 것인가 : 그렇다

bff의 필요성

웹뿐만 아니라 모바일버전까지 만들 경우 도입 고려해볼만 함

무작정 yarn berry와 모노레포를 사용해보고자 하였지만

yarn berry를 써본 경험이 없었고 모노레포에 대한 지식이 부족했어서 어떻게 해야될지 모르겠어서 좀 찾아봤다

yarn berry 및 zero install

sdk typescript 사용하여 @types 같은 거 자동 적용되게 함

 

sdk : Yarn berry의 PnP 기능을 사용할 때, TypeScript가 작동하도록 추가적인 구성이 필요합니다. 안전상의 이유로 VSCode에서는 사용자 지정 TypeScript 설정을 명시적으로 활성화해야 합니다.

패키지들이 zip 아카이브로 관리되기 때문에 기존의 방식으로는 정상적으로 타입이 불러와지지 않습니다.

 

추가적으로 typescript plugin을 import 시켜줍니다. 이 플러그인은 자체 types를 포함하지 않는 패키지를 추가할 때 @types/ 패키지를 package.json폴더에 종속성으로 자동으로 추가해줍니다. 이 플러그인 설치는 선택사항이지만 매우 유용하기 때문에 설치하겠습니다.

yarn plugin import typescript

 

12 24

티켓 설정

feature/auth 라는 브랜치를 만든 후 지라 넘버를 가진 브랜치를 한번 더 만들었다.

배달의 민족 참고

 

eslint에 대해서 잘 알게 되었다.

원래는 나만의 eslint를 만들어보겠다고 rule만 설정해주면 되는 줄 알았는데 그게 아니었다.

이상한 eslint 설정을 가져와서 에러가 많이 나왔다. import no default라고 export시 default를 금지하는 룰도 있었다. 맨 처음에는 도대체 이게 왜 필요한 가 싶었는데 버그를 막기 위해 사용된다고 한다. 그 중에서도 import no resolved 에러는 도저히 해결이 안 돼 그냥 해당 룰을 지워버렸다.

 

1225

파일명으로 라우팅할수도 있는데 그냥 폴더명으로 라우팅 하기로 결정

폴더로 뭔가 할 수 있지 않을까해서

'".svg"' 모듈에 내보낸 멤버 'ReactComponent'이(가) 없습니다. 대신 '".svg"에서 ReactComponent 가져오기'를 사용하시겠습니까?ts(2614)

https://choi95.tistory.com/206

여기서 해결

 

 

 

workspace name를 바꾸고, 전체 바꾸기로 해당 name으로 설정해줬음에도 다음과 같은 에러가 나타났다.

 

error - Failed to load next.config.js, see more info here https://nextjs.org/docs/messages/next-config-error
Error: next-transpile-modules - an unexpected error happened when trying to resolve "@chooz/ui". Are you sure the name of the module you are trying to transpile is correct, and it has a package.json with a "main" or an "exports" field?
Error: Can't resolve '@chooz/ui/package.json' in '/Users/jha/react-project/picksel/client/apps/web'

루트 폴더에서 yarn 해주고 다시 실행하니 잘 됐다.

 

 

 

styled-components의 themeprovider를 적용하고, theme을 모노레포의 다른 workspace에서 가져오자 다음과 같은 에러가 나왔다. 에러 문구를 읽어보니 react-is를 설치하라고 하는 것 같아 add해줬다.

 

Module not found: styled-components tried to access react-is (a peer dependency) but it isn't provided by its ancestors; this makes the require call ambiguous and unsound.

 

그러자 아래와 같은 에러가 나타났다.

Module not found: Can't resolve 'scheduler'

.yarn/cache 파일을 삭제 후 다시 yarn해주자 해결되었다.

 

 

 

12/27 

 

progress bar 구현시 width 값을 변경시켜서 구현하는 것보다

transform을 이용하는 것이 랜더링 될때 리플로우 리페인트가 안일어나서 더 좋다.

 

 

12/29

리베이스를 처음 써봐야 에러가 디지게 남 

뭐가 뭔지 모르겠음 

스쿼시

 

12/31

타입스크립트 미숙으로 구현 자체에 어려움이 있었다.

string로는 객체에 접근이 안되었기 때문인데 string literial 타입으로 지정해주자,

interface대신 type로 narrow해주자 해결되었다.

https://soopdop.github.io/2020/12/01/index-signatures-in-typescript/

 

1/1

브라우저 콘솔창에 다음과 같은 에러가 떠있는 것을 확인했다.

Warning: Prop `className` did not match. Server: "sc-fEXmlR gdocJS" Client: "sc-jSUZER NrSSr"

See more info here: https://nextjs.org/docs/messages/react-hydration-error

 

 

검색해보니 

next가 서버에서 랜더링한것과 브라우저에서 만들어진 트리의 클래스 네임이 달라 생긴 오류였다.

https://github.com/vercel/next.js/tree/canary/examples/with-styled-components

next/Link와 styled-component사용시 에러가 발생할 수 있다고 한다.

 

나 같은 경우 다음 코드에서 에러가 났었는데

    <Container>
      <Link href="/">
        <Image alt="chooz 로고" height={25} src={LogoWhite} />
      </Link>
    </Container>

Container 태그명을 다른 것으로 수정 후 서버를 재실행하니 해결되었다.

 

 

~notion 확인 

 

1/5

 

react portal을 사용하니

Uncaught Error: Hydration failed because the initial UI does not match what was rendered on the server.

Warning: An error occurred during hydration. The server HTML was replaced with client content in <div>. 

위와 같은 에러가 발생했다.

 

1/7

next에서 리액트 쿼리를 쓰는데 애먹었다.

일단 useQuery 자체가 날아가지 않았다.

그래서 리액트 쿼리를 사용하지 않고 사용

 

1/14 

소셜 로그인시 redirect uri 고민

어떤 페이지로 처리해줄지 

맨 처음에는 다시 /login 페이지로 리다이렉트 처리해줬지만 

깔끔한 코드를 위해 각각의 개별 페이지를 만들어줬다.

 

1/17

index signature에러가 떠 처음보는 방법으로 해결하였다.

https://soopdop.github.io/2020/12/01/index-signatures-in-typescript/

 

1/18 19

버튼 태그의 자식으로 h1, div를 만들어줬는데, button의 onClick 이벤트는 h1을 클릭해도 발생하는데 e.target.name하면 button의 name가 안뜨네요??

이거 h1, div를 클릭해도 button의 name를 갖고 오고 싶은데 어떤 방법이 있을까요

 

event.target 대신 event.currentTarget을 사용하면 될 것 같아요!

 

event.target은 이벤트가 발생한 대상을 참조하는데요. 말씀해주신 상황에서는 button의 click 이벤트 핸들러는 event는 h1에서 발생한 이벤트를 전달받은 것이기 때문에 event.target은 h1이 될거에요.

 

1/21

백엔드 서버가 https가 아니라 에러가 나서

_docmunets에

<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests" />

 

코드를 넣어줬다 그랬더니

ERR_SSL_PROTOCOL_ERROR

1/26

get request시 body에 params: { data }식으로 넣으면 쿼리 스트링으로 전달됨