맥에 몽고디비 설치 방법 참조
맥에 몽고디비 설치 방법 https://nesoy.github.io/articles/2017-04/MongoDB
글
vscode 추천 익스텐션
vscode 추천 익스텐션 for react/ js : https://www.vobour.com/book/view/ppwoS3MxGzSs5LxsA 아래 주소는 벨로퍼트님꺼 : https://velopert.com/2237
아톰 React 플러그인
아톰 React 플러그인 설치명령어 : apm install react 참조 주소 ; https://orktes.github.io/atom-react/ Features Syntax Highlighting Indentation Code Folding Snippets JSX Reformatting HTML to JSX conversion Autocomplete Automatic closing tag 함께 사용하면 유용한 패키지: jshint: JS 문법 검사 react : JSX Syntax highlight 호환 jshint 를 사용한다면 ES6 를 쓸 때, 프로젝트의 루트폴더에 .jshintrc 라는 파일을 만들고 { "esversion" : 6 } 위 내용으로 저장해야 ES6 문법 검사를 할 수 있습니다. minimap : 화면 한 쪽에 파일 전체 내용의 미니맵이 표시됩니다. 서브라임텍스트를 사용하셨던 분이라면 익숙한 기능입니다. AtomicChar : 한글을 한 줄로 길게 쓸 때에 개행이 이상하게 되는데, 그 문제를 해결해줍니다. emmet : zen-coding 이라고도 합니다. html 등의 문서를 작성시 css selector 방식으로 구조화된 구문을 빠르게 작성합니다. highlight-selected : 한 페이지에서 선택되어진 단어와 동일한 단어를 표시해줍니다. 기본인줄 알았는데, 안되서 찾아보니 패키지가 있더군요. Remote-FTP : FTP 또는 SFTP, FTPS 를 이용해 원격지에 있는 파일을 다운로드 하고 수정하고 저장과 동시에 업로드가 가능합니다. linter : 다양한 문법적 오류를 표시해주는 유용한 패키지입니다. 설치 후 프로그램 언어별로 추가 설치하면 문법적 오류나 권장 내용에 대해 색상과 문구로 알려줍니다....
아톰에서 초스피드 리액트 컴포넌트 만들기
아톰에서 초스피드 리액트 컴포넌트 만들기 일단 아톰 에디터의 react-snippets 패키지를 설치해야 한다. Atom 에디터를 열고 Cmd + , 단축키로 Settings 창을 열 수 있다. 여기서 Install 메뉴에 들어가 react-snippets 패키지를 설치하자. 패키지를 설치 했으면 아톰 에디터를 종료하고 다시 열어야 한다. _cer 이라고 적고 탭 또는 엔터를 누른다. 그럼 만들어져있는 스니펫을 통해 진짜 간단하고 편리하게 컴포넌트가 만들어진다. _i를 입력 후 엔터 import 스니펫이 열린다. 참조>http://eveript.tistory.com
[React] create-react-app 으로 프로젝트 시작하기
create-react-app 으로 프로젝트 시작하기 1. 설치하기 npm install -g create -react-app 2. App 생성하기 create -react-app hello-world 위 명령어를 실행하면, create-react-app 도구를 통하여 react 프로젝트를 initialize 하고, 그 다음에 자동으로 스크립트를 통하여 dependency package 들을 설치합니다 (webpack babel eslint 등..) (dependency package 를 루트 프로젝트에 설치하는게 아니라 node_modules/react-scripts 디렉토리에 설치합니다) 3. 서버 실행하기 npm start webpack-dev-server 를 시작 할 수 있습니다 hot-reload 가 적용되어있기 때문에, 이 개발 서버를 키고, 코드를 수정하면 자동으로 적용이 됩니다. 참조 : https://velopert.com/2037
[react] webpack-dev-server 구동하기
webpack-dev-server 구동하기 npm start 브라우저에서 링크(http://localhost:7777)를 띄운 상태에서 App.js 를 수정해보세요. 브라우저에서 수동으로 F5를 누르지 않아도 자동으로 새로고침됩니다. 참조 : https://velopert.com/814
[react] src/index.js 수정하자
src/index.js 수정하자 App 컴포넌트를 불러와서 root element에 렌더링하는 부분입니다. import React from 'react' ; import ReactDOM from 'react-dom' ; import App from './components/App' ; const rootElement = document .getElementById( 'root' ); ReactDOM.render( < App /> , rootElement); 참조 : https://velopert.com/814
[React] /src/components/App.js 컴포넌트를 만들자
/src/components/App.js 컴포넌트를 만들자 파일 및 컴포넌트의 첫 문자를 대문자로 하는건 React의 naming convention 입니다. import React from 'react' ; class App extends React . Component { render(){ return ( < h1 > Hello React!!! </ h1 > ); } } export default App; import JavaScript ES6 에 새로 도입된 키워드로서, require('..') 의 역할을 합니다. export 는 JavaScript ES6 에 새로 도입된 키워드로서, module.export = App 와 같습니다. 참조 : https://velopert.com/814
[React] index.html 수정하기
index.html 수정하기 1. div id = “app” 을 React 프로젝트의 root element 로 지정한다. 2. index.js 스크립트를 로드 한다. index.js 파일은 webpack에서 bundle된 파일이다. react 라이브러리 및 기타 자바스크립트 파일들이 하나로 합쳐진 파일이다. <!DOCTYPE html> < html > < head > < meta charset = "UTF-8" > < title > React App </ title > </ head > < body > < div id = "root" > </ div > < script src = "bundle.js" > </ script > </ body > </ html > 참조 : https://velopert.com/814
[React] package.json 파일 수정
npm start 명령어를 콘솔에서 입력 했을 때, webpack-dev-server 가 실행 될 수있게 package.json 의 “scripts” 블록을 수정하세요. "scripts" : { "start" : "webpack-dev-server --hot --host 0.0.0.0" }, 만약에 localhost 가 아닌 외부 서버에서 dev-server 실행 시, –host 옵션을 추가하지 않으면 접근이 안됩니다. localhost 인경우에는 생략하시면 됩니다. 참조 : https://velopert.com/814
[React] webpack.config.js 설정하기
webpack.config.js 파일을 열고 아래와 같이 추가한다. webpack의 역할은, entry 부터 시작하여 필요한 모듈들을 다 불러온 후, 한 파일로 합쳐 bundle.js 에 저장합니다. 추가적으로는, 모듈을 통하여 ES6 문법으로 작성된 코드를 ES5 형태로 변환도 해줍니다. 개발 서버의 포트는 7777로 설정 개발 서버는 파일이 변동 될 때마다 다시 컴파일하고, 연결되어있는 브라우저를 새로고침해주는 기능을 가지고 있습니다. module .exports = { entry: './src/index.js' , output: { path: __dirname + '/public/' , filename: 'bundle.js' }, devServer: { inline: true , port: 7777 , contentBase: __dirname + '/public/' }, module: { loaders: [ { test: /\.js$/ , loader: 'babel-loader' , exclude: /node_modules/ , query: { cacheDirectory: true , presets: [ 'es2015' , 'react' ] } } ] } }; 참조 : https://velopert.com/814
[React] 프로젝트 디렉토리 구조
[React] 프로젝트 디렉토리 구조에 대해 알아보자 react-tutorial ├── package.json ├── public # 서버 public path │ └── index.html # 메인 페이지 ├── src # React.js 프로젝트 루트 │ ├── components # 컴포넌트 폴더 │ │ └── App.js # App 컴포넌트 │ └── index.js # Webpack Entry point └── webpack.config.js # Webpack 설정파일 위 노란색 폴더 및 파일을 생성해야한다. 참조 : https://velopert.com/814
[React] Dependency 및 플러그인 설치 버전 확인하기
[React] Dependency 및 플러그인 설치 버전 확인을 해보자 1. 아톰 에디터가 설치가 안되었으면, 아톰 에디터를 먼저 설치를 해준다. 경로 : https://atom.io/ 2. 아톰 에디터가 설치가 완료되었으면, 에디터를 열고, File - Open folder - 생성한 프로젝트 폴더를 선택한다 3. 프로젝트가 아톰 에디터 좌측에 보인다. 4. package.json을 클릭하면 우측에 파일내용이 보인다. { "name": "react-tutorial", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC", "dependencies": { "react": "^15.6.1", "react-dom": "^15.6.1" }, "devDependencies": { "babel-core": "^6.26.0", "babel-loader": "^7.1.2", "babel-preset-es2015": "^6.24.1", "babel-...
[React] 프로젝트 생성
React 프로젝트를 생성해 보자 1. 원하는 경로에 react-tutorial 이라는 루트 폴더를 생성한다. 1.1> 명령프롬프트를 연다 1.2> 미리만들어 놓은 project 폴더 밑에 react 폴더를 만들어둔다 1.3> react-tutorial 프로젝트 폴더를 생성한다 --> mkdir react-tutorial 1.4> 프로젝트 폴더에 들어간다 -- > cd react-tutorial 2. 생성된 프로젝트 폴더내에서 npm init 명령어를 사용하여 NodeJs 프로젝트를 생성한다 npm init 3. Dependency 및 플러그인을 설치한다 3.1> –save 옵션을 통하여 package.json 에 의존 패키지들을 추가 할 수있습니다. npm install --save react react-dom 3.2> babel 에서 사용 될 플러그인을 설치해야합니다. 해당 모듈들은 개발환경에서만 사용되므로 –save-dev 옵션을 설정해주세요. npm install --save-dev babel-core babel-loader babel-preset-react babel-preset-es2015 webpack webpack-dev-server 참조 : https://velopert.com/814
[React] 개발환경 만들기
React 개발 환경을 만들어 보자. 1. Node.Js 를 다운받은 후 설치한다 - 경로 : https://nodejs.org/en/ 2. npm을 설치한다 - 명령프롬프트를 열고 npm install -g npm 3. 글로벌 패키지를 설치한다 - npm install -g babel webpack webpack-dev- server babel – 아직 ECMAScript6 를 지원하지 않는 환경에서 ECMAScript6 Syntax를 사용 할 수 있게 해줍니다. webpack – 모듈 번들러로서, Browserify 처럼 브라우저 위에서 import (require) 을 할 수 있게 해주고 자바스크립트 파일들을 하나로 합쳐줍니다. webpack-dev-serve r – wepback에서 지원하는 간단한 개발서버로서 별도의 서버를 구축하지 않고도 웹서버를 열 수 있으며 hot-loader를 통하여 코드가 수정될때마다 자동으로 리로드 되게 할 수 있습니다. 참조 : https://velopert.com/814