설모의 기록

Destructuring? 비구조화?? Destructuring 은 ES6 부터 등장한 개념입니다. 기존에 객체를 선언했던 구조를 반대로 사용한다고 이해하시면 좋을 것 같습니다.먼저 코드 예시부터 보겠습니다. let arr = ["1", "2", "3"];기본적인 배열 선언은 위와 같습니다. 1, 2, 3 이라는 데이터에 접근하기 위해서는 arr[0] 이런식으로 접근해야만 했습니다. 하지만 destructuring 을 이용하면 다음과 같은 접근도 가능합니다. // destructuring 이용 X let arr = ["1", "2", "3"]; let first = arr[0]; let second = arr[1]; let third = arr[2]; console.log(first, second, th..

자바스크립트가 기반인 여러 프레임워크를 이용해 웹 페이지를 구현할 때 정규식이 필요할 때가 많습니다. 예를 들어, 회원가입할 때 이메일이 형식이 제대로 맞는지, 전화번호가 제대로 입력했는지 등등 유효성을 체크할 때 정규식을 사용합니다. 아래의 정규식 목록은 추후 다른 정규식을 사용해 볼 때마다 업데이트 하겠습니다. 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 ..

변수 선언의 방법 어느 언어로 개발을 하던지 변수라는 것을 사용합니다. 각 언어마다 변수를 선언하는 방법이 있습니다. 자바스크립트는 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) ..

대학교 유니티 강의를 들을 때 GameManager 스크립트를 만들면서 싱글톤에 대해 살짝 배웠는데, 그때는 중요한지도 모르고 어려워서 넘겼던 개념인데,,회사에 다니면서 직접 싱글톤으로 코드를 구현하다보니 정말 중요한 패턴이라는 것을 꺠달았습니다.싱글톤 패턴은 어떤 특정 클래스의 인스턴스를 단 하나만 생성하는 것입니다. 따라서 동일한 클래스를 이용해 인스턴스를 여러개 생성해도 처음 생성한 인스턴스를 공유하게 되는 것입니다.싱글톤 패턴은 여러 언어에서 사용되지만, 지금은 자바스크립트를 기반으로 설명드리겠습니다.자바스크립트에서 객체를 생성하는 방식은 두가지가 있습니다. 각 방법마다 싱글톤을 구현하는 방법을 설명드리겠습니다. 1. 리터럴 방식리터럴 방식으로 생성을 한다면 그 자체가 싱글톤 패턴입니다. 변수 o..

자바스크립트의 함수는 객체이기 때문에 프로퍼티를 가질 수 있습니다. 이 점을 이용해 함수에 프로퍼티를 추가해 결과 값을 캐시하고, 다음 호출 지점에 그 연산을 반복하지 않고 캐시된 프로퍼티의 값을 반환해주는 패턴을 메모이제이션 패턴이라고 합니다.예를 들어, 파라미터로 양의 정수값을 넣으면 1부터 파라미터 값까지의 합을 구하는 함수를 구현하려고 합니다. 위의 예제처럼 함수를 구현해도 되지만, 만약 addFunc (1) ~ addFunc(10000) 을 모두 구하고 싶다면 굉장히 많은 반복문을 돌아야 합니다. 이럴 떄 메모이제이션 패턴을 이용해 구현을 하면 반복문을 최소화할 수 있습니다. 위의 예제처럼 구현한다면, cache[number - 1] 에 값이 있을 때 그 값을 가져와 number 와 더해준 후 ..