정데브의 코딩기록

프로젝트를할때 서버 url과 로그인 시 필요한 Rest api key를 관리하기위해서 .env로 만들어 관리하고자한다. 리액트의 .envReact에서 변수명은 REACT_APP_ 으로 시작되어야 한다. 변수명과 값 사이에는 공백 또는 따옴표("")가 존재해서는 안된다. 변수명은 대문자로 작성하는 것이 관례이다.Vite 의 .envVite에서 변수명은 VITE_ 으로 시작되어야 한다. 변수명과 값 사이에는 공백 또는 따옴표("")가 존재해도된다. 변수명은 대문자로 작성하는 것이 관례이다.별도 vite-env.d.ts를 생성하여 meta 타입을 설정해줘야한다. env는 루트에 만들고 사용하고자하는 변수들을 선언해준다.  src폴더에 vite-env.d.ts를 만들어주고 사용할 변수의 타입을 정해준다.  co..

vite로 새로운 프로젝트 생성 후에 npm run dev 실행후에 다음과 같은 에러가 발생했다.UnhandledPromiseRejectionWarning: SyntaxError: Unexpected token '??=' 해당 에러에대해서 살펴본 결과 "??" 해당 연산자는 nodejs 14이상에서 지원하지만 vite 실행 환경에서 다를 수 있고 내가 가진 node.js에 버전이 낮아서 그런다는 글을 보았다. 내가 설치한 node.js 버전은 window 에서 node.js 버전을 쉽게 바꿔주기위해 https://github.com/coreybutler/nvm-windows/releases 경로에서 exe 파일 다운받아서 실행.동의 후에 next 쭉 클릭 하여 설치완료. cmd 창을 관리자모드로 열어서 ..

터미널에 다음과 같은 에러가 나타났다. 열심히 구글링 해 본 결과 사용하지 않는 onAfterSetupMiddleware 을 setupMiddlewares로 바꾸어 사용해주면 된다고 하여 바로 진행. (node:24272) [DEP_WEBPACK_DEV_SERVER_ON_AFTER_SETUP_MIDDLEWARE] DeprecationWarning: 'onAfterSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option. [1] (Use `node --trace-deprecation ...` to show where the warning was created) 경로 : node_modules\react-scripts\co..

실습중 client 와 server 를 각각 다른 포트를 사용해서 실행할 경우 2개의 서버를 기동해주어야했다. concurrently 를 사용해서 해당 scripts를 설정해주면 동시에 기동이 가능하다. 1. concurrently install npm install concurrently --save (루트에서) 2. scripts 작성 root 디렉토리의 package.json 의 scripts 부분에 dev 라는 스크립트를 추가해주고 맨 앞에 concurrently 선언해준뒤 실행명령어를 나열해주면 끝!

처음에 만들어둔 모듈들을 client와 server로 구분짓기 위해서 폴더를 나누어 주었다. server를 실행하던 중 터미널 오류가 나타났다. 해당 오류는 말 그대로 해당 모듈을 찾을 수 없다는 에러였다. 경로가 바뀌면서 ../../config/models/User 가 ../config/models/User 로 잡아야 제대로된 경로가 잡힌걸 확인할 수 있었다. 해당 모듈이 잘못된 경로로 제대로 불러오지 않는다면 require() 뒤에있는 경로에 마우스를 가져다놔도 아무것도 나타나지 않는다. 하지만 제대로 된 경로가 잡혔으면 아래와같이 module 경로가 함께 뜨는 것을 확인할 수 있다! 위 오류 코드에서 나온것 처럼 at Object 를 찾을 수 없다는 경로에 들어가서 해당 모듈이 제대로된 경로로 지정..

이번 시간에는 react에서 호스팅을 해주기 위해 필요한 react-router-dom를 다운 npm install react-router-dom --save https://v5.reactrouter.com/web/example/basic Home v6.8.1 I'm on v5 The migration guide will help you migrate incrementally and keep shipping along the way. Or, do it all in one yolo commit! Either way, we've got you covered to start using the new features right away. reactrouter.com 위 링크에 나와있는 샘플은 5.3.0버전을 사..

2021.11.14일 기록 045. reactstrap Input Group 사용하기 046. reactstrap Jumbotron 사용하기 047. reactstrap List Group 사용하기 048. reactstrap Modal 사용하기 049. reactstrap Navbar사용하기 050. reactstrap Pagination 사용하기 051. reactstrap Popovers사용하기 052. reactstrap Progress 사용하기 053. reactstrap Spinner 사용하기 054. reactstrap Table 사용하기 055. reactstrap Tab 사용하기 045. reactstrap Input Group 사용하기 Input Group 패키지는 여러개의 태그를 하나..

2021.11.12일 기록 034. reactstrap Alerts 사용하기 035. reactstrap Badge 사용하기 036. reactstrap Breadcrumbs 사용하기 037. reactstrap Button Dropdown 사용하기 038. reactstrap Button Group 사용하기 039. reactstrap Bottons 사용하기 040. reactstrap Card 사용하기 041. reactstrap Carousel 사용하기 042. reactstrap Collapse 사용하기 043. reactstrap Fade 사용하기 044. reactstrap Form 사용하기 bootstrap은 프론트엔드 디자인을 쉽게 구현할 수 있도록 도와주는 html,css,js프레임워크이..

2021.11.09일 기록 029. shallow-equal 사용하기(class형 컴포넌트) 030. 함수형 컴포넌트 사용하기 031. hook 사용하기 032. Framents 사용하기 033. map()으로 element 반환하기 029. shallow-equal 사용하기(class형 컴포넌트) shallow-equal 패키지는 PureComponent에서 state값의 변경을 비교하는 것과 동일한 기능을 하는 함수를 제공한다. shallowEqualArrays()함수를 사용하면 문자열과 배열은 값만 비교한다. 객체는 PureComponent와 동일하게 참조 값을 비교한다. 명령어 프롬프트를 연 후 cd:C\react200\client 명령어를 이용해 설치경로로 이동하여 npm install shal..

2021.11.04일 기록 ✅ Props 사용하기 017. props 사용하기 018. props 자료형 선언하기 019. props Boolean으로 사용하기 020. props 객체형으로 사용하기 021. props를 필수값으로 사용하기 022. props를 기본값으로 사용하기 023. props의 자식 Component에 node 전달하기 017. props 사용하기 props는 부모 컴포넌트가 자식 컴포넌트에 데이터를 전달할 때 사용한다. props를 전달받은 자식 컴포넌트에서는 데이터 수정이 불가능하다. 데이터를 변경하기 위해서는 컴포넌트 내부에서만 사용하는 변수에 값을 넣어서 사용해야한다. this.props. 뒤에 상위 컴포넌트(App.js)에서 전달받은 props변수명 (Props_val)..