목록분류 전체보기 (114)
함께 성장하는 프로독학러
안녕하세요, 프로독학러 입니다. 이번 포스팅에서는 인증의 기능 중 회원가입을 구현해 보도록 하겠습니다. (인증에는 회원가입, 로그인, 로그아웃, 로그인 확인의 4가지 기능이 있습니다) *본 튜토리얼은 Velopert 님의 'React.js Codelab 2016' 을 기반으로 되었습니다.(여러 모듈들의 버전업에 따라 작성방법이 조금씩 달라진 코드를 버전에 맞게 수정하고, 제가 튜토리얼을 따라함에 있어 이해가 쉽지 않았던 부분에 설명을 추가하는 방식으로 진행합니다.)* Velopert 님의 원본 튜토리얼을 보고싶으신 분들은 아래의 링크를 참고해 주세요. 1. BACK-END 환경설정 기능을 구현하기에 앞서 BACK-END 에 필요한 파일을 먼저 생성해 보도록 하겠습니다.account 라우터, api 루트 ..
안녕하세요, 프로독학러 입니다. 저번 포스팅에서는 Memo app 을 제작하기 위한 기본 개념들에 대해서 알아보았는데요, 이번 포스팅에서는 설치부터 본격적으로 진행해 보도록 하겠습니다. *본 튜토리얼은 Velopert 님의 'React.js Codelab 2016' 을 기반으로 되었습니다.(여러 모듈들의 버전업에 따라 작성방법이 조금씩 달라진 코드를 버전에 맞게 수정하고, 제가 튜토리얼을 따라함에 있어 이해가 쉽지 않았던 부분에 설명을 추가하는 방식으로 진행합니다.)* Velopert 님의 원본 튜토리얼을 보고싶으신 분들은 아래의 링크를 참고해 주세요. 1. React.js 설치 우리가 만들게 될 Memo app 은 React.js 를 기반으로 한 SPA(Single Page Application) 입니..
안녕하세요, 프로독학러 입니다. 이번에 진행할 튜토리얼은 'Memo 어플리케이션 만들기' 입니다. 1. intro 본 튜토리얼은 Velopert 님의 'React.js Codelab 2016' 을 기반으로 작성될 예정입니다.여러 모듈들의 버전업에 따라 작성방법이 조금씩 달라진 코드를 버전에 맞게 수정하고, 제가 튜토리얼을 따라함에 있어 이해가 쉽지 않았던 부분에 설명을 추가하는 방식으로 진행할 예정입니다.* Velopert 님의 원본 튜토리얼을 보고싶으신 분들은 아래의 링크를 참고해 주세요. 2. require Memo 어플리케이션은 여러가지 언어들을 이용하여 만드는 하나의 서비스입니다. 아래의 리스트 중 모르는 언어나 부족한 부분이 있다면 해당 언어를 숙지하신 후 튜토리얼을 따라오시는 것도 좋습니다. ..
안녕하세요, 프로독학러 입니다. 지난 6월 12일에 꼼이가 1차 접종을 하고 왔습니다. "반려묘의 건강을 위해서라면 꼭 실시 해 주어야하는 접종!" 고양이 접종에 대해 궁금하신 분들이 많을 거라고 생각하는데요, 저도 병원에서 이렇다 저렇다 설명을 들었지만 그자리에서 완벽하게 다 이해하지 못하고 포스팅을 위해 찾아보면서 조금 더 잘 알게 되었습니다. 고양이를 기르시는 분이나 기를 예정인 분들께 이 포스팅이 도움이 되었으면 좋겠네요. 1. 고양이 접종 시기 고양이의 접종시기는 7~8주 이후 부터가 적당하다고 합니다. 개월수로 따지자면 두 달이 된 이후에 접종을 시작하는 것이 좋다는 얘기겠지요. 꼼이의 경우는 생일이 4월 12일 이었으니까 8주가 조금 지난 시점(6월 12일)에 접종을 시작했습니다. 그리고 접..
안녕하세요, 프로독학러 입니다. 이번 포스팅에서는 외부 인터넷에서 로컬 개발 환경으로 접근할 수 있도록 해주는 터널링 도구인 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 위..