초보 개발자의 일기

경고 내용 Warning: `fetch` is not available. Please supply a custom `fetchFn` property to use `fetchBaseQuery` on SSR environments. jest 초기 설정 후 컴포넌트 랜더과정에서 이런 경고를 보았다. 해결법 whatwg-fetch를 설치하여 import "whatwg-fetch"; 사용 중인 파일 제일 윗 라인에 추가해 해결하였다. https://www.npmjs.com/package/whatwg-fetch whatwg-fetch A window.fetch polyfill.. Latest version: 3.6.20, last published: 2 months ago. Start using whatwg-fet..

1. jest 환경 설정 npm install --save-dev jest @types/jest ts-jest jest-environment-jsdom @testing-library/react @testing-library/dom @testing-library/jest-dom npm --save-dev babel-jest @babel/core @babel/preset-env babel.config.cjs module.exports = { presets: [ ['@babel/preset-env', {targets: {node: 'current'}}], '@babel/preset-typescript', ["@babel/preset-react", {"runtime": "automatic"}] ], }; jes..

테스트코드란? 1. 테스트 코드의 작성의 목적 정확성 및 신뢰성 확보 테스팅의 주요 목적은 코드가 올바르게 작동하는지 확인하는 것이다. 다양한 조건 및 입력에서 React 컴포넌트와 코드가 예상대로 작동하는지 확인한다. 수월한 리팩토링 프로젝트가 성장하면 리팩토링이 필요하다 리팩토링 전 테스트코드를 작성하면 최소한의 기준이 만들어진다. 변경사항 또는 최적화가 예상치 못한 버그를 초래하지 않도록 한다. 2. 테스트 코드의 작성의 장점 문서화 및 이해 명확하게 작성된 테스트 코드는 문서의 형태를 이룬다. 내가 작성한 코드가 기획의도를 확실히 반영하는지 확인 가능 기획 내용을 잘 반영하였는지 확인 가능 기획자와의 소통의 도구로도 사용할 수 있다. 다른 개발자들이 테스트코드를 보고 컴포넌트나 함수의 예상되는 동..

split split() 메서드는 string 객체를 지정한 구분자를 이용하여 여러 개의 문자열로 나눈다. split으로 하면 잘라진 값들이 숫자가 아니라 문자열로 들어가게 된다. 그래서 원하는 값이 숫자로 이루어진 배열이면 이것을 문자열을 숫자로 바꿔야 한다. 이럴 때 해야 하는 것이 split 메서드 뒤에. map(Number)를 써주어야 한다. //list에 optlist객체 값 넣기 let list: any[] = Object.values(optList); //푸시할 배열 생성 let optionIdList: any[] = []; //,을 기준으로 나누어서 삽입 split하면 문자열로 들어가기 때문에 number로 변환 let change = list[0].replace(/\s/g, "").spl..

보낼 링크 헤더에 JWT 넣기 Key 값에 Authorization을 기입하고 Value값에 Bearer 입력 후 한칸 띄우고 사이트에서 발급한 jwt를 입력해준다. 보낼 값 입력 바디에 백에서 준 api대로 양식을 맞춰서 보내준다. 결과 값 정상적으로 서버에 보내지고 응답이 돌아왔다.

시작하기 npm i @fortawesome/fontawesome-svg-core npm i @fortawesome/free-solid-svg-icons npm i @fortawesome/react-fontawesome 추가 스타일 추가 스타일 아이콘을 사용하기 위해 새로 더 설치한다. npm i --save @fortawesome/pro-solid-svg-icons npm i --save @fortawesome/pro-regular-svg-icons npm i --save @fortawesome/pro-light-svg-icons npm i --save @fortawesome/pro-duotone-svg-icons 적용할 아이콘 선택 fontawesome 사이트에 들어가서 이 아이콘을 적용하고 싶다. 불..

SSR: Server Side Rendering 페이지를 이동할 때마다 서버에 새로운 페이지에 대한 요청을 하는 방식 장점 화면 전체가 한방에 그려짐 모든 검색엔진에 대한 SEO(검색엔진 최적화)가 가능 매번 새로고침 되기 때문에 사용자 UX가 다소 떨어짐 서버에 매번 요청을 해서 트래픽이 발생 SPA: Single Page Application 한 개의 페이지를 가진 애플리케이션 리액트, 앵귤러, 뷰 같은 자바스크립트 기반 프레임워크를 사용해 SPA로 개발한다. 장점 자연스러운 페이지 느낌 전체 페이지를 업데이트할 필요가 없어서 깜빡거림이 없다. SPA는 서버에게 정 적리 소를 한 번만 요청하고, 받은 데이터는 전부 캐시로 저장한다. 서버의 템플릿 연산을 클라이언트로 분산 컴포넌트별 개발 용이 단점 J..

DiaryList.js import DiaryItem from "./DiaryItem"; const DiaryList = ({ diaryList }) => { return ( 일기 리스트 {diaryList.length}개의 일기가 있습니다. {diaryList.map((it) => ( ))} ); }; DiaryList.defaultProps = { diaryList: [], }; export default DiaryList; App.js import DiaryItem from "./DiaryItem"; const DiaryList = ({ diaryList }) => { return ( 일기 리스트 {diaryList.length}개의 일기가 있습니다. {diaryList.map((it) => ( )..