설모의 기록

자바스크립트가 기반인 여러 프레임워크를 이용해 웹 페이지를 구현할 때 정규식이 필요할 때가 많습니다. 예를 들어, 회원가입할 때 이메일이 형식이 제대로 맞는지, 전화번호가 제대로 입력했는지 등등 유효성을 체크할 때 정규식을 사용합니다. 아래의 정규식 목록은 추후 다른 정규식을 사용해 볼 때마다 업데이트 하겠습니다. 1. 이메일 정규식 12let emailRegExp = /^[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*.[a-zA-Z]{2,3}$/i;emailRegExp.test("hyeona@naver.com"); // 정규식에 해당하면 true, 맞지 않으면 false 반환 2. 휴대폰 번호 정규식 123let phoneRegExp1 ..

생명주기? 인스턴스의 상태에 따라서 호출할 수 있는 속성들을 생명주기(life cycle) 이라고 합니다. 그 속성마다 개발자가 추가한 커스텀 로직을 라이프 사이클 훅(life cycle hook) 이라고 합니다. 뷰 인스턴스도 객체이기 때문에 생명주기를 가집니다. 속성의 종류로는 beforeCreate, created, beforeMount, mounted, beforeUpdate, updated, beforeDestroy, destroyed 로 총 8개입니다. 아래에서 하나하나 살펴볼까요? 1. beforeCreate> 인스턴스가 생성되고 나서 가장 처음으로 실행되는 라이프 사이클 단계입니다. 이 때는 뷰 인스턴스의 data 와 methods 속성이 정의되어 있지않고 화면 요소(ex. dom) 에도 ..

Vue? 웹개발을 목표로 하시는 분이라면 뷰제이에스에 대해 한번쯤은 들어보셨을 겁니다. 유명한 자바스크립트의 프레임워크는 대표적으로 리액트와 앵귤러가 있는데요. 저도 잠깐 리액트와 앵귤러2는 공부했었는데 두 프레임워크를 시작하기 위해 필요한 사전 개발 지식들이 많아서 공부하다 중지했었습니다. 자바스크립트를 잘 모르거나 개발을 시작한지 얼마 안됐다면 두 프레임워크는 배우기엔 진입장벽이 다소 높습니다. 더군다나 앵귤러2는 타입스크립트 기반이기 때문에 자바스크립트보다 더 높은 이해수준을 요구합니다. 이러한 요인이 vue.js 를 더 유명해지게 만들었는데요. vue.js 는 다른 자바스크립트 프레임워크에 비해 비전공자들도 배우기 쉽게 개발할 수 있도록 만들어졌다고 합니다. 뷰는 앵귤러의 데이터 바인딩 특성과 리..

변수 선언의 방법 어느 언어로 개발을 하던지 변수라는 것을 사용합니다. 각 언어마다 변수를 선언하는 방법이 있습니다. 자바스크립트는 ES6 부터 let, const 라는 키워드가 등장해 var 를 포함해 총 3가지 방법으로 변수를 선언할 수 있습니다. 하나하나 알아볼까요? 자바스크립트에서의 변수의 유효범위 자바에서는 변수의 유효범위가 블록단위입니다. 그렇기 때문에 함수 반복문 등 블록안에서 생성한 변수는 그 블록이 끝난 이후에는 사용할 수가 없습니다. 자바스크립트는 자바와는 다르게 함수가 유효범위가 됩니다. 따라서 반복문 안에서 생성한 변수는 함수가 끝나지 않았다면 반복문 밖에서도 사용할 수 있습니다. 변수의 유효범위가 넓다는 것은 마냥 좋은 것만은 아닙니다. 아래의 예제를 볼까요? let 과 var 의..

서버와 클라이언트 간 통신할 때 식별하기 어플리케이션 또는 웹페이지를 만들 때 클라이언트와 서버가 통신을 해야하는 경우가 있습니다. 이 때, 어떤 사용자가 서버에게 요청을 걸었는지 알기 위해 사용자마다 식별할 수 있는 정보를 서버에게 넘겨 서버가 사용자에 맞는 정보를 보내주어야 합니다. 그렇게 하기위해 로그인을 하는 것이겠죠? 기본적인 웹페이지 구현에서는 클라이언트와 서버가 각각 쿠키와 세션에 정보를 저장하고, 통신할 때 정보를 주고 받습니다. 사용자가 로그인을 하면 서버에서 세션ID 를 생성해 클라이언트에게 보내주고, 클라이언트는 그 세션ID 를 쿠키에 저장합니다. 쿠키는 서버와 통신을 할 때 request header에 자동으로 넣어져 서버에 전송됩니다. 서버는 클라이언트가 요청을 하면 그 요청의 h..

이번 포스트는 이메일로 메일을 보낼 때 사용하는 nodemailer 모듈에 사용법에 대해 알아보겠습니다. 보통 이메일 인증할 때나 비밀번호 찾기 기능을 구현할 때 이메일로 비밀번호를 보냅니다. node.js 에서는 nodemailer 라는 모듈을 사용해 메일을 보낼 수 있습니다. 우선 모듈부터 깔아볼까요?$ npm install nodemailer 이후, 파일 상단에서 아래와 같이 모듈을 선언합니다.const nodemailer = require('nodemailer'); 이제 메일을 보내볼까요? 저는 구글계정을 사용해 메일을 보내는 것을 예시로 사용하겠습니다. 구글계정을 사용해 nodemailer 모듈을 사용하려고 할 때는 설정해야할 것이 있습니다. 이 모듈을 사용하기 위해서는 2단계 인증 을 허용하고..

이번에는 비동기적인 코드에서 중첩된 콜백메소드 폭포를 처리해주는 async 모듈에 대해 알아보겠습니다. 아래의 예제는 node.js 프로젝트에서의 예시 코드입니다. Async 모듈 먼저, async 모듈을 사용하지 않고 중첩된 콜백메소드 코드를 보겠습니다. 1234567callback1 (function () { callback2 (function () { callback3 (function () { console.log('세 개의 콜백메소드 수행'); }); });}); 콜백메소드를 3개만 중첩해 놓은 것인데도 코드를 읽기에 매우 불편합니다. 코드가 점차 커지면 이러한 불편함은 더욱 커질 것입니다. 이러한 비동기 처리를 보기 쉽게 처리하는 모듈이 Async 입니다. 우선 Async 모듈을 사용하려는 프..

회원정보를 관리하는 어플리케이션이나 웹페이지를 구현할 때 가장 중요한 것은 보안입니다. 보안 중에서도 가장 중요한 것이 사용자의 비밀번호를 암호화해 로그인을 함부로 할 수 없도록 하는 것입니다. 비밀번호를 텍스트 그대로 데이터베이스에 저장해 관리하는 것은 해커에게 "가져가라~" 라고 말하는 것과 같습니다. 오늘은 그 중에서도 비밀번호를 암호화해 저장하기 위해 만들어진 bcrypt 에 대해 알아보겠습니다. 아래 코드들은 node.js 를 이용해 개발하는 프로젝트에서의 예시입니다. bcrypt 모듈 종류는 bcrypt 모듈, bcrypt-nodejs 모듈 그리고 bcryptjs 모듈이 있습니다. 각자 프로젝트에 맞게 설치해주시면 됩니다. 저는 bcrypt-nodejs 모듈을 사용하겠습니다. 모듈을 적용하려는..

ES5 에서는 key를 value 에 매핑해야하는 유일한 데이터 구조는 Object 였습니다. 그래서 Object 를 아래의 예제와 같이 사용해왔습니다.let obj = {key: "value", a: 1} console.log(obj.a); // 1 console.log(obj['key']); // "value"let base = {a:1,b:2}; let obj = Object.create(base); obj[c] = 3; for (prop in obj) { console.log(prop); } // a // b // c // obj 에 존재하는 프로퍼티들을 돌면서 출력한다. for (prop in obj) { if (obj.hasOwnProperty(prop)) { console.log(prop) ..

ES5 에서 원시 타입(primitive type)은 6가지가 있었죠. 바로 boolean, number, string, null, undefined, object 입니다. 이제 ES6 에서부터 Symbol 이라는 타입이 하나 추가되었습니다. 간단한 예제는 아래와 같습니다. 언뜻 보면 'String 아니야?' 라고 할 수 있겠지만 String 타입이 아니라 Symbol 타입입니다. Symbol 타입을 사용하는 이유는 변수나 메소드같은 것들의 이름을 충돌 없이 프로그래밍 하기 위해서입니다. 간단한 예를 들어보겠습니다. Array.isArray() 메소드가 생기기 이전, 필요에 의해 string 을 반환하는 Array.isArray() 메소드를 구현해 코드에 추가했다고 가정해보겠습니다. 그 이후 boolea..