차곡차곡 차곡차곡

React 공식문서 정리 Handling Events React 엘리먼트에서 이벤트를 처리하는 방식은 DOM 엘리먼트에서 이벤트를 처리하는 방식과 매우 유사합니다. React의 이벤트는 소문자 대신 camelCase를 사용합니다. JSX를 사용하여 문자열이 아닌 함수로 이벤트 핸들러를 전달합니다. - HTML Activate Lasers - React Activate Lasers React에서는 기본 동작을 방지하기 위해서 반드시 preventDefault를 명시적으로 호출해야 합니다. - HTML Click me - React function ActionLink() { function handleClick(event) { event.preventDefault(); console.log('The link..

왜 React를 사용하는가? 웹 페이지는 유저와 수많은 인터렉션이 일어납니다. 그로 인해 많은 상태변화에 대한 관리가 필요합니다. 하나의 의미를 가진 독입적인 단위 모듈인 Coponent를 사용하여 직관적이며 재사용성이 높아진 코드를 작성할 수 있습니다. ES6의 개념 destructuring, spread operator, rest parameters, default parameters, template literals, arrow function, for-of loop JSX (자바스크립트의 확장 문법) 자바 스크립트에서 HTML의 태그를 입력하여 반환한다면 바벨이 태그로 구성된 코드를 변환하여 자바스크립트 문법으로 바꾸어 줍니다. 그로 인해 사용하고 읽기 쉬워집니다. 규칙 1. 반드시 하나의 엘리먼..

인터넷은 무엇인가? 데이터를 주고받을 수 있는 컴퓨터의 네트워크입니다. 데이터를 구조화하여 저장, 수정, 삭제, 정의, 관리하는 데이터베이스 서버(DBMS)에 접속하여 서비스를 요청하고, 서버로부터 받는 응답을 사용자에게 클라이언트가 보여줍니다. 데이터를 어디에서 어떻게 주고받는가? 간단히 웹(Web)이라고 불리는 월드 와이드 웹(World Wide Web, WWW)에서 인터넷상의 정보를 HTTP, 하이퍼텍스트, HTML형식 등을 사용하여 교환할 수 있습니다. 규칙과 형식 HTTP (Hyper Text Transfer Protocol) 클라이언트와 서버가 통신하기 위해 정해놓은 신호 체계로써 요청과 응답 메시지의 형식이 정해져 있습니다. 요청과 응답으로 이루어지며 서버는 클라이언트의 요청에 데이터를 전달..

node.js는 무엇인가? V8엔진으로 만들어진 자바스크립트 런타임이다. 자바스크립트를 기계어로 컴파일 해주는 V8엔진 런타임은 프로그래밍 언어가 구동되고 있는 환경 이벤트 기반의 논블로킹 I/O 모델이다. 이벤트는 유저가 버튼을 클릭하거나 네트워크에 리소스를 요청하는 것 논블로킹과 블로킹의 차이는? (블로킹) 동기호출 (논블로킹) 비동기호출 I/O 모델은 Input을 주면 Output을 받는 모델 자바스크립트를 컴파일하여 구동하고 이벤트기반의 논블로킹모델로 속도가 빠르다. node와 함께 번들링 되어있는 모듈 fs http url path Node Package Manager 세계에서 가장 큰 오픈소스 라이브러리 생태계 중 하나 package.json에 프로젝트의 셋업이 기록되어 효율적으로 사용가능하다..

왜 사용하는가? 통신 과정에서 HTTP의 속성으로 인해 서버에서 응답을 한다면 연결이 끊깁니다. 이때 데이터를 요청할때마다 데이터를 보여주는 전체 페이지를 리로드해야 한다면 매우 비효율적입니다. 그러므로 필요한 데이터만 받아서 부분적으로 리로드하여 빠르게 원하는 데이터를 보여주는 효율적인 Ajax를 도입합니다. Ajax 자바스크립트를 이용해서 비동기식으로 서버와 통신하는 방식입니다. 비동기식으로써 여러 가지 일이 동시적으로 발생하기 때문에 서버와 통신하는 동안 다른 작업을 할 수 있습니다. 덕분에 서버와 자유롭게 통신하며, 페이지를 새로고침하지 않고 부분적으로 작동되는 효율적인 웹페이지가 생성됩니다. Ajax 구현방법 통신을 하기 위해서 사용하는 여러가지 API가 있습니다. 그 중에서 XMLHttpReq..

자바스크립트는 데이터 타입에 따라서 전달되는 방식이 다릅니다. 값에 의한 전달 (passed by value) Boolean, Null, Undefined, String, Number (원시 타입) - 데이터 타입이란 참조에 의한 전달 (passed by reference) Array, Function, Object (사실 전부 객체라고 할 수 있습니다) - 배열 (array) 함수(function) 객체(object) 원시 타입의 전달 (복사) 변수들을 등호(=)를 사용하여 다른 변수에 할당할 때 새로운 변수에 값을 복사(copy)합니다. let x = 7; let y = 'seven'; let number = x; let movie = y; console.log(x, y, number, movie);..

class class는 객체를 만드는 공장이라고 할 수 있습니다. ECMAScript 6부터 지원하기 시작했기 때문에 이전까지는 비슷한 작동을 하는 네가지 방식을 사용해야 했습니다. Instantiation Patterns Functional / Functional Shared / Prototypal / Pseudoclassical 이 중에서 Pseudoclassical 방식을 살펴 보겠습니다. //menu라는 단일 프로퍼티를 생성하는 생성자 함수 function Order(menu) { this.menu = menu; } //prototype에 할당되는 message메서드 Order.prototype.message = function() { console.log(this.menu + "가 주문되었습니다..

Prototype prototype은 javascript의 기반이라고 할 정도로 중요합니다. 그래서 프로토타입 기반 언어 (Prototype based language) 라고 불리웁니다. 만약에 생성자안에서 메서드를 만들어 new키워드를 사용한다면 각각의 생성되는 객체에 모두 메서드가 생성되어 메서드를 사용하지 않더라도 각각의 객체안에 메서드를 포함하고 있어야합니다. 이는 객체 공간을 비효율적으로 사용할 뿐만아니라 각각의 메서드를 수정하고 싶을 경우에 하나씩 모두 새로 지정해주어야한다는 번거로움이 있습니다. 그래서 공통적으로 사용할 수 있는 메서드를 prototype을 통해서 만들어줍니다. function Order(menu, count){ this.menu = menu; this.count = coun..

Graph 그래프는 객체 간의 관계를 표현하는 자료구조입니다. 엣지(edge)라는 개념을 사용하여 노드(node)라고 불리는 객체를 연결하여 저장하고 효율적으로 검색할 수 있도록 합니다. 엣지로 두 노드를 연결할때 방향성이나 가중치를 가질 수 있습니다. 하나의 방향으로 이동한다면 방향 그래프 (Directed Graph) 양방향으로 이동한다면 무방향 그래프 (Undirected Graph) 엣지에 가중치가 할당되었다면 가중 그래프(Weighted Graph) Directed / Undirected / Weighted 그래프 표현방법 그래프를 표현하는 방법을 여러가지가 있지만 대표적으로 인접행렬(Adjacency Matrix)과 인접리스트(Adjacency List)가 있습니다. 인접행렬 - Adjacen..

Hash Function 해시 함수는 어떠한 문자열을 고정된 길이의 암호화된 문자열로 바꿉니다. 암호화되어 출력된 문자열은 원래 문자열로 되돌아 갈 수 없습니다. 밑에 있는 두개의 코드처럼 해시함수를 간단히 구현할 수 있습니다. function hashFunction (key) { return key % 3; } console.log(hashFunction(128745)); // 0 String.prototype.hashCode = function() { var hash = 0; if (this.length == 0) { return hash; } for (var i = 0; i < this.length; i++) { var char = this.charCodeAt(i); hash = ((hash