20201013 TIL

20201013 TIL

HTTP (HyperText Transfer Protocol)

• 웹을 이루는 네 가지 요소
  • HTML : 웹페이지를 만드는 컴퓨터 언어
  • URL : 원하는 웹페이지에 방문할 수 있도록 도와주는 주소 체계
  • HTTP : 웹페이지를 주고받는 소프트웨어인 웹브라우저, 웹서버 그리고 웹브라우저와 웹서버가 통신할 때 사용하는 통신규칙
• 처음 나올때 아주 단순한 통신규칙이었으나 웹이 폭발적으로 성장하며 단순한 HTTP의 기능만으로는 성능, 보안, 안전성 확보가 점차 어려워짐.
• 이를 해결하기 위해 HTTP는 보다 풍부한 기능을 가진 프로토콜로 발전하기 시작.
• 오늘날에는 단지 html같은 텍스트파일뿐 아니라 이미지, 동영상같은 다양한 멀티미디어 파일을 전송하는 중요한 프로토콜로 군림하고 있다.

 

---

 

HTTP란?

클라이언트가 서버에게 물건(HTML)을 달라 할 때...
서버님 HTML을 주세요. --> 요청(Request)
여기 있습니다. 하고 물건을 주는 행위 --> 응답(Response)

• HTTP란 바로 Request와 Response를 나타냄.
• html, css, javascript, 이미지같은 파일은 서로가 주고받는 콘텐츠라면
• 그 콘텐츠를 주고받기 위해서는 서버와 클라이언트가 서로 알아들을 수 있는 공통의 약속인 메세지가 필요하며 이 메세지를 HTTP라 하며 이 HTTP는 크게 Request, Response를 위한 메시지로 구분되어 있다.
• 개발자 도구의 네트워크 탭을 통해 웹브라우저와 웹서버가 통신하는 것을 확인할 수 있다.
• 웹서버는 자기가 가진 정보를 보내주면서 응답 해더를 만들어주는 역할을 함.
• 웹브라우저는 그렇게 응답받은 정보를 화면에 적당히 보여주는 역할을 함.
• GET는 데이터를 웹서버로부터 가져올 때 쓰는 방식(주소를 치고 엔터치면 Get, 로그인할 때 데이터를 전송하는 것은 POST)

HTTP Request header format

HTTP Response header format

 

 

Cache

• 한번 웹사이트에 접속해서 어떤 내용을 다운받았다면 그 다음에 접속할 때 또 다운받을 필요 없이 이미 저장된 파일을 읽어서 성능을 향상시키는 것
• 근데 ... 내용이 갱신되었을 때 웹 브라우저가 그 사실을 알아차리지 못하게 된다. 이럴때 '새로고침'을 통해 강제로 캐시를 갱신시킨다.
• 하지만 캐시가 갱신되었음을 일반사용자는 알 수 없기 때문에 이를 해결하기 위해 'cache-control pragma'가 나타남. 성능향상에 관심이 간다면 캐시를 공부하기.

 

 

쿠키

• 로그인하고서 로그인 상태가 유지된 것.. 웹사이트를 방문할 때 이전에 처리했던 장바구니 담기같은 기록은 웹사이트나 웹브라우저가 기억하게 하는 역할
• 이를 이용해 쿠키값을 웹브라우저에 설정하면 접속할 때마다 그 설정되었던 쿠키값을 서버에 전송함으로써 사용자의 상태를 유지하고 식별 가능해진다.

 

Web Storage

• 최근에 나타났는데 쿠키보다 훨씬더 많은 정보를 저장하면서 보안적으로 우수하다.

 

Proxy

• 웹브라우저와 웹서버 사이에 프록시라는 이름의 중개서버를 둘 수 있다. 캐시를 대신하거나 보안과 관련된 공격을 막아주거나 사용자의 요청을 여러대의 서비스로 분산시켜준다.
• 서비스가 복잡하고 중요해지고 있다면 프록시 서버라는 기술을 알아볼 것.

 

네트워크를 모니터링하는 도구

• 웹브라우저의 개발자도구 -> Network
• 오픈소스, 무료, 강력한 기능 -> wireshark(https://www.wireshark.org) 컴퓨터 네트워크에서 일어나는 모든 네트워크 트래픽을 감시할 수 있다. (어려우나 강력하다)

 

 

Codesandbox

codesandbox 진짜 강력하다. 대박이다.

• 개발환경을 따로 셋팅하지 않아도 개발을 할 수가 있고 웹 에디터다보니 운영체제도 신경쓰지 않아도 되니 아이패드에서도 물론 잘 작동할거같다. (아직 해보진 않았지만)
• 게다가 React Devtools까지 있어서 내가 만든 웹페이지의 컴포넌트를 보기에도 엄청 편하다.
• 이런 웹에디터가 다른데도 몇군데 있긴 하지만 다른데는 무료로는 쓸 수 있는 코드량이 한정돼있는데 codesandbox는 무한정 쓸 수 있는거같다. (아마도? 아직까지 유료 결제해줘! 하는건 못봤다)
  • 검색을 해보니 무료버젼은 소스코드 공개로 무제한 사용이 가능한데 유료버젼을 지불해야 비공개로 무제한 사용이 가능하다고 한다. 그냥 개인 학습용이나 자기 포트폴리오를 만들때 쓰는거면 쓰기 좋은거같다.
• 또 개인적으로 가장 UI가 마음에 든다. 테마도 다양하다. (예쁘지 않으면 쓸 맛이 안난다.)
• 다른 사용자랑 동시에 여러 코드를 작성할 수 있다고 하는데 협업할 때도 상당히 편할거같다.
• 또 검색해보니 여기 있는 템플릿들을 자회사의 팀에서 유지랑 관리를 해주다보니 신뢰성과 안정성이 꽤 높댄다.
• 속도도 빠르다고 한다. 사실 속도가 느려질만큼 코드를 아직 써보지 않아서 큰 차이는 모르겠는데 빠르긴 빠른거같다.(?ㅎㅎ)
• 그리고 깃헙에 연동도 돼서 웹에서 작업하고 커밋앤푸시가 엄청 편하다... 진짜 정말 편하다.

 

 

React

• state, prop 관련 개념 공부중 
• state의 개념은 JS의 함수의 개념과 비슷 

 

 

오늘의 정리 

회사에서 하루종일 앉아서 공부하고 있긴한데 내가 정말 잘 공부하고 있나..? 하는 걱정이 슬금슬금..

실무로 배우는게 가장 큰 도움(?)이 된다곤 하는데 막상 실무를 하려니 잘할 수 있을까 하는 걱정이 살짝 든다. 

잘..할 수 있을거야..~ ^ㅡ^ 오늘도 수고했다.