[위코드] TIL(Today I am learned) -11

본격적으로 리액트에 대한 강의 수업에 대한 정리입니다.

React.js - javaScript의 라이브러리.

jsx - javaScript의 확장버전.

      js 파일내에 jsx 문법이 있으면 브라우저 내에서 해석이 불가능.

      React.js 사용하기 위해서 jsx 문법이 포함되어 있으면, javascript 문법으로 변환하는 컴파일 과정이 필요.

JSX element

      HTML문법을 JS코드에 작성하면 바로 그것이 JSX.

JSX Attribute(속성) - 항상 ""(쌍따옴표)로 작성해야함.

                           (클래스를 주고 싶을땐 class="이름"이 아니라 className="이름"으로 작성해야함.)

 

Self-Closing Tag - 기존 HTML은 여는 태그, 닫는 태그가 있었지만, <div></div>였으나 <div />로 구현가능.

 

 

Nested JSX 

 1. 필수 소괄호 감싸기

let good = (

<div>

  <p>해피해킹</p>

  <p>키크론</p>

</div>

);

 // 2. 하나의 태그로 항상 시작.

 let good = (

     <p>해피해킹</p>

     <p>키크론</p> 

);

위의 경우는 불가.

 

 let good = (

<div>

  <p>해피해킹</p>

  <p>키크론</p>

</div>

);

반드시 위의 경우처럼 첫요소는 하나의 태그로 감싸져있어야 함.

 

렌더링(Rendering)

html or React 요소 등의 코드가 눈으로 볼 수 있도록 그려지는 것을 렌더링이라 함.

 

React 요소가 DOM node에 추가되어 화면에 렌더되려면 ReactDOM.render 함수를 사용.

ReactDOM.render(

<h1>Hello, world!</h1>,

document.getElementById('root')

);

 

Component(즉, 계속 사용되는 부분. 인스타그램의 Nav 부분이나 우리가 접하는 ui의 바뀌지 않는 규격틀)

컴포넌트란 재사용이 가능한 ui단위.

동일 코드가 반복되는 부분의 코드를 하나의 component로 만들어서

같은 디자인의 input이 필요한 곳마다 재사용할 수가 있음.(ex 패스워드 창, 비밀번호 수정창 등)

React 컴포넌트에서는 input을 props라고 말하고 return은 화면에 보여져야할 React요소가 return.

 

함수로  Welcome 컴포넌트 구현하기

function Welcome(props) {

    return <h1>Hello, {props.name}</h1>;

    }

 

class로 Welcome 컴포넌트 구현하기

clas로 컴포넌트를 반드려면 React.Component를 Extend해서 생성합니다.

컴포넌트를 생성할때 render()메소드를 무조건 정의해야하고, return도 해주어야 하지만, render만큼은 필수.

class 안에 있으면 메소드라고 함.

 

State 컴포넌트의 상태 값.(객체)

       해당컴포넌트가 보여줄 값들이 stsate의 저장.

       컴포넌트의 저장소. 그때마다 값을 다르게 보여줄때 필요함.

 

setState(함수) state 값을 수정할 때 사용.

                   객체를 바꿀때 사용.

                   왜냐하면? 하드코딩에서 직접하면 브라우저에선 React단계에서 바뀐 것을 인지하지 못해 이를 바뀌기전                     모습을 출력

 

Props property의 약자

        자식 컴포넌트에 넘기는 역할.

        부모가 자식에 기능을 넘겨주는 게 props

       

constructor 초기에 state 값등을 기입. 

                초기값을 설정.

 

framework : 완성된 시스템 ex)주방

Library : 완성된 시스템의 1개의 기능.

             라이브러리 : 가볍다.

              프레임워크 : 무겁다.(쓸모없는 기능을 갖고 있음)

 

역사

Angular : 1세대 개발, 무겁고, 배우기 어렵다.

Vue : 배우기가 쉽다. 1인개발.

React : 페이스북이 개발. 어렵지만 쓰기가 용이해서 많이들 사용

 

 

리액트의 특징

virtual DOM : 가상의 돔을 이용하여 바뀐 부분을 비교하여 출력함.

Component 

 

CRA(Create-React-App)

초기단계에 프로젝트에 필요한 것을 만들어져 있음.

라이브러리의 단점인 것을 보완하기 위해서 이를 만들었음.

 

jason : 

공통적으로 프로토콜에서 쓰는 언어로 각 언어에서 컴파일링하면 이를 해당언어에서 읽을 수 있게 만든 용어

 

