index

1. 왜 react사용 ?

1세대 HTML/ CSS/ JAVA Script / DOM / Event
DOM의 조작이 빈번하게 요구됨 -> jQuery

이처럼 애플리케이션의 규모가 커지고 다양한 UI, UX를 구현하기 위해서는 이전의 방법(DOM, jQuery)으로는 애플리케이션을 개발하고 코드를 유지보수 하는 것이 어려워졌다. 화면의 그 많은 DOM 요소들에 직접 접근해서 조작하고 관리하기란 쉽지 않다. jQuery도 결국엔 쉽게 DOM에 접근해서 조작을 가능하게 하는 메소드의 모음이기 때문에 마찬가지이다.

규모가 커지고 복잡한 애플리케이션을 개발하며 생산성을 향상시키고 많은 양의 데이터 관리와 코드 유지 보수를 더욱 편리하게 하기 위해 다양한 Frontend Framework(Library)가 등장하게 된다. 그 중 가장 많이 쓰이는 세 가지가 Angular, Vue, React 이다.

2. React?

React는 페이스북에서 개발하고 관리하는 사용자 인터페이스(UI)를 만들기 위한 JavaScript 라이브러리 (UI를 자동으로 업데이트한다.) 가상돔(virtual Dom)을 통해 UI를 빠르게 업데이트 한다. (가상돔은 0이전 UI상태를 메모리에 유지해서, 변경될 ui의 최소집합을 계산하는 기술 )

3. Node & Npm

NODE
Node.js 는 자바스크립트가 브라우저 밖(ex. 서버)에서도 동작하게 하는 환경을 의미한다.

NPM
Node 기반의 패키지를 사용하려면 npm(node package manager)이라는 패키지 도구가 필요하다. npm 을 통해 다양한 패키지를 설치하고 버전을 관리할 수 있다.

4. CRA (create-react-App)

CRA (create-react-App)
CRA(Create-React-App)을 만들었다. CRA는 리액트로(react) 웹 애플리케이션을(app) 만들기 위한(create) 환경을 제공한다. CRA를 이용하면 하나의 (기본) 명령어로 리액트 개발환경을 구축할 수 있다. 기본 템플릿같은 것.

1) node.modules : CRA 를 구성하는 모든 패키지 소스 코드가 존재하는 폴더

2) package.json

• CRA 기본 패키지 외 추가로 설치된 라이브러리/패키지 정보(종류, 버전)가 기록되는 파일

• 모든 프로젝트마다 package.json 하나씩 존재

• "scripts"

  • start : 프로젝트를 development mode(개발 모드) 실행을 위한 명령어. npm run start.
  • build : 프로젝트 production mode(배포 모드) 실행을 위한 명령어. 서비스 상용화.

3) .gitignore : .gitignore 파일에 github 에 올리고 싶지 않은 폴더와 파일을 작성할 수 있다.(push 를 해도 .gitignore 파일에 작성된 폴더와 파일은 올라가지 않는다.)

4) public - index.html: <div id="root"></div>

5) src - index.js

• React의 시작 (Entry Point)
• ReactDOM.render( <App /> , document.getElementById('root'))
  • ReactDOM.render 함수의 인자는 두 개
  • 첫 번째 인자는 화면에 보여주고 싶은 컴포넌트
  • 두 번째 인자는 화면에 보여주고 싶은 컴포넌트의 위치
• (이름 함부로 수정하면 안 됨)

6) src - App.js

• 현재 화면에 보여지고 있는 초기 컴포넌트
• Westagram 작업 시 <Login /> 컴포넌트, <Main /> 컴포넌트를 그 자리에 대체하여 작업하면 된다.
• React Router 를 배운 후에는 <Routes /> 컴포넌트가 최상위 컴포넌트로 그 자리에 위치하게 된다.

1) public 폴더

• index.html
• images - 이미지 파일 관리
• data - mock data 관리 (추후 세션을 통해 다룰 예정)
• public 폴더의 역할
  • 우리가 웹을 배포한다는 건 특정 폴더를 서버 컴퓨터에 올려두는 것
  • 그래서 서버랑 연결된 특정 url로 접근하면 해당 폴더의 파일을 요청할 수 있는 것 → 뒤에 따로 추가적인 url을 안붙이면 index.html을 요청한다.
    • e.g.) [https://naver.com](https://naver.com). → 로 접근하면 naver.com에 연결되어있는 서버 컴퓨터의 폴더에 접근해서 index.html을 가져오는 것
  • 우리가 CRA를 배포했을 때 실제 서버에 배포되는 폴더가 public폴더
  • 그래서 우리 서버 주소로 접근하면(개발서버의 경우http://localhost:3000) public 폴더에 들어가는 것과 동일하다.
  • 그래서 우리가 public에 특정 디렉토리, 파일을 만들어두면 서버 url 통해서 접근이 가능하다.
  • 예시로, public/images/test.png 파일을 만들어두면, 서버에 접속해서 해당 파일에 접근할 수 있다
    • 실제로, test.png파일을 만들고, http//localhost:3000/images/test.png 을 브라우저 주소창에 입력하면 우리가 작성해둔 파일이 오는것을 볼 수 있다.

2) src 폴더

• components - 공통 컴포넌트 관리
• assest/images - css에서 background-image로 활용할 이미지 관리
• pages - 페이지 단위의 컴포넌트 폴더로 구성
  • Login - Login.js, Login.css
  • Main- Main.js, Main.css
• styles 폴더
  • reset.css - css 초기화
  • commom.css - 공통으로 사용하는 css 속성 정의 (ex. font-family)
• 참고) components vs. pages
  • 여러 페이지에서 동시에 사용되는 컴포넌트의 경우 components 폴더에서 관리합니다.
    (ex. Header, Nav, Footer)
  • 페이지 컴포넌트의 경우 pages 폴더에서 관리합니다.
  • 해당 페이지 내에서만 사용하는 컴포넌트의 경우 해당 페이지 폴더 하위에서 관리합니다.

5. component

component : 재활용 가능한 UI 구성 단위(컴포넌트는 다른 컴포넌트 포함가능)

• Class형 컴포넌트(Class Component)
• 함수형 컴포넌트(Functional Component)

6. jsx

JavaScript Syntax Extension(JSX란 리액트에서 사용하는 자바스크립트 확장 문법) java script와 html의 조합

jsx 문법

• 자바스크립트 표현 : { ... javascript... }
• HTML: class vs. React: className
• Inline Styling : <div style={{color : "red"}}>Hello React</div>
• Self Closing tag : <div></div> vs. <div />
• 모든 요소를 감싸는 최상위 요소 (cf. React Fragments : <> ... </>) : JSX의 큰 특징 중 하나는 내부 요소들을 감싸는 최상위 요소가 있어야 한다고 배웠습니다. Fragments는 DOM에 별도의 노드를 추가하지 않고 하나의 컴포넌트 안에 여러 요소(자식)들을 간단하게 그룹화 할 수 있는 기능입니다. 요소들을 감싸는 div 태그의 불필요한 생성을 막을 수 있어 유용하게 사용됩니다.