안녕하세요.
이 곳은 제가 프론트엔드 분야를 난생 처음 접하고, 혼자 주절주절하는 공간입니다.
오늘 알아볼 내용은 React 1편입니다.
사실 저는 아직도 자바스크립트가 너무너무너무너무너무너무너무 어려워요.😵💫
그래서 오늘은 리액트가 무엇인지 간단한 개념 + 리액트를 쓰기 위한 준비과정 정도만 알아볼게요.
React?
리액트는 자바스크립트의 UI를 쉽게 구성할 수 있도록 도와주는 라이브러리입니다.
리액트 네이티브를 이용하면 스마트폰에서도 빠른 속도로 작동하는 App을 만들 수 있데요.( ! )
프론트엔드 개발자라면 꼭 알아둬야 하는 라이브러리라고 합니다.
참고로, 리액트를 사용하기 위해서는 간단한 준비과정이 필요합니다.
(준비과정은 NodeJS로 진행합니다.)
Chapter 1: vscode 실행
프로젝트를 진행할 폴더를 만들어준 후, vscode를 통해 그 폴더를 로드해준 후 터미널을 열어줍니다.
react라는 폴더에서 프로젝트를 시작할거에요.
Chapter 2: 설치
터미널 입력 창에 아래와 같이 입력하고 엔터를 눌러주세요.
npx create-react-app 프로젝트명
마지막 velog라고 써있는 부분은 제가 만들 프로젝트명입니다.
전 벨로그에 올릴거라 프로젝트명을 그냥 velog라고 지었습니다.
이마트?
엔터를 누르면 무언가 열심히 설치를 합니다.
냉장고에 있는 맥주를 한 캔 끄네 마시며 기다립니다.
Chapter 3: 설치완료
설치가 끝나면 우리에게 장문의 편지가 와 있을거에요.
그 중 우리가 눈여겨볼 부분은 제일 아래쪽입니다.
npm start
개발 서버를 시작해주는 명령어입니다.
npm run build
앱을 static 형식의 파일로 번들합니다.
npm test
테스트를 해보는 명령어래요.
저도 써 본적은 아직 없습니다.
npm run eject
설명상으로는 앱 디렉토리에 구성파일과 스크립트를 복사하고 되돌릴 수 없다고 하네요.
아직 써 본 적은 없습니다.
cd velog? npm start?
우선 이 부분은 나중에 살펴볼게요.
무려 마지막에 Happy hacking!이라고 인사도 해줘요.
이렇게 설치가 끝나면 아무것도 없던 vscode에 프로젝트명의 폴더가 하나 생성된 모습을 볼 수 있어요.
저 src라는 폴더안에는 App.js라는 파일이 하나 들어있습니다.
열어볼게요.
여기가 바로 새 프로젝트의 메인 페이지 html이 되는 내용입니다.
index.html과 같은 역할이에요.
분명 js파일이지만, html의 형태를 띄고 있습니다.
그런데 public이라는 폴더를 열어보면, index.html이 존재해요.
index.html을 열어보면?
우리에게 익숙한 html이 등장합니다.
리액트는 리액트만을 위해 개발된 자바스크립트 확장 문법을 사용합니다.
그래서 저런 괴상한 모습을 하고 있어요.
이러한 문법을 JSX 문법이라고 합니다.
문법에 대한 부분은 나중에 다뤄볼게요.
어찌돼었던, 작동 원리는 App.js에서 작성하는 내용이 → index.js를 거칩니다.
이 index.js에서 → index.html의 root 부분에 전부 흘러들어갑니다.
전 pug가 떠올랐어요.
비슷하지만 다른 느낌입니다.
커여운 댕댕이
아무튼 이제 기본적인 세팅이 끝났습니다.
만약 코딩을 하고 결과를 실시간으로 확인하려면 어떻게 해야 할까요?
Chapter 4: npm start
다시 터미널을 열어서 npm start를 입력해볼게요.
저렇게 입력하고 엔터를 치면!
??
역시 에러 맛집입니다
뭐가 문제일까요??
바로 이 부분입니다.
create-react-app을 실행한 디렉터리인 velog로 이동한 후 npm start 명령어를 입력해줘야 합니다.
아까 은근슬쩍 넘어갔던 부분 기억 나시나요?
마지막에 이 장면을 보셨을텐데요.
cd velog를 입력해 디렉터리를 이동한 후에 npm start를 실행해줍니다.
터미널에 이런 메세지가 뜨면서, 크롬으로 미리보기 화면이 열릴거에요.
개인적으론 저 유사과학 로고보단 퍼그 댕댕이 로고가 훨씬 마음에 들어요.
로컬호스트3000번으로 잘 연결된 모습입니다.
맛보기로 내용을 살짝 바꿔볼게요.
import logo from './logo.svg';
import './App.css';
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
헬로 월드!
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
리액트가 뭐에요?
</a>
</header>
</div>
);
}
export default App;
이제 본격적으로 리액트를 사용할 준비가 끝났습니다! 😊
