본문 바로가기

전체 글

 (432)
JSON과 Javascript Object의 차이 JSON은 객체, 배열, 숫자, 문자열, boolean, null을 직렬화하기 위한 구문으로, Javascript 구문에 기반을 두고 있으나 둘은 엄밀히 다른 개념이다. (*JSON이란?) 1) 속성명 JSON에서 속성명은 반드시 큰따옴표로 표시된 문자열이어야 한다. 후행 쉼표는 허용되지 않는다. Javascript Object는 상관없다. 그냥 키-속성값으로 구성되기만 하면 된다. 2) JSON.parse() JSON.parse() 메서드에 JSON 포맷의 객체를 넣으면 자바스크립트 객체로 변환된다. 3) 후행 쉼표 JSON에서 후행 쉼표는 허용되지 않지만, 자바스크립트 객체에서는 허용된다. 4) 숫자 JSON에서 선행 0은 허용되지 않는다. 또한 소숫점 뒤에는 적어도 한 자릿수가 뒤따라야 한다. Na..
객체와 생성자 함수 1. 자바스크립트 객체의 특징 자바스크립트에서 객체는 객체지향 프로그래밍 언어의 객체와 조금 다른 점이 있다. 1.1 prototype 기반의 언어 Java와 C++은 클래스(Class) 기반의 객체지향 언어인 반면, JS는 프로토타입(Prototype) 기반의 객체지향 언어이다. Class 기반의 객체지향 언어는 class라는 껍데기를 정의하고 이를 통해 객체를 생성한다. 하지만 프로토타입 기반의 객체지향 언어는 class 정의없이도 객체를 생성할 수 있다. 물론 생성자 함수를 톻애 class를 따라할 순 있는데, ES6부터는 정식으로 class 문법이 추가되었다. 1.2 캡슐화와 상속 지원 객체지향 프로그래밍에서 중요한 특징 중 하나는 캡슐화와 상속이라는 개념이다. JS는 class가 없어도 클로저를..
[작성중]프로토타입(Prototype) 프로토타입 자바스크립트는 프로토타입 기반 언어 Java와 C++은 클래스 기반의 객체지향 언어인 반면, Javascript는 프로토타입 기반의 객체지향 언어이다. 모든 객체들이 메소드와 속성들을 상속 받기 위해 프로토타입 객체를 가진다. 클래스 기반의 객체지향 언어는 class라는 껍데기를 정의하고 이를 통해 객체를 생성한다. 하지만 프로토타입 기반의 객체지향 언어는 class 정의 없이도 객체를 생성할 수 있다. 물론 생성자 함수를 통해 class를 따라할 순 있지만, ES6부터는 정식으로 자바스크립트에서 class가 추가되었다. 프로토타입 객체는 상위 프로토타입 객체로부터 메소드와 속성을 상속 받을 수 있는데, 이를 프로토타입 체인(prototype chain)이라 부른다. 다른 객체에 정의된 메소드..
이벤트의 모든 것: on, addListener, onclick, addEventListener 노드 교과서 4장에서 addEventListener 메서드를 사용하여 클릭 이벤트를 작성하던 중, 예전에 클릭 이벤트 코드를 작성할 때 onclick 혹은 .on('click', listener) 메서드를 사용했던 기억이 떠올랐다. 그러다 이 이벤트들 사이에 어떤 차이가 있는지 궁금해졌고 조사하던 중 항상 헷갈렸던 용어들도 공부하며 이벤트의 모든 것을 정리하기로 했다. 1. 용어 정리 1.1 이벤트 웹 페이지에서 마우스를 움직이거나, 요소를 클릭하거나, 텍스트 박스에 글쓰기 등 특정 동작을 수행하는 것을 이벤트가 발생했다고 한다. 그리고 이벤트가 발생할 때마다 웹 브라우저가 서버에게 그 사실을 알려준다. 1.2 이벤트 처리기 1.2.1 이벤트 처리기란? 이벤트가 발생했을 때 이에 반응하여 수행할 동작이 ..
시퀄라이즈(Sequelize) 1. MySQL 1.1 DBMS 데이터베이스란 관련성을 가지며 중복이 없는 데이터들의 집합을 말한다. 이러한 데이터베이스를 관리하는 시스템을 DBMS(DataBase Management System)이라고 한다. 1.2 RDBMS 데이터베이스를 관리하는 DBMS 중에서 RDBMS(Relational DBMS)라고 부르는 관계형 DBMS가 많이 사용된다. Oracle, MySQL, MSSQL, ... SQL 언어를 사용하여 데이터를 관리한다. RDBMS별로 SQL문이 조금씩 다르다. 2. 시퀄라이즈 노드에서 MySQL 데이터베이스에 접속할 때, MySQL 작업을 쉽게 할 수 있도록 도와주는 라이브러리가 바로 시퀄라이즈(Sequelize)이다. 2.1 시퀄라이즈 시퀄라이즈는 *ORM(Object-relati..
[Node.js 교과서] 6. 익스프레스 웹 서버 만들기 노드로만 웹 서버를 만들 때 코드가 보기 좋지 않고 확장성도 떨어진다. npm에서는 서버를 제작하는 과정에서의 불편함을 해소하고 편의 기능을 추가한 웹 서버 프레임워크가 있는데, 이 중에서 가장 대표적인 것이 익스프레스(Express)이다. 익스프레스는 http 모듈의 요청(req), 응답(res) 객체에 추가 기능들을 부여했다. 기존 메소드들에 편리한 메소드들을 추가하여 기능을 보완하였고, 코드를 분리하기 쉽게 만들었기 때문에 관리하기에도 용이하다. 그리고 if문으로 요청 메소드와 주소를 구별하지 않아도 된다. 1. 익스프레스 프로젝트 시작하기 learn-express 폴더를 생성하자. 1.1 package.json 생성하기 항상 package.json을 가장 먼저 생성해야 한다. package.jso..
[Node.js 교과서] 4. http 모듈로 서버 만들기 목표 http 모듈로 서버를 직접 만들어 보면서 실제 서버 동작에 필요한 쿠키, 세션처리, 요청 주소별 라우팅 방법에 대해 알아본다. 1. 요청과 응답 이해하기 1.1 클라이언트와 서버의 관계 서버는 클라이언트가 있기에 동작한다. request (client->server) ➡ response (server->client) (1) 클라이언트에서 서버로 요청(request)을 보내고, (2) 서버에서는 클라이언트의 요청 내용을 읽고 처리한 후 클라이언트에 응답(response)을 보낸다. 1.2 이벤트 리스너를 가진 노드 서버 만들기 서버에는 요청을 받는 부분과 응답을 보내는 부분이 있어야 한다. 요청과 응답은 이벤트 방식이라고 생각하면 된다. 클라이언트로부터 요청이 오면 어떤 작업을 수행할지 이벤트 리스..
[Node.js 교과서] 3. 노드 기능 알아보기 1. REPL 사용하기 자바스크립트는 스크립트 언어이므로 미리 컴파일을 하지 않아도 즉석에서 코드를 실행할 수 있다. 아마 여러분도 이것을 브라우저 콘솔 탭에서 경험해봤을 것이다. 이것을 REPL이라고 한다. 입력한 코드를 읽고(Read), 해석하고(Eval), 결과물을 반환하고(Print), 종료할 때까지 이 과정을 반복한다(Loop)라는 의미이다. 노드도 이와 비슷한 콘솔을 제공한다. $ node > 콘솔창에 node를 입력하면 프롬프트가 > 모양으로 바뀌어 자바스크립트 코드를 입력할 수 있게 된다. 간단한 문자열을 입력해보자. REPL을 종료하려면 ctrl+c 를 두 번 누르거나, 혹은 REPL창에 .exit을 입력하면 된다. REPL은 한두 줄짜리 코드를 테스트해보는 용도로는 좋지만 긴 코드를 실..
반응형

티스토리툴바