1.
과정을 소개합니다
쇼핑몰을 만드는 프론트엔드 개발
김태곤

2.
제가 프론트엔드 개발자라서
하는 말이지만…
실드치는 중입니다.

3.
프론트엔드 기술을 배우세요.
아직 프로그래밍을 배우지 않았다면

4.
왜?

5.
피할 수 없으므로 어차피 배워야 합니다.
첫째, 웹 서비스를 만들 때는

6.
배울 때 참고할 자료가 아주 많습니다.
둘째, 사용하는 사람이 많아

7.
클라이언트, 서버, 모바일/데스크톱 앱
셋째, 같은 기술을 사용해서
…까지 만들 수 있습니다. 어메이징!

8.
예비창업자, 디자이너, 기획자들이
그래서
또는 프로그래밍 초보자도

9.
아이디어를 현실로 만들 수 있습니다.
♪ 숨겨왔던 나~의 수줍은

10.
물론,
'할 수 있다'와 '잘 된다'는 다릅니다.
실드치는 중입니다.

11.
갑자기 짠~하고 전문가가 되지는 않으니까요.
이 수업을 들었다고
수퍼히어로는 만화에나 있는 거죠.

12.
프로토타입은 충분히 만들 수 있습니다.
하지만 아이디어를 정리할
직접 해봐야 알 수 있는 게 많습니다.

13.
좋은 아이디어로 보이면 전문가를 고용하세요.
실제 눈으로 보고 만져본 후
또는 전문가를 뽑아달라고 사장님을 조르세요.

14.
자...잠깐?

15.
프로토타입 제품은 좋은 예제가 됩니다.
어쨌든...

16.
적어도 이런 일은 없을 겁니다.
이미지: 게임회사 여직원들 by 마시멜 (다음웹툰)
직접 만들어서 보여준다면
기획자 디자이너
개발자도 보여줘야 알아요.

17.
동료 프론트엔드 개발자로 만날 수 있을지도요
어쩌면 언젠가 여러분이 전문가가 되서

18.
기본기 튼튼한 초보 개발자가 되는 것입니다.
이 수업의 목표는 스스로 길을 찾을 수 있는

19.
프론트엔드 분야는 굉장히 변화가 빠릅니다.
오늘 배운 내용이 과정이 끝날 때는 달라져 있을지도 모릅니다.

20.
브라우저의 진상도 견뎌야 합니다.
구 버전도 지원해야 하고 업데이트하면 없던 버그도 생깁니다.
IE 8 "HTML5 보고 내려라 소리치며 파일 던져"

21.
문제 해결 능력이 더 중요한 이유입니다.
하지만 수업 중에 배우는 건 아주 적습니다.
Photo by Official U.S. Navy Page / CC BY
내 거친 코드와 불안한 디버깅. 그걸 지켜보는 팀장님.

22.
많은 경험과 연습이 필요합니다.
문제 해결 능력을 기르려면
하지만 수업 시간은 너무 짧죠.

23.
수업은 조금 힘들고 빡셀지도 모릅니다.
부족한 경험을 보충하기 위해
Photo by USAG-Humphreys / CC BY-NC-SA

24.
게다가 과제도 많이 드릴거예요.
Photo by USAG-Humphreys / CC BY-NC-SA
쉽지 않다는 거 알고 있습니다.

25.
적극적으로 수업에
참여해주세요.
과제도 성실하게
제출해주세요.
그래도 부탁드립니다.

26.
적극적인만큼 많이 얻을 것입니다.
Photo by Kristina Alexanderson / CC BY-NC-SA
단언컨대,

27.
노력의 결과, 실력있는 전문가가 되시면
이 수업을 듣고 열심히 노력하여
혹은 회사가 번창하시면

28.
저도 잘 부탁드립니다.
진심입니다.

29.
그럼 개발 환경을 설정해보겠습니다.
노트북을 열어주세요.

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)됩니다.

41.
SourceTree 설치
• 복제가 완료되면 다음과 같은 화면이 나타납니다.

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를 사용해 작성되었습니다.

50.
nodejs.org에서 받고 설치하세요
INSTALL 버튼을
클릭해서 받으세요.

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 질의)
설치할 확장기능은 다음과 같습니다.

58.
확장기능 설치
Brackets 에디터를 다시 시작하면 확장기능이 적용됩니다.

59.
그럼 이제 열심히 달려봅시다!
첫 수업 때 뵙겠습니다.
Photo by Jon Marshall / CC BY