프론트 엔드/React

Typescript && Webpack && Babel이란 무엇일까 - 웹개발 필수 라이브러리

Webpack이란 ? 여러개의 파일이 브라우저에 로딩되는 것은 많은 네트워크 비용을 사용하게되면서 결국 반응속도가 느려지는 현상이 발생하게 되고 이외에도 수많은 문제점을 나타냅니다. 이러한 문제를 해결하기위해 존재한 모듈러가 바로 Webpack입니다. 쉽게말하자면 많은 파일들을 필요한 형태의 하나 또는 여려개의 번들 파일로 만들어준다. Webpack을 사용하는 이유? 모듈 번들러를 사용해야 하는 이유를 먼저 알아보자. 1. 네트워크 병목현상을 해결 할 수 있다. 너무 많은 자바스크립트 파일을 로드하게 된다면, 네트워크 병목현상에 빠질 수 있다. 이때의 해결방법으로 하나의 자바스크립트 파일만을 사용할 수 있지만 이 방법에는 문제점이 있다. ◎ 문제점 : 가독성과 유지보수 효율성이 떨어진다. 해결방법으로 W..

React Redux 상태관리 - 장바구니 만들기

지난 시간에는 React Redux 상태관리 라이브러리를 간단하게 사용해보았고 이번에는 좀더 파고들어서 어떤 기능이 있는지 알아보자 Redux 예제 - 장바구니 컴포넌트간 값의 전달을 props 로만 하다보면 복잡도가 상승하여 머리가 지끈해지게 됩니다. 이럴 때 redux 를 도입하면 이러한 복잡성을 해결핼 수 있습니다. 작업 파일 Redux 를 공부하기 위해 간 velog.io 본 글은 Redux 예제 - 장바구니 만들기를 참고해서 만들었습니다. 폴더 구조 src | | -store | | -actions | | | | - index.js | |-reducers | | - index.js | - cartReducer.js 기본 설치 먼저 라우터를 구현해야합니다 yarn add react-router-d..

[Jest] Mock Function

mock 이란 무엇인가 ? Mock Test는 테스트 대상 코드가 다른 시스템 모듈과 상호 작용하는 방식에 대해 주장(assertions)할 수 있는 단위테스트에 대한 접근 방식입니다. mock test에서 의존성은 실제 객체의 동작을 시뮬레이션하는 객체로 대체된다.mocking의 목적은 외부 종속성의 동작이나 상태가 아니라 시험 중인 코드를 분리하고 초점을 맞추는 것이다. 출처 : https://devopedia.org/mock-testing mocking은 주로 유닛 테스트에서 사용됩니다.테스트의 대상 객체는 다른(복잡한) 객체에 종속성이 있을 수 있습니다.객체의 동작을 분리하기 위해 실제 객체의 동작을 시뮬레이션하는 'mocks'로 대체합니다.이는 실제 객체가 유닛 테스트에 통합되지 않은 경우 유용..

[Jest] Jest를 사용한 비동기 코드 검사

아래의 내용은 CRA 환경에서 작성되었습니다. 자바스크립트에서 코드가 비동기적으로 실행되는 것은 흔하다. Jest는 테스트 중인 코드가 언제 완료가 되는지 알아야 비동기 코드를 검사할 수 있다. callbacks 가장 일반적인 비동기 패턴은 콜백이다. 아래의 코드는 비동기 패턴을 위해 작성한 코드이며, API 콜을 통해 데이터를 받아오는 데신 setTimeout()을 사용하여 콜백함수를 호출하였다. 보기에는 의도대로 테스트 통과하는 거처럼 보이지만 의도한대로 동작하지 않는 코드다. test 코드에 toBe('123456')으로 검사하여도 이 코드는 테스트에 통과한다. 그이유는 무엇일까 ? By default, Jest tests complete once they reach the end of their ..

React localhost실행 변수주기

