Web + APP 썸네일형 리스트형 Flux 패턴 MVC 패턴을 보완하기 위해서, FaceBook에서 만든 아키텍처를 소개해봅시다. 간단하게 단방향 데이터이고, Action이 발생하면 Dispatcher에 의해 Store에 전달되고, Store가 변경되면, View가 변경되는 패턴입니다. 조금 더 자세하고, 쉽게 알아보도록 합시다 ! 해당 글은 아래 글을 참조하여 작성한 글입니다. ui.toast.com/weekly-pick/ko_20151027 Flux 카툰가이드 | TOAST UI :: Make Your Web Delicious! Flux 카툰가이드 원문 : https://code-cartoons.com/a-cartoon-guide-to-flux-6157355ab207#.9nbhrj3of 플럭스는 현재 웹개발에 대한 토픽들중에 가장 유명하지만 이것을.. 더보기 React 소개 with 이벤트 위임 소개 React는 Facebook에서 개발한 오픈소스 UI 프레임워크입니다. 이전엔 직접 DOM 조작을 하며 이뤄진 과거 개발 방식(jQuery)이었는데, 이젠 DOM을 직접 다루지 않고, 데이터 상태에 따라 UI를 관리하기 때문에, 개발자는 특정 상태에 대한 뷰의 변화만 구현하면 됩니다. React는 3가지 특징이 있습니다. UI 컴포넌트를 만들기 위한 라이브러리이며 React의 컴포넌트는 트리형태로 구성됩니다. Virtual DOM을 사용하여 변경된 부분에 대한 최소한의 DOM 처리로 UI를 업데이트하여 애플리케이션의 성능을 향상합니다. 부모 컴포넌트에서 하위 컴포넌트로 전달하는 단방향 데이터 흐름을 가지고 있습니다. 그렇기에 데이터 추적 및 디버깅이 쉽습니다. 개발 환경 JSX React에서는 UI.. 더보기 이벤트 리스너 캐시 제가 최근 과제를 진행하며, render 함수에 이벤트 리스너를 추가하는 코드를 많이 짰는데, 이러한 코드는 성능을 떨어뜨린다는 피드백을 많이 받았습니다. 도대체 왜 그런 것일까가 궁금해서 찾아보았고 아래의 글을 찾게 됐습니다. 본 글은 아래의 글을 정리하는 글이 될 것 같네요. ui.toast.com/weekly-pick/ko_20180911 이벤트 리스너 캐시를 이용한 React 성능 향상 | TOAST UI :: Make Your Web Delicious! 이벤트 리스너 캐시를 이용한 React 성능 향상 저자 : Charles Stover / 웹사이트 : charlesstover.com / LinkedIn : https://www.linkedin.com/in/charles-stover / Twit.. 더보기 브라우저는 어떻게 동작하는가. (간단 요약) 해당 글은 면접 단골 질문인, 브라우저에서 주소창에 주소를 입력했을 때, 어떻게 되나요?의 질문을 해결하기 위한 간단하게 정리한 글입니다. 해당 질문은 실제로 유명 IT 기업 FE 경력 질문으로 받은 질문이었으며, 해당 질문은 꼬리를 물 수 있는 질문이니 이 부분에 대해 명확히 알 고 가심을 바랍니다. 물론 이 글에선 간단하게 정리할거지만요. https://d2.naver.com/helloworld/59361 위 글을 참조하여 재구성한 글입니다. 브라우저 기능 역할 : 사용자가 원하는 자원을 서버에게 요청하고 그려줌 자원 : HTML, CSS, PDF 해당 자원의 명세는 W3C에서 정함. 자원의 주소 : URI 브라우저 기본 구조 사용자 인터페이스 : 사용자의 편의를 위한 창을 제외한 나머지 부분 브라우.. 더보기 Iterator / Generator 안녕하세요. 꼬동입니다. 현재 저는 다양한 준비를 하고 있는데, 그 준비과정에서 만난 JS의 Iterator / Generator에 대해서 자세히 알아보려고 합니다. 갑시다 ! 이터레이터는 '지금 어디 있는지' 파악할 수 있도록 돕는 책갈피와 비슷한 개념입니다. 배열은 이터러블 객체의 좋은 예인데, 배열에 values 메서드를 써서 이터레이터를 만들 수 있습니다. 이 상태에서 next 메서드를 호출하면 value 프로퍼티와 done 프로퍼티를 반환합니다. const it = [1,2,3].values(); it.next() // {value: 1, done: false} it.next() // {value: 2, done: false} it.next() // {value: 3, done: false} i.. 더보기 실행 컨텍스트와 클로저 안녕하세요 ! 다들 새해 복 많이 받으시고 있나요 !! 안 받으시고 있으시다면, 어서 챙겨가세요 !! 이번 글에선 실행 컨텍스트와 클로저를 배워 보려고 합니다. 저는 항상 클로저라는 개념이 어렵게 다가왔었는데, 그 이유가 실행 컨텍스트라는 개념을 몰라서 어렵게 느껴졌던거 같아요. 그러니 이번엔 '실행 컨텍스트와 클로저'를 같이 배워보려합니다. 정확히는 아래를 배울 거에요 ! 실행 컨텍스트의 개념 활성 객체와 변수 객체 스코프 체인 클로저 시작합니다 ! 실행 컨텍스트 개념 기존에 언어를 공부해보셨다면 Call Stack의 개념을 들어보셨을 거에요. C언어로 예를 들면 함수의 호출 정보, 지역 변수, 인자값 등이 차곡차곡 쌓이는 스택을 의미해요. 그래서 콜 스택의 호출 정보 등으로 코드의 실행 과정을 추적하.. 더보기 JavaScript 함수와 프로토타입 체이닝 (5) 드디어 JavaScript 함수 마지막 글입니다. 여기까지 읽으신 분이 있으신진 모르겠지만, 읽으셨다면 추후에 큰 도움 되실겁니다. 다 기억까지한다면 베스트 ! 프로토타입 체이닝 프로토타입의 두 가지 의미 JS는 기존 C++이나 자바 같은 객체지향 프로그래밍 언어와는 다른 프로토타입 기반의 객체지향 프로그래밍을 지원합니다. JS에서 OOP 상속에 근간이 되는 프로토타입과 프로토타입 체이닝의 기본 개념을 알아보도록 합시다. 자바와 같은 객체지향 프로그래밍에서는 클래스를 정의하고 이를 통해 객체를 생성합니다. JS에는 이러한 클래스 개념이 없습니다. 대신에 객체 리터럴이나 앞서 설명했던 생성자 함수로 객체를 생성합니다. 이렇게 생성된 객체의 부모 객체가 바로 '프로토타입' 객체입니다. 즉, 상속 개념과 마찬.. 더보기 JavaScript 함수와 프로토타입 체이닝 (4) 사실 이렇게 길어질 줄은 몰랐네요. 계속 함수만 해서 지루하실 수도 있으시겠지만, 지금 당장 React, Vue, JQuery를 공부하는 것보다 이 내용을 알아놓으시면 분명히 도움이 될 겁니다. 제가 약속할게요 ! 함수 호출과 this 1. arguments 객체 C와 달리 엄격한 언어가 아니기 때문에 JS는 함수 형식에 맞춰 인자를 넘기지 않아도 에러가 발생하지 않습니다. (이 것은 추후 큰 문제가 되는데...) function func(arg1, arg2) { console.log(arg1, arg2); } func(); // undefined undefined func(1); // 1 undefined func(1, 2); // 1 2 func(1, 2, 3); // 1 2 이렇게 런타임 시에 호출.. 더보기 이전 1 ··· 3 4 5 6 7 8 다음
