본문 바로가기
반응형

NPM10

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.
javascript firefox 에서 날짜가 에러가 나는 경우 firefox 에서 날짜와 dayjs 가 오류가 나는 경우 Front 개발시 날짜 관련 npm 중에서는 dayjs package를 자주 사용하게 된다. 개인적으로 moment 보단 훨씬 가볍고 사용법도 간편하여 자주 쓸 수 밖에 없다. 하지만 개발을 chrome 에서만 하다보니 firefox 에서 날짜가 NaN 이나 invalid date 에러가 나는 줄 몰랐다. 대략적으로 내용을 찾아보다보니 chrome 과 firefox가 날짜의 형태가 달라서 에러가 나오는 것라고 한다. 또한 이건 dayjs 의 문제가 아닌 new Date() 를 사용 했을 때, 나오는 날짜의 값이 Chrome 과 Firefox가 다르다는 것이다. 예를 들어 2013-08-08 11:52:18 UTC의 date 형태를 2013-08-.. 2021. 2. 4.
반응형