라이브러리와 프레임워크

라이브러리

프로그래밍에에사용하기 위해 미리 만들어 놓은 기능과 변수의 집합
프로그래머가 개발의 주체이고 라이브러리는 도구이다.

프레임워크

라이브러리와 비슷하지만, 기능만 가져다 쓰는 것이 아닌 미리 만들어 놓은 틀까지 지켜서
사용해야 하는 것
프레임워크가 개발의 주체이고 프로그래머는 그것을 지키며 사용해야한다.

리액트

JavaScript의 라이브러리
사용자 인터페이스(Front-end)를 관리하는 라이브러리

# 리액트 환경설정

** cd? change directory => 경로이동
** ls? list => 안에 있는 폴더, 파일 검색
1. 리액트 프로젝트 생성하기
npx create-react-app 프로젝트명
2. 리액트 프로젝트 실행하기
cd 실행할프로젝트명
npm start

혹시 새로 리액트 /노드 환경을 만드려면?

1. Node 설치
2. 프로젝트 접근해서 실행
    만약 안되면?
    Case A) npm uninstall -g create-react-app
            npm install -g create-react-app
            
    Case B) npm install -g npm

리액트를 사용하는 이유

JS의 많은 단점을 해결하기 위해서!!
1. HTML과 JS의 분리감 => JSX로 해결
2. 직관적이지만 너무 긴 JS 문법 => 짧은 리액트 문법으로 해결
3. 새로고침이 너무 잦음 => SPA로 해결

Singel Page Application

싱글 페이지 애플리케이션(Single Page Application, SPA)은 말그대로 하나의 페이지를 사용하는 애플리케이션이다. SPA는 서버로부터 새로운 페이지를 가져오는 것이 아닌, 하나의 페이지에서 내용을 동적으로 변경함으로써 사용자 웹앱을 의미한다.

JSX

하나의 파일 안에 HTML 문법과 JS 문법을 동시에 작성할 수 있는 파일 확장자

• 장점 : HTML 요소에 접근할 때마다 document 객체에 접근해줘야하는 JS와 달리
  하나의 파일 내에 HTML 요소가 있기 떄문에 바로 접근이 가능하다.
  가독성이 좋고, 기능별 분류가 쉽다.

표현식 사용 가능

HTML 문법 내에서 JS 문법을 사용하려면? {} 안에 작성
단, {} 안에는 if문을 사용할 수 없다.

• 조건이 하나일때? && 연산자 사용
• 조건이 두개일때? 삼항 연산자 사용
• 조건이 세개 이상일 때? 표현식x, JS 영역에서 if문 사용
  

여러 태그가 있다면, 반드시 하나의 부모요소로 감싸주어야한다.

이 때, div 태그가 아니어도 상관 없다.
<></>도 가능하다.

스타일링 적용

• css 안에 작성 후, import 한다.
  -> import 'css파일이 있는 경로'

• 객체 형태로 스타일링 작성
  -> 원하는 태그의 style 속성으로 객체 입력
  -> 해당 객체 안에 원하는 스타일을 key - value 형태로 작성
  -> 단, 객체 안에서는 camelCase로 작성한다.
  예를들어 css에서는 background-color 라고 작성한다면,
  JS 객체 내에서는 backgroundColor 라고 작성한다.
  

기존 문법과 다른 점들

• class 대신 className을 사용한다.

• 기존 HTML 태그 (DOM요소)를 사용할 때는 무조건 소문자로 시작
  그 이유는? 대문자는 따로 쓸 일이 있음 : 컴포넌트

• content가 없더라도 끝태그를 생략할 수 없다.

html 문법 : <br>
React : <br> </br> or <br/> => 반드시 끝을 맺어야 한다.