안경잡이개발자

728x90
반응형

1.  VSC(Visual Studio Code) 개발 환경을 열어서 특정한 폴더(Folder)를 열어 줍니다.


  (이 때 가능하면, 관리자 권한으로 개발환경을 열 수 있도록 합니다.)



2. yarn init 명령어를 통해 패키지(Package) JSON 파일을 생성합니다.



3. yarn add 명령어를 통해 리액트 라이브러리를 설치합니다.


  리액트 개발을 위하여 react와 react-dom이 모두 필요합니다.



4. yarn add 명령어를 통해 webpack을 설치합니다.


  webpack을 이용해 추후에 앱을 배포할 수 있어요. 또한 webpack-dev-server를 이용해 실시간 로딩으로 빠르게 개발할 수 있습니다.



5. yarn add 명령어를 통해 바벨(Babel)을 설치합니다.


  바벨 또한 개발 환경에서 필요하기 때문에 --dev 옵션으로 설치합니다.



6. yarn add 명령어를 통해 웹팩(Webpack) 클라이언트 모듈을 설치합니다.


  yarn add --dev webpack-cli


  (--dev 혹은 -D라고 옵션을 붙여서 개발 종속성으로 설치합니다.)



7. 소스코드를 작성하기 위해 다음과 같이 프로젝트를 구성합니다.



▶ index.html


<!DOCTYPE html>
<html>
<head>
<title>Word Cloud Project</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#E2E2E2">
</head>
<body>
<div id="app"></div>
<script type="text/javascript" src="main.js"></script>
</body>
</html>


▶ App.js


import React from 'react';

class App extends React.Component {
render() {
return (
<div>
<h3>Hello World</h3>
</div>
);
}
}

export default App;


▶ main.js


import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App';

ReactDOM.render(<App/>, document.getElementById('app'));


▶ webpack.config.js


'use strict'
const path = require('path');

module.exports = {
entry: {
main: ['./src/main.js']
},
output: {
path: path.resolve(__dirname, './build'),
filename: '[name].js'
},
module: {
rules: [{
test: /\.js$/,
include: path.resolve(__dirname, './src'),
loaders: 'babel-loader'
}]
},
plugins: [],
devServer: {
contentBase: './public',
host: 'localhost',
port: 8080
}
}


▶ .babelrc


{
"presets": ["react-app"]
}


▶ package.json


{
"name": "ReactProject",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"dependencies": {
"react": "^16.8.6",
"react-dom": "^16.8.6"
},
"scripts": {
"start": "NODE_ENV=development webpack-dev-server",
"build": "NODE_ENV=production webpack -p"
},
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^8.0.5",
"babel-preset-react-app": "^7.0.2",
"webpack": "^4.30.0",
"webpack-cli": "^3.3.0",
"webpack-dev-server": "^3.3.1"
}
}


윈도우의 경우에는 다음과 같은 방식으로 start 및 build에 대한 옵션을 설정합니다.


"scripts": {
"start": "set NODE_ENV=development&&webpack-dev-server",
"build": "set NODE_ENV=production&&webpack -p"
},


8. yarn start 명령어를 이용해 프로젝트를 동작시킵니다.



9. 실행 결과를 통해 구성된 프로젝트 확인



10. 구성된 프로젝트를 깃 허브(Git Hub)에 올리기


▶ .gitignore 파일 생성 및 소스코드 작성


node_modules
build


11. 깃 허브(Git Hub)에 리포지터리 생성



12. 생성된 리포지터리의 주소 복사



13. 터미널(Terminal)에서 Git 명령어로 소스코드 업로드


git init

git add .

git commit -m "Initialize React Project"

git remote add origin https://github.com/ndb796/ReactWordCloudWebApp-React.git

git push --set-upstream origin master


728x90
반응형

Comment +0

