JavaScript (17) 썸네일형 리스트형 [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.. [Node] 버전 업그레이드(NVM 사용) 시간이 지나면 버전이 올라가고 이슈 등의 이유로 노드의 버전을 올려야 하는 경우가 생깁니다 노드의 버전을 올리는 방법은 2가지가 있습니다 버전 업그레이드 첫 번째는 설치된 노드를 지우고 노드 홈페이지 들어가서 다운로드를 하는 방법입니다 [Node] 노드 JS 설치 노드 JS 설치 방법입니다 구글에서 노드 다운로드 혹은 node js download 검색합니다 검색해서 나온 결과 목록에서 첫 번째를 클릭합니다 다운로드 링크입니다 https://nodejs.org/ko/download/ 다운로드 | Node happycodingdiary.tistory.com 두 번째는 NVM을 설치해서 명령어를 통해서 버전을 업그레이드하는 방법입니다 GitHub - coreybutler/nvm-windows: A node... [Node] 버전 업그레이드(구름IDE 사용) 요즘 가벼운 프로젝트 혹은 토이 프로젝트의 경우 구름을 통해서 개발하는 경우가 종종 있습니다 특별한 사유가 없으면 보통 프로젝트 시작 기준으로 최신 버전으로 개발 환경을 세팅해서 개발을 진행하는데 구름의 경우 템플릿을 통해서 만들기 때문에 버전의 경우 구름에서 지원하는 버전을 이용합니다 그런데 React 프로젝트의 경우 현재 버전과 지원 버전이 너무 차이가 나서 프로젝트가 정상적으로 실행 및 개발 진행이 안 되는 상황이 발생했습니다 이때 원하는 node와 npm 버전을 올려서 사용하는 방법입니다 버전 업그레이드 노드 버전 업그레이드하기 전 후로 버전을 확인하는 명령어입니다 명령어 node 버전 확인 : node -v npmp 버전 확인 : npm -v 새로운 버전을 설치 전 node, npm을 먼저 삭제.. [JavaScript] 요즘 유행하는 Wordle 따라하면서 만들어 보기-4 문제점 지금은 한 가지의 답안만을 가지고 있습니다 하나의 정답만 사용할 수 있습니다 기능 개선 여러 가지 정답을 가지고 그중에서 하나를 사용하는 방식으로 변경하겠습니다 방법은 배열을 통해서 여러 가지 정답을 가지고 랜덤으로 호출되게 변경하도록 하겠습니다 //정답 const answer = 'basic'; 지금은 "answer" 변수에 하나의 답만 가지고 있습니다 별도의 정답 목록을 가지고 answer의 답안을 변경하도록 하겠습니다 정답을 모은 answerList 변수를 만듭니다 //정답 목록 const answerList = ['basic', 'black', 'bread', 'clean', 'chair', 'count', 'drink']; 정답 목록을 만들었습니다 이제 answer에서 이 중에서 하나의 .. [JavaScript] 요즘 유행하는 Wordle 따라하면서 만들어 보기-3 [JavaScript] 요즘 유행하는 Wordle 따라하면서 만들어 보기-2 [JavaScript] 요즘 유행하는 Wordle 따라하면서 만들어 보기-1 ※ 처음은 다른 사람이 만들어 놓은 것을 토대로 만들고 그 이후에는 있었으면 하는 기능과 부족한 점 혹은 문제점을 고치는 식으로 해 happycodingdiary.tistory.com 지금 버그 중 하나는 두 번째부터는 색상 변경이 안 됩니다 색상을 처리하는 부분은 for문으로 관련된 코드를 살펴봅니다 원인 파악 단어를 입력해서 버그가 어떻게 발생하는지 살펴봅니다. 크롬 개발자 도구를 살펴보면 에러 표시가 없습니다 코드 상의 에러가 아니라 처리하는 방식에 뭔가 문제가 있습니다 let input = document.querySelectorAll('inpu.. [JavaScript] 요즘 유행하는 Wordle 따라하면서 만들어 보기-2 [JavaScript] 요즘 유행하는 Wordle 따라하면서 만들어 보기-1 ※ 처음은 다른 사람이 만들어 놓은 것을 토대로 만들고 그 이후에는 있었으면 하는 기능과 부족한 점 혹은 문제점을 고치는 식으로 해서 점점 자기만의 것으로 만들어 가는 과정입니다 코드의 happycodingdiary.tistory.com 이전에 만들었던 게임의 문제점 중에 입력 칸에 두 글자 이상 입력이 가능한 점이 있었습니다 한 칸에 하나의 철자가 들어가야 하는데 2개 이상이 입력되는 현상을 없애도록 하겠습니다 해결방법은 간단합니다 입력 칸은 html의 input을 사용해서 입력한 철자를 보여줍니다 여기서 처음 입력할 때 한 글자씩만 입력되도록 변경하면 됩니다 따로 기능을 구현할 필요 없이 input에서 제공하는 속성을 사용하.. [JavaScript] 요즘 유행하는 Wordle 따라 하면서 만들어 보기-1 ※ 처음은 다른 사람이 만들어 놓은 것을 토대로 만들고 그 이후에는 있었으면 하는 기능과 부족한 점 혹은 문제점을 고치는 식으로 해서 점점 자기만의 것으로 만들어 가는 과정입니다 코드의 소스는 유튜브 코딩 애플 님이 올린 영상 중 "JavaScript로 요즘 유행하는 Wordle 게임 만들기 (개 쉬움)"을 참고해서 만들 예정입니다 구성 게임 소개 게임 규칙 소스 설명 실제 게임 화면 문제점 개선 게임 소개 워들이란? 위키백과 워들(Wordle)은 2021년 10월 조시 워들(Josh Wardle)이 공개한 영어 단어 맞추기 게임이다. 게임 이름은 '단어'를 뜻하는 Word와 자신의 성 Wardle을 섞어 지은 것이다. 게임 규칙 위키백과 게임의 궁극적인 목표는 프로그램이 원하는 다섯 글자 영어 단어를 .. [Node] 노드 JS 설치 노드 JS 설치 방법입니다 구글에서 노드 다운로드 혹은 node js download 검색합니다 검색해서 나온 결과 목록에서 첫 번째를 클릭합니다 다운로드 링크입니다 https://nodejs.org/ko/download/ 다운로드 | Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org Node 다운로드 사이트로 이동하면 LTS와 현재 버전 두 가지 중 하나를 선택해서 다운로드할 수 있습니다 LTS는 안정적인 버전이고 현재 버전은 현재 노드의 최신 버전으로 보안 취약점 등이 있을 수 있습니다 운영체계에 맞는 LTS 버전을 다운로드합니다 다운로드 버튼 클릭 후 원하는 경로에 다운로드합니다 다운로.. 이전 1 2 다음
