목록2018/06 (25)
함께 성장하는 프로독학러
안녕하세요, 프로독학러 입니다. 이번 포스팅에서는 외부 인터넷에서 로컬 개발 환경으로 접근할 수 있도록 해주는 터널링 도구인 ngrok 에 대해서 알아보도록 하겠습니다. 개발을 진행하다보면 개발 환경(localhost:PORT_NUMBER)을 외부에서 확인해야하는 상황이 생깁니다. 모바일 환경에서의 테스트나 클라이언트에게 보여주는 등의 상황 말이죠. 저는 포트포워딩을 통하여 외부환경에서 로컬 개발 환경으로 접속하려고 시도했었는데요, lg u+ 공유기 문제로 포트포워딩이 제대로 되지 않더군요.그러던 중 'ngrok' 이라는 터널링 도구를 알게 되었고, 간단하게 이를 해결할 수 있게 되었습니다. 설치 설치는 ngrok 홈페이지에서 본인의 OS에 맞는 버전을 다운받아 설치하면 됩니다. 윈도우의 경우에는 .zi..
안녕하세요, 프로독학러 입니다. 이번 포스팅에서는 어플리케이션을 개발할 때 유용하게 쓰이는 Postman 에 대해서 알아보도록 하겠습니다. Postman 을 활용하면 HTTP 메소드를 활용해 데이터를 주고 받을때 어떤 데이터가 오가는지 쉽게 확인할 수 있습니다. 이를 통해 작성한 API 가 제대로 작동하는지 확인 할 수 있습니다. 설치 Postman 은 크롬 확장프로그램으로, 크롬 웹스토어에서 설치 가능합니다. 링크 웹 스토어에 들어가 'postman' 을 검색해서 나온 결과 중 Postman Interceptor 를 찾아 설치합니다. 저의 경우에는 이미 설치를 했기 때문에 'CHROME 에 추가' 대신에 평가하기가 뜨지만 설치를 진행하지 않으신 분들은 'CHROME 에 추가' 버튼을 통해 설치해 주세요..
안녕하세요, 프로독학러 입니다. 이번 포스팅에서는 비밀번호 보안 모듈 중 하나인 pbkdf2-password 에 대해서 알아보도록 하겠습니다. intro 여러분이 어플리케이션을 운영한다고 가정해봅시다. 유저들로부터 회원가입을 받게 되면 서버에 유저들의 정보를 저장해 둡니다.그리고 회원가입을 한 유저가 로그인을 시도하면 여러분의 어플리케이션은 서버에서 유저의 정보를 조회해 로그인을 시킬 것입니다. 그렇다면 어떤 방식으로 로그인 요청이 유효한지 확인할 수 있을까요? 유저는 로그인은 위하여 유저네임(아이디)와 비밀번호를 입력하고 어플리케이션에 로그인을 요청할 것입니다.그럼 어플리케이션은 유저가 입력한 유저네임으로 서버에서 데이터를 조회합니다.유저가 입력한 유저네임이 서버에 저장되어 있지 않다면 로그인 요청을 ..
안녕하세요, 프로독학러 입니다. 이번 포스팅에서는 mongoose 에 대해서 알아보도록 하겠습니다. *이 포스팅은 velopert 님의 Node.js 강좌 11편을 복습한 내용입니다. velopert 님의 원본 포스팅을 보고싶으신 분들은 아래의 링크를 참고해 주세요.[Node.JS] 강좌 11편: Express와 Mongoose를 통해 MongoDB와 연동하여 RESTful API 만들기 - velopert mongoose 는 Node.js 환경에서 MongoDB 에 접근하여 데이터베이스를 조회 및 수정, 삭제 등을 가능하게 해 주는 모듈입니다. mongoose 는 Node.js 와 MongoDB 를 연결해 주는 브릿지 같은 역할을 수행하므로, 먼저 MongoDB 가 설치되어 있어야 사용 가능합니다.*M..
안녕하세요, 프로독학러 입니다. 이번 포스팅에서는 Node.js 를 이용해 웹 어플리케이션을 만드는 것을 좀 더 편하고 빠르게 할 수 있도록 도와주는 프레임워크인 Express 에 대해서 알아보도록 하겠습니다. 1. Express 소개 Express 는 Node.js 를 위한 빠르고 개방적인 간결한 웹 프레임워크from - expressjs.com/ko Express 는 웹 및 모바일 어플리케이션을 위한 일련의 강력한 기능을 제공하는 간결하고 유연한 Node.js 웹 어플리케이션 프레임워크입니다. Express 를 사용하지 않고도 웹 어플리케이션을 만들수는 있지만, 일일히 다 구현하려면 상당히 복잡합니다. 일일히 다 신경쓰기 복잡하고 귀찮은 것들을 Node.js 의 웹 프레임워크를 이용하면 쉽게 구현할 ..
안녕하세요, 프로독학러 입니다. 이번 포스팅에서는 CSS 애니메이션과 @keyframes 에 대해서 알아보도록 하겠습니다. 1. @keyframes @keyframes 는 CSS 애니메이션에서 구간을 정하고 각 구간별로 어떤 스타일을 적용시킬지 정하는 문법입니다. @keyframes 를 사용하기 위해선 세 가지가 필요합니다. animation-name : 사용자가 직접 지정한 이름, @keyframes 가 적용될 애니메이션의 이름 스테이지 : from - to 로 0~100% 의 구간 CSS 스타일 : 각 스테이지(구간)에 적용시킬 스타일 코드를 통해 살펴보도록 하겠습니다. 12345678@keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; }}cs 위..
안녕하세요, 프로독학러 입니다. 이번 포스팅에서는 jQuery 의 scroll 이벤트를 통하여 웹 어플리케이션에서 무한스크롤링을 구현하는 방법에 대해서 알아보도록 하겠습니다. 무한스크롤을 구현하려면 window 객체에 scroll 이벤트를 지정해 주어야 합니다. $(window).scroll(이벤트가 발생하면 실행될 함수) 위와 같은 방식으로 말이죠. 1. window 객체와 document 객체의 차이 이해 무한 스크롤링을 구현하기 위해서는 window 와 document 가 어떻게 다른지 이해해야 합니다. 네이버 홈페이지를 통해 window 와 document 가 어떻게 다른지 살펴보도록 하겠습니다. 크롬 브라우저를 통해 네이버에 접속한 화면입니다. window 는 브라우저의 창 자체를 의미합니다. ..
안녕하세요, 프로독학러 입니다. 이번 포스팅에서는 문자를 base64로 인코드, 디코드 하는 메소드인 btoa(), atob() 에 대해서 알아보도록 하겠습니다. base64 가 무엇인지 궁금하신 분은 아래의 위키백과 링크를 참조해 주세요.위키백과 - 베이스64 베이스64 는 간단히 말하자면 64진법 데이터입니다. Base64 인코딩은 텍스트 데이터를 처리하도록 설계된 미디어를 통해 전송되거나 저장되야 하는 바이너리 데이터를 인코딩 해야할 때 일반적으로 사용됩니다.Base64는 데이터가 전송중에 수정되지 않고 그대로 전송되는 것을 보장합니다.Base64는 일반적으로 MIME을 통한 전자 메일 또는 복잡한 데이터를 XML로 저장하는 등 여러 가지 응용 프로그램에서 사용됩니다. 자바스크립트에서 문자열을 ba..
안녕하세요, 프로독학러 입니다. 이번 포스팅에서는 배열에 원소를 추가 및 제거하는 네 가지 메소드에 대해서 알아보도록 하겠습니다. 알아볼 메소드는 unshift(), push(), shift(), pop() 메소드 들 입니다. 이들의 역할을 그림을 통해서 직관적으로 알아보도록 하겠습니다. [ item1, item2, item3 ] 과 같은 배열이 있다고 생각해 봅시다.이 배열에서 원소를 맨 앞에 추가하거나, 맨뒤의 원소를 제거하려면 어떤 메소드를 사용하면 좋을까요? 위의 그림과 같이 맨 앞의 원소를 추가하는 메소드는 unshift 메소드이고, 맨 뒤에 원소를 추가하는 메소드는 push 메소드 입니다.원소를 제거하는 경우에는 제거 대상이 맨 앞의 원소일 경우 shift, 맨 뒤의 원소일 경우에는 pop 메..
안녕하세요, 프로독학러입니다. 오늘은 6월 13일, 2018 지방선거일입니다. 모두들 투표는 하셨나요?투표시간은 오전 6시 부터 오후 6시 까지 이니 아직 투표를 하지 않으신 분이라면 투표시간이 종료되기 전에 꼭 투표해주세요! 그리고 투표를 했다는 인증샷을 찍는것을 잊지말아주세요!선거에 참여했다는 사진으로 추첨을 통해 최대 500만원의 상금을 받을 수 있는 '국민투표로또' 에 참여할 수 있으니까요. '국민투표로또' 는 유시민 작가가 지난 4.13 총선(2106) 이후 '썰전'을 통해 투표율을 늘리기 위한 방법으로 제안했던 방법 중 하나를 실제 서비스로 구현한 것입니다.작년 19대 대선 때 성공적으로 실시됐고, 이번 지방선거에도 투표를 독려하기 위해 개최된다고 합니다. '국민투표로또' 는 후원자들의 후원금..