GoGo GoGo

예전에 랜딩 페이지 작업을 하면서 임시로 팝업을 띄워야할 때가 있었다. 팝업 하단에는 '오늘 하루 팝업 보지 않기'와 같은 기능이 있었다. 쿠키를 사용해서 해결했는데, 개발한 김에 세션과 쿠키에 대해서 정리해보려고 한다. 세션과 쿠키를 사용하는 이유 HTTP 프로토콜 특성 상 서버와 클라이언트의 통신이 끝나면 상태 정보는 유지하지 않는다. 그래서 쿠키와 세션이 필요하다. 예를 들어, 쇼핑몰에서 옷을 구매하려고 로그인했음에도 불구하고, 세션과 쿠키가 없으면 페이지를 이동할 때마다 계속 로그인을 해야한다. 쿠키란? 클라이언트(브라우저) 로컬에 저장되는 키와 값이 들어있는 작은 데이터 파일이다. 사용자 인증이 유효한 시간을 지정할 수 있으며, 유효 시간이 정해지면 브라우저가 종료되어도 인증이 유지된다. (그래..

Iterator 배열 순회의 역사 //ES5 이전 for (var index = 0; index < myArray.length; index++) { console.log(myArray[index]); } //ES5 이후 myArray.forEach(function (value) { console.log(value); }); //ES6 이후 for (var value of myArray) { console.log(value); } iterable 객체란? Symbol.iterator 심볼을 속성으로 가지고 있고, 이터레이터 객체를 반환하는 객체이다. Iterator 객체란? next() 메서드를 구현하고 있고, done과 value 속성을 가진 객체를 반환하는 객체이다. for of 루프는 순회를 시작하기..

실무에서 프론트 개발을 하다보면 가장 자주보게 되는 에러는 CORS이다. 입사한지 얼마 안됐을 때, 이 에러가 발생하면 숨이 턱턱 막혔다. 또 이 에러야? 하면서 다시 구글에 CORS를 쳐보면서 해결 방법을 찾아보기 시작했다. 그래서 이제는 여기에 제대로 정리해보려고 한다. CORS란? Cross-Origin Resource Sharing 시스템 수준에서 타 도메인 간 자원(img, data) 호출을 승인/차단을 결정하는 것. 다른 도메인으로부터 리소스가 요청될 경우, 해당 리소스는 cross-origin HTTP 요청에 의해 요청된다. 보안 상의 이유로, 브라우저들은 스크립트 내에서 초기화되는 cross-origin HTTP 요청을 제한한다.(이를 Same-Origin-Policy라고 한다.) 개발자들..

Promise란? ES6에서 비동기 처리를 위한 패턴. 전통적인 콜백 패턴이 가진 단점을 보완하고, 비동기 처리 시점을 명확하게 표현한다. 아래 코드는 전통적인 콜백 패턴이 가진 단점을 보여준다. 위 코드를 개선하기 위해 Promise를 사용한다. Promise의 생성 Promise의 후속 처리 메서드 1. then then 메소드는 두 개의 콜백 함수를 인자로 전달 받는다. 첫 번째 콜백 함수는 성공(fulfilled, resolve 함수가 호출된 상태) 시 호출되고 두 번째 함수는 실패(rejected, reject 함수가 호출된 상태) 시 호출된다. 2. catch 예외(비동기 처리에서 발생한 에러와 then 메소드에서 발생한 에러)가 발생하면 호출된다. 따라서 에러 처리는 catch 메서드를 사용..

ReactJS란? Facebook 에서 만든 Javascript 라이브러리(!=프레임워크) DOM 관리와 상태값 업데이트 관리를 최소화하고, 개발자가 오직 기능 개발과 UI 구현에 집중할 수 있도록 하기 위해 만들어진 라이브러리(예. Angular, Vue, Backbone, React..) 특징 전체 앱은 Component들이 결합해서 만들어진다. 각 Component들은 앱의 다른 부분, 또는 다른 앱에서 재사용이 가능하다. JSX를 사용한다. Virtual DOM을 이용한다. 단방향 데이터 바인딩. DOM이란? Document Object Model. 문서 객체 모델. HTML, XML 문서를 처리하는 API. Virtual DOM이란? (브라우저 작동 원리 참고) 일반적으로 DOM에 변화가 생기면..

얼마 전에 Java로 Tree 클래스를 만들어봤는데, Javascript도 만들어두면 좋을 것 같아서 작성해보았다. 순회까지 간단하게 추가했다. class Tree { constructor(val) { this.val = val; this.leftNode = null; this.rightNode = null; } getVal() { return this.val; } setVal(val) { this.val = val; } setLeftNode(node) { this.leftNode = node; } getLeftNode(node) { return this.leftNode; } setRightNode(node) { this.rightNode = node; } getRightNode(node) { retur..

Javascript로 Queue를 구현한 코드이다. 이 코드도 Stack과 마찬가지로 Javascript에서 기본적으로 제공하는 push(), pop() 메서드를 사용하지 않고 작성했다. class Queue { constructor() { this.bucket = []; } isEmpty() { return this.bucket.length == 0; } enqueue(val) { this.bucket[this.bucket.length] = val; } dequeue() { if(this.bucket.length == 0) { return -1; } let val = this.bucket[0]; this.bucket = this.bucket.slice(1, this.bucket.length); cons..

Javascript에서 제공하고 있는 push(), pop()을 사용하지 않고 Stack Class를 만들어 구현하는 코드이다. class Stack { constructor() { this.top = -1; this.bucket = []; } isEmpty() { return this.bucket.length == 0; } push(val) { this.bucket[++this.top] = val; } pop() { if(this.top < 0) { return -1; } else { let popVal = this.bucket[this.top]; this.bucket = this.bucket.slice(0, this.top); this.top--; return popVal; } } peek() { r..