chez Manon

What is a Regular Expressions? Not matching exact strings Instead, matching patterns of strings 정규표현식, 또는 정규식은 특정 문자 조합을 찾기위한 패턴이다. Regular Expressions = regex (Regg-ex or Redge-ex로 발음한다.) 🌟 정규표현식 연습하기 좋은 사이트 https://regex101.com/ regex101: build, test, and debug regex Regular expression tester with syntax highlighting, explanation, cheat sheet for PHP/PCRE, Python, GO, JavaScript, Java, C#/.NET..

Merge 브랜치 병합하기 여러 사람이 작업할 경우 각각의 feature branch에서 작업한 결과물을 최종적으로 main branch에 결합한다. 이 때 git merge를 이용하여 브랜치들을 단일화된 소스로 결합하게 된다. merge에는 크게 2가지 방법이 있다. 1. Fast Forward Merge - 현재의 HEAD 브랜치에 병합한다. (현재 우리가 있는 위치) 2. Commit Merge - 새로운 commit으로 병합한다. Fast Forward Merge HEAD 따라잡기 2개의 브랜치 중 하나는 첫번째 브랜치가 가지고 있지 않은 추가 commit을 가지고 있다. 이럴 때 뒤에 있는 브랜치로 이동하여 합쳐질 branch를 merge하면 앞서있는 commit으로 HEAD가 옮겨진다. ex)..

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 isLoading 3) Devtools 개발자 도구 4) Stale Time 5) Refetching 6) 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의 프로젝트 관리 ..

최신버전으로 설치되어 있는 상태에서 downgrade 하고 싶을 때 - 현재 노드 버전 확인 node -v - 사용 가능한 노드 버전 확인 brew search node - (최신 버전 설치 되었을 때) 현재 버전과의 연결 해제 brew unlink node → 최신버전 아래의 버전이 있을 경우 자동으로 그 버전이 지정됨 → 특정 버전을 설치하고 싶을 경우 brew install node@16 - 설치한 버전 연결 brew link node@16 sudo npm cache clean -f sudo npm install -g n sudo n stable