[KISA Fintech Academy] 두 번째 날 (js 기본 문법 | React 환경 설정)

안녕하세요! 

핀테크 아카데미 둘째 날 수업을 마쳤습니다.

 

오늘은 Javascript 기본 문법과 React 환경 설정을 하는 날입니다.

수업 초반에는 웹 프로그래밍이 무엇인지 간단한 설명을 들었습니다. 

지난 학기에 수강했던 서버구축관리 과목이 생각나면서 다시 복습하는 느낌으로 재미있게 들었습니다. 

 

Javascript 기본 문법은 정말 간단한 기본 문법이었으니 이 부분은 패스하고 리액트 개발환경 설정으로 바로 넘어가볼게요!

---

React란?

자바스크립트 라이브러리의 하나로, 사용자 인터페이스를 만들기 위해 사용.

페이스북과 개별 개발자 및 기업들 공동체에 의해 유지 보수되며, 싱글 페이지 애플리케이션이나 모바일 애플리케이션 개발에 사용될 수 있다. 

 

---

React 개발환경 설정

어제 설치했던 VisualStudio Code에서 터미널을 띄워 아래의 명령어를 입력해주었습니다.

npm install creat-react-app -g

react 초기 설정을 담고 있는 creat-react-app을 설치해주는 명령어입니다.

혹시 어느 디렉토리에 설치해야 할지 모르시는 분들을 위해!
명령어 중 -g 명령어는 global이라는 의미로 전역에 설치해준다는 뜻이기 때문에 어느 디렉토리에던 설치만 해주시면 됩니다

 

그럼 잘 설치가 되었는지 확인해보겠습니다. 

npm start

해당 명령어를 입력해주게 되면 터미널에 아래 메세지가 출력되며 창이 하나 열리게 됩니다.

successfully in nnn ms 확인

이런 창이 뜨게 됩니다

여기까지 설치해준 후 자바 스크립트로 코딩을 하게 되는데 

리액트는 class type을 사용합니다.

동기들 이름을 한 번 넣어보았습니다

요렇게 <div> 태그 안에 내용을 넣어주어야 하는데, 이걸 넣어준 결과는

사랑해 얘들아 너희 이름 여기 적혔어 ㅎㅎ!

짠! 요렇게 확인할 수 있었다.

물론 그냥 HTML로 간단하게 만들 수 있기도 하지만 정적인 HTML에 비해 React는 동적으로 관리가 가능해요 :) 

앞으로 더 많은 것들을 실습해보면서 차이를 실감할 수 있을 것 같습니다

 

 

---

styled-componets 설치

구성요소의 디자인을 결정하는 CSS와 같은 역할을 하는 라이브러리입니다.

장점

- 컴포넌트가 많아질수록 분리되어있는 CSS 파일들을 일일이 찾아 수정하는 번거로움을 줄이기 위해 CSS를 컴포넌트 화하여 JSX로 사용할 수 있습니다. 

- React의 주요 메커니즘 중 하나인 Props를 CSS에 적용할 수 있습니다. 

그럼 바로 설치로 넘어가 보겠습니다

 

설치

npm 혹은 yarn을 이용하여 설치가 가능한데, 오늘은 npm으로 설치를 하였습니다

{project_dir}>npm install styled-commponents

※ 주의할 점 : 꼭 실행하는 프로젝트 디렉토리에 설치해주어야 합니다 ※

터미널에 해당 명령어를 입력해 주었는데 

어라...

보안 경고 오류가 떴습니다 ㅠㅠ 

해당 오류를 해결하는 포스팅은 

https://jap-boss.tistory.com/12

[PowerShell]about_Execution_Policies 오류 해결 방법

요기를 참고해주세요!

오류를 해결하고 난 후 해당 메세지를 띄우며 설치를 마쳤습니다!

 

이번에도 잘 되는지 한 번 확인해보겠습니다.

HeaderWhite라는 문구를 빨간색으로 설정하는 쿠드입니다 

잘 적용되어있는 것을 확인할 수 있습니다!

 

2일 차 수업은 여기까지로 마무리되었습니다.

간단하게 적어보았지만 사실... 마지막으로 갈수록 질문도, 오류도 많아서 시간이 엄청 오래 걸렸었습니다 ㅠㅠ

살짝 어려웠던 만큼 내일 수업이 더 기대가 됩니다!