본문 바로가기

공부한 내용

 (38)
[맛집지도어플]개발환경을 구성하자. 일단 디렉토리를 만들어서 노드서버환경을 만들어 줄 것이다.bestfood라는 디렉토리를 만들자!나는 리눅스 우분투이기 때문에,sudo mkdir bestfood디렉토리를 생성하고해당 디렉토리로 가서,sudo npm install express-generator -g 를 작성해준다.우리는 express-generator 모듈을 사용하는 것이다.모듈의 사용법은express -h로 살펴볼 수 있다.프로젝트를 생성할때 화면 구성을 위한 다양한 템플릿 엔진을 지정할 수 있다.이 중에서 우리는 쉽게 사용할 수 있는 ejs를 사용할 것이다.디렉토리내에 프로젝트 디렉토리를 생성해야한다. 이때 템플릿 엔진은 ejs로 설치함으로 -e 옵션을 추가해야한다.sudo express -e web 이제, web\public에 있는..
[ubuntu 16.04] WINE 및 heidisql 설치해보자! 먼저 리눅스 우분투에서 편리한 개발환경을 만들기 위해WINE을 설치해보자! STEP.1 우분투 64비트인 경우에는 32비트를 활성화하자!sudo dpkg --add-architecture i386 STEP.2 저장소를 추가하고 업데이트를 하자!sudo add-apt-repository ppa:wine/wine-buildssudo apt-get update STEP.3 WINE을 설치하자!sudo apt-get install --install-recommends winehq-staging 위의 명령어로 모든 리눅스 우분투에서 와인 설치를 완료하였다. 조금 더 자세한 내용은 WINE 공식홈페이지를 살펴봐라.https://www.winehq.org/ 이제는 리눅스 우분투에서 heidisql 을 설치할 것이다...
[맛집지도어플] 데이터베이스를 구축해보자! 맛집 지도어플을 만들기 전에,데이터베이스를 생성하고, 테이블을 생성해보자!bestfood_info 테이블을 생성할 것인데..리눅스에서 HeidSQL을 사용하기가 굉장히 불편하다.즉, 오류도 많고 요게.. 느리기까지 하니...차라리 sql 모니터를 이용하는게 나을지도 모르겠다.각 테이블들을 다 만들어주었다.아쉽게도 모든 sql을 공개할 수는 없지만 간략하게 설명하자면,일단 맛집 정보 테이블을 생성하고 그 안에, 오토넘버값과 사용자의 일련번호,맛집이름,전화번호,주소,위도,경도,설명,즐겨찾기,등록일시의 칼럼을 가진다.그리고 맛집 이미지정보 테이블을 생성하고이 테이블은 이미지정보를 등록하는 테이블이다.맛집 일련번호,파일명,이미지메모,등록일로 구성된다.그리고 즐겨찾기 테이블에는 사용자 일련번호 맛집 일련번호,등록..
[ubuntu 16.04] mariaDB 설치하기 우분투에서 마리아 DB를 설치하는 것은 매우 간단하다. 터미널을 열고, 아래의 명령어들을 입력해준다. sudo apt-get install software-properties-common sudo apt-key adv --recv-keys --keyserver hkp://keyserver.ubuntu.com:80 0xF1656F24C74CD1D8 sudo add-apt-repository 'deb [arch=amd64,i386,ppc64el] http://ftp.kaist.ac.kr/mariadb/repo/10.2/ubuntu xenial main'sudo apt update sudo apt install mariadb-server 이렇게 순서대로 작성하면 설치완료! 자세한 내용은 아래의 홈페이지를 참조..
맛집지도 안드로이드 어플을 만들자! 맛집 지도 안드로이드 어플을 만들어보자! 클라이언트는 안드로이드, 서버는 노드(node.js)와 익스프레스(Express.js), 데이터베이스는 마리아디비 이렇게 4가지를 이용해서 어플을 만들 예정이다. 일단 안드로이드 스튜디오는 설치되어있고, 노드도 설치했고, 새로 설치해야할 것은 익스프레스와 마리아디비를 설치해야한다. 다음장부터 마리아 디비부터 설치해보자! ㅎ
[React JS] Building for production (With GITHUB) 드디어 완성이 되었다. 정말 맨 마지막에 컴포넌트를 잘못 다운받아, 오류가 나서 멘붕 터졌지만, node_module 폴더를 삭제후에 yarn add react-lines-ellipsis 이 명령어로 다시 설치했다. 그랬더니, 정상적으로 작동한다~^^ 이제 이것을 깃허브페이지에 올릴 것이다. 깃허브페이지는 static file을 올릴 수 있는 서비스다. static file은 자바스크립트,css,html과 같은 프론트엔드 파일을 뜻한다. 아쉽게도 백엔드는 안된다. 깃허브 페이지는 이런 static file을 공짜로 호스팅할 수 있게 해준다. 이걸 사용하려면, 첫째 깃허브 계정이 필요하고, 두번째 깃허브 프로젝트가 필요하며, 세번째 깃허브 프로젝트의 브랜치를 만들어야한다. 그 이름은 gh-pages 여야 ..
[React JS] Updating Component 우리가 만들 것을 이미지로 살펴보면,(이 자료는 노마드코더 동영상에서 캡쳐하여 가져온 것입니다) 이런 형식이다. 데이터를 가져올 것을 살펴보자. 일단 콘솔 로그를 확인하여 보자. _renderMovies = () => { const movies = this.state.movies.map((movie) => { console.log(movie) return }) return movies } 이 콘솔을 살펴보면, 결론적으로 포스터,제목,장르,설명까지 갖고 있다. 이제 업데이트를 해보자. 제목의 경우 'title-english'를, 포스터는 'small-cover-image'를 입력하고, 장르는 'genres'를, synopsis를 추가입력한다. 그리고 이제 우리의 props를 업데이트하면 된다. 우리의 mo..
[React JS] Await Async in React 지난 시간에 작성한 코드▼ Await,Async는 지난 시간에 작성한 코드들을 좀 더 분명하게 작성해주는 도구이다. 우리가 영화들을 state에 올리려면, 아래와 같은 작업을 해야한다. 애플리케이션이 크면, then 안에 then으로 이어지면서 세련되지 않는다. .then이 많아지면서 CALLBACK HELL 이 되버린다. 즉 then,then,then.. 많아져서 길을 잃어버리는 것이다. 그래서 여기서 sync,await 이라는 것을 쓸것이다. 이 강좌에서는 어떻게 쓰는지만 알려줄 것이다. 이것 대신에 새로운 function을 만들거다.(getMovies) 그리고 새로운 function을 쓸꺼다.(call api) 그리고 기존에 componentDIdMount 에서 사용된 코드들을 복사해서 _calla..

티스토리툴바