📂 Archive/Web Programming 12

[create-react-app] create-react-app : 이 시스템에서 스크립트를 실행할 수 없으므로 해결

간만에 Windows로 VS Code 쓰는데 create-react-app이 필요해서 설치하고, 뙇 만들려고 하는데 create-react-app : 이 시스템에서 스크립트를 실행할 수 없으므로 C:\Users\aaaaa\AppData\Roaming\npm\create-react-app.ps1 파일을 로드할 수 없습니다. 자세한 내용은 about_Execution_Policies(https://go.microsoft.com/fwlink/?LinkID=135170)를 참조하십시오. 위치 줄:1 문자:1 + create-react-app management + CategoryInfo : 보안 오류: (:) [], PSSecurityException + FullyQualifiedErrorId : Unautho..

[React] Unhandled Rejection (TypeError): Cannot read property 'push' of undefined 오류 해결

다음과 같은 에러를 만났을 때 해결하는 방법! 1. 문제가 되는 파일을 찾는다 2. 해당 파일 import 부분에 다음을 추가해준다. import { withRouter } from 'react-router-dom'; 3. 코드 마지막에 다음을 추가해준다. export default withRouter(함수(js파일)이름) 나 같은 경우는 LandingPage가 들어가야 함.

[Redux] Redux란? Redux 기초

Redux란? Redux is a predictable state container for JavaScript apps. 즉, 상태(state) 관리 라이브러리. 상태(state)란? 리액트에서는 주요하게 Props와 State라는 게 있다. ➡️ Props Properties의 약자 부모 컴포넌트에 자식 컴포넌트가 들어가 있을 때, 컴포넌트 간에 뭔가를 주고 받을 때는 Prop을 이용해줘야 함. 또, Prop은 소통하는 방식이 top-down방식 (부모 컴포넌트에서 자식 컴포넌트로)만 가능하다. 부모 컴포넌트에서 자식 컴포넌트에게 1이라는 value(Props)를 줬다고 가정하자. 이렇게 받은 Props는 자식 컴포넌트에서 바꿀 수 없다. 만약 Props를 2로 바꾸고 싶다면, 다시 부모 컴포넌트가 내..

[Nodemon] Nodemon이란? Nodemon 설치

Nodemon이란? 원래 node서버를 킨 다음에 Node서버 안에서 뭘 바꿨으면, 그 서버를 내린 다음에 다시 기동을 시켜야 바꾼 소스가 반영이 되는데 nodemon을 이용하면 굳이 서버를 내리고 올리지 않아도 소스의 변화를 감지해서 변화된 부분을 반영시켜준다. Nodemon 설치 npm install nodemon --save-dev 를 통해 설치할 수 있다. dev를 붙이면 development mode.. local에서만 사용하겠다-! 라는 뜻. 이렇게 설치해서 package.json에 가보면, 이렇게 nodemon이 설치된 것을 볼 수 있다. express, mongoose와 다르게 devDependencies에 있는 이유는 뒤에 --save하고 -dev 옵션을 붙여줬기 때문이다. 그리고, 시작..

[Server] 터미널에서 npm run 하고 종료하는 법 + 프로세스 강제 종료

..ㅎ 이 방법을 몰라서 sudo lsof -i :5000 해서 현재 5000번 포트를 사용 중인 프로세스 찾아서 sudo kill -9 로 강제종료 해줬다.. 이 얼마나 바보같은..! 이렇게 하면 vs code의 terminal에서도 이렇게 강제 종료가 된다. 이렇게 npm run start 하고 이 서버를 종료하고 싶다면 그냥 이 터미널에서 control + C 해주면 된다. (mac 기준) ^^.... 그럼 이렇게 서버 연결을 끊을 수 있다. 아 오늘도 발전했다! (ㅇㅂㅇ...)

[AWS] line 5: Bad configuration option: indentityfile, terminating, 1 bad configuration options 해결

너무 고생해서 기록해두기 위한 것.. ssh -i "pem파일경로" "서버종류"@"탄력적IP주소" 했는데 다음과 같은 오류가 나왔다. 터미널에서 chmod 600 "pem파일".pem 을 해주고, 다시 ssh -i "pem파일경로" "서버종류"@"탄력적IP주소"를 하거나 vscode에서 Connect to Host in Current Window 또는 Connect to Host in New Window를 선택해서 연결해주면 된다. 나는 New Window에서 여는 걸로 했는데, 위와 같이 하면 이렇게 잘 나오는 걸 확인할 수 있다.

[MongoDB] User Model, User Schema

우리가 웹 사이트 이용할 때 보통 회원가입을 하게 된다. 이름도 입력하고, 생년월일도 입력하고.. 웹사이트에서 요구하는 다양한 정보를 입력한다. 이런 정보들은 User Database에 들어가는데, 이렇게 유저와 관련된 데이터들을 보관하기 위해서 User Model(유저 모델), User Schema(유저 스키마) 를 간단히 알아보자! User Model Model은 Schema를 감싸주는 역할 Schema const mongoose = require('mongoose') const Schema = mongoose.Schema; const bookSchema = mongoose.Schema({ writer: { type: Schema.Types.ObjectId, ref: 'User&..

인라인 코드블럭(인라인 코드 강조) 예쁘게 설정하기

먼저 인라인 코드블럭(code block)을 하는 방법. 1. HTML/CSS ver 태그를 사용한다. [입력] int는 정수형을 나타낸다. [출력] int는 정수형을 나타낸다. 2. 마크다운(markdown) ver ``(backtick)을 사용한다. [입력] `int`는 정수형을 나타낸다. [출력] int는 정수형을 나타낸다. 이렇게 열심히 마크다운으로 인라인 코드블럭 만들어줬는데, 인라인 코드블럭한 부분이 예쁘게 나오지 않아 열심히 찾아봤다. 티스토리에서 뿐만 아니고, html/css이나 마크다운으로 문서를 작성할 수 있는, 마크다운으로 블로그를 커스터마이징할 수 있는 다양한 곳에 쓰일 수 있을 것 같아서 기록해두려고 한다. 1. 티스토리 기준으로 관리-꾸미기-스킨편집으로 들어간다. 2. html ..