dev_0hoon

먼저 프로젝트 폴더에 public 폴더를 보게 되면 index.html을 볼 수 있는데 그 곳에 id="root" 인 div 태그를 볼 수 있다 html을 안다면 이해를 할것이다. 이 div안에 아무 태그가 없지 않은가? 하지만 브라우저에 검사를 들어가게 되면 이렇게 id가 root 인 태그 안에 class = "App"이 들어와있다. 어디에서 온걸까? src폴더에 index.js를 눌러보자. 이런 코드로 되어있는데 여기서 주목 할 것은 //컴포넌트 , 위에 코드에 보이는 인데 이것을 컴포넌트라 말할 수 있다. 아래에 document.getElementById로 root를 선택해 가져오게 되는데 이 아이디에 App /을 넣는다고 생각하면 된다. 컴포넌트란 사용자 지정 태그라 하는데 이 App이라는 컴포넌..

툴은 비쥬얼 스튜디오 코드를 사용한다. 상단 바에 view -> Appearance -> show Panel 을 누르면 하단에 패널이 표시 되는데 그곳에 TERMINAL 을 사용할 수 있는데 명령어로 컴퓨터를 제어할 수 있는 프로그램이 내부적으로 설치 되기때문에 비주얼스튜디오코드를 사용합니다. 여기서 open folder로 react 프로젝트를 불러온다 ( 이전 글을 봤다면 creact-react-app을 설치한 폴더이다) 그 뒤에 TERMINAL에 npm run start를 입력해준다 성공시에 이렇게 나오게 된다. 그리고 이렇게 서버에 연결 된 웹이 뜨게 된다. 뜨지 않을시에 local 또는 on Your Network에 표시된 url을 브라우저에 입력해준다. ctrl+c 를 누르면 꺼진다. 다시 키고..

* 본 블로그의 모든 내용은 직접 공부하는 내용을 정리목적으로 관리할 뿐입니다. 글의 내용이 부실한 점 죄송합니다. 요란한 제목으로 리액트를 시작해보기로 했다. (개발자 감성내고 싶었어여..) 스프링도 마찬가지지만 역시 개발은 환경설정이 반이 아닌가? 먼저 리액트를 하기로 마음 먹었다면 -> 리액트 웹사이트를 먼저 방문해봅시다. 리액트 웹 사이트에 시작하기를 누른다면 개발문서를 볼 수 있다. 이런 개발문서를 읽어보며 개발을 시작하는 것을 고수들은 아주 칭찬하지만, function 과 class 정도까지만 아는 나같은 초보 개발자들은 검색을 많이 이용해야 할 것이다. (예를 들면 러닝커브(learning curve) 같은 것들?) 시작하기로 마음먹었으니 시작하기를 눌러준다. (글자색이 검은색으로 돌아오지 ..