javascript/basic 썸네일형 리스트형 SSR vs CSR 그리고 SPA SSR vs CSR 그리고 SPA 서버 사이드 렌더링과 클라이언트 사이드 렌더링에 대해서 알아보자 SSR(서버 사이드 렌더링)은 페이지에 변화가 있을때 마다 새롭게 전체 페이지를 다시 로드해야한다. ajax가 나온 이후에 바뀐 부분만 특정해서 변화가 가능했지만 그것 또한 손이 많이 갔고, 서버에서 HTML,CSS,JS 파일을 렌더링 한다는 것은 서버에 부담을 준다는 소리이다. 반면 CSR(클라이언트 사이드 렌더링)의 경우 클라이언트에서 렌더링을 하기 때문에 서버에 부담을 덜어줄 수 있다. 그리고 서버에서 렌더링된 HTML파일을 받아오는게 아니기 때문에 CSR의 경우 바뀐 부분만 서버로 부터 받아서 렌더링 하면 되기 때문에 더 효율적이다. SSR은 CSR과 비교했을때 SEO(검색 엔진 최적화)가 가능하고 .. 더보기 자바스크립트 객체지향 자바스크립트 - 객체지향 https://youtu.be/9BVi9ygdWs0 https://youtu.be/5NmyjJdoLZM https://youtu.be/y7Z_Wpgmz-Q 아래 내용은 이고잉님의 생활코딩 객체지향 프로그래밍을 본 정리 글입니다. OOP OOP(Object-Oriented-Programming) - 객체지향 프로그래밍 PP(Proceduaral Programming) - 절차지향 프로그래밍 위 OOP와 PP는 서로 대립되는 관계가 아니라 대비되는 관계 Object-Oriented-Programming ---------------------------- Proceduaral Programming PP를 기반으로 OOP가 탄생했고 PP의 부족한 부분을 보완해주는 역활을 한다. PP와 .. 더보기 자바스크립트 함수 자바스크립트의 가장 좋은 점은 함수의 구현 부분이다. 함수는 실행문장들의 집합을 감싸고 있다. 함수는 자바스크립트에서 모듈화의 근간이다. 함수는 코드의 재사용, 정보의 구성 및 은닉 등에 사용하고 객체의 행위를 지정하는데도 사용한다. 프로그래밍 기술은 요구사항의 집합을 함수와 자료구조의 집합으로 변환한 것이다 01)함수 객체 함수는 객체이다. 객체는 프로토타입 객체로 숨겨진 연결을 갖는 이름/값 쌍들의 집합체이다. 객체 중에서도 객체 리터럴로 생성되는 객체는 Object.prototype 에 연결된다. 반면 함수 객체는 Function.prototype 에 연결이 된다. (Function은 Object.prototype에 연결된다.) 또한 모든 함수는 숨겨져 있는 두 개의 추가 속성이 있다. 문맥(con.. 더보기 자바스크립트 스코프와 클로저 스코프와 클로저 자바스크립트에서 스코프와 클로저는 빠질 수 없는 부분이다.(물론 어떤것도 뺄 순 없지만…) 다른 언어를 접하던 프로그래머들이 다르게 작동하는 자바스크립트의 스코프와 접하기 어려운 클로저 때문에 고생이다. 자바스크립트에서 클로저는 상당히 어려운 부분에 속한다 하지만 이해만하고 익숙해진다면 객체지향 언어보다 유연함을 느낄 수 있을것이다. 스코프(scope) 스코프란 현재 접근할 수 있는 변수들의 범위를 뜻한다 어떠한 변수가 스코프 안에 선언되었으면 해당 스코프 안에서는 변수에 접근해서 읽거나 쓸 수 있고, 스코프 밖에서는 해당 변수에 접근할 수 없다. 스코프에는 크게 두 종류의 종류가 있다. 전역 스코프(global scope) 지역 스코프(local scope) 전역 스코프 (global .. 더보기 [ES2020] Nullish coalescing operator ?? Optional Chaining에 이어서 ES2020에 추가된 ?? 연산자를 알아보자 Null 병합 연산자 ?? MDN에서는 '왼쪽 피연산자가 null 또는 undefined일 때 오른쪽 피연산자를 반환하고, 그렇지 않으면 왼쪽 피연산자를 반환하는 논리 연산자이다.' 라고 나와있다. 즉, null 과 undefined일 때, 오른쪽 피연산자를 return 한다. a ?? b 의 경우 a 가 null,undefined가 아니라면 a 를 리턴 그 외의 경우는 b 만약 ?? 연산자를 사용하지 않고 위와 같은 경우를 작성한다면 x = (a !== null && a !== undefined) ? a : b; //이 처럼 코드가 길어진다. ?? 와 || 의 차이점 || 와 ??는 null, undefined, 숫자.. 더보기 자바스크립트 객체 객체 자바스크립트에서 단순한 데이터 타입은 (숫자, 문자열, 블리언(true/false), null, undefined)가 있다. 이들을 제외한 다른값은 모두 객체이다. 하지만 이들은 값이 정해지면 변경할 수 없다. 자바스크립트의 객체는 변형 가능한 속성들의 집합이다. 자바스크립트에서는 배열, 함수, 정규 표현식, 객체 등 모두 객체이다. 객체는 이름과 값이 있는 속성들을 포함하는 컨테이너 라고 할 수 있다. 속성의 이름은 문자열이면 모두 가능하다. (빈 문자열도 포함) 속성의 값은 undefined를 제외한 자바스크립트의 모든 값이 사용 될 수 있다. 자바스크립트의 객체는 클래스가 필요 없고, 새로운 속성의 이름이나 값이 어떠한 제약 사항이 없다. 객체는 데이터를 한 곳에 모으고 구조화 하는데 유용하다.. 더보기 자바스크립트 타입 타입 1.내장 타입 자바스크립트에는 7가지 내장 타입이 존재한다. null undefined boolean number string object symbol(ES6부터 추가) object를 제외하고 원시타입(primitives)이라 한다. Typeof 연산자로 값의 타입을 알 수 있다. 1 2 3 4 5 6 7 8 9 10 11 typeof undefined === 'undefined'; //true typeof true === 'boolean'; //true typeof 92 === 'number'; //true typeof "92" === 'string'; //true typeof { life: 92 } === 'object' //true //ES6부터 추가 typeof Symbol() === 'sy.. 더보기 es5 와 es6의 특징 es5 와 es6의 특징 es5는 es3의 다음으로 사용하고 있으며 es4는 문제가 많아서 폐기상태이다. 그렇기 때문에 지금 사용하고 있는 es5로 넘어 온 상태이다. es5는 es3에 비해서 실직적인 문법이 추가되었고 그 종류는 strict mode와 Object 리터럴, get-set추가, 문자열의 인덱스인식 등 크게 달라지진 않았다. 가장 중요한 특징은 객체에 대한 통제와 클래스를 생성하는 방법의 변화가 있다. 문법적으로 사용자 Object에 대해 getter, setter 지정이 가능해지므로 더 이상 평범한 값의 할당으로 작동하지 않고 내부에는 많은 제어문을 내포할 수 있는 형태가 되었다. es6는 당연한 소리겠지만 전단계의 버전 부족한 기능을 채워나가기 위해서고 최신 프레임웍들의 기반이 es6로.. 더보기 이전 1 2 다음
