A sentimental robot

몽고디비를 무료로 호스팅해주는 서비스를 제공하는 mLab를 써보았다. 가장 먼저 Sign up을 하고 MongoDB developments 에서 Create New를 해서 DB를 생성한다. mLab에서는 AWS, GCP와 AZURE 인프라를 사용한다. 나는 cloude provider로 AWS를 선택하였다. Plan Type으로는 free sandbox! 위치는 그냥 아무곳으로 설정했다. DATABASE NAME은 mymern으로 하고 생성완료! 방금 만든 mymern DB에 사용자를 추가해야 한다. mymern DB에 들어간다. Users 탭에서 Add database user에서 사용자를 추가한다. 이제 사용자가 추가가 되었다. 내 프로젝트 DB연동 js파일에서 mongoose.connect('mon..

블로그 포스팅 순서가 정말 중구난방이라는 것을 혹시 눈치채셨을까. 그 뜻은 내가 정말 아무것도 모른다는 것이다. 사실 나는 MERN 스택으로 웹 어플리케이션을 만드는 것이 목표이다. react.js로 front-end 부분은 어느정도 구현을 한 상태로 MongoDB도 설치했다. 이제 그 둘을 연동시키기만 하면 되는 줄 알았다!! 안된다!!!!! ㅋㅋㅋㅋㅋㅋ 찾아보니 Express.js를 공부해야 할 것 같다. (사실 express를 안해도 될 줄 알았다ㅎ) 내 생각엔! express는 node.js framework 이며 react.js보다 큰 개념인 것같다. 이제라도 알았으니 다행이다. 난 react.js로 웹 앱을 만들었는데 MERN stack으로 프로젝트를 완성시키기 위해선 express 프로젝트를..

MongoDB를 설치했으면 서버와 클라이언트를 열어서 확인해보자. 먼저 서버를 열어보자. cmd 창에서 > cd C:\Program Files\MongoDB\Server\4.0\bin > mongod 서버를 열었다. 뭐가 쫘라락 나오면서 마지막에 waiting for connections on port 27017 라고 뜨는데 서버가 열렸다는 뜻! 이제 클라이언트로 접속해보자. 서버로 접속한 cmd창을 닫지 말고 새로운 cmd창을 연다. 클라이언트인 몽고디비shell을 실행시킬 것이다. > cd C:\Program Files\MongoDB\Server\4.0\bin > mongo 이번엔 "mongo"라는 명령어로 접속했다. 클라이언트로 접속하겠다는 뜻! 또 방금처럼 뭐가 쫘라락 나오면서 중간에 잘 보면 c..

오늘의 블로그를 쓰기 전에 일단 한 마디 : 리액트를 처음 공부하는데 하면 할 수록 이해가 안가고 너무 어렵다. 너무 특이해서 당황스럽다. 과연 내가 리액트로 제대로 무언갈 만들 수 있을까? 오늘은 props와 state에 대해 공부를 할 것이다. 리액트 컴포넌트에서 다루는 값의 형태인데, props는 부모 컴포턴트가 자식 컴포넌트에게 주는 값이다. 자식은 부모에게서 받은 props를 받기만할 뿐 수정이 불가하다. state는 props와 달리 컴포넌트 내부에서 정의하며 내부에서 값을 변경할 수 있다.

React의 핵심인 Component에 대하여 공부해자. 나는 이제 리액트를 이용하여 나만의 서버를 만들어 볼 것이기 때문에 전에 만든 리액트 프로젝트 > src 폴더 > App.css를 날려버리고 App.js의 코드를 간단하게 바꿔보았다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 import React, { Component } from 'react'; import Tem from './components/Tem'; import Form from './components/Form'; {/* webpack을 쓰기에 가능한 작업*/ } class App extends Component { render() { return ( {/*JSX 문법*/}..

웹 서버 구축도 처음이고 리액트도 처음이라서 뭘 어디서부터 시작해야 할지 모르겠다. 하지만 내 식대로 잘 정리해보도록 하겠다. 피드백은 언제나 환영이다! 저번엔 우리가 리액트 프로젝트를 하나 만들어 보았다. 일단 나는 우리가 만든 프로젝트의 public 폴더의 index.html 부터 설명하고자 한다. index.html 파일에서 보면 우리에게 익숙한 HTML 태그들이 있다. 너무 반갑당 ㅎ 태그 안에 태그가 있는데 모든 것은 여기서부터 시작된다... 두둥! root라는 id를 가지고 있는 div를 렌더링(Rendering)하는 것에서부터 리액트의 시작이라고 할 수 있겠다. 무슨 말이냐 하면, index.html의 태그들에게 스타일과 동적기능을 주는 것을 이제부터 react.js가 한다는 것이다. 오! ..

요즘 페이스북에서 만든 React란 Front-End library가 핫하다고 한다. React를 사용하여 웹 서버를 구축하기 위해선 react를 쓸 수 있는 환경을 만들어 주어야 한다. 환경을 만들어 보자! react는 Node.js와의 조합이 좋다고 하여 나는 Node.js를 설치했다. 사실 나는 왕초보 프로그래머(프로그래머라고 하기도 뭐하다)이다. 그리고 웹 프로그래밍에 대한 지 식도 없고 웹 서버 구축을 처음 해본다. 그런 내가 react를 쓴다니 거의 맨 땅에 헤딩 수준이다. 근데 그렇게 좋다고하는데 너무 써보고 싶다! Web programming 카테고리에 맨땅에 헤딩하는 흔적들이 있으니 참고하길 바란다. 먼저 나는 어떻게 react.js의 환경을 구축했냐 하면, ① Node.js 설치 - 자..

Node.js는 JavaScript runtime 이다. 런타임이 뭐지..? 특정 언어로 만든 프로그램을 구동할 수 있는 환경이라고 하는데 무슨 말인지 모르겠다. 일단 Node.js는 자바스크립트 기반으로 만들어졌다. 이전의 자바스크립트는 스크립트 언어로 클라이언트의 브라우저에서만 동작할 수 있었다. 그렇기 때문에 노드를 프론드앤드 개발이라고 생각할 수 있는데 서버사이드 개발이다. 서버 프로그래밍을 하려면 Jsp, Php, Servlet 같은 서버 사이드 언어로 서버를 구축해야 하는데 node.js를 통해 자바스크립트로 클라이언트 뿐만 아니라 서버를 개발할 수 있게 되었다. 한 가지 언어로 프론트와 백엔드를 제어할 수 있다는 장점이 있다. 또한 Node.js는 내장 HTTP 서버 라이브러리를 포함하고 있..