함께 성장하는 프로독학러

안녕하세요, 프로독학러 입니다. 이번 포스팅에서는 리액트 라우터에 대해서 좀 더 자세히 알아보도록 하겠습니다. * 포스팅의 내용은 Velopert 님의 리액트 라우터 강의를 복습한 내용이므로 Velopert 님의 원본 강의를 듣고싶으신 분들은 아래의 링크를 참조해 주세요. https://velopert.com/3411 0) URL 에서 path 와 qurey string 이란? http://a.com/topic?id=1 위와 같은 url 이 있다고 생각해 봅시다.대부분의 웹 어플리케이션의 url 은 위와 같은 형식으로 이루어 져 있습니다.위의 url 에서 'http://' 은 프로토콜을 의미합니다.프로토콜 뒤에 나오는 'a.com' 을 도메인 이라고 부르고,도메인 다음에 나오는 / 이후의 'topic' ..

안녕하세요, 프로독학러 입니다. 이 카테고리에서는 리액트 라우터(version_4 이상)에 대해서 배워보도록 하겠습니다. 포스팅의 내용은 Velopert 님의 리액트 라우터 강의를 복습한 내용이므로 Velopert 님의 원본 강의를 듣고싶으신 분들은 아래의 링크를 참조해 주세요. https://velopert.com/3411 1) 리액트 라우터의 효용 리액트 라우터는 SPA(Single Page Application)를 리액트를 통해 구현하는데 필요한 라이브러리입니다. SPA 와 반대되는 개념은 전통적인 웹 어플리케이션 입니다.전통적인 웹 어플리케이션은 여러 페이지로 구성되어 있으며, 한 페이지에서 다른 페이지로 이동할 때 페이지 전체를 다시 렌더링 합니다.이런 방식의 전통적인 웹 어플리케이션의 렌더링은..

