Written by Jieun

👩🏻‍💻 내 마음대로 Today I Learned

React, Next

1. React Testing Library란? 테스트가 소프트웨어가 사용되는 모습을 닮을 수록 테스트는 더욱 신뢰할 수 있게 된다. The more your tests resemble the way your software is used, the more confidence they can give you. React 컴포넌트의 특정 메서드나 상태를 테스트하는 게 아니라, 컴포넌트가 렌더링한 결과와 상호작용하는 방법을 모방하는 쿼리를 사용한다. 그래서 사용자가 페이지에서 DOM 요소를 찾고 상호작용하는 것과 유사항 방식으로 테스트 코드를 작성할 수 있다. 이로 인해 컴포넌트 내부 구현이 변경되더라도 테스트 코드가 깨지지 않고 유연하게 유지 된다. RTL 주요 목표는 컴포넌트의 사용자 경험을 테스트하는..

2023. 11. 2.

React, Next

1. Jest란? 자바스크립트를 위한 테스트 프레임워크로 facebook에서 오픈스스화한 프로젝트이며 사용성이 좋고, 가장 인기 있는 프로젝트. 일반적으로 자바스크립트 코드에 대한 단위테스트, 통합테스트, 비동기 코드 테스트, mocking을 지원한다. 2. Assertion Matchers Assertion Matchers는 테스트 케이스를 작성할 때 사용되는 함수로 풍부한 matcher를 제공하여 여러상황에서 match를 체크한다. expect()는 expectation object를 리턴하고 이 object의 메서드를 이용해서 여러 매칭 상황을 assert한다. // a, b, c를 받아서 a와 b의 제곱의 합이 c의 제곱과 같은지 검사하여 true, false를 리턴 function isPytha..

2023. 11. 1.

React, Next

1. 코드 테스트가 필요한 경우 기능 확인: 코드를 작성하고 나면 원하는대로 동작하는지 알기 위해 테스트를 수행한다. 버그 확인: 코드에 버그가 있으면, 어떤 상황에서 버그가 발생하는지 파악할 수 있고 이를 통해 버그를 식별하고 해결할 수 있다. 리팩토링 확인: 코드를 리팩토링하면서 원래대로 동작하는지 확인한다. 컴포넌트 간 영향 확인: 특히 리액트 앱의 컴포넌트가 많아지면, 각 컴포넌트 간의 상호작용과 영향을 이해는 것이 중요하다. 이를 위해 특정 코드 수정이 다른 컴포넌트에 어떤 영향을 미치는지 확인하기 위해 테스트를 수행한다. 2. 테스팅 코드 작성의 이점 미연의 에러를 방지하고, TDD(테스트 주도 개발, Test Driven Development) 등의 방법론을 적용하여 생산성을 향상시킬 수 있..

2023. 10. 31.

React, Next

1. useState useState는 상태를 관리하는데 사용되며, 컴포넌트 내에서 상태를 선언하고 해당 상태가 변경될 때 리렌더링 된다. const Component = () => { const [count, setCount] = useState(0); const increment = () => { setCount(count + 1); }; return ( Count: {count} 더하기 ); }; useState는 count라는 상태변수와 setCount라는 상태를 변경하기 위한 함수를 반환한다. 그래서 클릭이벤트가 발생할 때 setCount를 호출해서 count값을 증가 시키는 역할을 한다. 2. useRef useRef는 DOM 요소에 접근할 수 있는 훅으로 주로 input 요소에 포커스를 맞출..

2023. 10. 30.

React, Next

1. Vite란? 공식문서 Vite Vite, 차세대 프런트엔드 개발 툴 ko.vitejs.dev Vite는 Vue.js 개발자인 에반 유가 만든 빠른 개발도구로 빠른 속도와 간편한 사용을 중시하는 개발 툴링이다. 또한 ES Module을 지원하고, HRM(Hot Module Replacement)을 지원하기 때문에 일부를 수정하더라도 전체 페이지를 새로고침 하지 않고 변경 사항을 즉시 확인 할 수 있다. 원래는 Create React App 이라는 도구를 이용해서 별도 구성 없이 쉽고 편리하게 리액트 프로젝트를 시작할 수 있었지만 Webpack의 강한 결속 그리고 빌드 속도가 느리다는 것과 커스텀이 어렵다는 것, 그리고 현재 React 18 버전의 호환말고는 업데이트가 되고 있지 않다. https://..

2023. 10. 29.

React, Next

티스토리 블로그 포스트를 JSON으로 가져오기 위해선 https://블로그 주소/rss 이런식으로 제목, 내용, 날짜 등을 가져올 수 있다. 근데 저 url로 바로 가져오려고 하면 크로스 도메인 이슈가 발생하기 때문에 아래 주소에서 티스토리 rss주소를 입력후 url을 가져오도록 한다. https://rss2json.com/ const url = "https://jisilver-k.tistory.com/rss"; useEffect(() => { const fetchRss = async () => { try { const response = await fetch( "https://api.rss2json.com/v1/api.json?rss_url=" + url ); const rss = await resp..

2023. 10. 19.