# Berry

12개의 포스트
post-thumbnail

yarn berry(yarn3) type declarations 오류

yarn berry + next.js + typescript 프로젝트 생성 시 import & module or type declarations 오류가 뜨는 경우 해결법 > 1. yarn set version berry Create .yarnrc.yml file and add yarnPath: .yarn/releases/yarn-3.3.1.cjs yarn Install editor SDK(vscode in my case) with yarn dlx @yarnpkg/sdks vscode Reload window with command + shift + p then 'Developer: Reload Window' 위 방법으로도 해결되지 않을경우 -> **타입스크립트 버전을 4.4.4로 변경하면 된다. ** 참고 - https://github.com/yarnpkg/berry/issues/3722 > yarn remove typescript rm -rf .ya

2023년 5월 7일
·
0개의 댓글
·
post-thumbnail

Yarn Berry(v3) space #4 - React Native 설정

Intro 목표로 하는 연제의 마지막 React Native를 yarn workspace 적용 입니다. React Native는 폴더 내부의 node_modules를 사용하도록 설정 해야 합니다. yarn berry를 지원하지 않고, node_modules를 직접 참조할때가 많습니다. root의 node_modules를 참조하도록 설정 할 수는 있지만, 경험상 복잡하고 오류가 많았습니다. 이번 yarn berry workspace는 별도의 nohoist 설정없이, 그나마 간단한 방법으로 구성이 가능하여, 다시한번 도전 하였습니다. 수정 2023.03.17 전반적인 변경 React Native 앱 생성 React Native 앱 생성 먼저 Yarn Berry(v3) Workspace #1 - workspace 설정으로 워크스페이

2023년 2월 5일
·
0개의 댓글
·
post-thumbnail

Yarn Berry(v3) Workspace #3 - Next.js 설정

Intro Yarn Berry workspace를 사용해서, 프로젝트에서 활용하고 있는 프레임웍을 하나씩 설정하는 작업을 하고 있습니다. 설정의 목표는 안전하게 작업할 수 있는 최소한의 환경부터 만들어 보자 입니다. 수정 2023.03.16 - 라이브러리 import 방식 변경 Workspace 구성 Yarn Berry(v3) Workspace #1 - workspace 설정을 따라 사용할 워크스페이스를 준비 합니다. 그다음 Next.js app을 생성 합니다. Next.js 설정 pakcage.json 파일에 'packageManager' 항목을 추가 합니다. version은 root의 packageManager 버전을 참고하여 기록 합니다. next.config.json을 아래와 같이 수정 합니다. 'imag

2023년 2월 5일
·
0개의 댓글
·
post-thumbnail

Yarn Berry(v3) Workspace #2 - Nest 설정

Intro Yarn Berry(v3) Workspace #1 - workspace 설정 (node_modules 사용하는 방식)으로 먼저 워크스페이스를 준비하고, 이 워크스페이스에 Nest app을 생성하도록 하겠습니다. 목표 yarn berry workspace에서 최소한의 설정으로 Nest 앱을 관리한다. typescript 라이브러리를 공유한다. nest module을 라이브러리로 공유 한다. 최소한의 설정으로 dockerizing을 위한 설정을 한다. (aws lambda Docker 배포 목적) 수정 2023.05.23 - 앱 생성방식 변경, 라이브러리 참조 방식 변경 2023.03.16 - 전반적인 변경 2023.02.10 - 소스 공유방식 변경 2023.02.10 - typescript 설정방법 변경

2023년 2월 3일
·
2개의 댓글
·
post-thumbnail

Yarn Berry(v3) Workspace #1 - workspace 설정

Intro 이전 블로그에서 yarn berry workspace를 이용하여, NextJS, Nest, React Native 와 공유 라이브러리에 대해 정리하였습니다. 그 내용을 바탕으로 프로젝트를 진행하면서, 추가할 내용과 조금 더 설명되어야 할 부분들이 생겨 조금 더 상세하게 연재하도록 하겠습니다. 목표 가급적 최소한의 설정. NextJS, Nest, React Native 모두를 포함할 수 있는 설정 이번 블로그에서는 yarn berry workspace의 기본적인 설정을 진행 하겠습니다. 주요 내용 yarn workspace 생성 typescript 설정 eslint / prettier 설정 jest 설정 수정 2023.07.06 - eslint prettier

2023년 2월 2일
·
0개의 댓글
·
post-thumbnail

yarn pnp 환경에서 커밋젠 설정하기

yarn pnp 환경에서는 cz-commitizen 설정 방법이 살짝 다르기 때문에 간단히 설명해 드리겠습니다. > stand-alone 버전의 cz-customizable를 사용하고 있습니다. 설치 여기서 yarn pnp를 사용하고 있기때문에 cz-customizable의 node_modules만 꺼내오기 위해 unplug를 해줍니다. 그리고 package.json의 scripts부분에 실행명령어를 적고 path를 unplugged된 파일이 있는곳으로 지정합니다. 최상단에 cz-config.js를 위치시켜 config에 명시했습니다.

