CodeIt_Sprint/React_초급19 (3)React_초급_React 프로젝트의 기본 구조 Default 상태 :- 원하는 위치에 'dicegame'이라는 폴더 생성- vscode로 'dicegame' 폴더 열기- 터미널에 'npm init react-app .' 작성하여, react 프로젝트 생성 순서1_public 폴더에 index.html파일 외 전부 삭제- index.html 내의 코드는 아래의 코드로 수정한다. 순서2_src 폴더에 index.js파일 외 전부 삭제- index.js 내의 코드는 아래의 코드로 수정한다.import ReactDOM from 'react-dom/client';const root = ReactDOM.createRoot(document.getElementById('root'));root.render(안녕 리액트!); ＃코드 의미 :①. ReactDOM 객체.. 2024. 11. 21. (2)React_초급_React 개발자 도구, 확장 프로그램 설치 ● React Developer tools ○ 순서1_ Google에 "react developer tools" 검색 ○ 순서2_바로 보이는 링크 접속 => 앱 설치 ○ 순서3_설치가 완료되면, 웹페이지 상단 오른쪽에 퍼즐모양 버튼 클릭 => React Developer Tools가 설치된 것을 볼수 있다.또는 웹페이지에서 "F12" 누르면 생기는 개발자 도구에서도 "React Develop Tools"를 열 수 있다.● React Developer tools의 역할 : => 해당 React 프로젝트 내 구성하는 컴포넌트들의 구조를 볼 수 있다. 2024. 11. 21. (1)React_초급_개발환경셋팅(Window) 순서1_Node.js사이트 접속 => "LTS"버전으로 Download링크 : https://nodejs.org/en순서2_ 파일 설치 경로 : C드라이브 / Program Files 폴더 내 로지정순서3_ 추가 프로그램 설치 여부 체크 박스 : 체크 X, Next순서4_ cmd(명령프롬프트) 접속 => node.js와 npm 설치여부 확인순서5_앞으로 React개발할 폴더를 원하는 위치에 생성 => vscode로 생성된 폴더 열기※주의 : 대문자X, 소문자와 '_'로만 이름으로 설정해야함순서6_vscode의 단축기(Ctrl + '`' key)로 터미널 열기순서7_터미널에 react 프로젝트 생성 명령어 작성 : ● React 프로젝트 생성 명령어 (Terminal)npm init react-app .●.. 2024. 11. 21. 이전 1 2 3 4 5 다음
