본문 바로가기

LearningJavaScript

[Redux] ko.redux.js.org/understanding/thinking-in-redux/three-principles/ 3가지 원칙 | Redux 소개 > 3가지 원칙: Redux 사용의 3가지 중요 원칙 ko.redux.js.org 3가지 원칙 | Redux 소개 > 3가지 원칙: Redux 사용의 3가지 중요 원칙 ko.redux.js.org velog.io/@velopert/Redux-3-%EB%A6%AC%EB%8D%95%EC%8A%A4%EB%A5%BC-%EB%A6%AC%EC%95%A1%ED%8A%B8%EC%99%80-%ED%95%A8%EA%BB%98-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0-nvjltahf5e Redux (3) 리덕스를 리액트와 함께 사용하기 3-1. 리덕스.. 더보기
[React] State keywords to know: react component props state 1. props vs. state차이 --> props는 불변하는 값을 담고, state는 컴포넌트 내부에서 변할 수 있는 값들을! 2. this.setState() 사용법과 사용하는 이유 --> 원본은 유지돼야한다. render랑 관련..! 3. 이벤트 처리 방법 4. 이벤트 처리 시 bind메소드를 사용하는 이유 (class constructor안에) --> this를 명확히 하기 위해 더보기
[Web Architecture] Browser, Server, API, HTTP, Ajax API를 활용해서 UI를 만드는 스프린트를 하기 앞서 새로운 용어들에 대한 개념 정리를 하려고 한다. API (Application Programming Interface) 프로그래밍되어있는 애플리케이션과 의사소통이 가능한 매개체 UI: (User Interface) 유저와 의사소통이 가능한 매개체 Interface란? 사물 간 또는 사물과 인간 간의 의사소통이 가능하도록 만들어진 물리적, 가상적 매개체(접점) 웹 서비스 아키텍처는 크게 클라이언트, 서버, DB로 구성된다. 일단은 브라우저에서 유저와 상호작용을 담당하는 클라이언트에서 서버(애플리케이션)에 데이터(리소스)를 요청하고, 요청에 대한 응답을 어떻게 처리하는지에 대해 배운다. 클라이언트에서는 HTTP프로토콜을 따라 서버에 요청할 수 있다. 웹 .. 더보기
blocking vs. non-blocking (in terms of Node.js) "As an asynchronous event-driven JavaScript runtime, Node.js is designed to build scalable network applications." (nodejs.org) event-driven also means "non-blocking", in other words, 비동기가 완전 논블락킹은 아니지만 blocking = 응답없음.. 기다리고 있어야만하는 상황이라면, 논블락킹은 두 개가 동시에 진행되도, "promise쓸 떄, then을 동일선상에 표현하려고 작성해보면 가독성이 좋아" 비동기 vs. 동기 동기, 비동기(콜백으로 실행됨)는 "시간적"의미를 가지는 반면, blocking, non-blocking은 실행가능여부를 말하는듯 blocking.. 더보기
Node.js module 사용법 그 동안 브라우저에서 사용해본 비동기 흐름은 타이머 혹은 DOM 이벤트와 관련된 경우로 사용 상황(환경)이 다소 한정적이었지만, node.js의 경우 많은 부분의 API가 비동기로 작성되어 있다고 한다. Node.js 내장 모듈 사용법 우리는 node.js 내장 모듈 목록에서 사용하고 싶은 메소드를 찾아 쓸 수 있다. 해당 모듈을 사용하기 위해 이를 불러오는 과정이 필요하다. 브라우저에서는 태그를 이용해 불러왔다면, node.js에서는 자바스크립트 최상단에 require구문을 이용해 모듈을 불러올 수 있다. const fs = require('fs') //파일 시스템 모듈을 불러옵니다. const dns = require('dns') //DNS 모듈을 불러옵니다. 3rd-party 모듈 사용법 3re-p.. 더보기
Asynchronous & Promise 얄코 노마드코더 생활코딩 비동기의 사례와 callback의 문제점을 이해하고, Promise, async/await 키워드를 사용하는 법을 익히는 시간. prerequisite: 1. callback을 이용한 비동기 함수의 전달방법에 대해 이해하고 있다. (X) 2. method chaining (Array의 map, filter 등을 연결해서 쓰는 법)을 할 수 있다. (-) Asynchronous JavaScript (비동기 처리) 모든 처리를 각 처리가 완료된 후에 다음 처리를 핸들해야하는 동기적 처리보다 시간적으로 효율적이다. Callback 비동기적인 task 3개가 있는 경우, 각각의 task가 처리되는데 소요되는 시간이 다르기 때문에 처리가 완료되는 시점에 따라 처리 순서가 달라질 수 있다... 더보기
Object Oriented Programming & Prototype Chain (TIL) PART I. OOP(Object Oriented Programming)가 무엇인지? JavaScript에서 Object를 생성하는 여러가지 방법들 JavaScript에서 Prototype은 무엇이고 왜 사용해야 하는지? PART II. __proto__, constructor, prototype 이 각각 어떤 관계를 가지고 있는지 조사해봅니다. __proto__ 는 상위 prototype 객체의 주소 값입니다. Object.create 메소드에 대해 이해합시다. Object.create(A.prototype) // A기반 새로운 프로토타입 생성 Object.create 메소드로 생성한 객체는 서로 다른 메모리 주소를 갖습니다. 모양(초기값)은 같지만, 주소가 달라, 서로 얼마든지 달라질 수 있습니다. .. 더보기
Object Oriented Programming (TIL) 소개 컴퓨터 프로그래밍은 컴퓨터가 이해할 수 있는 언어를 사용해 컴퓨터에게 지시를 전달하는 것을 말합니다. 복잡도가 가장 낮은(오로지 숫자 0과 1로만 구성된) machine language가 있고, 반대로 가장 복잡하지만, 사람 언어와 가장 가까운 high-level language가 있습니다. 그리고 둘 사이에 중간 복잡도의 assembly language가 있습니다. JavaScript도 가장 높은 복잡도를 갖는 high-level language에 속한다. high-level language를 좀 더 세분화해보면, 절차(process) 순서가 중심적인 procedural language와 object-oriented language로 나눌 수 있습니다. object-oriented language.. 더보기