본문 바로가기

개발

(10)
MEAN stack AWS 우분투 / Mac 설치 방법 MEAN stack 의미?간단하게 위 그림처럼 4가지 Mongo DB, Express, Angular.js, Node.js 오픈소스로 구성 된 개발 환경으로 생각하시면 됩니다.Mongo DB: databaseExpress : back-end frameworkAngular.js: front-end frameworkNode.js: back-end runtime environment 각 항목이 어떤 역할을 하는지는 각각 설치방법과 함께 설명을 하겠습니다. 공식 홈페이지 (영문) 주소:http://mean.io/ MEAN stack 각 홈페이지https://nodejs.org/http://expressjs.com/https://www.mongodb.com/https://angularjs.org/ MEAN sta..
AWS 에서 Ubuntu (우분투) Linux 인스턴스 띄우기 AWS란?Amazon Web Services(AWS)는 우리가 흔히 알고 있는 아마존(Amazon) 에서 만들 클라우드 서비스 플랫폼이다. 기존에 다양한 회사나 개인이 물리적인 서버를 만들어서 그곳에서 서비스를 하던 것을 아마존이 각 지역별로 클라우드 서버를 만들어서 각 서비스를 제공하고 있다. 최근에는 많은 회사들이 기존 자체 서버 혹은 IDC에서 서버를 없애고 아마존의 AWS 나 마이크로소프트의 Azure로 옮겨 가는 추세이다. 지금은 신규 가입자들에게 Amazon EC2 를 12개월 동안 무료로 사용할 수 있게 서비스 하는 중이다. Amazon Elastic Compute Cloud(EC2)는 개발자가 간단한 웹서비스 규모의 시스템을 운영할 수 있는 정도의 크기이고, 종량제 사용 방식을 사용하기 때..
Grunt 설치 및 셋팅 Grunt는 무엇인가?Grunt는 JavaScript를 위한 task 기반의 command line 빌드 툴이다. 예를 들어서 JavaScript 프로젝트를 진행할 때, 만약 주기적으로 해야할 일이 있다면, grunt를 설치 후 다양한 작업을 할 수 있다. Grunt 설치1. Node.js & npm설치 확인기존에 Node.js가 설치 되어 있어야 함, npm을 통해서 설치해야 하기 때문에..만약 설치가 안되어 있다면 아래 링크로 이동해서 설치2016/08/18 - [개발] - Node.js 설치 및 셋팅, npm 이란? 2. CLI (command line interface) 인스톨npm install -g grunt-cli 를 커맨드창에 입력C:\Users\Jason>npm install -g gru..
Node.js 설치 및 셋팅, npm 이란? Node.Js는 무엇인가?웹 개발은 Front-end 와 Back-end로 나뉜다. 간단히 말하면 프론트앤드는 웹페이지 쪽의 사용자가 볼 수 있는 부분이고, 백앤드는 서버쪽을 차지하고 있다. 원래 JavaScript는 프론트앤드에서 사용이 주로 됐지만, 2009년 Node.js라는 framework의 등장으로 자바스크립트로 서버단 기술까지 제어할 수 있게 되었다.Node.js(노드js) 는 JavaScript 엔진 V8 위에서 동작하는 이벤트 처리 I/O framework이다. 서버 환경을 포함한 프론트앤드 백앤드 모두를 JavaScript라는 같은 언어로 관리할 수 있게 되었다. 기존의 Front-end 개발자들도 다른 언어를 배울 필요 없이 쉽게 서버단 처리를 할 수 있게 만들어줬다. Node.js ..
웹개발, 웹디자인 방법 웹페이지 개발시 방법론 - Code, Test, Refine 1. Look for natural boxes2. Look for repeated elements & semantic elements3. Write your HTML4. Apply your styles (from biggest to smallest)5. Fix things그리고 다시 3~5반복함, 원하는 웹페이지가 만들어질 때까지 반응형 디자인(Responsive design)viewport 테그 - 웹페이지를 모바일 디바이스에 최석화 시켜줌initial-scale=1의 의미는device independent pixel과 CSS pixel의 비율이 1:1 모바일에서 사람이 touch 가능한 최소 크기는 40, 적어도 48px 정도는 설정 해줘야..
웹개발 관련 툴 모음 Verifying toolsTo verify HTML: http://validator.w3.org/#validate_by_input To verify CSS: http://jigsaw.w3.org/css-validator/#validate_by_input Placehold siteshttp://placehold.it/ https://placekitten.com/or Fontshttps://fonts.google.com/ Editorhttp://www.sublimetext.com/Sublime Text > Preferences > Settings - User 에 아래입력 후 저장 { "autocomplete": true, "color_scheme": "Packages/Color Scheme - Defaul..
CSS 문법 정리 display: inline block 차이점 1. display: inline 라인1 라인2시작삽입 라인2끝 라인3 2. display: block 라인1 라인2시작삽입 라인2끝 라인3 3. display: inline-block 라인1 라인2시작삽입 라인2끝 라인3 CSS Box Modelmargin, border, padding, content 구성1. Width에는 border, padding, content 만 포함된다 Icon font 사용http://weloveiconfonts.com/ Twitter
CentOS 사용팁 VMware 설치 후 CentOS를 다운받아서 설치 이후에 CentOS에 필요한 팁을 정리 해 보려고 합니다. 한글 설정CentOS 설치 후에 한영키를 누르면 당연히 반응하지 않습니다. 다음과 같은 방법으로 한글을 입력해 봅시다.1. Applications - System Tools - Settings - Keyboard - Input Sources 에는 English(US) 만 default로 설치되어 있습니다.2. + 버튼 클릭 후 Korean(Hangul)을 추가하고3. 텍스트 입력 창에 윈도우키+스페이스(Space) 를 클릭하면 한영 전환이 됩니다. CentOS에 Git 설치하기다양한 방법이 있지만 Yum을 이용해서 설치해보겠습니다.1. 터미널을 열고 sudo yum install git 을 입력..