DDODI TIL 🚀

React.FC의 문제점 props에는 두 종류가 있다. 명시적 props: props 타입에 명시적으로 작성되어 있는 props 암시적 props:@types/react등에 의해 자동적으로 추가되는 props React.FC의 props는 기본적으로 children을 포함한다. 즉, React.FC를 사용할 경우 children이 암시적 props가 된다. excess props: 컴포넌트에 넘겨지지만 컴포넌트에서 사용되지 않는 props → excess props의 존재는 POLA원칙을 어기게 만든다. POLA: Principle of Least Astonishment 컴포넌트는 사용자가 예상한대로 작동해야 한다는 원칙 암시적 props인 children은 excess props에 해당한다. 사용자 ..

✅ SPA(Single Page Application) 이해하기 페이지 이동의 과정을 가장 단순하게 설명한다면 다음과 같습니다. 사용자가 새로운 url을 요청한다. (새로운 페이지로 이동하는 버튼을 클릭하거나, 뒤로가기 버튼을 누르는 등) 요청한 url에 맞는 리소스(html, css, js)를 화면에 렌더링한다. 간단하죠? MPA(Multiple Page Application), SPA(Single Page Application) 모두 페이지 이동의 골자는 동일합니다. 다만 리소스를 요청하는 방식에 따라 MPA와 SPA로 구분이 됩니다. MPA의 리소스 요청 방식 사용자가 새로운 url을 요청 해당 url에 대한 리소스를 서버에 요청 서버에서 받은 응답으로 화면을 렌더링 즉, 페이지를 이동할 때마다 서..

바닐라 자바스크립트로 쇼핑몰 SPA를 구현하기 위해, 가장 기본이 될 컴포넌트를 정의했다. 황준일님의 글을 참고해 초안을 짜고, 수정을 거쳤다. 기존 코드 constructor: 컴포넌트를 생성한다. 즉 초기 state/props를 설정하고, template 연산의 결과물인 마크업을 렌더링하고, 이벤트리스너를 등록한다. setup: 초기 state를 설정한다. mounted: 하위 컴포넌트들의 생성자 함수를 호출한다. template: 컴포넌트의 state를 반영한 마크업을 리턴한다. render: $target내에 마크업을 렌더링한다. 그 다음 mounted 함수를 호출한다. setState: 상태를 업데이트하고, render 함수를 호출한다. mounted 메서드를 좀 더 자세히 살펴보자. 예시로 황..

✅ 문제 제아무리 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을 받았을 때도 문제없이 작동해야 한다는 점, 참고한 레퍼지토리에 추가되어 있는 각종 툴들(패키지들)을 직접 사용해본 적..

Git hooks란? 특정 git 이벤트가 발생했을 때 특정 동작을 실행하는 것 예) commit 시에 자동으로 lint를 실행하기 Husky란? 손쉬운 Git Hook 적용을 위한 라이브러리 Husky와 Github Actions의 차이 Husky: 로컬에서 특정 git 이벤트가 발생했을 때 특정 스크립트를 실행 Github Actions: 팀원들과 함께 사용하는 레퍼지토리에 특정 이벤트가 발생했을 때 특정 작업들을 실행. CI/CD를 위한 도구이다. 이 구분이 정확한지는 모르겠지만, 우선 나는 이렇게 이해했다. 적용할 수 있는 Git hooks 종류 프로젝트에서 터미널을 열고 아래 명령어를 입력하면 Git hooks 종류를 살펴볼 수 있다! cd .git/hooks ls lint-staged, com..

프로젝트 스캐폴딩 중 수많은 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 폴더 대..

이거 보십시오!!! 제가 멋진 것을 해냈습니다!!! 크크 뿌듯✌🏻이런 스크립트를 작성해본 게 처음이라 많이 헤맸다. 나같은 초보자들이 이해하기 쉽게 작성해보겠다. 💁🏻‍♂️ Github Actions란? CI/CD 툴이다. Jenkins, CircleCI, TravisCI 등의 다른 툴들도 있지만 Github Actions의 경우 Github에서 제공하는 CI/CD 툴이라는 게 큰 이점이다. 👩🏻‍💻 적용 방법 프로젝트 최상단에 .github 폴더 생성 그 안에 workflows 폴더 생성 개별 workflow 파일 작성. 확장자는 .yml 을 사용한다. 파일명은 자유롭게 지으면 된다. 나는 CI 라는 이름의 workflow를 작성했다. 파일명은 ci.yml로 지었다. workflow는 말그대로 일련의 ..

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