리액트공부3 리액트의 인덱스(index)파일과 JSX 문법 리액트의 인덱스(index) 파일과 JSX 문법에 대해서 알아보려고 한다. 강의로 들을 때는 어렵지 않은데 막상 블로그에 정리를 하려고 하니 어떤 순서로 써야할지 잘 모르겠다. 혼자 배우는 것과 다른 사람도 알아들을 수 있게 정리하는 것은 난이도가 다르다. 이래서 배움의 끝은 가르침이라고 하나 보다. index.html 파일과 index.js 파일 리액트 프로젝트를 생성하고 보면 public 폴더에는 index.html 이라는 파일이 들어있고, src 폴더에는 index.js 라는 파일이 들어있다. 둘다 index 라는 이름을 가지고 있는데 파일 확장자가 다르다. 이들은 어떤 관계를 가지고 있을까? 먼저 index.html 은 웹브라우저에서 가장 먼저 인식하고 실행되는 파일이다. 그리고 index.js는.. 2023. 1. 8. 리액트 개발자 도구(React Developer Tools) 설치하기 리액트 개발을 할 때 도움을 받을 수 있는 크롬 확장프로그램에 대해서 알아보았다. 리액트 개발자 도구 설치 방법 구글 검색 포털에서 '리액트 개발자 도구'라고 검색하면 아래와 같은 사이트를 발견할 수 있다. 리액트 개발자 도구 대신에 'React Developer Tools'라고 검색해도 된다. 해당 사이트를 클릭하면 구글 브라우저의 확장 프로그램을 설치하는 화면으로 이동한다. Chrome에 추가 버튼을 클릭한다. React Developer Tools의 추가 여부를 한 번 더 묻는 팝업창이 뜨는데 이것도 '확장 프로그램 추가' 버튼을 클릭한다. 확장 프로그램이 설치되고 나면, 크롬 브라우저의 우측 상단에 아래와 같은 아이콘이 표시된다. 만약 발견할 수 없다면 퍼즐 모양의 아이콘을 선택하면 보일 것이다... 2023. 1. 2. 맥(Mac)에서 리액트(React) 환경 세팅하기 리액트 공부를 하기위해 사용하는 맥북에 Node.js와 VS Code, Chrome 브라우저를 설치했다. 개인적으로 VS code와 Chrome 브라우저는 원래 사용하고 있던 거라서 Node.js만 세팅해주면 되었다. Node.js 설치하기 구글에 Nodejs 라고 검색해서 공식 사이트로 이동한다. (아래 링크 클릭해도 됨) https://nodejs.org/ko/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 최신 버전과 안정적인 버전 두가지 중 하나를 선택해서 설치할 수 있다. 나는 안정적이고 신뢰도가 높은 쪽을 선택했다. 다운로드 한 파일을 실행하면 설치 화면이 나온다. Node.j.. 2021. 10. 18. 이전 1 다음
