작심 365

1. CSR과 SSR CSR(Client-side Rendering) 이란? CSR방식은 클라이언트 즉 사용자 측에서 화면을 렌더링 하는 방식이다. 먼저 사용자가 특정 웹 서비스에 접속을 하면 웹 서버에서 html을 먼저 다운받는다. 그런데 지금 받아진것은 그냥 html 파일 뿐이므로 각각의 페이지에 필요한 자바스크립트 파일들을 다시 요청을 하게되고 서버로부터 다운을 받게된다. 이렇게 모든 파일들이 다 다운되고나서야 사용자 화면에 그려지게된다. react도 기본적으로 CSR 방식을 사용하기 때문에 모든 자바스크립트 파일을 다운받고나면 react web application이 실행되고 그다음 react 컴포넌트들이 화면에 그려지고 그때서야 사용자에게 화면이 보이게되고 그 페이지와 상호작용이 가능해진다. S..

React의 Virtual Dom 우선 virtual dom 에서의 dom이란 document object model로 객체로 문서 구조를 표현하는 방법이다. 주로 xml, html 로 작성한다. 웹 브라우저는 dom을 활용해서 객체에 자바스크립트와 css를 적용한다. dom은 tree 형태로 특정 노드를 찾거나 수정하거나 제거하거나 원하는 곳에 삽입할수도 있다. virtual dom virtual dom을 사용하면 실제 dom 을 조작하지 않고, 가상 dom을 사용한다. virtual dom은 실제 dom의 사본이라고 생각하면 된다. react에서 데이터 변경으로 화면을 업데이트 할때는 다음의 3가지 순서를 거친다. 1. 데이터를 업데이트하면 전체 화면을 virtual dom에 다시 그린다. 2. 이전..

TypeScript 타입스크립트 공식 홈페이지를 보면 다음과 같이 나와있다. https://www.typescriptlang.org/ Typed JavaScript at Any Scale. TypeScript extends JavaScript by adding types to the language. TypeScript speeds up your development experience by catching errors and providing fixes before you even run your code. www.typescriptlang.org TypeScript extends JavaScript by adding types. 타입스크립트는 자바스크립트에 타입을 추가했다. By understandi..

DOM JavaScript 한테 HTML 파일이 넘어오면 이 HTML 파일을 JavaScript는 어떻게 해석할까? 우리야 HTML 파일을 보고 , , 각각의 태그들이 하는 역할들을 알수 있지만 사실 JavaScript 에게 HTML 파일은 그냥 문자열일 뿐이다. JavaScript 는 HTML, CSS를 control 하기위해 나온 언어이다. 따라서 그냥 문자열로만 인식한다면 HTML을 제대로 제어할 수가 없다. 그래서 이 HTML을 JavaScript가 제대로 이용할 수 있도록 어떤 형태로 바꿔줘야 했다. 그게 바로 DOM이다. DOM은 Document Object Model의 약자로 해석하면 문서 객체 모델이다. 그러면 당연히 객체의 형태로 존재할 것이라는 것을 짐작할수 있다. 따라서 자바스크립트가..

HTTP HTTP는 hyper text transfer protocol로 hyper text, 즉 문서간의 링크를 통해 이동하는 html을 전송하는 프로토콜로 처음 시작되었다. 지금은 모든 데이터를 이 http protocol에 담아서 전송한다. 텍스트 뿐만 아니라 이미지, 영상 등 모두. http는 1991년부터 계속해서 upgrade 되어왔다. 간단하게 버전별로 특징을 보자. HTTP/0.9 : GET 메서드만 지원. HTTP 헤더 X ( 즉, HTML 파일만 전송 가능( HTTP/1.0 : 요청에 대한 성공과 실패를 알 수 있음. HTTP 헤더 도입 (HTML 파일 외에 다른 문서들도 전송 가능) HTTP/1.1 : 표준 프로토콜로 현재 가장 많이 사용하며 가장 중요한 버전. 대부분의 기능 포함. ..