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 버튼을 클릭하세요.
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 브랜치가
선택됐는지 반드시
확인하세요.
56. 확장기능 설치
• Brackets 실행 후 파일 > 확장기능 관리자...를 클릭합니다.
• 팝업창 우측 상단에 있는 입력 상자에 확장 기능 이름을
입력한 후 설치 버튼을 클릭해 설치합니다.
여기에 검색어를
입력합니다.
57. 확장기능 설치
• JSHint
JS 코드가 올바른지 실시간으로 검사합니다.
• CSSHint
CSS 코드가 올바른지 실시간으로 검사합니다.
• W3CValidation
편집중인 HTML 문서가 W3C 권고안에 유효한지 실시간으로
검사하고 문제점을 알려줍니다.
• CanIUse
특정 기능을 지원하는 브라우저 정보를 편집기에서
바로 확인할 수 있습니다. (caniuse.com 질의)
설치할 확장기능은 다음과 같습니다.