728x90
반응형

  슬랙(Slack)은 굉장히 많은 회사와 동아리 등의 집단에서 사용하고 있는 협업 메신저 도구입니다. 쉽게 말하면 회사용 카카오톡(Kakao Talk) 정도라고 보시면 됩니다. 실제로 카톡은 정말 편하고 익숙한 앱이지만, 회사 용도로 사용하기에는 기능이 매우 한정적입니다. 하지만 슬랙은 정말 프로젝트 단위의 협업을 목적으로 한다면 가장 강력한 메신저 도구가 될 수 있습니다.


  또한 슬랙은 그다지 복잡한 협업 도구가 아니라는 점에서 단순히 사용하고자 한다면 강좌까지 보지 않아도 잘 사용할 수 있습니다. 하지만 슬랙을 보다 완벽히 다루고자 한다면 슬랙에 대한 구체적인 내용을 알수록 유리합니다.


  ▶ 슬랙(Slack) 공식 사이트: https://slack.com/


  슬랙은 위 사이트에 접속하여 이용할 수 있습니다. 슬랙에서 하나의 프로젝트(Project)를 워크스페이스(Workspace)라고 말합니다. 워크스페이스를 생성하고자 한다면 다음의 경로에 접속하면 됩니다.


  ▶ 슬랙(Slack) 워크스페이스 생성 경로: https://slack.com/create



  워크스페이스를 생성할 때는 관리자 이메일 주소를 입력합니다.



  이후에 자신의 이메일 주소로 가면 인증 코드가 보입니다. 이를 슬랙에 기입하면 됩니다.



  저는 팀 이름을 'Slack Tutorial'이라고 지어보았습니다.



  또한 저는 Education이라고 프로젝트의 이름을 지어주었습니다.



  또한 처음에 프로젝트를 생성하면 프로젝트 구성원을 추가하라는 페이지가 나오는데, 저는 스킵(Skip)을 해주겠습니다.



  이후에 기본적으로 채널 정보를 확인할 수 있습니다.



  그러면 위와 같이 기본 채널이 존재하는 걸 확인할 수 있습니다.



  이제 한 번 가상의 사용자를 초대해보도록 하겠습니다. 설정(Setting) 탭에서 초대(Invite)를 진행하시면 됩니다.




  저는 한 번 제 다른 이메일 주소로 초대 메일을 보내보겠습니다. 이제 한 번 메일을 받은 이메일 계정으로 로그인해보도록 하겠습니다.




  저는 위와 같이 새로운 계정으로 가입을 해보았습니다.



  가입 이후에는 위와 같은 화면을 확인할 수 있습니다. 왼쪽과 오른쪽을 서로 다른 브라우저로 로그인 해보았습니다.



  결과적으로 위와 같이 왼쪽과 오른쪽 사용자가 모두 education 채널에서 소통할 수 있었습니다.

728x90
반응형

Comment +0

728x90
반응형

  깃(Git) 프로젝트에서는 README.md 파일을 이용해 소개글을 작성할 수 있습니다. md는 마크 다운(Markdown)의 약자이며 최근 굉장히 다양한 분야에서 사용되고 있는 텍스트 양식입니다. 매우 빠르게 핵심적인 내용을 작성하는 편집 양식이라는 점에서 깃 허브(Git Hub) 또한 공식적으로 이를 채택하고 있습니다. 


  이번 시간에는 우리의 깃 저장소에서 README.md 파일을 생성하여 프로젝트 소개글을 작성하는 방법에 대해서 소개하고자 합니다.



  위와 같이 README.md 파일을 작성하여 간단히 샵(#)을 붙여 글머리를 작성해 봅시다. #은 글머리를 작성할 때 사용합니다. 



  이제 이러한 내용을 푸시(Push)해서 확인해보도록 합시다.



  성공적으로 소개글 정보가 깃 허브(Git Hub)에 들어간 것을 확인할 수 있습니다.


  마크 다운은 정말 편집(Edit)을 쉽게 할 수 있는 도구입니다. 다음과 같은 예제들도 확인해 봅시다.


# 글머리


소스코드 블록은 다음과 같이 작성할 수 있습니다.


```c

#include <stdio.h>


int main(void) {

  printf("Hello World!");

}

```


링크는 다음과 같이 작성할 수 있습니다.


[블로그 주소](https://blog.naver.com/ndb796)


순서 없는 목록은 다음과 같이 작성할 수 있습니다.


* 깃 강좌

  * 깃 Clone

  * 깃 Pull

  * 깃 Commit

    * 깃 Commit ①

    * 깃 Commit ②

  * 깃 Push


인용 구문은 다음과 같이 작성할 수 있습니다.


> '공부합시다.' -나동빈-


테이블은 다음과 같이 작성할 수 있습니다.


이름|영어|정보|수학

---|---|---|---|

나동빈|98점|87점|100점|

홍길동|97점|78점|93점|

이순신|89점|93점|97점|


강조는 다음과 같이 할 수 있습니다.


**치킨** 먹다가 ~~두드러기~~났어요. ㅠㅠ



  푸시(Push) 이후에는 다음과 같은 결과를 확인할 수 있습니다.



728x90
반응형

Comment +0