JavaScript/React(리액트) (9) 썸네일형 리스트형 [React] ReactDOM.render is no longer supported in React 18 에러 해결 방법 console 창에서 아래의 문구와 같은 에러 내용이 나오는 경우 해결 방법입니다 "react-dom.development.js:86 Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17. Learn more: https://reactjs.org/link/switch-to-createroot" 수정 전 코드 ReactDOM.render( , document.getElementById('root') ); 수정 후 코드 const root = ReactDOM.crea.. [React] 이미 3000 포트를 사용 중 입니다 여러 가지 이유로 서버를 재시작하는 경우 "Something is already running on port 3000."가 나오면서 다른 포트로 app을 시작할지 물어봅니다 Y를 입력하면 다른 포트, 보통 3001 포트로 실행됩니다 이때 3000포트를3000 포트를 그대로 다시 사용하고 싶을 때는 현재 3000 포트를 종료하고 다시 실행시키면 됩니다 포트 사용 여부 확인 명령어 : netstat -ano tcp | grep 포트번호 3000 포트 사용 여부를 확인하기 위해서 netstat -ano tcp | grep 3000 입력하면 아래와 같이 사용 중인 목록이 나타납니다 사용 중인 포트 종료 명렁어 : npx kill-port 포트번호 사용 중인 3000 포트를 종료하는 명령어를 사용해서 종료해 줍니.. [React] 구름IDE npx을 사용해서 리액트 앱 시작하기 리액트에서는 npm보다 npx를 이용해서 만드는 것을 추천합니다 명령어 리액트 생성 : npx create-react-app 예) npx create-react-app . 현재 폴더 위치에서 리액트 앱 생성 빈 폴더의 경우 문제없이 생성되고 프로젝트명 위치에 원하는 이름을 적거나 프로젝트 명을 입력하면 입력한 이름의 폴더를 생성하고 리액트 앱을 생성합니다 The directory . contains files that could conflict 에러 단 구름IDE의 경우 아래의 에러가 발생합니다 The directory . contains files that could conflict: goorm.manifest Either try using a new directory name, or remove th.. 리액트 보일러 프로젝트 - 5 개인 정보 숨기기, 설정 변경 프로젝트를 GitHub에 올릴 때 public으로 올리는 경우 DB 정보같은 것들이 공개될 때가 있습니다 그런 경우를 방지할 수 있게 깃허브에서 .gitignore 파일을 생성해서 특정 파일은 깃허브에 등록되지 않게 제외시킬 수 있습니다 .gitgnore 설정 프로젝트 최상위 경로에 .gitignore 이름으로 파일을 하나 만듭니다 gitignore 파일에서 제외시킬 파일 이름을 등록합니다 확장자를 포함해서 등록합니다 깃허브 명령어를 사용해서 test.js가 올라가는 지 확인합니다 1. git add . 2. git commit -m "커밋 메시지" 3. git push 위 명령어를 통해서 모든 파일들을 깃허브에 올렸습니다 test.js 이름을 가진 파일은 config 폴더 아래에 위치했지만 등록되지 않.. 리액트 보일러 프로젝트 - 4 nodemon 설치 프로젝트 진행 중 변경사항이 생기면 리액트 서버를 내리고 수정 사항 반영 후 다시 올리는 반복적인 작업을 했습니다 자주 수정하는 사항이나 간단한 것들의 경우 이러한 상황이 매우 불편하게 다가옵니다 이럴 때 도움을 주는 것이 nodemon(노드몬) 입니다 nodemon을 사용하면 변경된 사항을 업데이트를 해주어서 노드 서버를 내리고 올리는 일을 안 해도 변경 사항을 업데이트해주기 때문에 매우 유용합니다 nodemon 설치 설치 방법은 "npm install nodemon --save-dev"입니다 "npm install nodemon --save"만 해도 무방하지만 -dev를 붙이면 localhost(로컬) 즉 본인이 개발하는 환경일 때만 적용할 수 있게 해 줍니다 배포 등의 상황에서는 적용이 안된다는 이.. [짧은 팁]npm 업데이트 방법 npm 명령어를 사용해서 라이브러리 등을 다운로드하거나 할 때 버전과 관련해서 업데이트를 통해서 버전업을 해달라는 로그가 나옵니다 로그에는 현재 버전과 업데이트 버전을 알려줍니다 6.14.5 버전에서 6.14.8 버전으로 업데이트를 해달라는 로그입니다 "npm install -g npm" 명령어를 사용하면 버전업이 됩니다 성공적으로 패치되었습니다 6.14.8 버전 패치에 대한 상세 정보는 아래 링크로 확인 가능합니다 https://github.com/npm/cli/releases/tag/v6.14.8 Release v6.14.8 · npm/cli 6.14.8 (2020-08-17) BUG FIXES 9262e8c88 #1575 npm install --dev deprecation message (@san.. 리액트 보일러 프로젝트 - 3 post방식으로 입력한 데이터 처리 만들기 body-parser 회원가입을 할 때 아이디, 비밀번호 등의 정보를 입력하는데 정보를 우리 쪽에서 받기 위해서는 프로젝트에 "body parser"를 설치해야합니다 프로젝트 경로에 열린 cmd창에서 npm install body-parser --save 명령어를 입력합니다 이전에 install을 해서 위와 같은 로그가 나왔습니다 package.json 파일의 dependencies에 body-parser가 생성된 것을 확인할 수 있습니다 index.js 파일에서 app.get('/', (reqm res) => res.send('Hello World!')) 아래에 새로운 코드를 작성합니다 app.post로 post 방식으로 구현합니다 /register 경로에 접속할 경우 실행합니다 {} 안의 코드를 실행.. 리액트 보일러 프로젝트 - 2 몽고디비 연결 2020/07/23 - [mongoDB(몽고)] - [mongoDB ] 몽고 DB 가입 및 생성하기 [mongoDB ] 몽고 DB 가입 및 생성하기 nongoDB 사이트 : https://www.mongodb.com/ The most popular database for modern apps We're the creators of MongoDB, the most popular database for modern apps, and MongoDB Atlas, the global cloud data.. happycodingdiary.tistory.com 몽고 DB를 연결 mongodb+srv://mongoria:@boilerplate.ggtbp.mongodb.net/?retryWrites=true&w=majo.. 리액트 보일러 프로젝트 - 1 노드다운 받기 리액트 보일러 프로젝트를 만들기 전에 Node.js를 설치해야 합니다 설치 방법은 구글에 "nodejs"를 검색하면 사이트가 나옵니다 Node.js 다운로드 Node.js 사이트를 클릭하면 아래와 같은 사이트로 이동합니다 여기서 왼쪽의 LTS 버전을 다운로드합니다 LTS는 오른쪽 현재 버전보다 안정적인 버전이라고 생각하면 됩니다 다운로드한 후 확인하는 방법입니다 윈도우에서 cmd 창을 실행하고 "node -v"을 입력하면 설치된 노드 버전을 확인할 수 있습니다 설치된 것을 확인했습니다 프로젝트의 경로에 폴더부터 만들고 싶은 경우 "mkdir 폴더명" 입력하면 경로에 폴더가 생성됩니다 프로젝트를 만들 폴더의 경로에 들어가서 "npm init" 입력합니다 cmd창에 여러 가지 문구가 뜨지만 엔터로 넘어갑니다.. 이전 1 다음
