1.학습한 내용
1)React
리액트를 사용하기 위해서 필요한 도구
-노드 패키지 매니저(npm)
-웹팩 (Web pack)
-에디터(VS Code 등)
-웹 브라우저(파이어폭스, 크롬 등)
1-1)Node.js 설치하기
명령프롬포트에서 nvm -v 를 입력하는것으로
버전을 확인할수 있다.
nvm install 16.15.1 을 입력하는것으로
node.js 16.15.1 버전을 설치할수가 있다.
nvm use 16.15.1 을 사용하는것으로
버전이 여러개 일지라도 해당 버전을 사용하는것이 가능하다.
1-2)프로젝트
npx create-react-app proj1 을 입력하는것으로
프로젝트를 만들수있다.
code . 을 입력하는것으로 해당 위치를 기준으로 VS code 가 실행이 된다.
이때 만들어진 프로젝트의 파일들의 의미는
위와 같다.
1-3)리액트 실습1
JSX 사용
실습에 도움이 되는 reactjs code snippets 플러그인을 설치한다.
리액트에 필요한 구조들을 자동완성하는것으로 도움을 준다.
터미널을 통해서 npm start를 입력하면
화면과 같은 문양이 회전하는 페이지가 실행이 된다.
2)컴포넌트
컴포넌트는 하나의 파일에 자바스크립트와 HTML을 동시에 작성한다.
2-1)컴포넌트 실습
TodaysPlan 컴포넌트 만들기
src 폴더에 component 폴더를 만든다.
component 폴더에 TodaysPlan.jsx 파일을 만든다.
이를 통해서 바로 놀러갈게 라고 만든 TodaysPlan.jsx 파일의 내용이 출력된다.
2-2)컴포넌트 실습2
컴포넌트 재활용 BOX 만들기
App.css 와 연결이 되어있기때문에 App.css 에서 박스클래스에 보더를 설정하는것으로
박스를 작성할수있다.
2-3)컴포넌트 실습3
box값 변경
component 폴더에 Box1.jsx 파일을 만든다.
위의 코드들을 jsx 컴퍼넌트로 묶어내는 것으로
같은 결과를 불러낼수있었다.
2.학습내용 중 어려웠던 점
컴포넌트를 진행하던 과정에서 모든 내용이 빨간줄이 쳐지게되어서 오류가 발생하고.
복습을 진행하던 도중 웹페이지가 제대로 동작이 나지 않는 오류가 나타났다.
3.해결방법
빨간줄이 쳐지게 된 이유로는 컴포넌트는 하나의 박스에 만들어져야하기때문에, div가 여러개가 되면서 1개의 박스가 아니게 되었기때문에 생긴 오류로, 전체 div들을 가장큰 div로 묶는것으로 해결이 되었다.
또한 웹페이지가 동작되지 않는 오류는 터미널에서 node 파일이 이제 더이상 필요없다고 생각하여서 종료를 하였더니 연결이 끊기게 되어서 동작하지 않는것이어서 다시 npm start 를 실행시키는것으로 해결이 되었다.
4.학습소감
현직에서 일하고 있는 지인에게 들은것중에서 요즘 현직에서는 jQuery와 React 를 많이 사용하니까 배울때 꼭 집중하라는 얘기를 들었었는데, 이번에 듣고 배워보니 이전에 배웠던 container와 같이 필요한 것들을 component에 모아서 틀을 만드는것을 배웠으며, 이에 따라서 리소스가 기존의 긴 코드보다 적게 먹기때문에 서버를 유지보수, 관리하는것에 도움이 된다는것을 새롭게 배울수있었다.
또한 이번에 cmd를 통하여 VS Code 를 실행하게 되었는데, 이전에 JupyterNotebook 을 사용할때처럼 명령프롬포트인 cmd를 종료하면 연결이 종료가 되는것이 아닌가? 하는 의문이 들었었는데, cmd는 그저 VS Code를 실행시켰을뿐이고, 웹페이지의 동작과 관련이 있는것은 VS Code 내부에서 npm start를 실행시킨 터미널이 중요하다는것을 알수있게 되었다.
