공부 기록일지📚

[명령어 순서] 1. 우선 GitHub의 저장소에 새로운 커밋이 있는 지 status 명령어로 확인해줍니다. git status #원격 리포와 로컬의 변경사항이 있는지 없는지 확인합니다. 2. fetch 명령어는 변경된 데이터를 확인만합니다. pull의 경우는 해당 최신 데이터를 가져와 로컬과 동기화시키죠. 아래의 변경사항을 로컬로 가져온다는 의미는 Git에게 원격 저장소의 최신 메타데이터를 확인하라고 지시했기 때문입니다. (Git: 어! 변경사항이 있긴하네!!! 내PC: 엇 뭐지 나도 알려줭) git fetch #pull하기 전에 원격저장소의 변경사항을 로컬로 가져옵니다. 3. diff 명령어를 통해서 로컬PC에서도 변경점을 확인할 수 있습니다. (물론 변경내용을 터미널로 보기때문에 시각적으로 좀 불편..

생활코딩 이고잉님의 유투브 `React 서버 통신에 회의가 든다면 - RTK Query`를 기반으로 작성하였습니다. Server Hook 사용법 ./app/api 의 api 객체를 이용하기 RTK Query로 서버와 통신 읽기: useGetCountQuery ({name}) 쓰기: userSetCountMutation() -첫번째 원소 함수({name, value}) 로 데이터 전송 RTK Query의 특징 1️⃣ use-Query는 읽기 전용(read-only) - 객체를 리턴 // {} - data, isFetching, isLoading 중요 isLoading은 state가 초기화되기 전(undefined)일때 첫번째 로딩시 isFetching은 loading시마다 실행 - 자동실행 2️⃣ use-..

Array.from() 해당 메서드는 유사 배열 객체(array-like object)나 반복가능한 객체(iterable object)를 얕게 복사해 새로운 Array 객체를 만든다. 첫번째 매개변수로는 `배열로 변환하고자 하는 유사 배열 객체나 반복 가능한 객체`를 넘기고 두번째 매개변수(optional)로 배열의 모든 요소에 대해 호출할 매핑 함수를 전달한다. 세번째 매개변수(optional)는 thisArg로 매핑 함수를 실행할 때 this로 사용할 값을 넘겨주면 된다. 시퀀스 생성기(range)로도 사용할 수 있다. 유사 배열 객체(array-like object) : length 속성과 인덱싱된 요소를 가진 객체 순회 가능한 객체(iterable object): Map, Set 등 객체의 요소를..

Redux Toolkit Query (RTK Query)는 웹 어플리케이션에서 데이터를 로딩하는 흔한 케이스를 간단하게 하는 진보된 데이터 패칭, 캐싱 툴이다. RTK Query는 Redux Toolkit core의 위에서 작성되었고, RTK의 API들은 `createSlice`와 `createAsyncThunk`를 확장해서 만들어졌다. RTK Query는 `@reduxjs/toolkit` 패키지의 추가적인 애드온으로 포함되어져 있다. Redux Toolkit을 사용해도 RTK Query Api를 사용하지 않아도 되지만 RTK Query의 데이터 패칭과 캐싱이 많은 사용자들에게 혜택을 가져다 줄것이라고 예상한다. 즉, RTK Query는 강력한 data fetching, caching 툴이다. 웹 어플리..

사용 Node.js 라이브러리 🌝express-async-handler Express.js에서 비동기식 요청 핸들러를 처리하기 위한 미들웨어(async error handleing middleware for Express) Express.js의 기본 요청 핸들러는 예외 처리를 하지 못하는 경우가 많기 떄문에, 이를 해결하기 위해 만들어진 미들웨어 라이브러리이다. 이 라이브러리를 사용하면 예외 처리가 가능한 비동기식 요청 핸들러를 쉽게 작성할 수 있다. async를 쉽게 사용할 수 있고, Request Handler를 처리하는데 공통적으로 오류처리를 할 수 있거나 간단하게 구현할 수 있다. 1-1. request handler의 오류처리 Q. What is request handler in Express?..

몽고디비는 유명하고 널리사용되는 noSQL 중 하나이다. node.js 서버에 mongoDB를 연결하려면, 몽고디비 공식홈페이지에서 가입 후, 클러스터를 생성해줘야 한다. 클러스터가 생성되었으면 connect 버튼을 눌러 Connect to your application의 `Drivers`를 눌러주면 된다. Connection with MongoDB Driver 스텝에서 2번째에 보면 `npm install mongodb` 라는 명령어와 함께 몽고디비 라이브러리를 설치하라고 나와있지만 `mongoose` 를 설치해주면 된다. 3번째 스텝에 Add your connection string into your application code라고 붙여넣을 코드가 있는데 복사해서 password부분만 내가 지정한 ..

[문제 설명]: 부서별로 물품을 구매하는데 필요한 금액을 담은 배열 d와 전체 예산 budget을 매개변수로 준다. 전체 예산은 정해져있고 모든 부서의 물품을 구매해줄 수는 없으며 최대한 많은 부서의 물품을 구매해 줄 수 있도록 해야 한다. [제한 사항] 전체 부서의 개수는 1이상 100이하 => i = 0; d.length array.sort() 를 활용하여 오름차순 ..

모노리포 도입 배경 기존에 프론트엔드 팀은 40개가 넘는 repository를 각 도메인 및 기능 시스템 단위로 생성하여 멀티 리포(multi repo)방식으로 서비스를 운영하고 있었다. 멀티 리포 구조 레포(repository 의 발음이 리포지토리라서 리포라고 하겠습니다.) 멀티 리포 구조는 폴리리포(polyrepo)구조라고도 부른다. 분리된 각 모듈은 멀티 리포 구조에서 고유한 저장소가 있는 독자적 프로젝트가 된다. 각 프로젝트는 자율성이 높으며 독립적인 개발, 린트, 테스트, 빌드, 게시, 배포 파이프라인이 존재한다. 멀티 리포의 장점: 각 프로젝트가 고유의 저장소를 가지게 됨으로써, 다르 프로젝트와의 의존성을 가지고 있고 않아 독립적으로 빠르게 개발이 가능하며 비교적 크기가 가벼워 프로젝트 관리 ..