220311 TIL

 

1. 리액트는 컴포넌트로 구성되어 있으며 컴포넌트는 UI를 독립적이고 재사용이 가능하도록 나눈 조각이다. 

 

2. JSX 영역이 실제 화면에 그려지는 부분이며 return() 함수 안에 작성한다. html 처럼 생겼지만 자바스립트이다.

JS 영역의 처음 시작은 <div></div> 태그로 감싸주거나 <Fragment></Fragment>로 작성한다. 

한 줄은 상관이 없지만 한 줄 이상은 그룹형(Fragment) 또는 Div로 묶어야 한다. 

Fragment에 큰 뜻은 없으며 단순히 태그 감싸기 용이다. 

 

3. webpack은 html,css,js 등을 하나로 묶어 (파일들을 묶어) 한 번에 실행시켜주는 도구이다. 

 

4. ex) let [추천,추천변경] = useState(0); 과 같은 경우는 

맨 앞에 있는 값인 '추천'의 초기값을 0으로 셋팅하겠다는 의미이다. 

 

5. 리액트는 onclick()이 아닌 onClick={}으로 작성을 해주어야 하며 중괄호{} 안에는 함수가 들어간다. 

주로 () => { 함수내용 }과 같이. 

 

6. 오늘 개발해본 리액트 북로그 페이지 

추천을 만들고 반대 수도 넣고 싶었다. 그래서 한번에 let [반대,반대내용] = useState(0); 해서 

<span onClick~>으로 해서 일괄적으로 복사해서 붙여넣었었는데 아래 3개의 div 항목 반대 수들이 다같이 움직이는거다. 

그래서 let [반대2,반대내용2] ~ 로 해서 각각의 변수를 지정해주고 각각 div 영역에 따로따로 지정해주니 

각각의 div 마다 서로 다른 추천/반대 값을 가지게 되었다. 

 

그리고 저 손 이모지를 누르면 +1이 되는 구조인데, 아래와 같이 코드를 작성해야 한다. 

 <h3>{ 글제목[1] }  <span onClick={()=>{추천변경2(추천2+1)}}>👍</span> {추천2} <span onClick={()=>{반대변경2(반대2+1)}}>👎</span> {반대2} </h3>

&amp;amp;nbsp;&amp;amp;nbsp;

 

7. stateful,stateless 

stateful은 클라이언트가 서버에게로 요청을 보내는데 그럼 서버가 클라이언트에게 요청에 따른 응답을 주어야 하지 않나. 클라이언트가 보낸 정보를 모두 keep 하고 있는 상태이다. 

그런데 회사에서 서버를 1대만 사용하는게 아니라 다양하게 사용하지 않나. 그 중에서 만약에 클라이언트의 정보를 받고 있었던 서버에서 장애가 발생한다면 이전에 keep 해두었던 정보들이 다 날아가지 않냐. 클라이언트의 이전 상태까지 다 보관을 하고 있는 상태인데 여기서 장애가 발생하면 클라이언트가 요청한 정보에 대해 응답을 해줄 수가 없다. 

다른 서버에게 정보를 처음부터 다시 알려주면서 클라이언트에게 응답을 해주려다 보니 여간 귀찮은 작업이 아니다. 

 

 

stateless는 무상태이다. 

stateful은 서버가 클라이언트의 이전 정보까지 모두 기억을 해둔 상태였다면 stateless는 따로 저장을 해놓지는 않는다.

클라이언트의 상태들을 보관하지 않고 just 응답만 한다. 

원래부터 클라이언트에게 필요한 정보를 모두 보내기 때문에, 해당 서버에서 장애가 발생하더라도 다른 서버로 충분히 빠른 응답이 가능하고 돌려막기할 서버가 미리미리 준비가 되어있다는 것이다. 

그런데 클라이언트에게 필요한 정보를 단계적으로 보내는게 아니라 한꺼번에 미리 보내다 보니 데이터를 너무 많이 보내게 된다는 단점이 있다. 

 

8. HTTP3

위의 화면은 구글 개발자 도구 > Network > 마우스 우클릭으로 프로토콜 상태를 추가해서 본 것이다.

h3 프로토콜이 많이 쓰이는데 

HTTP의 버전이다. HTTP의 역사는 1991년 0.9ver 부터 시작해서 현재 HTTP3이 진행중이며 TCP 대신에 UDP를 사용해서 성능을 개선한다. 우리가 쓰는 주요 페이지들에서도 H2나 H3 프로토콜을 사용하고 있는 것이다. 

 

그리고 HTTP1.1 ver은 가장 많이 사용되고 우리에게 가장 중요한 버전이다.