함께 성장하는 프로독학러

안녕하세요, 프로독학러 입니다. 이번 포스팅에서는 지금까지 만든 어플리케이션의 성능을 개선해 보도록 하겠습니다. *본 튜토리얼은 Velopert 님의 'React.js Codelab 2016' 을 기반으로 되었습니다.(여러 모듈들의 버전업에 따라 작성방법이 조금씩 달라진 코드를 버전에 맞게 수정하고, 제가 튜토리얼을 따라함에 있어 이해가 쉽지 않았던 부분에 설명을 추가하는 방식으로 진행합니다.)* Velopert 님의 원본 튜토리얼을 보고싶으신 분들은 아래의 링크를 참고해 주세요. 1. 성능 개선 현재 모든 기능을 구현이 완료된 상태입니다. 하지만 테스트를 하면서 어플리케이션이 조금 버벅거린다는 느낌을 받진 않으셨나요?아직 느끼지 못하셨을 수도 있습니다. 그렇다면 스크롤을 마지막 메모가 로딩될 때까지 내..

안녕하세요, 프로독학러 입니다. 이번 포스팅에서는 추가적인 기능인 별점주기, 담벼락 기능, 유저 검색 기능을 구현해 보도록 하겠습니다.(담벼락은 특정유저가 작성한 글만을 보여주는 페이지를 의미합니다) *본 튜토리얼은 Velopert 님의 'React.js Codelab 2016' 을 기반으로 되었습니다.(여러 모듈들의 버전업에 따라 작성방법이 조금씩 달라진 코드를 버전에 맞게 수정하고, 제가 튜토리얼을 따라함에 있어 이해가 쉽지 않았던 부분에 설명을 추가하는 방식으로 진행합니다.)* Velopert 님의 원본 튜토리얼을 보고싶으신 분들은 아래의 링크를 참고해 주세요. 1. 별점 기능 별점 기능은 마음에 드는 메모에 별점을 주거나 빼는 기능입니다. 별점은 최대 한 번 줄 수 있으며 준 별점을 다시 회수 할..

안녕하세요, 프로독학러 입니다. 이번 포스팅에서는 메모에 관련된 기능들 중 Update 와 Delete 를 구현해 보도록 하겠습니다.메모의 기능들을 CRUD 라고도 하는데요, 이는 Create, Retrieve, Update, Delete 의 줄임말으로, 쓰기, 읽기, 수정하기, 삭제하기입니다.(이 중 셋, 네 번째인 Update, Delete 를 구현하도록 하겠습니다) *본 튜토리얼은 Velopert 님의 'React.js Codelab 2016' 을 기반으로 되었습니다.(여러 모듈들의 버전업에 따라 작성방법이 조금씩 달라진 코드를 버전에 맞게 수정하고, 제가 튜토리얼을 따라함에 있어 이해가 쉽지 않았던 부분에 설명을 추가하는 방식으로 진행합니다.)* Velopert 님의 원본 튜토리얼을 보고싶으신 분..

안녕하세요, 프로독학러 입니다. 이번 포스팅에서는 저번 포스팅에 이어 인증(로그인, 로그아웃, 로그인 확인)을 구현해보도록 하겠습니다.(인증에는 회원가입, 로그인, 로그아웃, 로그인 확인의 4가지 기능이 있습니다) *본 튜토리얼은 Velopert 님의 'React.js Codelab 2016' 을 기반으로 되었습니다.(여러 모듈들의 버전업에 따라 작성방법이 조금씩 달라진 코드를 버전에 맞게 수정하고, 제가 튜토리얼을 따라함에 있어 이해가 쉽지 않았던 부분에 설명을 추가하는 방식으로 진행합니다.)* Velopert 님의 원본 튜토리얼을 보고싶으신 분들은 아래의 링크를 참고해 주세요. 0. intro - 쿠키와 세션 인증 기능을 구현하는데 있어서 중요한 개념은 쿠키와 세션입니다.간단히 두 개념이 어떤차이가 ..

안녕하세요, 프로독학러 입니다. 이번 포스팅에서는 인증의 기능 중 회원가입을 구현해 보도록 하겠습니다. (인증에는 회원가입, 로그인, 로그아웃, 로그인 확인의 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) 입니..

안녕하세요, 프로독학러 입니다. 이번 포스팅에서는 Node.js 를 이해하는데 필수적인 개념인 콜백함수와 동기, 비동기적 처리에 대해서 알아보도록 하겠습니다. 저번 포스팅에서 Node.js 의 특징 중 첫 번째가 무엇이었는지 기억하시나요? 그것은 바로 '비동기적 I/O 처리, 이벤트 위주' 였습니다. * I/O 는 input, output 을 의미합니다. 동기 / 비동기 비동기적 I/O 처리. 저번 포스팅에서 Node.js 의 특징에 대해서 설명하면서 간단히 설명했지만 아직 감이 안 잡히시는 분들이 많을 것입니다. 비동기의 반댓말은 동기 입니다. 이를 영어로 표현하면 다음과 같습니다. Synchronous (동기) ASynchronous (비동기) 보통 프로그래밍에서 코드의 실행은 작성된 코드의 위에서 ..