오늘도 조으네💜

React

Jest란? Facebook에서 만든 테스팅 프레임 워크이다. 최소한의 설정으로 동작하며 Test Case를 만들어 애플리케이션 코드가 잘 돌아가는지 확인해준다. 단위(Unit) 테스트를 위해 이용한다. Jest 시작하기 Create React App으로 프로젝트 생성 시 Jest도 바로 사용이 가능하다. 👀 Jest가 테스트 파일을 찾는 방법 파일 명을 .test.js로 설정 파일 명을 .spec.js로 설정 폴더 명을 tests로 설정 Jest 구조 describe: argument (name, fn) 여러 관련된 테스트를 그룹화하는 블록을 만든다. it(test) : argument (name, fn, timeout) 개별 테스트를 수행하는 곳. 각 테스트를 작은 문장처럼 설명한다. expect 값..

2022. 11. 10.

React

🤔 테스트 주도 개발이란? (TDD) 실제 코드를 작성하기 전에 테스트 코드를 먼저 작성한다. 테스트 코드를 작성한 후 그 테스트 코드를 통화할 수 있는 실제 코드를 작성한다. 😊 TDD를 하면 좋은 점 많은 기능을 테스트하기에 소스 코드에 안정감이 부여된다. 디버깅 시간이 줄고 실제 개발 시간을 단축시킬 수 있다. 깨끗한 코드가 나올 확률이 높다. React Testing Library Create React App으로 생성된 프로젝트는 즉시 React Testing Library를 지원한다. npm을 통해 설치할 수도 있다. npm i @testing-library/react 쿼리 함수 쿼리는 페이지에서 요소를 찾기 위해 테스트 라이브러리가 제공하는 방법이다. 여러 유형의 쿼리(get, find, q..

2022. 11. 10.

React

기본 템플릿을 하나 만들어두고 추후 다른 프로젝트의 베이스로 사용하고자 할 경우, 템플릿을 복사하여 사용하면 된다. cp -R template 프로젝트명

2022. 11. 10.

React

useEffect Hook 내부에 await 키워드를 사용할 수 있도록 콜백 함수를 비동기로 만들었다. 웹 브라우저에서는 정상적으로 동작하지만, 콘솔을 확인하면 아래 사진과 같은 경고를 볼 수 있다. useEffect(async () => { const posts = await axios.get("https://jsonplaceholder.typicode.com/users/1/posts"); setPosts(posts.data); }, []); useEffect Hook은 아무것도 반환하지 않거나 Clean up 함수를 반환한다. 그러나 async 키워드를 사용하면, promise 객체를 반환하므로 사진처럼 경고가 발생한다. ✨ useEffect는 아무것도 반환하지 않거나 clean up 함수를 반환해야..

2022. 9. 29.

React

리액트에서 불변성을 지켜야 하는 이유는? 🤔 👉 참조 타입에서 객체나 배열의 값이 변할 때 원본 데이터가 변경되기에 이 원본 데이터를 참조하고 있는 다른 객체에서 예상치 못한 오류가 발생할 수 있다. 👉 리액트에서 화면을 업데이트할 때, 이전 값과 바뀐 값을 비교해서 달라진 부분이 있으면 렌더링을 해야하는데, 원본 데이터가 수정되어 버리면 비교 대상이 없어지게 된다. 그러므로 불변성을 지켜줘야 한다. 불변성을 지키는 방법 😊 참조 타입에서는 값을 바꿨을 때 Call Stack 주소 값은 같은데 Heap 메모리 값만 바꿔주기 때문에 불변성을 유지할 수 없으므로, 아예 새로운 배열을 반환하는 메소드를 사용해야 한다. 새로운 배열을 반환하는 메소드 spread operator, map, filter, slic..

2022. 9. 20.

React

📌 라우팅이란? 사용자가 요청한 URL에 따라 알맞은 페이지를 보여주는 것을 의미한다. 리액트에서 라우터 사용하는 방법 ✅ 리액트 라우터 라이브러리 : 리액트에서 가장 오래됐고 가장 많이 사용하는 라이브러리이다. 컴포넌트 기반으로 라우팅 시스템을 설정할 수 있다. ✅ Next.js : 리액트 프로젝트의 프레임워크이다. 라우팅 시스템 뿐만 아니라 다국어 시스템 지원, 서버 사이드 렌더링 등 다양한 기능을 제공한다. 파일 경로 기반으로 작동한다. 리액트 라우터의 대안으로 많이 사용되고 있다. 📌SPA의 개념 싱글 페이지 애플리케이션이란 하나의 페이지로 이루어진 애플리케이션이라는 의미이다. 기존의 멀티 페이지 애플리케이션과는 반대로 웹 애플리케이션을 브라우저에 불러와 실행시킨 후, 사용자의 인터랙션이 발생하면..

2022. 9. 13.

React

📌 propTypes를 통한 props 타입 검증하기 컴포넌트의 필수 props를 지정하거나 타입을 지정할 때 propTypes를 통해 검증할 수 있다. import PropTypes from 'prop=types'; const Button = ({text}) => { return {test} } Button.propTypes = { text: PropTypes.string // 해당 prop은 문자열 형태로 전달해야 한다는 것을 의미한다. } 📌 isRequired로 필수 propTypes 설정하기 필수적으로 사용하여야하는 props의 경우에는 isRequired로 설정하여 props가 지정되지 않았을 경우 생길 수 있는 오류를 방지할 수 있다. import PropTypes from 'prop=typ..

2022. 9. 4.

React

리액트 공식 홈페이지에서는 리엑트를 다음과 같이 정의하고 있다. '사용자 인터페이스를 구축하기 위한 Javascript 라이브러리' 리액트는 페이스북, 인스타그램 개발자들이 만들었으며, 2013년에 처음 공개되었다. 리액트는 'MVC(Model View Controller) 패턴'에서 V(View)를 담당하고 있으며, 뷰(view)와 관련된 UI 컴포넌트(Component)를 만드는 일을 한다. 컴포넌트 시스템(조각화)이 잘 되어있기 때문에 재사용성이 매우 높아 효율적으로 웹을 구현할 수 있다. 1️⃣ node.js 설치하기 우선, 리액트 프로젝트를 만들기 위해 가장 먼저 Node.js와 npm을 설치해주어야 한다. Node.js는 아래의 링크에서 설치가 가능하다. Node.js는 크롬 V8 자바스크립트..

2022. 8. 28.