본문 바로가기
반응형

notion/npm package9

react-app-rewired 와 customize-cra를 사용하여 CRA eject 안하고 babel 설정하기. create-react-app 에서 eject를 사용하면? eject를 사용하는 머리 좋은 똑똑한 사람들이 있지만, 나는 돌고래 지능이라서 해놓고 감당도 안되고, 원복도 안되고, 개빡치면서 관리가 안된다. eject를 안하고 babel 과 webpack 를 설정을 하려고 여러가지를 찾아보니까 craco와 react-app-rewired, customize-cra같은 패키지가 있었다. 이름이 맘에 들어서, react-app-rewired와 customize-cra를 사용해보려고 한다. react-app-rewired 와 customize-cra 란? react-app-rewired 홈페이지 customize-cra 홈페이지 앞서 위에서 말한 그대로 eject를 안하고 babel, webpack을 설정할 수.. 2021. 3. 16.
react styled-components 와 react-nomalize 적용하는 법 리액트 react-nomalize 적용하기 react-nomalize styled-components nomalize를 적용하기 위해서 위해 설치를 한다. 세팅을 편하게 하기 위해 두가지 패키지를 설치한다. ✗ npm install --save styled-normalize styled-components /src/assets/styles/global-styles.ts import styled,{createGlobalStyle, css, keyframes } from 'styled-components'; import { normalize } from 'styled-normalize' export const GlobalStyle = createGlobalStyle` ${normalize} html { fo.. 2021. 2. 22.
mockserver 를 이용해 mock서버 만들기[4] POST method 호출하기 GITHUB주소 : github.com/xersuy/custom_react 앞 내 문서를 읽어보면 알겠지만 url은 폴더 구조이며, 파일명이 호출을 값이라고 생각을 하면된다. post로 데이터를 보내서 맞는지 혹은 서버에서 받아야 할 값을 파일명으로 설정해서 만들어 두면 된다. 아래 이미지를 가지고 post의 가장 기본적인 예제라고 할 만한 로그인을 예를 들겠다. login/users안에 POST파일을 여러개 만들어두었다. 파일명을 작성할 때 받을 값을 POST--{}.mock 형태로 작성을 해야한다. POST.mock 1번 파일의 경우에는 2번과 3번 혹은 그 외에 보낸 데이터의 값(파일의 이름)들과 맞지 않는다면 마지막으로 이것을 확인해서 값을 보내준다. 나는 이걸 예외.. 2021. 2. 6.
mockserver 를 이용해 mock서버 만들기[3] GET method 호출하기 mock 서버에서 GET, POST, DELETE, PUT, PATCH, OPTIONS 와 같은 것들을 호출을 해보도록 하겠다. 아래와 같이 GET 메소드를 호출을 해보려고 한다. 폴더 구조를 하나 만든다. mocks/ 내부에 폴더를 나눈다. 우선 테스트로 api/menus 폴더를 만든다. 아래에 이미지를 참고한다. 이제 mocks/api/menus/GET.mock파일을 만들고, 메뉴를 반환하는 데이터를 작성을 한다. 폴더 구조가 호출 url이 되며 mocks를 제외하고 호출을 하면 된다. //mocks/api/menus/GET.mock HTTP/1.1 200 OK Content-Type: application/json; charset=utf-8 Access-Control-A.. 2021. 2. 4.
mockserver 를 이용해 mock서버 만들기[2] mock서버의 포트를 정의해주는 명령어를 만들도록 하겠다. 기본적으로 mock서버의 포트는 테스트하기 좋게 임의로 정해준다. yargs 패키지를 쓰면 스크립트에 넣은 옵션 값들을 받아 올 수 있고, .env로 사용을 하고 싶다면 .env 파일을 작성해서 불러오면 된다. //package.json "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "mockAPI": "node mocks/index.js add --portAPI=10001" }, 저렇게 add --portAPI라고 추가를 해두면 기존에 설치한 yargs패키지가 인식을 해서 포트를 읽어온다. index 서버 파일을 작성해보겠다. #!/usr/bin/env node cons.. 2021. 2. 4.
반응형