어제 리액트를 다 다운받고, 오늘 자고 일어나서 기분 좋게 npm start를
쳐봤는데.. 아니 이게 뭐야? 잘 된 줄 알았던 리액트 설치에 오류가 생겼나 보다.
구글링 해보니깐 나와 똑같은 오류를 겪으신 유저분께서 이미 코딩애플님의 조언대로 해결하신 것을 보고 바로 실행에 옮겼다!
맥에선 생각보다 흔한 오류?인 거 같다
따라서 sudo chown -R $USER "리액트 위에 뜨는 경로" 로 쳤는데
파일을 찾을 수 없다?? 근데 이것도 아래 다른 유저분이 질문 남겨주셔서 문제를 바로 해결했다. 코딩애플님 감사합니다.
경로에서 뒤에 위치한 .cache 부분만 지우고 입력하니깐 짜잔 리액트 정상작동
휴.. 오류가 뭐이리 많았는지 모르겠지만 우여곡절 끝에 깔긴 깔았으니 다행이다
리액트 빙글빙글 돌아가는 거 보면 두근두근 거린다.. 얼마나 재밌을까?
일단 저 리액트 기본 css를 지우고 간단한 문구를 출력한 뒤에
npm build > npx serve -s build
를 사용해서 소스를 수정한 파일을 배포까지 성공했다.
뭔가 나 뿐만이 아니라 다른 사람이 저 로컬 주소를 입력하면 사이트에 들어가지는 것도 신기하다.
이렇게 배포까진 얼추 방법을 배워본 후, 컴포넌트 만들기를 배워봤다.
컴포넌트(Component)란?
- 페이지에 렌더링할 React 엘리먼트를 반환하는 작고 재사용 가능한 코드 조각. 가장 간단한 React 컴포넌트는 React 엘리먼트를 반환하는 일반 JavaScript 함수
라고 리액트 공식 홈페이지에서 설명하고 있다.
간단하게 이해해 보자면, 집을 지을 때 하나하나 차곡차곡 쌓는 벽돌이라고 생각할 수 있겠다!
그럼 이 컴포넌트를 어떻게 만드느냐? 방법은 생각보다 간단했던 거 같다.
이러한 header가 있다고 가정한다면, 이걸 자바스크립트처럼 function() 함수로 만들어 주고 그 안에 그대로 집어넣은 다음, 해당 header 위치에는
<함수명></함수명>을 적어넣으면 된다. 바로 이렇게 Header() 함수를 만든 후
아래 App() 함수 내에 Header 함수를 집어넣어주면 끝!
이렇게 하니깐 코드가 되게 간결해지고 보기 편한 거 같다..
리액트 처음 배워보는데 꽤 재밌는 거 같은데? 아직 a-z에서 a만 배운 거 같지만 z까지 쭉 배워보고 싶은 마음이 굴뚝같다.
