웹 개발자분들이라면 DOM 이라는 단어 한번정도는 들어보셨을 겁니다. 저 역시 DOM에 대해 많이 들어봤지만 정확히 그게 무엇인지는 잘몰랐습니다. 개발자라면 궁금한 것에 대해 그냥 넘어가면 안되기에 DOM에 대해 공부해봤습니다. Aldev님, Code Playground님, WIT블로그의 고우영님의 자료를 토대로 제가 이해한 내용을 바탕으로 정리했습니다. 틀린 부분이 있으면 언제든 지적해주시면 감사하겠습니다. 참고한 블로그들에 대해서는 하단에 주소를 남깁니다. l BOM 과 DOM 웹은 기본적으로 웹 브라우저를 통해 서비스 됩니다. 크롬, 사파리, 익스플로어 등이 바로 웹 브라우저 입니다. 브라우저는 html 읽어들여 사용자에게 보여줍니다. 이러한 브라우저와 관련된 객체들의 집합을 브라우저 객체 모델 즉..

사진과 같이 동일한 클래스에 대해서 다르게 css 속성을 해주고 싶을 때 사용하는 방법입니다. 예를 들어 위에 2개의 이미지가 있는데 2개 모두 동일한 태그로 생성된 뒤 데이터 값만 다르게 받았습니다. 이미지 A 이미지 B 만약 class="background" 라고 할때 $('.background').css("color", "red"); 하게 되면 2개의 이미지 모두 폰트가 빨간색으로 됩니다. 이 경우 저는 첫번째 이미지에만 빨간색 폰트로 하고 싶을 때 다음과 같은 방법을 사용하여 해당 태그에 접근하면 됩니다. crud.list.onComplete = function(result) { console.log(result); if(result.result) { var dataList = result.dat..

# 서블릿??!! 서블릿은 서버 쪽에서 실행되며 클라이언트의 요청을 동적으로 처리할 수 있게끔 도와주는 자바 클래스입니다. 서블릿은 자바 클래스이므로 자바의 일반적인 특징은 모두 가지고 있습니다. 하지만 자바와 달리 서블릿은 톰캣과 같은 서블릿 컨테이너에서 실행되야 합니다. 클라이언트가 웹 서버에 요청을 하면 웹 서버는 그 요청을 톰캣과 같은 웹 애플리케이션 서버(WAS)에 위임합니다. 그러면 WAS 는 각 요청에 해당하는 서블릿을 실행합니다. 그 후 서블릿은 요청에 대한 기능을 수행한 후 결과를 반환하여 클라언트에게 응답하게 됩니다. 서블릿의 특징 서버에서 실행된다. 정적인 웹 프로그램을 동적으로 처리할수 있게 해준다. 스레드 방식으로 실행된다. 자바 클래스이기 때문에 자바의 특징을 갖는다. 서블릿 컨..

대부분 사람들은 데이터베이스와 데이터베이스 관리 시스템(DBMS : DataBase Management System)을 구별하지 않고 흔히 데이터베이스로 통합해서 말하곤 합니다. 하지만 정확히 이 둘의 개념은 엄연히 다릅니다. 데이터베이스 안에 데이터를 관리해주는 프로그램이 데이터베이스 관리 시스템입니다. 소위 아는 Mysql 나 오라클, 몽고비디 등이 있습니다. 데이터베이스 관리 시스템은 1960년대에 개발되어 현재까지도 꾸준히 진화를 거듭하고 발전되고 있습니다. 사용하는 데이터 모델에 따라 4세대로 나눌수 있습니다. 1세대인 네트워크 DBMS 2세대인 관계 DBMS 3세대인 객체지향 객체관계 DBMS 4세대인 NoSQL, NewSQL DBMS (데이터 모델이란? 데이터를 데이터베이스에 저장하는 구조를..

자바스크립트는 Java, Python 처럼 객체지향언어(Object-Oriented Programming, OOP)입니다. 객체지향이란 프로그램을 그저 데이터와 처리방법으로 나누는게 아니고, 프로그램을 다수의 "객체"로 만들고, 이들이 서로 상호작용을 통해 만들어지는 방식입니다. 예를 들어 자동차가 있다고 하면 자동차의 바퀴, 엔진, 도어 등을 객체라고 할 수 있습니다. 이 글은 프로토타입에 관한 글 이므로 객체 지향에 대해선 이 정도만 알고 가겠습니다. 하지만 클래스가 존재하는 Java와는 달리 자바스크립트(이하 JS)에는 클래스라는 개념이 없습니다. 대신 JS에는 프로토타입이라는 개념이 존재합니다. 이 때문에 JS가 프로토타입 기반의 객체지향 언어라고 불리는 이유입니다. ECMA6에서 클래스 문법이 ..

데이터베이스의 가장 원초적인 목적은 데이터를 수집하는 것입니다. 내가 필요한 데이터를 수집하기 위해선 먼저 수집 대상이 되는 데이터의 유형을 파악하고 있어야 합니다. 일반적으로 데이터는 형태에 따라 정형 데이터, 반정형 데이터, 비정형 데이터로 분류할 수 있습니다. 정형 데이터 정형데이터(structured data)는 이름 그대로 구조화된 데이터 입니다. 즉 미리 구조를 정하여 정해진 구조에 따라 저장되는 데이터입니다. 흔히 관계 데이터베이스의 테이블이 담고 있는 데이터들이 정형데이터입니다. 반정형 데이터 반정형 데이터(semi-structured data)는 정형 데이터처럼 구조에 따라 저장되지만 데이터 안에 구조에 대한 설명이 함께 포함되어 있습니다. 따라서 데이터 내용에 대한 설명, 즉 구조를 파..

우리는 현대사회에서 데이터와 정보라는 단어를 많이 사용하고 실제로 이를 사용하고 있습니다. 현대사회에서 데이터와 정보를 상당히 중요한 요소로 취급되고 있습니다. 우리는 데이터와 정보를 같은 의미로 많이 사용하고 있는데, 데이터와 정보를 엄연히 다릅니다. 둘의 정의를 살펴보면, 데이터 : 현실 세계에서 단순히 관찰하거나 측정하여 수집한 사실이나 값 정보 : 데이터를 의사결정에 유용하게 활용할 수 있도록 처리하여 체계적으로 조직한 결과물 입니다. 쉽게 비유하자면 데이터 : 목장에서 막 짠 우유(원유) 정보 : 목장에서 짠 우유를 가공하여 팩에 담은 우유 라고 볼수 있습니다. 좋은 우유를 얻으려면 품질 좋은 원유를 확보해야하는 것처럼, 가치 있는 정보를 얻으려면 현재 상황을 정확히 관찰하고 측정하여 의미있는 ..

회사에 인턴으로 입사를 하고, 대표님께서 과제 하나를 주셨습니다. 자바스크립트로 간단한 계산기를 만드는 것이였습니다. 어렵지 않게 구현을 하였고, 대표님께 보여드렸습니다. 계산기 기능 자체에는 문제가 전혀없었으나.. 계산기를 구현한 코드를 보시고는 이런 말을 하셨습니다. 아직도 정확히 기억납니다. 심지어 말투까지도 기억이 납니다. "코드에 철학이 담겨 있지 않아" ※처음에 제가 구현했던 코드입니다. 코드가 너무 길어 링크로 대체합니다. 얼핏보면 가독성도 있고 나름대로 함수화도 시켜서 문제가 없어 보일수 있습니다. 하지만 만약 계산기에 나머지를 구해주는 % 기능을 추가해주고 싶다면 계산 관련한 로직으로 들어가서 내부를 뜯어고쳐야 합니다. 물론 계산기 관련 코드도 복잡하고 길지 않아서 문제가 되지 않지만 여..

Express는 기존 Node.js 코드의 가독성과 확장성이 많이 떨어진다고 생각하여 만들어진 웹 서버 프레임워크입니다. Express는 http 모듈의 요청과 응답 객체에 추가 기능들을 부여했습니다. 또 라우터로 코드를 분리하기 쉬워 유지보수 또한 용이합니다. Express 외에도 koa나 hapi 같은 웹 서버 프레임워크가 있지만 다음 사진과 같이 Express가 압도적으로 인기가 많습니다. 물론 사용자가 많다고 항상 좋은건 아니지만, 사용자가 많은 것에는 이유가 있습니다. 사용자가 많을 수록 버그가 적고, 기능 추가나 유지보수도 활발이 되기 때문입니다. Express-generator는 Express 환경을 간단하게 구축해주는 npm입니다. 따라서 사용하면 쉽게 Node.js 개발을 할수 있습니다...

bcrypt란? 웹 페이지를 구현할 때 보안은 가장 기본적으로 수행되어야 할 요소입니다. 비밀번호를 텍스트 그대로 데이터 베이스에 저장해 관리하는 것은 해커에게 대놓고 데이터를 주는 것과 다름 없습니다. 이를 방지하고자 비밀번호를 암호화 하는 것이 bcrypt 모듈입니다. bcrypt는 단방향 해시 함수를 이용한 모듈로써 Salt 라는 개념을 사용합니다. Salt 라는 값과 해시된 비밀번호를 합쳐 데이터베이스에 저장하게 되는데 이렇게 하면, 만약 "1234" 같은 비밀번호를 해시함수에 넣었을때 항상 다른 값의 Salt 값과 비밀번호가 합쳐서 해커들이 비밀번호를 찾는데 있어 더욱 힘들게 만듭니다. 사용 방법 npm i bcrypt를 수행합니다. const bcrypt = require('bcrypt'); ..