간단하게 시작해보자. yarn add serve "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject", "prod": "npm run-script build && serve build" }, yarn start 할때 localhost:3000으로 들어가고 yarn prod 배포 할때 localhost:5000으로 줄것이다. import logo from './logo.svg'; import './App.css'; function App() { return ( 현재 개발 모드 : {process.env.NODE_EN..

React 상태관리를 위한 필수 라이브러리 - Redux2

Redux React에 Redux를 입혀서 상태관리하는 법을 다루어 보았f다. 들어가기 앞서 살짝 정리해보면 src/actions/ - action 객체를 리턴하는 함수들의 집합 src/reducers/ - state 를 관리하는 reducer 생성 src/index.js - createStore() 로 저장소 생성, Provider로 전달 src/App.js - userSelector , useDispatch 를 이용해 state 사용 dispatch()의 인자로 액션 생성 함수를 넣었고, 액션 객체가 리듀서 안으로 들어가 상태를 관리하는 형태 thunk 비동기 로직을 state에 넣기 위해서 우리는 미들웨어인 thunk를 사용했다. 클로저 형태로 되어있는 이 친구는 액션 생성 함수 내에서 dispat..

React 상태관리를 위한 필수 라이브러리 - Redux

React + Redux 이번 시간에는 React Redux를 통해서 카운터와 로그인 기능을 리덕스로 간단하게 구성해보자. actions actions 폴더에 있는 파일들은 dispatch의 인자로 줄 action 객체를 생성 바닐라 JS + Redux 같이, action 객체엔 type이란 키가 필요한데 이 type은 reducer 내부에서 switch-case 구문이 조건이 된다. 먼저 counterActions.js를 보자. src/actioins/counterActions.js const increment = () => { return { type: "INCREMENT" }; }; const decrement = () => { return { type: "DECREMENT" }; }; export..

API.1 - React에서 사용하는 많이쓰는 Http 통신라이브러리 - use-http

이번 시간에는 React에서 사용하는 사람들이 많이사용하는 HTTP 통신라이브러리 use-http를 알아보겠습니다. 사실 사람들이 많이쓰는 통신라이브러리는 axios 가 대표적인데요 axios는 GET POST 같은 method를 주로 사용합니다. 이번에는 사람들이 많이 사용한 2번째 Http 통신라이브러리 use-http 라이브러리에 대해 알아보겠습니다. use-http 라이브러리 도 axios 같이 언어는 동일하지만 쓰는 방식은 다릅니다. useFetch (use-http) 🐶 React hook for making isomorphic http requests use-http.com 저는 이곳에 있는 use-http 사이트를 참조해서 만들어 보겠습니다. npx create-react-app use-h..

React-testing-library 를 사용해서 TDD개발 흐름과 test로 null값 체크 해보기

- Jest란 무엇인가? Jest는 대규모 웹 응용 프로그램에 대한 단순성과 지원에 중점을두고 Christoph Nakazawa가 설계 및 구축 한 Facebook, Inc.에서 유지 관리하는 JavaScript 테스트 프레임 워크입니다. 즉 Jest는 JS 테스트 프레임워크입니다. Babel, TS, Node,React,Angular,Vue 등을 사용하는 프로젝트에서 사용할 수 있다. 즉, 프로젝트에서 코드 테스트를 하기 위해 사용하는 프레임워크이다. Create React App 에서의 Jest Create React App uses Jest as its test runner. 출처 : https://create-react-app.dev/docs/running-tests/ CRA 환경에서는 Test ..

React 개발 환경 세팅

리액트 개발환경 세팅하는 방법을 알아보자 간단하게만 설명할수 있으니 얼마 안걸릴것이다. 우선 리액트를 생성하고 기본적인 세팅을 마친다. 리액트에서 App.js에 들어가서 내가 만들 env에 대한 세팅을 해주어야 한다 우선 기본적으로 개발환경과 배포 환경에 따라 세팅을 해주어야하기 때문에 npm install env-cmd 환경변수에 따라 실행을 지원하는 env-cmd 를 설치해준다. "env-cmd": "^10.1.0", package.json에 추가 env-cmd가 추가되었다면 다음과 같이 package.json에 선언해주어야한다. "scripts": { "start:staging": "env-cmd -e development react-scripts start", "start:prod": "env-c..