JudithHopps JudithHopps

프로그래머스 과제 테스트 준비 프로그래머스는 html,css, javaScript이기 때문에 실질적으로 도움이 될 만한 React로 준비했다. 테스팅에 목적이 아닌 학습을 위한 구현자료로써, 디자인은 하지 않았고 기능에 초점을 두었다. 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 🐇 HTML, CSS 🥕시맨틱 마크업 적용 코드가 전체적으로 div로만 이루어져 있습니다. 시멘틱한 방법으로 마크업을 변경하세요. 시맨틱한 코드 시맨틱(symantic)한 코드란 무엇인가? 시맨틱은 '의미의'라는 뜻을 가지고 있는 단어다. 코드에 적용하게 되면 말 그대로 Div..

3. MSW를 활용한 mock API 테스트 본 라이브러리를 학습하기 위해 코딩앙마님의 강의를 수강하였습니다. 3.1 Mock Serveice Worker 다운 및 세팅 Node - Getting Started Mock Service Worker Docs mswjs.io Install - Getting Started Mock Service Worker Docs mswjs.io 위 사이트를 방문해서 install 및 integrate를 해준다. src/mock 안에 handlers.js + server.js를 생성하면 된다. 그 후 src/setupTests(생성X).js의 내용을 다음과 같이 수정한다. // jest-dom adds custom jest matchers for asserting on DO..

0. Introduction Jest를 사용하면서 대부분 함수 단위의 유닛 테스트나 통합 테스트만 사용했었다. 팀 단위 프로젝트의 CI/CD를 구상하면서 리액트 컴포넌트가 잘 렌더링되고 있는지 확인이 필요했고, CRA에서 기본적으로 지원하는 React Testing Library를 사용해보기로 하였다. 1. 기본 개념 본 라이브러리를 학습하기 위해 코딩 앙마님의 React Testing Library 강의 영상을 수강하였고, 기본 개념과 코드들은 해당 영상을 참고하여 작성하였다. 1.1 컴포넌트 렌더링 테스트 가장 기본적인 App 컴포넌트가 렌더링되고 있는지에 대한 테스트를 작성해보자. 아래의 테스트는 App 컴포넌트를 렌더링하여 heading역할을 하는 요소를 받아온다. 그리고 해당 엘리먼트가 화면에 ..

설치 및 세팅 설치 npm install jest --save-dev 개발환경에서만 테스트를 사용을 하니 개발환경에 설치 세팅 npm test를 치면 테스트가 가능 ~.test.js 에 해당하는 파일을 전부 검사 참고 : https://www.youtube.com/watch?v=g4MdUjxA-S4 Matcher toBe test("1은 1이야", () => { expect(1).toBe(1); }); expect : test할 값 toBe : 예상하는 값 test("1은 2가 아니야", () => { expect(1).not.toBe(2); }); 부정값을 예상하는 경우 test("0.1+0.2 = 0.3??", () => { expect(fn.add(0.1, 0.2)).toBeCloseTo(0.3);..

5장 any 다루기 타입 스크립트의 타입 시스템은 선택적이고 점진적이기 때문에, 정적이면서 동적인 특성을 가지고 있다. item 38. any 타입은 가능한 한 좁은 범위에서만 사용하기 - Blink 예시 ) any 로 선언을 하지만 @ts-ignore을 사용해서 강제로 타입 오류를 제거 class Form extends React.Component { constructor(props: any) { super(props) const initialState: any = { goodsName: '', moid: '', amount: '', buyerName: '', buyerTel: '', buyerEmail: '', returnURL: '', ReqReserved: '', ediDate: '', hashS..

localhost에서 cors 에러뜨는데, 서버 담당자가 자리를 비웠을 때 , 임의로 로컬에서 수정할 수 있다. MAC(맥북)에서 hosts파일을 수정하는 방법 Windows에서 와 같이 MacOS에서도 hosts파일을 수정할 수 있습니다. hosts파일이란? hosts 파일은 운영 체제가 호스트 이름을 IP 주소에 매핑할 때 사용하는 컴퓨터 파일이다. 이 hosts 파일은 플레인 텍스 blog.stories.pe.kr 1. terminal sudo vim /private/etc/hosts 2. 내용 추가 127.0.0.1 localhost.getmiso.com (원하는 주소) 3. 주소창 localhost.getmiso.com:port번호

https://www.figma.com/dev-mode/ Dev Mode: Design-to-Development | Figma Figma's Development Mode helps developers transfer design into code. Streamline workflows between design and development so that there is more clarity on what's being built. www.figma.com 디자이너님은 피그마 개발자 모드 관련 해서 ppt 발표를 해주셨다.

3장 타입 추론 타입 스크립트는 타입 추론을 적극적으로 수행한다. 아이템 24 일관성 있는 별칭 사용하기 별칭은 타입 스크립트가 타입을 좁히는 것을 방해하기 때문에 일관성 있는 별칭을 사용해야 한다. 별칭을 남발해서 사용하면 제어 흐름을 분석하기 어렵다. 타입 스크립트는 함수가 타입 정제를 무효화하지 않는다고 가정한다. 비구조화 문법을 사용해서 일관된 이름을 사용하는 것이 좋다. // 객체 비구조화 예시 const person = { name: 'John', age: 30, address: 'Seoul' }; const { name, age, address } = person; console.log(name); // 'John' console.log(age); // 30 console.log(addres..