2023년 1월 11일
·
0개의 댓글
·
post-thumbnail

Yarn 3 MonoRepo with Typescript (Next.js, Nest, React Native)

Intro MonoRepo란 Monolithic Repositories의 약자로 하나의 리포지토리에 여러개의 프로젝트가 구성된 형태를 의미 합니다. MonoRepo에는 장점과 단점이 있지만, 저에게는 하위폴더로 분리된 여러개의 프로젝트를 한번에 관리 및 코딩할 수 있는점과, 프로젝트간에 공통으로 사용할 코드(라이브러리)를 라이브러리 형태로 구성하여 공유할 수 있다는 장점 때문에 MonoRepo를 사용해 왔습니다. yarn class MonoRepo를 처음 시도 하였으나, react-native 관련한 설정의 복잡성과 관리의 문제 있어, 이후로는 계속 nx workspace를 이용하여 왔습니다. nx workspace는 처음에 약간의 공부가 필요하지만, 익숙해지면 많은 편리한 기능과 자동화툴 및 Visual Studio Code의 plugin 형태로 GUI를 사용할 수 있는 장점이 있습니다. (이는 지금도 포기하기 힘든 장점 입니다.) 하지만 중앙집중식 모듈 관리 형태를

2023년 1월 6일
·
2개의 댓글
·
post-thumbnail

yarn berry의 이점

node_modules는 많은 파일들이 매우 큰 공간을 차지하고 의존성 검색이 비효율적으로 동작한다. 이를 개선해보고자 yarn berry에 대해 알아보았다. yarn berry Plug’n’Play (PnP) Yarn Berry는 node_modules를 생성하지 않는다. 대신 .yarn/cache 폴더에 의존성의 정보가 저장되고, .pnp.cjs 파일에 의존성을 찾을 수 있는 정보가 기록된다. .pnp.cjs를 이용하면 디스크 I/O 없이 어떤 패키지가 어떤 라이브러리에 의존하는지, 각 라이브러리는 어디에 위치하는지를 바로 알 수 있다. >디스크 I/O란 우리가 데이터를 작성 하고 변경 할적에 디스크 즉 HDD 에 그것이 저장되는 것을 말한다.

2022년 10월 19일
·
0개의 댓글
·
post-thumbnail

Yarn Berry와 Classic 헷갈려서... ㅜㅜ

개발자는 아니지만 개발을 취미로 하고 있는 직장인입니다... 얼마 전에 토스 팀의 글을 읽고 너무 급 땡겨서 급히 공부하고 바로 적용해서 편하게 사용하고 있는 Yarn Berry.. > https://toss.tech/article/node-modules-and-yarn-berry 이미 많은 분들께서 벨로그에 관련하여 글을 작성하여 주셔서 감사하게도 줍줍(?)하여 잘 사용했습니다. 하지만 현재 저의 운영체제는 윈도우11인데, 지금 개발 및 배포하여 사용 중인 **행사

2022년 1월 18일
·
0개의 댓글
·

yarn berry 프로젝트 생성해보기

프로젝트 생성 공식 가이드 링크 이 곳의 Recipes 부분을 보면 yarn init -2 로 프로젝트를 생성하라고 한다. 그렇게 프로젝트를 생성했더니 평소랑은 좀 다른 느낌으로 프로젝트가 만들어졌다. 오... VSCode 연동과 TypeScript 사용하기 위 가이드의 바로 아래에 연동하는 방법도 그대로 따라해보았다. ![](https://images.velog.io/i

2021년 9월 20일
·
0개의 댓글
·

Yarn berry 도입기

Yarn berry 전환 .yarnrc.yml 파일이 생성됩니다. .yarn/releases/yarn-berry.cjs 파일이 생성됩니다. > Per-project install (yarnpkg.com) TypeScript 프로젝트에서 TypeScript를 사용하는 경우 Yarn berry와 호환될 수 있도록 위 플러그인을 설치합니다. > TypeScript + PnP quick start (yarnpkg.com) VSCode Interactive

2021년 8월 17일
·
0개의 댓글
·
post-thumbnail

yarn2와 함께 PnP(Plug'n'Play)를 적용해보자. (feat. Typescript)

먼저 기술적으로 적용시키기 전에 Yarn2 (Berry) 가 나온 배경부터 알아봅시다. 바로 기술적인 내용이 필요하신 분이라면 스킵해도 좋습니다. > 왜 'Berry'라고 불리나요? yarn2의 프로젝트 명이 berrry라고 합니다. 실제로 Github 레파지토리명이 berry입니다. :) Yarn2의 배경 현재 React 또는 Vue 등의 라이브러리 또는 프레임워크로 개발하는 개발자들은 가장 많이 보는 것이 nodemodules입니다. 하지만 동시에 nodemodules는 Node.js 창시자인 Ryan Lienhart Dahl가 언급했던 Node.js의 디자인 설계 실수 중 하나이기도 합니다. 대체 왜 우리가 잘 사용하고 있는 것을 실수 중 하나라고 언급했던 것일까요?

2021년 5월 17일
·
5개의 댓글
·