본문 바로가기

전체 글368

[Redux + Redux saga] 리덕스와 리덕스 사가는 뭔가? 왜 쓰는가?

Redux 정의 왜 사용함? 리덕스의 기능을 확장할 때는 middleware를 사용한다. 리덕스의 액션 요청 사이사이에 비동기 요청이 들어가게 한다. 어떻게 사용함? Redux-saga 정의 왜 사용함? 리덕스는 동기로만 처리가 일어난다. 리덕스를 비동기로 처리하는 방법은 thunk라는 redux toolkit과 observable이 있지만,Redux saga로도 비동기 처리를 구현할 수 있다. redux thunk는 쉽다. 대신 기능이 부족하다. 편하다. 실무에서는 redux saga를 쓴다. redux에 middleware로 redux-saga를 넣어서 비동기 동작을 하게 한다. redux-saga는 타입스크립트 친화적이지 않다. 어떻게 사용함? 제너레이터: 함수 실행을 중간에 멈출 수 있다. 원할 .. 2022. 11. 2.

[Vue] 동일 라우터 중복 요청 에러 해결방법

consoleObservable.ts:34 NavigationDuplicated: Avoided redundant navigation to current location: "/login". 해결방법 로그인 2022. 10. 31.

[testing-library] 인풋필트 빈 값으로 만들기

인풋필드 빈 값으로 만들고 싶으면, clear를 사용하라. clear는 user-event 13버전부터 지원한다. // ❌ userEvent.type(input, ''); // ✅ userEvent.clear(input); 문서: https://testing-library.com/docs/ecosystem-user-event/#clearelement 2022. 10. 29.

[VTU] jest.spyOn의 뜻을 알았다.

vue2를 사용하고 있다. Vue test utils로 테스트를 짜고있다. 테스트할 컴포넌트의 데이터 프로퍼티를 변경하면, watch에 의해서 감지되서 특정 메서드를 실행하게 되어있다. 특정 메서드는 컴포넌트 내부에 무언가를 수정하지 않고, vuex의 mutations 메서드를 호출해서 값을 변경하는 역할만 한다. 그래서, 결과가 아닌 메서드 호출만을 테스트하려고 하고 있다. 다음처럼 테스트 코드를 작성했는데, 에러가 발생했다. expect(wrapper.vm.테스트하는컴포넌트에정의된메서드).toBeCalledTimes(1); toBeCalledTImes의 received는 mock 또는 spy 함수여야고 에러 메시지가 표시되었다. 해결방법 jest.spyOn은 실제 함수를 모의함수(mock)으로 변환하.. 2022. 10. 26.

[빌드] yarn build할 때, prod env 설정으로 빌드하는 법

package.json에서 script "scripts": { "dev": "vue-cli-service serve --port 3333", // "build": "vue-cli-service build", "build": "vue-cli-service build --mode production", 👈 "lint": "vue-cli-service lint", "test": "jest" }, 2022. 10. 26.

[AWS] ECR에 도커 이미지 푸시하는 방법

작업 순서 1. aws 웹에서 ecr에서 레포지토리를 생성함. 2. 내 로컬(내 컴퓨터)에 aws-cli와 docker를 설치함. 3. 내 웹 프로젝트 홈 경로에 dockerfile 폴더를 만들고, 설정 작성한다. 4. docker를 실행한 상태에서 도커 빌드를 해서 이미지 파일을 만든다. 5. aws ecr에 만든 레포지토리에 push한다. ecr에 레포 페이지에 들어가보면 [푸시 명령 보기] 버튼이 있다. 눌러보면, 모달에 4개 순서가 뜬다. 그대로 하면 된다. 도커 명령어 실행하는데, 다음처럼 에러가 발생했다. Cannot connect to the Docker daemon at unix:///var/run/docker.sock. Is the docker daemon running? 출처: http.. 2022. 10. 21.

[Axios] json이 아닌 파일통신 받는 법

개요 파일 다운로드 기능을 개발하였다. 스펙은 다음과 같다. vue.js2, javascript, axios, file-saver 라이브러리 다운로드를 하게는 만들었는데, 파일을 열어보면, 열리지 않았다. 서버 api는 stream을 내려준다. 서버 개발자가 api를 호출하면 바로 파일이 다운로드 될거라고 했는데, 그렇지 않았다. 원인 axios 요청응답에 responseType을 지정해주지 않았기 때문이다. responseType default value는 json이다. You can configure the type of the data property using Axios' responseType object. By default, responseType is set to 'json' , which.. 2022. 10. 20.

[React] 모르는 것

display: inlin-block? display의 default는? rgb와 rgba의 차이는? transform: rotateX(180deg)는 어떤 동작을 일으키는가? react의 각 컴포넌트는 property와 state에 대해 unit test를 가지고 있어야 한다. 구현 주도 테스트 - 컴포넌트 동작과 실제 React에서 해당 컴포넌트의 마크업을 어떻게 만들어내는지를 테스트 행위 주도 테스트 - 사용자에게 어떤 컨텐츠가 보이고, 어떤 이벤트가 발생했을 때, 화면에서 일어나는 변화를 테스트. 해당 분야는 testing-library-react를 사용해서 구현한다. lint-staged? - 저장소 코드 품질을 지키는 데 좋음. husky - npm 환경에서 git hook을 전문으로 다루는 .. 2022. 10. 14.

[]git hook lint-staged

참고 https://www.huskyhoochu.com/how-to-use-lint-staged/ 2022. 10. 12.

[Typescript] type과 interface의 차이

차이점 - interface는 선언적 확장이 가능하다. - interface는 객체 타입을 만들기 위한 것이다. 객체 타입만 만들 수 있다. - interfacesms computed type을 만들 수 없다. interface는 '선언적 확장'이 가능하다는 점. 선언적 확장이라고 하면, interface를 같은 이름으로 선언이 가능하다는 것이다. type은 같은 이름으로 type 선언이 불가능함. - 확장 방법의 차이 interface는 클래스처럼 다룰 수 있다. 다른 interface에 extends할 수 있다. interface Human { id: number, name: string } interface Student extends human { school: string } type은 다음처럼.. 2022. 10. 12.

티스토리툴바