안녕하세요, 프로독학러 입니다. 이번 포스팅에서는 이미 작성된 Document 를 수정하는 메소드인 update() 메소드에 대해서 알아보도록 하겠습니다. 표현식 update() 메소드의 표현식은 다음과 같습니다. db.COLLECTION_NAME.update( , , ) 첫 번째 파라미터인 query 는 find() 메소드의 query 와 같습니다. update 할 대상을 찾는 것으로, 데이터 타입은 document(객체) 입니다.두 번째 파라미터인 update 는 qurey 를 기준으로 선택된 도큐먼트에 적용할 변동사항입니다. 데이터 타입은 document(객체) 입니다.세 번째 파라미터인 options 는 객체 형식이며 세부 옵션은 다음과 같습니다. (*optional) {upsert : ,mult..

안녕하세요, 프로독학러 입니다. 이번 포스팅에서는 저번 포스팅에서 알아본 find() 메소드를 통해 조회한 도큐먼트들을 정렬, 제한, 건너뛰는 메소드에 대해서 알아보도록 하겠습니다.저번 포스팅에서 언급한 바와 같이 find() 메소드의 리턴값은 cursor 객체 입니다.cursor 객체는 find() 메소드의 query 와 projection 을 통해 나온 도큐먼트들을 담고있는 객체로, sort(), limit(), skip() 메소드를 가지고 있습니다.sort(), limit(), skip() 메소드에 대해서 차례로 알아보도록 합시다.*find() 메소드에 익숙하지 않으신 분들은 아래의 링크를 참조해 주세요. 가장 먼저, sort(), limit(), skip() 메소드를 연습하기 위한 샘플 도큐먼트들..

안녕하세요, 프로독학러 입니다. 이번 포스팅에서는 Document 를 검색하는 find() 메소드에 대해서 자세히 알아보도록 하겠습니다. Document 를 조회하는 find() 메소드 find() 메소드의 표현식은 다음과 같습니다. db.COLLECTION_NAME.find(query, projection) find() 메소드의 인자로 query 와 projection 이 들어옵니다.두 값 모드 Optional 파라메터입니다.query 의 데이터 타입은 document(객체) 입니다. 이는 다큐먼트를 조회하는 기준을 정하는 파라메터입니다. 이 값이 생략되거나 비어있는 객체 {} 를 전달하면 해당 컬렉션의 모든 다큐먼트들을 조회합니다.projection 의 데이터 타입 역시 document 로, 조회한 ..

안녕하세요, 프로독학러 입니다. 이번 포스팅에서는 MongoDB 의 데이터를 모델링하는 방법에 대해 간단히 살펴보고, MongoDB Shell 안에서 Database, Collection, Document 를 생성하고 제거하는 명령어에 대해서 알아보겠습니다. 데이터 모델링 MongoDB 의 Document 를 모델링 하는 방법에 대해서 알아보겠습니다. 이해를 돕기위해 인스타그램을 위한 데이터베이스를 모델링한다고 가정해 봅시다. 인스타그램에서 게시물을 올릴 때 필요한 정보는 다음과 같습니다. 게시글에는 사진, 설명, 작성자, 작성일이 포함되어 있다.게시글에는 0개 이상의 해쉬태그를 가질 수 있다.게시글에 덧글을 달 수 있다. 만약 관계형 데이터베이스를 이용한다면 table 은 총 세개가 만들어 져야 할 것..

안녕하세요, 프로독학러입니다. 이번 포스팅에서는 저번 포스팅에 이어 Counter 어플리케이션을 만들어보도록 하겠습니다. *velopert 님의 Youtube 강의를 정리한 내용이라고 보시면 될 것 같습니다. (5강) 리덕스를 이용한 상태관리 프로젝트의 순서는 다음과 같다고 했습니다. 1. 액션 타입 생성 (action 은 객체이며, type 속성을 반드시 가지고 있어야 한다.)2. 액션 생성 함수 정의 (액션 생성 함수를 통하여 action 객체를 빠르게 만들 수 있도록 도와줌)3. 실질적으로 변화를 일으키는 함수인 리듀서 정의 (인자로는 prevState와 action이 들어옴, 들어오는 action 객체의 타입에 따라 어떤 변화를 일으킬지 정의)4. 스토어 생성 (3에서 만든 리듀서를 포함하여 cr..

안녕하세요, 프로독학러입니다. 이번 포스팅에서는 저번 포스팅에서 알아본 Redux 를 이용해 Counter 어플리케이션을 만들어보도록 하겠습니다. *velopert 님의 Youtube 강의를 정리한 내용이라고 보시면 될 것 같습니다. (5강) 먼저 우리가 만들 어플리케이션의 모습을 보고 어떻게 만들어야 할 지 구상해 보도록 하겠습니다. 간단한 모양새를 하고 있습니다.가장 윗 부분에 숫자가 나와 있습니다.그리고 아래의 +버튼을 누르면 숫자가 1씩 증가하고, -버튼을 누르면 1씩 감소합니다.그리고 Randomize Color 버튼을 누르면 배경색이 랜덤하게 바뀝니다. 위의 그림처럼 말이죠. 그럼 만들어야 할 컴포넌트를 구성해 보도록 합시다. 가장 큰 컴포넌트는 모든 컴포넌트를 렌더링하는 Counter 컴포넌..

안녕하세요, 프로독학러 입니다. 이번 포스팅에서는 리덕스를 사용하는 이유와 리덕스의 개념을 정리해 보겠습니다. * 이번 포스팅의 내용은 velopert 님의 '리덕스 왜 쓸까?' 포스팅을 정리한 내용입니다. 리덕스를 이해하기 위해서 먼저 리덕스를 사용하지 않는 환경의 단점을 먼저 파악해 보겠습니다. 간단한 예를 통해 살펴보겠습니다. 만약 다음 그림과 같이 세 개의 컴포넌트가 있다고 합시다.A 컴포넌트는 B 와 C 컴포넌트의 부모 컴포넌트입니다. B 컴포넌트는 A 의 상태를 변경하는 함수를 실행하는 컴포넌트입니다. (A의 상태를 변경하는 메소드 _increase 를 increNum 프롭스로 전달받습니다.) C 컴포넌트는 A 컴포넌트의 상태(state)를 렌더링하는 컴포넌트입니다.(A의 상태를 numValu..

안녕하세요, 프로독학러 입니다. 이번 포스팅 이후부터는 React 의 Redux 에 대해서 알아가 볼 예정입니다.따라서 이번 포스팅에서는 Redux 를 위한 세팅 및 코드 작성에 도움을 주는 세팅을 하겠습니다. 먼저 Redux 에 필요한 패키지파일들을 설치하겠습니다. 터미널 프로그램의 루트폴더에서 아래의 명령어를 입력해 줍니다. npm install --save redux react-redux 패키지를 통해 설치된 파일들의 사용은 추후에 개념과 함께 알아가도록 하겠습니다. 다음으로 코드 작성에 도움을 주는 몇 가지 세팅들을 해 보도록하겠습니다. 1) Atom 에디터의 Snippets 기능 Atom 에디터에는 Snippets 라는 기능이 있습니다.Snippets 에 코드를 작성해 두면, 해당 코드를 호출하..