DDODI TIL 🚀

✅ 문제 제아무리 yarn set version berry를 해도 yarn install만 하면 node_modules 폴더가 생성됨 ✅ 해결방법 혹시나 해서 yarn config로 설정을 확인해봤다. nodeLinker가 'node-modules'로 설정되어 있었다. 내가 세팅하던 레퍼지토리에 .yarnrc.yml 파일이 별도로 없었으므로 글로벌 세팅인 것으로 추정되었다. 터미널에서 루트로 이동한 다음 확인해보니 .yarnrc.yml 파일이 있었고, 파일 안에는 내 예상대로 nodeLinker: node-modules가 설정되어 있었다. 해당 라인을 지웠다. ✅ 결과 나도 드디어 node_modules에서 벗어날 수 있었다! 간단한건데 헤맸다 원인 명확히 찾고 말끔히 해결해서 뿌듯함

첫 번째, 초기 프로젝트의 뼈대를 만들어주는 행위를 뜻한다. 어떤 프로젝트를 시작할 때 기본적인 README, License를 비롯하여 디렉토리 구조, 컴파일 설정 등이 자동으로 생성하는 CLI 혹은 UI 도구가 이와 같다. 출처: 프로그래밍 용어사전 우리는 React Native 내에서 Next.js로 웹뷰를 띄우기로 했다. 그래서 Next.js 레퍼지토리와 React Native 레퍼지토리 두 개가 필요했다. 난 그 중 RN 레퍼지토리의 스캐폴딩을 담당했다!🙋🏻‍♀️ 디프만 이전 기수의 RN 레퍼지토리와, 다른 팀원 분이 끝내놓으신 웹 레퍼지토리를 참고했다. 다른 팀원들이 clone을 받았을 때도 문제없이 작동해야 한다는 점, 참고한 레퍼지토리에 추가되어 있는 각종 툴들(패키지들)을 직접 사용해본 적..

프로젝트 스캐폴딩 중 수많은 eslint 플러그인을 마주하게 된 나.. 일일이 구글링하느라 고생했어서, 혹시 나같은 사람이 있을까 정리해봄!😇 패키지들을 몇 가지로 분류해뒀으니, 아래 분류로 각 패키지의 대략적인 역할들을 파악하신 다음 자세한 설치 과정을 구글링 하시면 될 듯합니다! prettier 사용 관련 prettier와 eslint를 함께 사용하기 위한 패키지들입니다. 참고로 prettier는 코드 포맷팅이 주 목적이고, eslint는 lint(에러를 잡아내는 일)가 주 목적이기 때문에 보통 두 가지를 함께 사용합니다. eslint-config-prettier eslint-plugin-prettier typescript 사용 관련 @typescript-eslint/eslint-plugin @typ..

Yarn Berry로 React Native 프로젝트를 관리해보자. https://dev-yakuza.posstree.com/ko/react-native/install-on-mac/ 맥(Mac)에 react native 개발 환경 구축하기 react-native로 앱을 개발하기 위해 맥(Mac)에 개발 환경을 구축해 보고, react-native로 생성한 프로젝트가 잘 동작하는지 확인해 봅니다. dev-yakuza.posstree.com 기본적으로 위 글을 참고했다. Yarn Berry라는 특수성이 더해졌을 뿐이다.. 🫐 🫐 Yarn Berry 간략하게 이해하기 Yarn 2.0 이후부터 Yarn Berry라고 지칭한다. Plug'N'Play(PnP) 라는 방식을 사용한다. node_modules 폴더 대..

디프만에서 패키지 매니저로 Yarn Berry를 사용하기로 했다. Yarn Berry의 특징을 이해하기 위해, 모듈화와 패키지 매니저의 개념부터 차근차근 짚어보았다. 🗂 모듈화의 필요성 자바스크립트는 파일을 분리해도 모두 같은 전역 스코프 위에서 실행되므로 전역 스코프를 공유한다. 따라서 모듈화를 위해선, ES6 모듈 문법을 사용해야만 한다. script 태그에 module 타입을 설정하면 자바스크립트 파일을 모듈로 로드할 수 있다. 모듈로 로드한 자바스크립트 파일은 모듈 스코프에 포함된다. 모듈 스코프 내의 자바스크립트 파일은 별도의 독립된 스코프를 가지며, 외부에서는 export한 변수와 함수만 접근할 수 있다. ES6에서는 named export 라는 모듈 문법을 사용한다. export 키워드를 사..

