CSR(Client Side Rendering) 클라이언트 상에서 렌더링 하는 기법으로 처음 렌더링 후 추가 변경사항이 있으면 데이터만 받아와 리렌더링한다. 장점 : 첫 로딩시 html파일과 static파일만 받으면 그 이후로는 동적으로 렌더링 하기 때문에 요청이 적어진다. 서버 부담이 덜하다. 단점 : 처음에 모든 파일이 불러질때까지 기다려야 하므로 초기 로딩 속도가 느리다. 검색엔진 최적화 문제 (SEO) 가 생길 수 있다. SSR(Server Side Rendering) 변경사항이 일어날때 마다 서버에 요청을 하는 방식이며 완전하게 만들어진 html파일을 들고온다. 장점 : 초기 로딩 속도가 빠르기 때문에 사용자가 이용하기 편리하다 검색엔진 최적화 (SEO)가 가능하다. 단점 : 매번 서버에 요청을..

javascript의 원시 타입 javascript는 6개의 원시타입으로 정의되어 있다. boolean : true/false를 나타내는 타입 string : 문자열을 나타내는 타입 number : 전체적인 숫자를 나타내는 타입 undefined : 정의되지 않은 것 null : 값이 비어있음 symbol : 충돌 위험이 없는 유일한 객체, pk를 만들기 위해 사용된다. javascript의 숫자 타입 다른 언어에서는 int, double등 숫자를 나타낼 수 있는 숫자 타입이 다양하지만, javascript는 number하나가 정수/실수 숫자의 모든 것을 표현한다. null과 undefined의 차이점 null은 변수를 선언하고 'null'이라는 값을 할당한 것이다. 즉 값이 없다는 것을 명시한것으로 타..

일반함수, 화살표함수에서의 this 자바스크립트의 this는 현재 실행 문맥을 뜻하며 일반함수(내부함수)와 화살표 함수인가에 따라 this가 가르키는 객체가 다르다. 내부함수의 경우 어디에서 선언되었든지 전역 객체를 가리키고, 일반함수도 window(전역)을 가리킨다. 반면에 화살표 함수의 this는 항상 상위스코프의 객체를 가리킨다. Apply, Call, Bind 3가지 모두 this를 바인딩하기 위한 방법이다. Apply - this를 바인딩하면서 함수를 호출하는 방법으로 두번째 인자가 배열이다. Call - this를 바인딩하면서 함수를 호출하지만 apply와 다르게 하나씩 넘긴다. Bind - 함수를 호출하지 않고 바인딩된 새 함수를 리턴한다.

호이스팅 변수를 선언하고 초기화 했을때 선언 부분이 최상단으로 끌어올려지는 현상으로 변수 및 함수 선언부가 스코프 내 제일 윗쪽으로 올라가게 된다. 함수 표현식/함수 선언식은 호이스팅이 적용되지만 let/const와 같은 변수는 호이스팅이 발생하지 않는다. 우선순위는 변수가 함수 선언보다 위로 끌어올려지며 코드의 가독성을 위하여 호이스팅을 최소화 하는 것이 좋다. 함수와 변수를 가급적 코드 상단부에 선언함으로 해결할 수 있다. 클로저 내부함수가 자신이 선언된 자리의 스코프를 기억하여 자신이 선언되었을때 그 스코프 환경에 접근할 수 있는 함수 내부함수로서 자신이 생성될때의 환경을 기억하는 함수이다. 쓰는 이유는 대표적으로 세가지이다. 1. 현재 상태를 기억하고 최신 상태로 유지하기 위하여 2. 전역 변수 ..

AJAX Asynchronous JavaScript and XML의 약자로, 자바스크립트를 통해 비동기적으로 데이터를 교환하는 방식이다. 보통 데이터가 변경되면 서버로 부터 웹페이지 전체가 반환되어야 하지만 AJAX를 사용하면 페이지 일부만을 갱신하여 동일한 효과를 낼 수 있다. 이러한 이유 덕분에 주로 사용되며 빠르고 부드러운 화면 효과를 기대할 수 있다. Callback 함수 function getData(callbackFunc) { $.get('https://domain.com/products/1', function(response) { callbackFunc(response); // 서버에서 받은 데이터 response를 callbackFunc() 함수에 넘겨줌 }); } getData(funct..

간단한 브라우저 렌더링 과정 1. 주소창에 검색한 도메인으로 서버를 찾아간다. 2. DNS가 연결해줄 곳을 찾아준다. 3. 기본설정파일 (index)을 클라이언트로 보낸다. 4. 한줄한줄 읽어가며 DOM트리를 생성한다. 4-1. 중간에 css요청이 발생하면 응답과정이 끝나고 css를 파싱함 4-2. 중간에 javascript요청이 발생하면 제어권한을 js엔진에 넘기고 javascript를 먼저 파싱한다. 5. 완성된 DOM트리와 CSSOM트리를 합쳐 Render Tree를 만들어 그려낸다. http와 https의 차이점 보안 : http는 네트워크상에서 정보를 누군가가 열람과 수정이 가능하지만 https는 누가 볼수없도록 막혀져있다. 속도 : http방식이 https보다 빠르다. 비용 : https는 따..