HTTP

Hyper Text Transfer Protocal의 약자로 국제 통신 규격.

웹상에서 네트워크로 서버끼리 통신을 할때 어떠한 형식으로 서로 통신을 하자고 규정해 놓은 "통신 형식" 혹은 "통신 구조" 

프론트앤드 서버와 클라이언트간의 통신에 사용.

백앤드와 프론트앤드 서버간에의 통신에도 사용된다.

request와 respone로 이루어진 구조

HTTP는 Stateless가 기본으로 내용을 저장하지 않는데,

이러한 점을 보완하기 위해 local, session, cookie등을 이용하여 내용을 저장함.

 

HTTP의 Requeset 구조

1. start line

   1-1) HTTP 메소드

         해당 Request가 의도한 Action을 정의하는 부분

        Get, Post, Put, Delete, Options 등이 있음.

   1-2) Request target

         해당 Request가 전송되는 목표 url

   1-3) HTTP 버전

         1.0, 1.1, 2.0 등 존재

2. headers

     2-1) 해당 request에 대한 추가정보를 담고 있는 부분

     2-2) key:value값으로 구성

     2-3) 자주사용되는 header 정보

        Host

          요청이 전송되는 target의 host url: 예를 들어, google.com

        User-Agent

          요청을 보내는 클라이언트의 대한 정보: 예를 들어, 웹브라우저에 대한 정보.

        Accept

           해당 요청이 받을 수 있는 응답(response) 타입.

        Connection

           해당 요청이 끝난후에 클라이언트와 서버가 계속해서 네트워크 컨넥션을 유지 할것인지 아니면 끊을것인지에             대해 지시하는 부분.

        Content-Type

           해당 요청이 보내는 메세지 body의 타입. 예를 들어, JSON을 보내면 application/json.

         Content-Length:

            메세지 body의 길이

 

3. body

    3-1) 해당 request의 실제 메세지/내용

    3-2) body가 없는 request도 많다.

 

HTTP Response 구조

  1. Status line

     1-1) http버전,
     1-2) status code: 응답 상태를 나타내는 코드,
     1-3) status text: 응답상태를 간략하게 설명해주는 부분

  2. Headers

     2-1) Response의 headers와 동일하다.

     2-2) 다만 response에서만 사용되는 header 값들이 있다.

           예를 들어, User-Agent 대신에 Server 헤더가 사용된다.

   3. Body

            Response의 body와 일반적으로 동일하다.

HTTP Methods

GET

       이름 그대로 어떠한 데이타를 서버로 부터 받아(GET)올때 주로 사용하는 Method.

        데이터 생성/수정/삭제 없이 받아오기만 할때 사용된다.

 

POST

      데이터를 생성/수정/삭제 할때 주로 사용

 

OPTIONS

       주로 요청 URI에서 사용할 수 있는 Method

 

PUT

    POST와 비슷하다. 데이터를 생성 할때 사용되는 Method.

    POST와 겹치기 때문에 PUT을 사용하는 곳도 있고 POST로 통일해서 사용하는 곳도 있는데, 최근 몇년 사이에 POST에 밀려서 잘 사용안되는 추세.

DELETE

     특정 데이터를 서버에서 삭제 요청

 

HTTP Status Code

200 OK

    가장 자주 보게되는 status code.

    문제없이 다 잘 실행 되었을때 보내는 코드.

301 Moved Permanently

    해당 URI가 다른 주소로 바뀌었을때 보내는 코드

400 Bad Request

   해당 요청이 잘못된 요청일대 보내는 코드.

    주로 요청에 포함된 input 값들이 잘못된 값들이 보내졌을때 사용되는 코드.

    예를 들어, 전화번호를 보내야 되는데 text가 보내졌을때 등등.

401 Unauthorized

   유저가 해당 요청을 진행 할려면 먼저 로그인을 하거나 회원 가입을 하거나 등등이 필요하다는것을 나타내려 할때 쓰     이는 코드.

403 Forbidden

   유저가 해당 요청에 대한 권한이 없다는 뜻.

   예를 들어, 오직 과금을 한 유저만 볼 수 있는 데이터를 요청 했을때 등.

404 Not Found

   요청된 uri가 존재 하지 않는다는 뜻.

500 Internal Server Error

   서버에서 에러가 났을때 사용되는 코드.

   API 개발을 하는 백앤드 개발자들이 싫어하는 코드.