자바스크립트 패키지 매니저 npm, yarn, pnpm의 차이를 알아보자. 패키지 매니저란? 💁🏻‍♂️ 패키지란? npm에 등록된 node 모듈. 이러한 패키지들을 사용하기 위해서는 다운로드, 설치, 업데이트, 의존성 관리, 제거 등 복잡한 상황들이 많이 생기는데 패키지 매니저는 이러한 과정들을 자동화하여 편리하고 안전하게 수행할 수 있도록 해준다. 패키지 매니저의 등장 이전: 프로그램의 dependencies를 수동으로 다운로드 하고 관리 등장 이후: 패키지 매니저를 사용해 dependencies를 다운로드 및 관리 모든 패키지 매니저에서 통용되는 개념들은 다음과 같다. package.json은 프로그램의 메타데이터를 가지고 있다. node_modules 폴더에 dependencies를 설치한다. lo..

👩🏻‍💻 언제 사용하나요? ✅ React Component Tree의 서로 다른 부분에서 동일한 데이터를 필요로 할 때 위 상황에서 보통은 props를 사용해 데이터를 전달하게 됩니다. 그런데 컴포넌트 간의 거리가 먼 경우, 특정 컴포넌트로 데이터를 전달하기 위해 여러 개의 컴포넌트를 거쳐야 하는 상황이 발생합니다. A | B | C | D 위와 같은 구조로 이뤄진 React Component Tree를 가정해봅시다. A: useState로 데이터를 관리하는 컴포넌트 D: A의 데이터를 바탕으로 UI를 그리는 컴포넌트 라고 가정했을 때, D에게 A의 데이터를 넘겨주려면 어떻게 해야 할까요? B,C가 props로 부모 컴포넌트(각각 A,B)로부터 데이터를 전달 받고, 다시 자식 컴포넌트(각각 C,D)에게 ..

https://beta.reactjs.org/learn/synchronizing-with-effects 위 글을 제가 이해한 바대로 정리한 내용입니당 ‘٩꒰｡•◡•｡꒱۶’ React Docs BETA 라는 사이트인데, 기존 공식 문서보다 훨씬 이해하기 쉽고 친절하게 잘 되어 있어 React의 기본 원리를 이해하기에 좋습니다! React를 대강 쓸 줄은 아는데 깊이가 부족하다고 느껴지시는 분들에게 추천합니당 왕 추천 ❤️‍🔥 👩🏻‍💻 Effect란? two types of logic inside React components Rendering code: describes the UI, must be pure Event handlers: caused by a specific user action Effect..

custom hook을 사용해보고 싶은데, 정확히 어떤 개념인지 와닿지 않아서 간단하게 공식 문서를 읽어봤다. 커스텀 훅이란? 제목에 먼저 답을 하자면 커스텀 훅은 함수다. 내부에서 다른 hook을 호출하는 함수를, 우리는 커스텀 훅이라고 부른다. 여기서 다른 hook이라 함은 우리가 자주 사용하는 useState, useEffect 등을 일컫는다. 즉 Custom hook은 함수이며, 일반 함수와의 차이점은 내부에서 다른 hook을 호출할 수 있다는 점이다. 💁🏻‍♂️ : 앗 그렇다면 일반함수에서는 hook을 호출 할 수 없는 것인가요? ➡️ 그렇다. 일반 함수에서는 hook을 호출할 수 없다. 리액트 공식문서를 살펴보면, hook을 사용할 때 두 가지 규칙이 존재한다. 1. React 함수의 최상위 ..

폼 제출 후 응답이 올 때까지 로딩 화면을 띄워보자. 🎈 기존 방식 보통 React에서 로딩 화면을 구현한다면 아래와 같은 방식일 것이다. function LoginPage() { const [loading, setLoading] = useState(null); return ( {loading && } ) } submit 버튼 클릭 ➡️ setLoading(true) ➡️ loading의 상태가 바뀌어 리렌더링 발생, 로딩 UI가 화면에 띄워짐 그러나 react-hook-form을 사용한 경우 해당 방식을 사용할 수 없다. react-hook-form 사이트에 들어가보면, react-hook-form은 form 영역을 제외한 다른 영역의 re-render를 방지하는 기능을 제공한다고 적혀있다. 이때문에 ..