개발 블로그

Git != GitHub Git - 분산 버전 관리 프로그램 - 코드 버전 관리 소프트웨어 - 어느 컴퓨터에서나(로컬에서) 가능 (인터넷 연결이나 계정등록 필요없음) GitHub - git을 바탕으로 하는 코드 호스팅 플랫폼 - 원격 저장소를 대신 제공해주는 서비스(웹서비스) - 클라우드에 저장해서 다른 사람과 쉽게 공동으로 작업 local과 github dusruf 1. repository 생성부터 시작할 때 - Github 페이지 > New repository (상단바) > repository name 작성 > create repository - 나의 로컬 repository를 Github repository와 연결 (remote 추가) git remote add origin https://githu..

Basic Test - Test interactivity using fireEvent - Jest-dom assertions : toBeEnabled() : toBeDisabled() : toBeChecked() - getByRole option { name : } - Jest describe to group tests 테스팅 라이브러리를 위한 ESLint와 Prettier 설정 ESLint ESLint는 JavaScript에서 흔히 사용되는 Linter이다. Linter : 정적 텍스트(static text)를 분석하고 linter 규칙을 위반하는 구문을 마킹하는 도구이다. static : 코드가 작성된 그대로의 '정적'인 코드 분석을 한다. (코드가 어떻게 '실행되는지'에 대해서는 분석을 하지 않음)..

하단의 다크모드 버튼을 누르시면 좀 더 편안하게 보실 수 있습니다. Recoil React의 기존의 상태관리 라이브러리 component state는 공통된 상위요소까지 끌어올려야 공유가능 → 거대한 트리가 re-render 될 수 있다는 단점 Redux → 기본적인 store 구성을 위해 많은 보일러 플레이트와 많은 코드를 작성해야하는 단점 Context → single value만 저장할 수 있으며, 자체 consumer를 가지는 여러 값들의 집합을 담을 수 없다는 단점 이러한 단점을 해결하는 방안으로 facebook에서 만든 상태관리 라이브러리가 Recoil이다. Recoil의 장점 1. 쉽다. 2. 비동기 데이터 흐름을 위한 내장 솔루션 제공 3. React 동시성 모드(Concurrent Mod..

하단의 다크모드 버튼을 누르시면 좀 더 편안하게 보실 수 있습니다. react-native-video react native에서의 동영상 재생 라이브러리 사용법과 react-native-video 사용시 빈번하게 발생하는 에러 해결방법 render error null is not an object (evaluating 'RCTVideoInstance.Constants') react-native-video setting 라이브러리 설치 yarn add react-native-video Typescript사용 시 yarn add @types/react-native-video TypeError (or render) : undefined(null) is not an object render error null ..

TDD Test-Driven Development (TDD) : 테스트 주도 개발 테스트 코드를 마지막에 작성 하지않고, 코딩 프로세스의 일부에 통합시키는 방식이다. 개발할 때 모든 테스트를 작성해두어서, 변경사항이 생길 때마다 모든 테스트를 다시 실행해서 자동 회귀(for free) 테스트를 할 수 있다. 코드 작성 전에 테스트를 작성하고, 테스트에 통과하도록 코드를 작성한다. red-green test : 코드작성 전 fail test code (red) → 코드 작성 success test code (green) Behavior Driven Development (BDD) : 행동 주도 개발 사용자의 app사용 방식 테스트를 권장하며 행동을 테스트하는 것이다. 다양한 역할 간의 협업이 필요하다. (..

React Query -  Stale time / Cache time / Refetching / Prefetching   1) React Query 사용 기본2) isFetching vs isLoading3) Devtools 개발자 도구4) Stale Time5) Refetching6) Prefetching React Query란?server data cache를 관리React 코드에 server data가 필요할 때 fetch나 axios를 통해 서버로 바로 이동하지 않고 React Query cache를 요청  ✔️ react query의 역할클라이언트를 어떻게 구성했느냐에 따라 해당 캐시의 데이터를 유지관리데이터를 관리하는 것은 react query이지만, 서버의 새 데이터로 캐시를 업데이트하는 시..

.gitattributes를 들어가기 전 Why? 왜 .gitattributes? react native 작업 후 PR을 올리려는데 project.pbxproj라는 파일이 포함되어있었고, 많은 변경사항이 있었다. 찾아보니 project.pbxproj는 native 개발 시 자주 충돌이 일어나는 주요 파일 중 하나였고, .gitignore에 추가하려고 생각했지만 gitignore에서 관리할 수 없고, .gitattributes 파일을 따로 만들어서 관리를 해야했다. 근데 project.pbxproj 파일이 뭔데? Xcode에서는 프로젝트를 관리하거나 프로젝트를 빌드하는 용도의 파일 혹은 항목들이 있다. 그 중 실제 프로젝트의 설정을 담은 파일이 project.pbxproj이다. Xcode의 프로젝트 관리 ..

Portal Portal은 부모 컴포넌트의 DOM 계층 구조 바깥에 있는 DOM 노드로 렌더링 하는 방법이다. 첫번째 인자는 렌더링 할 요소이고, 두 번째 인자는 DOM 엘리먼트 이다. ReactDOM.createPortal(child, DOMelement) 🔻 Portal을 활용하여 Modal 만들기 - html에 새로운 DOM 요소를 만든다. - ReactDOM을 import하고 의 첫번째 인자로 backdrop(요소외의 배경을 검정으로 해줄 요소) / modal로 띄워줄 컴포넌트를 넣어주고 두 번째 인자로 위에서 만든 overlays DOM을 지정해준다. import ReactDOM from 'react-dom'; const portalElement = document.getElementById('..

React Native app on an M1 Mac 기본 세팅 우선, 기본세팅은 React Native 공식 사이트나 다른블로그에 많이 나와있으니 생략하고 M1에서만 추가적으로 해야할 것들만 상세히 정리하겠습니다. Homebrew 설치 brew install node (17.x 이상버전 충돌 가능성 있음) brew install watchman Android Studio SDK 설치 custom 선택 계속 진행 JDK 11 이상 설치 SDK 설정 Xcode (Appstore) Cocoapods yarn 설치 sudo npm install -g yarn lerna 설치 gulp 설치 [공식문서 참고] https://reactnative.dev/docs/environment-setup Setting up ..

Git The world's most popular version control system. (VCS) - Version control 버전관리는 파일의 변화를 시간에 따라 추적하고 관리하는 것을 도와주는 소프트웨어이다. - 이전버전의 파일을 다시 볼 수 있게 해주고 버전들간의 혹은 파일들간의 변화를 비교하거나 변화를 되돌리고, 다른 작업자들과 그 변화를 공유할 수 있도록 해주는 등의 다양한 역할을 한다. - git 최초설정 (name과 email을 빼고 입력하면 설정된 상태 확인가능) git config -global user.name "name" git config -global user.email "email" - 기본브랜치명 (기본 브랜치명이 master로 설정되어있어서 main으로 변경) gi..