CRA(Create React App)로 만든 Application에서 저장소에 커밋하고 내려받을 때 /node_modules/.bin 파일들의 심볼릭 링크가 사라져서, react-script가 실행되지 않는 오류가 발생했다. 그래서, 직접 경로를 지정해 주었다. // package.json { "scripts": { "start": "export PORT=8080 && node_modules/react-scripts/bin/react-scripts.js start", ... } } 하지만 조치해주었음에도 불구하고 아래와 같이 xdg-open 에러가 발생했다. $ npm start Starting the development server... node:events:505 throw er; // Unhan..
이미지 사이즈 최적화 웹 개발에는 많은 이미지들이 사용되는데, 사이즈가 너무 크면 느려지고 너무 작으면 화질이 저하되는 문제가 있다. 어떤 이미지 사이즈가 적절할까? F12의 Lighthouse 탭을 이용하여, Opportunities 섹션 중 Properly Size Images 를 클릭해서 확인하면, 적절한 사이즈를 사용하도록 제안한다. 그리고 실제 해당 이미지를 사용하는 곳에 가서 커서를 올려 놓으면 아래와 같이 실제로는 120 * 120px로 렌더링되지만, 1200 * 1200px사이즈 이미지를 가져왔음을 알 수 있다. (여기서 권장되는 사이즈는, 실제 렌더링되는 사이즈의 *2 정도라고 한다.) 우리가 해당 이미지를 가지고 있다면 직접 툴로 수정할 수 있지만, API 호출 등으로 불러오는 경우 이..
먼저 Front-end 웹 성능은 크게 로딩 성능과, 렌더링 성능으로 결정된다. 로딩 성능 서버에 있는 웹 페이지와 웹 페이지에 필요한 기타 리소스를 다운로드할 때의 성능 ex. 고화질 이미지 등이 포함되어 있을 때 느린 인터넷 환경에서 늦게 표시되는 것. 로딩 성능을 개선하는 가장 좋은 방법은, 다운로드해야 하는 리소스 수를 줄이거나 크기를 줄이는 방법이 있다. 렌더링 성능 다운로드한 리소스를 가지고 화면을 그릴 때의 성능 코드를 실행하여 화면에 보여주는 과정. 렌더링 성능에 가장 크게 영향을 주는 것은 Javascript 코드로, JS 코드를 얼마나 효율적으로 작성했는지에 따라 화면이 그려지는 속도와, 사용자 인터랙션의 자연스러운 정도가 달라진다. 개발자 도구 탭 종류 분석 툴은 크롬의 개발자 도구(..
이번엔 React에서 적용해 보았다. 예제 프로젝트 생성 $ npx create-react-app tdd_test_react $ cd tdd_test_react My-Button.js const MyButton = ({ onClick, disabled, children }) => ( {children} ); export default MyButton; 간단한 Button 컴포넌트를 제작한다. My-Button.test.js import React from 'react'; import { render, fireEvent, screen } from '@testing-library/react'; import '@testing-library/jest-dom'; import MyButton from './My-B..
JS에서 테스트 자동화를 사용할 때 사용하는 도구는 아래와 같다. 이름 간단 설명 Jest Facebook에서 만든 프레임워크로, JS를 위한 강력하고 사용하기 쉬운 테스트 도구 Mocha 유연하고 확장성이 높은 프레임워크로, 다양한 플러그인과 어설션 라이브러리를 지원 Cypress 최근 웹 어플리케이션을 위한 end-to-end를 위한 도구로, 자동화된 브라우저에서 테스트를 실행할 수 있다. Puppeteer Google에서 만든 Node.js용 웹 스크래핑 및 자동화 라이브러리로, 웹 어플리케이션의 UI 테스트와 end-to-end 테스트에 적합하다. 순위는 아래와 같다. 이외에도 다양한 종류의 도구들이 있지만, 공부해볼 도구는 가장 많이 사용되고 있는 Jest에 대해 알아보려고 한다. 먼저 자바스크..
우선 TDD의 정의는, 아래와 같다. 테스트 주도 개발은 Test-Driven Development의 약자로, 테스트가 코드 작성을 주도하는 개발 방법이다. 작은 단위의 테스트 케이스를 작성하고 이를 통과하는 코드를 추가하는 단계를 반복하여 구현한다. TDD 진행 단계 테스트 코드 작성: 먼저 작성할 기능에 대한 테스트 코드를 작성한다. 이때, 실패할 것으로 예상되는 테스트를 작성한다. 테스트 실행: 작성한 테스트 코드를 실행하고, 테스트가 실패하게 된다. 기능 구현: 테스트가 성공하도록 기능을 구현한다. 리팩토링: 구현한 코드를 리팩토링하여, 테스트가 성공하는지 확인한다. TDD 사용 시 장점 안정성 증가: TDD는 테스트를 먼저 작성하므로, 코드가 기대한 대로 작동하는지 항상 확인할 수 있다. 이는 ..
Redux-Saga를 공부하면서 Generator이라는 문법을 알게 되었는데, 이에 대해 확인해 보려고 한다. 개요 A generator is a process that can be paused and resumed and can yield multiple values. (Generator는, 일시 정지 및 다시 시작할 수 있고 여러 값을 생성할 수 있는 프로세스다.) 직접 해보기 Generator은 함수와 비슷하게 생겼는데, 동작 방식이 다르다. // function 뒤에 *가 붙는다. function* myGenerator() { console.log('시작!'); yield 1; console.log('hello!'); yield 2; console.log('world!'); return 3; } ..
전체 소스코드는 여기에서 확인해볼 수 있습니다. 개요 Redux-Saga의 Github에서는 아래와 같이 설명하고 있다. Redux-Saga는, 애플리케이션 부작용(예: 데이터 가져오기와 같은 비동기 작업 및 브라우저 캐시 액세스와 같은 순수하지 않은 작업)을 보다 쉽게 관리하고, 보다 효율적으로 실행하고, 테스트하기 쉽고, 오류를 더 잘 처리하도록 만드는 것을 목표로 하는 라이브러리입니다. 그래서 언제 쓰나? 사실 Redux-Saga는 도입한다고 드라마틱하게 뭔가가 바뀌지는 않는다. 다만, 사용자 환경에 있어서 조금 더 좋은 환경을 제공해줄 뿐이지. 그 더 좋은 환경은 뭘까? API 호출 등의 비동기 작업에서 사용자 부주의로 인한 세부적 컨트롤이 가능하다. Async / Await으로 처리하는 것이..
전체 소스코드는 여기에서 확인해볼 수 있습니다. 프로젝트 생성 $ npx create-react-app redux-test --template typescript # Typescript는 옵션입니다. Redux 설치 $ npm i redux react-redux // package.json { "name": "redux-test", "version": "0.1.0", "private": true, "dependencies": { "@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", "@types/jest": "^27.5.2", "@types/nod..
생각해보면 당연한 내용이였는데 왜 안되는지 한참을 고민했기에, 기억을 강화하기 위해 작성한다. never는 일반적으로 함수의 리턴 타입으로 사용됩니다. 함수의 리턴 타입으로 never가 사용될 경우, 항상 오류를 출력하거나 리턴 값을 절대로 내보내지 않음을 의미합니다. 이는 무한 루프(loop)에 빠지는 것과 같습니다. -- Typescript 가이드북 나는 React + Redux를 적용하는 도중 문제를 직면했다. 타입 지정 export interface UserSearchList { characterId: string; characterName: string; jobGrowId: string; jobGrowName: string; jobId: string; jobName: string; level: ..
