함께 성장하는 프로독학러

안녕하세요, 프로독학러 입니다. 이번 포스팅에서는 프론트앤드에 React.js 를 사용하고, 백앤드에는 Node.js(Express) 를 사용하는 프로젝트의 초기 설정법에 대해서 알아보도록하겠습니다. 사실 본 카테고리의 첫 번째 포스팅에서 리액트 환경을 설정하는 법에 대해 다뤄본 적이 있었는데요, 해당 포스팅에서는 프로젝트를 production 모드로 빌드하고 실제로 서비스하기위한 코드가 빠져있었습니다. (백앤드에 대한 설정도 빠져 있습니다) 따라서 새로운 프로젝트를 빠르게 만들어가면서 알아보도록 하겠습니다. 1. 프로젝트 디렉토리 생성 가장 먼저 해야할 작업은 프로젝트 디렉토리를 생성하는 것입니다. 명령창에서 mkdir 을 이용하여 새로운 디렉토리를 생성하고, cd 를 이용하여 해달 디렉토리에 접근하도..

안녕하세요, 프로독학러입니다. 이번 포스팅에서는 CSS 를 이용하여 어플리케이션 뷰의 header 와 footer 를 스크롤 바와 상관없이 고정시키는 방법에 대해서 알아보도록 하겠습니다. 실습을 위해 codepen.io 에 접속하여 새로운 pen을 만들어 봅시다. 1. HTML 먼저 HTML 영역에 다음과 같이 HTML 태그를 입력해 줍니다. 12345678910111213 This is Header This is Section This is Footer cs 시멘틱 태그를 이용하여 header, section, footer 를 지정했습니다. 현재는 위 그림과 같습니다. 2. CSS style 그럼 header 태그를 CSS 스타일을 이용하여 고정시켜 보겠습니다. 이때 사용하는 스타일은 position ..

안녕하세요, 프로독학러입니다. 이번 포스팅에서는 HTTP 의 요청과 응답의 메시지 구조와, 클라이언트 측에서 요청을 할 때 어떤 method 를 사용함에 따라 요청 메시지가 어떻게 달라지는지에 대해서 알아보도록 하겠습니다. 0. HTTP 요청/응답 메시지와 요청 method 를 이해하기 위해서 먼저 HTTP 가 무엇인지 이해할 필요가 있습니다. HTTP (HyperText Transfer Protocol) 란 HTML 문서와 같은 리소스들을 서버로부터 가져올 수 있도록 해주는 프로토콜(protocol)입니다.여기서 프로토콜이란, 시스템이 다른 시스템과 원할하게 통신할 수 있도록 해주는 통신 규약, 약속이라고 생각하면 됩니다.HTTP 는 가장 성공적인 인터넷 프로토콜이며, 어플리케이션 레벨의 프로토콜로 T..

안녕하세요, 프로독학러 입니다. 프로독학러는 평소에 집에서 공부를 하는 편이지만, 집에서 집중이 되지 않거나 잠시 쉬고 싶을때 동네에 있는 카페를 가기도 합니다.동네에 있는 카페 중 여러분들께 소개시켜 드리고 싶을 카페가 있어 이렇게 포스팅합니다. 먼저 위치는 아래와 같습니다. 조용한 동네였는데 요새는 카페가 많이 생기고 있네요. 카페 시선의 외관은 위 사진과 같습니다.골목에 있는 카페 중 유일하게 간판이 없네요. 작은 입간판과 전면의 통유리에 한자로 시선이라고 적혀있습니다.바깥에 있는 작은 전구가 따뜻한 색으로 불을 밝히고 있네요. OPEN 이라고 적힌 흰 천이 반겨줍니다.안으로 들어가 봅시다. 자리는 위와 같이 네 테이블이 있네요.저는 친구와 함께 유리로 된 테이블에 앉았습니다.카페 전체적인 분위기는..

안녕하세요, 프로독학러 입니다. 이번 포스팅에서는 지금까지 만든 어플리케이션의 성능을 개선해 보도록 하겠습니다. *본 튜토리얼은 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 님의 원본 튜토리얼을 보고싶으신 분..

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

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

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