SlideShare uses cookies to improve functionality and performance, and to provide you with relevant advertising. If you continue browsing the site, you agree to the use of cookies on this website. See our User Agreement and Privacy Policy.
SlideShare uses cookies to improve functionality and performance, and to provide you with relevant advertising. If you continue browsing the site, you agree to the use of cookies on this website. See our Privacy Policy and User Agreement for details.
Successfully reported this slideshow.
Activate your 14 day free trial to unlock unlimited reading.
30.
브라우저는 가능한 많이 설치해주세요.
브라우저님들 성질 맞추는 게 얼마나 어려운지도 배워봐야죠.
31.
도메인이 있는 개발 환경을 구성합니다.
모바일 기기에서 결과물을 보려면 도메인이 있는 편이 좋습니다.
GitHub 서비스를 통해
32.
GitHub 계정 가입
• GitHub(github.com)에 가입합니다.
• GitHub에서 발송한 메일을 통해 메일을 인증합니다.
• 가입된 계정으로 로그인 합니다.
여기에 입력한 후에
Sign up 버튼을 눌러
가입하세요
33.
GitHub에 새 저장소를 만듭니다.
https://github.com/new 페이지로 이동한 후
새 저장소를 작성합니다.
Repository name에
"fecamp"라고 입력하세요
34.
GitHub에 새 저장소를 만듭니다.
Create repository 버튼을 클릭해서 저장소를 만듭니다.
이 버튼을 클릭하면
저장소가 만들어집니다.
35.
SourceTree 설치
"Download" 버튼을
클릭해서 받으세요.
• SourceTree는 개발자 도구로 유명한 Atlassian에서 만든
Git 사용 프로그램으로서 크로스 플랫폼을 지원합니다.
• www.sourcetreeapp.com에서 다운로드합니다.
36.
SourceTree 설치
• 설치가 어려운 분은 다음 링크를 참고하세요.
- Git과 SourceTree 설치 (윈도우)
https://opentutorials.org/course/1492/8037
- Git과 SourceTree 설치 (OSX)
https://opentutorials.org/course/1492/8038
37.
SourceTree 설치
• SourceTree를 실행한 후 GitHub 계정과 연동합니다.
• 상단의 Remote 탭을 클릭한 후 Connect a remote account
버튼을 클릭하세요.
이 버튼을 클릭하세요
38.
SourceTree 설치
• GitHub 로그인 정보를 입력한 후 OK 버튼을 클릭하세요.
• Host = GitHub, Protocol = HTTPS로 설정되어 있어야 합니다.
39.
SourceTree 설치
• 저장소에서 fecamp를 찾아서 Clone 버튼을 클릭합니다.
• 대화창이 나타나면 파일을 저장할 위치를 설정한 후
Clone 버튼을 클릭하세요.
40.
SourceTree 설치
• 상단에서 Local 탭으로 이동한 후 fecamp 저장소를
더블 클릭하면 저장소가 복제(clone)됩니다.
42.
로컬 저장소 파일 저장
• 편집기에서 README.md 파일을 작성하고 다음 내용을
입력한 후 fecamp 폴더에 저장합니다.
# 설명
프론트엔드 캠프 예제 저장소입니다.
43.
GitHub에 저장
• Unstaged files에 있는 README.md 파일을 체크합니다.
• Staged files로 옮겨지면 툴바의 Commit 버튼을 클릭합니다.
체크 박스를
클릭하세요.
44.
GitHub에 저장
• Unstaged files에 있는 README.md 파일을 체크합니다.
• Staged files로 옮겨지면 툴바의 Commit 버튼을 클릭합니다.
Commit 버튼을
클릭합니다.
45.
GitHub에 저장
• 커밋 메시지를 입력하고 Push changes...를 체크하세요.
• 오른쪽 하단의 Commit 버튼을 클릭하세요.
메시지를 입력하고
Commit!
46.
• 툴바에서 Branch 아이콘을 클릭합니다.
• gh-pages라는 브랜치를 새로 만듭니다.
페이지 브랜치 생성
이 버튼을
클릭하여 브랜치를
만듭니다.
47.
• index.html 파일을 작성한 후 fecamp 폴더에 저장합니다.
• gh-pages 브랜치가 굵은 글씨로 선택됐는지 확인하세요.
• 조금 전과 같이 커밋(Commit)과 푸시(Push)를 진행합니다.
페이지 브랜치 생성
gh-pages 브랜치가
선택됐는지 반드시
확인하세요.
48.
• http://사용자이름.github.io/fecamp/ 로 접속합니다.
• 이제 원하는 파일과 폴더를 fecamp 폴더에 추가하고 커밋 후
푸시하면 온라인에서 볼 수 있습니다.
작성한 페이지를 확인합니다.
49.
그 다음에는 NodeJS를 설치해주세요.
FastShop의 백엔드는 NodeJS를 사용해 작성되었습니다.
51.
npm 폴더 생성
• Windows 환경에서는 탐색기 제목표시줄에 %appdata% 를
입력한 후 npm 폴더가 있는지 확인하고 없으면 만들어주세요.
여기에 %appdata%를
입력하고 엔터를 누르세요
52.
npm 폴더 생성
npm 폴더가 없으면
새로 만들어주세요.
• Windows 환경에서는 탐색기 제목표시줄에 %appdata% 를
입력한 후 npm 폴더가 있는지 확인하고 없으면 만들어주세요.
53.
편집기는 Adobe Brackets를 사용합니다.
하지만 손에 익은 게 있다면 그걸 사용하셔도 좋습니다.
54.
Adobe Brackets는…
•프론트엔드 기술로 확장 기능을 만들 수 있습니다.
•프론트엔드 개발에 유용한 확장 기능이 많습니다.
•크로스 플랫폼을 지원합니다.
•무료로 사용할 수 있습니다.
•한국어도 잘 지원됩니다.
55.
brackets.io에서 다운로드 및 설치
Download 버튼을
클릭해서 받으세요.
56.
확장기능 설치
• Brackets 실행 후 파일 > 확장기능 관리자...를 클릭합니다.
• 팝업창 우측 상단에 있는 입력 상자에 확장 기능 이름을
입력한 후 설치 버튼을 클릭해 설치합니다.
여기에 검색어를
입력합니다.
57.
확장기능 설치
• JSHint
JS 코드가 올바른지 실시간으로 검사합니다.
• CSSHint
CSS 코드가 올바른지 실시간으로 검사합니다.
• W3CValidation
편집중인 HTML 문서가 W3C 권고안에 유효한지 실시간으로
검사하고 문제점을 알려줍니다.
• CanIUse
특정 기능을 지원하는 브라우저 정보를 편집기에서
바로 확인할 수 있습니다. (caniuse.com 질의)
설치할 확장기능은 다음과 같습니다.