JudithHopps JudithHopps

**React에 관한 질문과 답안:** 1. **React의 주요 특징은 무엇이며, 어떻게 동작하는지 설명해보세요.** - React는 사용자 인터페이스를 구축하는 라이브러리로, 가상 DOM을 사용하여 성능을 최적화합니다. React 컴포넌트는 상태(state)와 속성(props)을 통해 데이터를 관리하며, 컴포넌트 계층 구조를 구성하여 UI를 효과적으로 업데이트합니다. 2. **React Hooks은 무엇이며 어떤 상황에서 사용하나요?** - React Hooks는 함수 컴포넌트에서 상태와 생명주기 기능을 사용할 수 있게 해줍니다. 예를 들어, `useState`는 상태를 관리하고, `useEffect`는 부수 효과를 다루며, 이를 통해 클래스 컴포넌트 대신 함수 컴포넌트를 사용할 수 있습니다. 3. ..

과제 테스트 준비 애니메이션과 로컬스토리지, 무한 스크롤 기능을 작성해봤다. 🐇 url 절대경로 모든 경로 앞에 /web/을 절대경로로 붙여주어야 합니다 1. import Router import { BrowserRouter as Router, Route, Routes } from "react-router-dom"; 2. App.tsx 파일 수정 // 모든 페이지에 보임 🐇 url 전환 header의 menu를 누르면 url 바뀌어야 한다. 1. header 작성 2. react-router-dom 설치 3. Link to로 전환 // import styles from "./style/app.module.css" import styles from "../style/app.module.css"; impor..

과제 테스트 준비 input 태그와 관련되어서 좀 더 심도있게 준비를 하게 되었다. 🐇 readonly 유저가 input에 직접 값을 입력할 수 없다. readonly를 사용하면 된다. readonly를 사용하지 않을 때는 onChange 함수를 기입해야 한다. 🐇 backspace 백스페이스 기능 입력된 값을 백스페이스로 지울 수 있다 1. input의 onKeyDown 메소드를 이용 handleKeyDown(event, 'password')} /> 이때, 매개변수가 1개라면 event를 생략할 수 있다. ex) onKeyDown={handleKeyDown} 2. backspace 확인 및 기능 동작하는 함수 작성 const handleKeyDown = (event: React.KeyboardEvent..

과제 테스트 준비 input 태그와 관련되어서 좀 더 심도있게 준비를 하게 되었다. 🐇 포커스 이벤트 유저가 input 태그를 클릭하면 아래 키패드가 떠야 한다. 1. 키패드 가시성 여부를 state로 관리한다. const [IsOpenPasswordKeypad, setIsOpenPasswordKeypad] = useState(false); 2. 두 개의 같은 동작을 이용할 예정으로 키패드는 컴포넌트로 생성한다. const displayKeypad = (type: InputType) => { return ( {Array.from({ length: 10 }, (_, i) => ( handlePasswordChange(type, i)} > {i} ))} 9 * ); }; 3. div 클릭 / focus일때 ..

프로그래머스 과제 테스트 준비 프로그래머스는 html,css, javaScript이기 때문에 실질적으로 도움이 될 만한 React로 준비했다. 테스팅에 목적이 아닌 학습을 위한 구현자료로써, 디자인은 하지 않았고 기능에 초점을 두었다. 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 🐇이미지 상세보기 모달 🥕 max-size가 768px 이하인경우 모달의 가로길이를 디바이스 가로길이만큼 늘림 1. modal 창 구현 e.stopPropagation()} isOpen={isOpen}> {isLoading ? ( 로딩중 ) : ( x {catDetail && ..

프로그래머스 과제 테스트 준비 프로그래머스는 html,css, javaScript이기 때문에 실질적으로 도움이 될 만한 React로 준비했다. 테스팅에 목적이 아닌 학습을 위한 구현자료로써, 디자인은 하지 않았고 기능에 초점을 두었다. 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 🐇 검색 페이지 🥕 페이지 진입 시 검색창(input)에 focus처리 ※ autofocus autoFocus속성은 일반 HTML에서와 같은 방식으로 작동합니다. css에는 input autofocus가 있다. 하지만, 입력이 여러 개인 경우autoFocus한 페이지에autoF..

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역할을 하는 요소를 받아온다. 그리고 해당 엘리먼트가 화면에 ..