1강 리액트(React) 프로젝트 구성 및 깃 허브 연동하기
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
▶ App.js
▶ main.js
▶ webpack.config.js
▶ .babelrc
▶ package.json
윈도우의 경우에는 다음과 같은 방식으로 start 및 build에 대한 옵션을 설정합니다.
8. yarn start 명령어를 이용해 프로젝트를 동작시킵니다.
9. 실행 결과를 통해 구성된 프로젝트 확인
10. 구성된 프로젝트를 깃 허브(Git Hub)에 올리기
▶ .gitignore 파일 생성 및 소스코드 작성
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
'React와 Firebase로 만드는 Word Cloud 웹앱' 카테고리의 다른 글
| 6강 파이어베이스(Firebase)로 React 프로젝트 배포하기 (1) | 2019.01.09 |
|---|---|
| 5강 단어(Word) 데이터 삽입 및 삭제 기능 구현하기 (2) | 2019.01.09 |
| 4강 Firebase 데이터베이스 구축 및 React와 연동하기 (0) | 2019.01.09 |
| 3강 라우터(Router) 활용하기 (0) | 2019.01.09 |
| 2강 내비게이션 바(Navigation Bar) 만들기 (0) | 2019.01.09 |
슬랙의 개요 및 시작하기 [협업 메신저 끝판왕 슬랙(Slack) 1강]
슬랙(Slack)은 굉장히 많은 회사와 동아리 등의 집단에서 사용하고 있는 협업 메신저 도구입니다. 쉽게 말하면 회사용 카카오톡(Kakao Talk) 정도라고 보시면 됩니다. 실제로 카톡은 정말 편하고 익숙한 앱이지만, 회사 용도로 사용하기에는 기능이 매우 한정적입니다. 하지만 슬랙은 정말 프로젝트 단위의 협업을 목적으로 한다면 가장 강력한 메신저 도구가 될 수 있습니다.
또한 슬랙은 그다지 복잡한 협업 도구가 아니라는 점에서 단순히 사용하고자 한다면 강좌까지 보지 않아도 잘 사용할 수 있습니다. 하지만 슬랙을 보다 완벽히 다루고자 한다면 슬랙에 대한 구체적인 내용을 알수록 유리합니다.
▶ 슬랙(Slack) 공식 사이트: https://slack.com/
슬랙은 위 사이트에 접속하여 이용할 수 있습니다. 슬랙에서 하나의 프로젝트(Project)를 워크스페이스(Workspace)라고 말합니다. 워크스페이스를 생성하고자 한다면 다음의 경로에 접속하면 됩니다.
▶ 슬랙(Slack) 워크스페이스 생성 경로: https://slack.com/create
워크스페이스를 생성할 때는 관리자 이메일 주소를 입력합니다.
이후에 자신의 이메일 주소로 가면 인증 코드가 보입니다. 이를 슬랙에 기입하면 됩니다.
저는 팀 이름을 'Slack Tutorial'이라고 지어보았습니다.
또한 저는 Education이라고 프로젝트의 이름을 지어주었습니다.
또한 처음에 프로젝트를 생성하면 프로젝트 구성원을 추가하라는 페이지가 나오는데, 저는 스킵(Skip)을 해주겠습니다.
이후에 기본적으로 채널 정보를 확인할 수 있습니다.
그러면 위와 같이 기본 채널이 존재하는 걸 확인할 수 있습니다.
이제 한 번 가상의 사용자를 초대해보도록 하겠습니다. 설정(Setting) 탭에서 초대(Invite)를 진행하시면 됩니다.
저는 한 번 제 다른 이메일 주소로 초대 메일을 보내보겠습니다. 이제 한 번 메일을 받은 이메일 계정으로 로그인해보도록 하겠습니다.
저는 위와 같이 새로운 계정으로 가입을 해보았습니다.
가입 이후에는 위와 같은 화면을 확인할 수 있습니다. 왼쪽과 오른쪽을 서로 다른 브라우저로 로그인 해보았습니다.
결과적으로 위와 같이 왼쪽과 오른쪽 사용자가 모두 education 채널에서 소통할 수 있었습니다.
'기타' 카테고리의 다른 글
| 슬랙(Slack)에서 다양한 메시지 보내기 [협업 메신저 끝판왕 슬랙(Slack) 3강] (0) | 2018.12.23 |
|---|---|
| 슬랙에서 채널 생성 및 관리하기 [협업 메신저 끝판왕 슬랙(Slack) 2강] (0) | 2018.12.23 |
| Ngrok을 이용하여 공인 IP 없이 웹 서버 운영하기 (0) | 2018.12.19 |
| 윈도우 파일 관리 무료 소프트웨어 에브리띵(Everything) 설치 및 사용 방법 (0) | 2018.09.04 |
| IntelliJ 개발환경에서 글자 크기 키우는 방법 (0) | 2018.08.28 |
Git 프로젝트 소개글(README.md) 작성하기 [Git으로 시작하는 협업과 오픈소스 프로젝트 11강]
깃(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) 이후에는 다음과 같은 결과를 확인할 수 있습니다.
'Git으로 시작하는 협업과 오픈소스 프로젝트' 카테고리의 다른 글
| 깃(Git) 환경설정(config)에 대해서 알아보자! (0) | 2019.04.06 |
|---|---|
| Git Rebase 명령을 이용해 특정한 커밋 수정/삭제 하기 (0) | 2019.04.03 |
| Git 로그 다루기 [Git으로 시작하는 협업과 오픈소스 프로젝트 10강] (0) | 2018.12.23 |
| Git 원격 저장소 관리하기 [Git으로 시작하는 협업과 오픈소스 프로젝트 9강] (0) | 2018.12.23 |
| Git 브랜치 충돌 처리하기 [Git으로 시작하는 협업과 오픈소스 프로젝트 8강] (0) | 2018.12.23 |
