본문 바로가기

전체 글

 (62)
[부록] Shallow Merge VS Deep Merge 글을 시작하며 ... 개인적인 프로젝트를 진행하던 도중 lodash 라이브러리의 merge를 알게되었고 기존에는 Shallow와 Deep 을 생각하면 Copy 밖에는 몰랐는데 이번 계기를 통해 shallow merge와 deep merge에 대해 알아보게 되었음. Shallow Merge 일단 Shallow Merge란, Shallow Copy, Deep Copy 에서의 Shallow Copy와 비슷한 개념으로 객체의 내부값을 상세히 비교하여 병합하는 것이 아니라 객체를 비교하여 일치하는 key값이 존재할 경우, 그 value값을 바꿔치기 하는 방식 이다. 이를 실행할 수 있는 방법을 두가지가 있는데 지금부터 알아보자. Object.assign 첫번째 방법으로는 Object 객체의 내장 메소드인 assi..
[부록] Cookie, Web Storage 개념 Cookie와 Web Storage에 대해 알아보기 전에 어떤게 먼저인지를 알아야한다. Cookie는 기본적으로 HTTP의 특성을 보완하기 위해 나온 존재다. 그렇다면 일단 기본적으로 HTTP 의 특성에 대해서 간단히 짚고 넘어가보자. HTTP의 특징 1. 비연결성 클라이언트와 서버가 한번 연결은 맺은 후, 클라이언트 요청에 대해 서버가 응답을 마치면 연결을 해제한다. 이러한 특징에는 장, 단점이 존재하는데 장점 으로는, 연결을 계속해서 유지하지 않기 때문에 리소스를 절약하여 더 많은 연결을 할 수 있다는 점인데 HTTP는 기본적으로 인터넷 상의 불특정 다수를 대상으로한 통신 환경을 기반으로 설계되었기때문에 서버와 다수의 클라이언트가 연결을 계속 유지해야한다면, 과도한 리소스가 발생한다. 따라서 H..
[ES6] Generator 개념 먼저 Generator 란 직역해보자면 생성기 라는 의미를 가지는데 실제 역할은 이터러블을 생성하는 함수 이다. 이번에는 매우 생소한 개념이기 때문에 예제 코드부터 보고 가보자. function* threeStep() { console.log('one step'); yield 1; console.log('two step'); yield 2; console.log('three step. The End!'); } // 함수 표현식으로도 가능! let threeStep = function* () { // Something ... } 위의 함수가 기본적으로 Generator 함수를 만드는 방식이다. 여기서 기존의 함수와 다른 부분을 찾아보자면 * 와 yield 를 찾을 수 있겠다. 그렇다면 이들은 어떤 역..
Why Virtual DOM? 글을 시작하며 ... 리액트를 공부하고 나서는 Virtual DOM 이라는 말을 당연하게도 들어봤을 것이다. 이것이 React 사용의 장점이라고들 말이다. 그러면 Virtual DOM 이 어떻게 동작하는데 ? 라는 물음을 스스로 던져봤을 때에는 render하기 전 내용을 Virtual DOM에 그려서 미리 적용하고, 그 다음에 그려주는 역할을 한다. 라고 생각했었다. 하지만 거기서 한걸음 더 나아가 그렇게 하는게 어떤 장점이 있는건데 ? 라는 질문을 해보았을 때에는 순간적으로 멈칫하게 되었다. React를 사용하는 개발자로서 React의 이점이 무엇인지 정확히 모른다는 점이 아무래도 내가 맡아서 하는 분야에 대한 전문성이 떨어진다는 생각에 이를 다시한번 찾아보게 되었다. 그래서 Virtual DOM이 왜..
[ES6] Class 개념 이전의 OOP글에서도 한번 언급했었지만, 다른 객체지향형 언어에서는 객체지향형 프로그래밍을 구현하기 위한 도구로 Class 를 사용하는 반면, Javascript는 prototype 를 사용한다. 이는 아무래도 Class기반 언어에 익숙한 프로그래머들이 Javascript를 사용할 때, 보다 더 익숙한 형태로 접근할 수 있도록 하는 목적으로 ES6에서 도입되었으며, 한가지 알아두어야 할 점은 Syntax Sugar 라는 점이다. 그렇다면 Syntax Sugar 란 무엇일까 ? 이는 이름이 주는 느낌 그대로, 새로운 기능을 만들어 낸 것이 아니라, 단지 기존의 prototype을 형태만 class 형으로 풀어서 만들어낸 것이다. 그렇다는 말은, 내부적으로는 prototype 형태로 바뀌어 동작한다는 ..
Ctrl +Z, Ctrl +C in Linux 글을 시작하며 ... 이건 언제 한번 진행중이던 로컬 프로젝트를 Ctrl + C 가 아닌 Ctrl + Z 로 종료하게 되었는데 언뜻 보기에는 종료된 것 처럼 보였지만 포트가 살아있는 것을 보고 의아해하며 찾아본 후기입니다. 그래서 둘의 차이는 ? 두 명령어를 사용할 때 모두 Terminal 상에서는 종료가 되는것 처럼 보인다. 하지만 Ctrl + Z 를 누를때는 재시작 시에 해당 포트가 사용중, Ctrl + C 를 누를 때에는 포트가 사라져서 원활한 재시작이 가능하다. 그렇다면 이 둘의 차이는 무엇일까 ? Ctrl + Z : 해당 프로세스 정지 Ctrl + C : 해당 프로세스 종료 그렇다면 정지동작이 있다면 다시 실행 동작도 있지 않을까 ? 다시 실행하기 위해서는 정지 동작을 눌렀을 때에 위의 그림에서..
[ES6] Destructuring 개념 일단 Destructuring 이라는 단어의 의미부터 알아보자. Destructuring은 비구조화 라는 의미를 가지고 있다. 그렇다면 여기서 말하는 "구조" 란 어떤 구조를 말하는 것일까 ? 여기서의 "구조" 는 배열이나 객체 리터럴의 틀에 값이 들어가 있는 형태를 말한다. let arr = [1, 2, 3]; let obj = { a: 1, b: 2, c: 3 }; 위의 코드 형태를 구조화된 형태 라고 보면 되겠다. 그렇다면 이러한 형태를 비구조화 한다는 의미는 어떤 것일까? 이 내용은 비구조화를 사용하는 코드를 보면서 알아보자. 사용 방법 배열 // ES5 var num = [2, 4, 7]; // before var two = arr[0]; var four = arr[1]; var seven..
[ES6] Module 개념 먼저 모듈(Module) 이란 무엇일까 ? 왜 나타나게 되었을까 ? 일단 개념부터 알아보자면, 모듈이란 애플리케이션을 구성하는 개별적 요소로서 재사용 가능한 코드 조각을 말한다. 일반적으로 모듈은 파일 단위로 분리되어 있으며, 애플리케이션은 필요에 따라서 모듈을 로드하여 재사용한다. 사실 다른 언어에는 이러한 모듈기능을 다 가지고 있는 반면, Javascript는 태생 자체가 웹페이지의 보조적 기능을 수행하기 위해 만들어졌기 때문에 한계가 있었다. 이것은 script 태그를 통해서 js 파일을 받아올 수는 있었지만, 이렇게해서 여러개의 파일을 받아올 경우 이 파일들이 모두 하나의 전역 객체를 공유하기때문에, 같은 이름의 변수나 method가 존재할 경우 문제가 발생하게된다. 자바스크립트는 기본적으로..

티스토리툴바