정데브의 코딩기록

프로젝트를할때 서버 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버전을 사..

javascript에서 기본적으로 문자열을 만들때는 따옴표("")로 해당 문자를 묶어서 사용한다. var myName="jeongdev"; 1. 숫자를 문자열로 변환 숫자로 선언된 myNum을 문자열로 변환하여 다른 변수값에 넣을때 toString()을 사용한다. var myNum=123; var myString=myNum.toString(); 2. 문자열 길이 반환 다른 언어에서도 사용되는 길이 변환으로 length를 사용한다.. (java에 경우 length()로 사용) var myString="hello"; myString.length; console.log(myString); //"hello"문자열에 대한 길이 5를 반환 3. 문자열 합치기 2개 이상의 문자열을 합치고자 할때는 concat() 메..

변수(variable) 변수란, 숫자또는 문자열과 같은 값의 컨테이너이다. 변수의 선언 끝에는 세미콜론(;)으로 끝이나야한다. 변수에 값이 할당되면 다른 값을 지정하여 해당 값을 업데이트 할 수 있다. 변수 이름에 대한 규칙 변수를 원하는 대로 이름을 부여 할 수 있지만 제한이 있습니다. 일반적으로 라틴 문자(0-9, a-z, A-Z)와 밑줄 문자를 사용해야 합니다. 오류가 발생하거나 전 세계 타인이 이해하기 어려울 수 있으므로 다른 문자를 사용하면 안됩니다. 변수 이름의 시작부분에 밑줄(_)을 사용하지 마세요. JavaScript 구문에서 밑줄로 시작하는 것은 특별한 의미를 가지고 있으므로 혼란을 가져올수 있습니다. 변수 이름의 시작부분에 숫자를 사용하지 마세요. 허용되지 않으며 오류가 발생합니다. 안..

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프레임워크이..