본문 바로가기

분류 전체보기

 (45)
웹에서 렌더링은 어떻게 발전하고 있을까? 오늘은 웹의 렌더링 발전 과정에 대해 애기해볼까 한다. 1. 최초의 렌더링 SSR 맨 처음 웹은 static한 html 파일 하나로 동작했다. 사용자와 상호작용을 할 수도 없었을 뿐더러 웹이란 특정 분야에서만 사용하던 것이었기 때문에 대중적이게 꾸밀 필요가 없어 더 가벼웠고 간단했다. 그러나 웹의 규모가 점점 커지고 사용자가 많아지면서 동적인 웹이 필요했다. 2. CSR - Ajax 지금은 사라진 네이버 실시간 검색어를 예로 들어보자. SSR은 페이지 내 요소 하나만 바뀌어도 새로고침 하듯 페이지를 새로 받아온다. 그러다 보니 실시간 검색어 같은 경우는 검색어 하나가 업데이트 될 때마다 페이를 새로 받아와야 했을 것이다. (실제 네이버가 그랬는지는 모르겠다!!! 예시일 뿐이다 ㅎㅡㅎ) 그래서 화면 깜빡임..
자바스크립트 Shallow Copy vs Deep Copy 얕은 복사(Shallow Copy) 얕은 복사는 한 depth만 복사합니다. 참조값을 복사한다고도 볼 수 있습니다. 따라서 데이터가 새로 생성되는 것이 아니라 하나의 주솟갓을 두개의 변수가 가르키는 형태가 됩니다. const obj = { a: 1, b: 2}; const copyObj = obj; console.log(obj === copyObj) // true 깊은 복사(Deep Copy) 깊은 복사는 객체 내부의 중첩된 객체까지 전부 복사합니다. 완벽한 Deep copy를 하고싶다면, 재귀적으로 깊은 복사를 수행하거나 JSON.parse(JSON.stringify(obj) 같은 방법을 쓰면 됩니다. JSON.parse() + JSON.stringify() const obj = { a: 1, b: 2..
Babel과 Babel polyfill Babel 바벨은 트랜스파일러이다. 최신 브라우저는 자바스크립트의 ES6 문법을 지원하지만, 구형 브라우저는 그렇지 않을 수 있다. 따라서 구형 브라우저가 이해할 수 있는 자바스크립트 코드로 변환해주는 역할을 바벨이 한다. 예시로 ES6 문법이나 타입스크립트, JSX 문법을 변경해준다. 트랜스파일은 파싱, 변환, 출력 세 단계로 진행된다. 그런데 여기서 바벨은 파싱, 출력을 담당하고 변환은 바벨 플러그인이 담당한다. 바벨 플러그인이란 바벨이 어떤 코드를 어떻게 변환할지에 대한 규칙이다. 이런 플러그인을 매번 환경 세팅마다 설정하는 일은 꽤 번거로운일이다. 그래서 목적에 따라 필요한 플러그인들을 묶어 놓은 것이 preset이다. 대표적인 예로 ES6 문법을 ES5로 변환해주는 @babel/preset-en..
자바스크립트 Strict mode 암묵적 전역 function foo() { x = 10; } foo(); console.log(x); 위 코드의 실행 결과는 무엇일까? 에러일까? 🤔 그렇지 않다. 자바스크립트 엔진은 x를 콘솔에 출력하기 위해 foo 함수의 스코프에서 x 변수의 선언을 검색한다. 하지만 x는 선언되어 있지 않다. 따라서 foo함수의 상위 스코프인 전역 스코프에서 x 변수의 선언을 또 찾지만, 전역에도 없다. 이럴 경우 자바스크립트 엔진은 암묵적으로 전역 객체에 x 프로퍼티를 동적 생성한다. 따라서 콘솔에는 10이라는 숫자가 찍히고, 마치 정상 동작하는 코드처럼 보인다. 이런 현상을 암묵적 전역이라 한다. Strict mode 개발자의 의도와는 상관없이 발생한 암묵적 전역은 오류를 발생시키는 원이이 될 가능성이 크다. 코..
React 앱을 S3+CloudFront로 배포하기(3) - 도메인 연결 React 앱을 S3+CloudFront로 배포하기(1) - S3 Bucket 생성 React 앱을 S3+CloudFront로 배포하기(2) - CloudFront 설정 앞서 S3 + CloudFront로 React 앱을 연결하는 방법을 알아봤다. 지금 우리는 클라우드 프론트 url을 통해 서비스에 접근할 수 있다. 하지만 우리는 서비스에 접근할 때 서비스 url을 검색하여 서비스를 찾아간다. 따라서 지금부터는 가비아에서 도메인을 구입하여 cloudfront와 연결할 예정이다. 이 연결이 완료되면 서비스 주소를 검색하여 서비스에 접근할 수 있다! 1. 가비아에서 원하는 도메인 구입하기 현재 백신중앙정보원이라는 백신 접종 후기를 공유하는 프로젝트를 하고 있다. 따라서 vaccine-review.com 이라..
브라우저 렌더링 브라우저 렌더링은 클라이언트의 요청에 의한 서버의 응답에서부터 시작된다. 예를 들어 우리가 브라우저의 주소창에 https://www.mydomain.com 이라는 URL을 입력한다고 하자. 그러면 URL의 호스트네임이 DNS를 통해 IP주소로 변환된고, 이 IP 주소를 갖는 서버에게 요청을 보낸다. 이때 이러한 루트 요청에 대해 서버는 암묵적으로 index.html을 응답한다. 즉, https://www.mydomain.com은 https://www.mydomain.com/index.html과 같다. DOM 생성 1. 바이트 코드 -> 문자열 이 요청에 대해 서버는 index.html을 응답한다. 브라우저가 처음 받은 index.html은 바이트(2진수) 형태이다. 이 바이트 형식의 html 문서를 me..
자바스크립트 Hoisting 호이스팅 자바스크립트에서 호이스팅이란 유효 범위 내 최상단으로 변수와 함수를 끌어올리는 것을 말한다. 함수나 변수가 실제 선언은 밑에 되어있지만 호이스팅을 통해 유효 범위의 내 제일 위에 선언된 것 처럼 보이는 것이다. 호이스팅 대상 var로 선언된 변수 var로 선언된 변수의 선언만 호이스팅된다. 할당은 호이스팅되지 않는다. let, const로 선언된 변수는 호이스팅되지 않는다. console.log("hello"); var name = "var Ella"; // var 변수 let name2 = "let Ella"; // let 변수 // 호이스팅 결과 var name; console.log("hello"); name = "var Ella"; // var 변수 -> 호이스팅 발생 let name2 ..
자바스크립트 Prototype 자바스크립트 공부를 하면서 제일 많이 어려워했던 부분을 꼽으라하면 난 무조건 프로토타입을 꼽을 것 같다 🥲. 처음 프로토타입을 공부했을 당시에는 헷갈리는 프로퍼티들과 머릿속으로 잘 그려지지 않는 구조로 인해 많이 어려워했다. 그리고 무엇보다 '나는 프로토타입을 사용하지도 않는데, 이걸 왜 공부해야하지?'라고 생각했다. 그런데 이런 생각들은 최근 프로토타입 공부를 하며 싹 바뀌었다. 그리고 다음의 목록으로부터 많은 도움을 받았다. 1. 내가 언제 프로토타입을 사용했는지 살펴보기 2. 코어 자바스크립트 06.프로토타입 읽기 3. 프로토타입의 삼각형 구조(밑에 나옴)를 바탕으로 이해하기 난 언제 프로토타입을 썼을까? 🤔 먼저 자바스크립트 개발자가 프로토타입을 언제 사용하는지 알아보자. 분명히 모든 개발자들이 ..

티스토리툴바