2017년 12월 파이썬 세미나 발표자료

1. 스타트업 인턴 개발자
2달간의 고군분투기
김은향

2. 스타트업 인턴 개발자
2달간의 고군분투기
김은향

3. 스타트업 인턴 개발자
3달간의
김은향

4. 1. 자기소개
2. 하고 있는 일과 개발 환경
3. 3달간 고군분투기
+ 눈물을 훔치며 마무리
목차

5. 1. 자기소개

6. 문과+ 공대 편입생 + 프로그래밍 포기자가
어떻게 개발자가 되었나

7. 문과+ 공대 편입생 + 프로그래밍 포기자가
어떻게 개발자가 되었나

8. 문과+ 공대 편입생 + 프로그래밍 포기자가
어떻게 개발자가 되었나

9. 문과 + 공대 편입생 + 프로그래밍 포기자가
어떻게 가 되었나

10. 브라운백커피라는 로켓에 탑승해서 개발팀의 으로 일한지
어연 3개월..

11. 스승님께서 큰 세상에 나가 배운것을 베풀라 명하시고..

12. 이제 막 첫 커밋한 인턴의 고민이 시작되는데..
“저 개발 시작한지 3개월 됐슴니다만..?”

13. 그냥 제가 느끼고 배운 것 솔직하게! 얘기해보겠습니다. ^^
누군가에겐 도움이 되겠지..

14. 우리 을 소개하자면!
[ 팀장 1, 인턴 1 ]
제가 인턴1을 맡고있습니다.

15. 하는 일 : 페북 광고 모델★
#출근했는데 커피먹고싶당 #원두는 역시 #브라운백 커피

16. ..말고 하는 일 :

17. 3개월동안 제가 만든 것ㅎㅎVV
(후기, 상품문의, 온갖)게시판
!주의: 아직 디자이너의 손이 묻지 않은 헐벗은 버전임

18. 이건 정말 같은 일이야!!
WHY?
에게.. 고작 게시판?

19. 저는 여중 + 여고 + 인문대를 다녔어요.

20. 편입을 시도했다 하게 됩니다.
약간 예상치 못하게

21. 그런데 합격한 과가 미디어 공학..
미디어.. 신방과 시절 줄기차게 듣던 단어..
“영상 편집..렌더링.. 포토샵 ＂

22. 그런데 합격한 과가 미디어 ?!
“영상 편집..렌더링.. 포토샵..프로그램을 맹글고 있네?＂

23. “저 프로그래밍 처음 해봐요.. 아니 난생 처음 봐요＂

24. 교수님.. 걷지도 못하는데 왜 날라고 하세요..
방금 printf(“Hello world”)찍었는데 알고리즘을 짜래

25. 프로그래밍과제.. 죄송합니다ㅠㅠ

26. 그러던 어느날 를 만나게 됩니다.

28. 나도 프로그래밍이라는 할 수 있구나

29. 그렇게 시작된 Django와의 ..? .?

30. 장고 걸스 스터디
9XD에서 쩌는 Django 개발자 만나기

31. => 스타트업 인턴즈 지원
나도 스타트업에서 개발자로 일해보고 싶어요!
*스타트업 인턴즈: 스타트업과 스타트업 들어가고 싶은 사람들 매칭해주는 프로그램

32. 브라운백커피, 인턴, 합격★☆
“그런데 제가 래요!”

33. 내가 첫 인턴개발자래요
쩌는 팀장님 어여 와요 (어미닭 기다리는 심정)

34. 17.08.21. 첫 출근
인턴
선배?
두근두근 첫 출근! 그리고 첫 개발자!

35. 17.09.01. 첫 출근
개발팀장
후배
그리고 일주일 뒤 팀장님이 오시게 됩니다.

36. 𝝅 팀장님 출근 일주일 전 받은 메일..
Gitlab, 코드리뷰, 테스트 주도 개발, 관계형 데이터베이스, SASS, CI, 코드 커버리지, ES6 ..
저 이런거 처음보는데여..

37. 쩌는 팀장님.. 스타트업.. 반가웠우이..

38. 본격 개발 기
난이도: 만점이 몇 점이던간에 0-1
목표
비개발자: “오오 뭔지 모르겠지만 뭔가 알아들은 것만 같아”
신입개발자: “오오 쟤도 하는데 나도 하겠다”
!주의
이 분투기는 발표자의 의식의 흐름 상태로 쓰여있음
처음에 혼란스럽겠지만 쟤도 혼란스러웠겠구나 하고 양해바래요~

39. 함수뷰, 클래스뷰 그까이꺼 뛰어넘고 Django Rest Framework

40. 출근 첫 날: 장고에 대한 이해도
java spring보다 훨씬

41. 장고는 이렇게 구조를 가졌지
viewurl template
사용자 액션 보여주기
내가 아는
사용자가 url로 요청을 보내면 -> 뷰에서 필요한 데이터를 가져와서-> 템플릿에서 보여주기

42. 과연 현실 = 실무는 그러한가?
내 머리가 단순하겠지..

43. 복잡도 x3
viewurl template
Rest api
Frontend framework

44. 제가 알던 장고에서..
viewurl template

45. + 프론트 프레임워크
viewurl template
Frontend framework

46. + rest api
viewurl template
Rest api
Frontend framework

47. 일단 팀장님 쓰는거 따라써보자

48. Q&A 게시판 앱에 rest api 붙여보기
+

49. 이렇게 URL을 치니까

50. 이런 페이지가 출력됐어요

51. 그냥 읽어 봤더니..
Api/product/qna로 GET요청 받았는데
HTTP 200 OK고
JSON형태의 데이터들을 보여주네..

52. 나 Django rest framework 써봤다! 구현해 봤어! 대단해!

53. 그래서 이걸 어디에 써먹는 거죠?

54. 나~~~중에 써보며 깨달은 사실

55. 프론트 프레임워크 에서 가져다 쓰더라구요!

56. 내가 아는 장고에서는 템플릿에서 필요한거 다집어넣고
html 덩어리 만들어서 브라우저한테 보내줬는데
장고에서는 템플릿
qna.html
뷰에서 전달해준 데이터
CSS
javascript
Django template

57. 프론트 프레임워크로 분리되어버렸음
장고에서는 템플릿
검색 엔진이나
url직접입력 할 때를
위해 존재할 뿐
CSS
Vue.js
자바스크립트로 이루어진 프론트 프레입워크
Django template
javascript
뿅!

58. 왜 이렇게 분리해요 삼단 로켓도 아니고

59. 쇼핑몰 웹을 만드려고

60. 웹의 진화
책같은 웹 같은 웹
보기만 좋으면 안되더라..보기 좋았더라

61. 같은 웹?

62. 마치 앱스토어에서 앱을 다운 받아 쓰듯이

63. 브라우저에서 프론트 프레임워크로 만든
javascript 덩어리를 다운받음
.js
www.브라운백커피.com

64. .js
.js
.js
…
www.브라운백커피.com
그리고 이 자바스크립트가 마치 처럼 동작

65. 장고에서는 템플릿
qna.html
뷰에서 전달해준 데이터
CSS
javascript
Django template
(원래 내가 알던 장고는) 장고 템플릿에서 필요한거 다합쳐서

66. 다 만들어진 요리 갖다 줬었는데
Django
Django
template

67. 이제 필요한 재료만 가져다주면

68. 다운받은 자바스크립트가 알아서 요리
Vue.js
javascript

69. 프론트에 갖다주는 이 재료들!

70. 아까 봤던 rest api가 출력해준 response

71. Rest api
[ ]
GET
POST
PUT
DELETE
url(‘api/board/qna’) +
요청
을 골라
응답
Json형태로 결과를
GET ‘api/board/qna’
HTTP 200 OK
{
id:1,
product:1,
content:’질문 내용’
}
자바스크립트에서 알아듣는

72. Vue.js
재료 보내주기
아, 이렇게 사용하려고 rest api 붙였구나
[ ]
GET
POST
PUT
DELETE
url(‘api/board/qna’) +
요청 응답
GET ‘api/board/qna’
HTTP 200 OK
{
id:1,
product:1,
content:’질문 내용’
}Rest api

73. 하지만 여전히 단순한 머리로
REST..프론트.. 모두 이해하지 못하였으나

74. 그래도 Django rest framework 쓰면서

75. 최근 프론트(앱)을 하나 더 만들고 있음
장고 기본 어드민 버리고 만드는 중

76. 장고 앱 따로 더 만들 필요없이

77. Shop front
Admin front
만들어둔 rest api 그대로 사용하면 되더라!
Rest api

78. Shop front
Admin front
똑같은 재료를 사용하니까!
Rest api

79. Vue는 에서 다시 만나요!

82. 어렵고 귀찮다더니 왜이렇게 다들 해본 사람 구한대

83. 팀장님이 추천해준 책을 사보았어요.

84. 테스트 염소..에게 복종하라? 뭔 소리..

85. 일단 팀장님 쓰는거 따라써보자

86. 테스트 주도개발 (내가) 하는 방법
시작
종료인 줄 알았지
단계1. 목표(할 일) 정의하기
단계2. 테스트코드로 번역하기
단계3. 테스트 통과하도록 짜기
테스트
통과
실패
재귀하도록
(언제까지고
테스트?)

87. 1. 목표 (할 일)정의 하기
이번 시험 목표는 학점 4.0넘기!
음 .. 선형대수학은 A, 데이터 구조 ..A+ 알고리즘 A..
지금 부터 매일 18시간씩 일주일 126시간 밤샘 공부닷….?!

88. 망함

89. 1. 목표 (할 일)정의 하기
게시판 만들어야지.
검색도 되고, 별점도 넣고 댓글도 주렁주렁달게 하고
뭐 요런 기능 조런 기능 다 넣어서
꼭 대표님이 좋아하는 아마존 같은 편리한 서비스를 만들테야.
오늘부터 열심히 매일 밤샘.. 아니 완전 집중해서 코딩해야지

90. 지뢰밭.을 만들었습니다.

91. 1. 목표 (할 일)구체적으로 정의 하기
• 상품문의 게시판 만들기
• 뷰 설계
• 로그인안한 유저는 상품문의 글 리스트를 읽을 수만 있다.
• 로그인한 유저는 상품문의를 읽을 수 있고 질문을 쓸 수도 있다.
• 자기가 쓴 글은 수정, 삭제할 수 있다
• 남의 글은 수정할 수 없다.
• 관리자에게는 모든 권한을 준다.

92. 2. 고대로 테스트 코드로 번역

93. 3. 통과하도록 코딩을 했지만 실패만 낳는다

94. 저는 초보자니까, 당황하지 말고 침착하게..에러 메시지를 살펴봅니다
“test_board_views.py 14번째 줄에서 404 결과가 나와야하는데 200이라 써져있어”

95. 3. 다시 통과하도록 코딩
옳지 잘햇네!통과!

96. 이건.. TDD에게 받는 개인과외?

97. 목표를 구체적으로 설정하도록 도와줌

98. 나도 모르게 설치한 지뢰밭 다 걸러줌
우린 초보자니까..자꾸자꾸 지뢰밭을 만들어요

99. 어드민에서 귀찮게 하나하나 만들고 확인 안해도됨

100. TDD쌤 잉글리쉬로 말하는것만 빼면 넘나 좋다.

101. git push 가 무서워요.. 제가 바보라서 그렇대요

102. 무지로 인한 공포 랍니다

103. 흔한_깃초보자의_git_사용에_따른_의식의_대류현상
commit
push
CI 실패
add

104. git add
git commit
git push
다 뭐하는 일인고

105. Git으로 코드를 저장해둬요
1. 내컴퓨터에 2. 원격저장소에

106. 1. 내컴퓨터에서
Commit
push
add 코드 변경한 파일 관리해줘
Add한 상태 저장해줘
Commit한 상태들 원격저장소에 넣어줘

107. Commit pushadd
1. 내 컴퓨터에서 2. 원격저장소까지
저장

108. GIT PUSH 이제 두렵지 않아요!
나에겐 branch가있다

109. Branch: 가지

110. 마스터(기둥)가지
master

111. master
은향의 ‘board’ branch파이님의 ‘cart’ branch
장바구니 만들자! 게시판 만들자!

112. master
장바구니 열심히 만드는 중
git commit
git commit
파이님의 ‘cart’ branch

113. master
합치기
장바구니
다 만들었다!
은향의 ‘board’ branch파이님의 ‘cart’ branch

114. master
합치기 게시판
다 만들었다!
은향의 ‘board’ branch파이님의 ‘cart’ branch

115. master
Commit 1
Commit 2
Commit 3
Commit 4
Commit: 우리가 코드 상태

116. 헤르미온느의 타임터너 시계를 획득했습니다.

117. 빨간색
은향의 branch
초록색
파이님의 branch

118. Git, 사랑해요♡♥

119. 검토(TDD)에 재검토(CI)에 또검토?!(코드리뷰)는 를 낳는다.

120. TDD

121. TDD
통과

122. CI?

123. Continuous Integration
지속적 통합..

124. Gitlab에 붙여서 다시 한 번 재검사 하기 위한 좋은 도구
저희가 쓰는 용도는..
심지어 gitlab에서 공짜♥

125. Git commit 하기 전마다 꼭 검사하기
flake8
pytest
npm run lint
파이썬 문법 검사
테스트 돌려보기
자바스크립트 문법 검사

126. 인간은 실수를 반복하니
원격저장소에 저장할 때(push)
한번 더 검사하도록 하자
.gitlab-ci.yml

127. 인간은 실수를 반복하니
원격저장소에 저장할 때(push)
한번 더 검사하도록 하자
.gitlab-ci.yml

128. 붙여놓고 보니 정말 실수 (자주) 하더라

129. CI 통과 일지

130. CI

131. 통과
CI

132. 코드리뷰

133. 코드리뷰
서로의 코드 변경사항을 확인하며
지적질하는거 아니고 꼼꼼하게 체크하는 행위

134. 효과

135. “이거 왜이렇게 만들었어요?”
“아니이거 post요청 보내면..
사용자가 이렇게 … 음…? ”

136. 코드리뷰

137. 코드커버리지_ 2017_11_29

139. 개발팀 (열)일하는 거 GITLAB이 다 보여줌

140. 저희 일하고 있어요..

141. 저희 일하고 있어요. 칼같이 칼퇴도 하고 있어요

142. 팀장님 커밋수 고군분투해서 따라잡을테야_인턴1의 패기

143. 3-5시에 미팅 안되요

144. 수요일에도 미팅 안되요

145. 말일에도 되도록 잡지 말아요.

146. 모두에게 열려있는 개발팀의 개발일지
우리 일하는거 알아달라고 에도 알림 붙여놨어요

147. Vue + Vuex 누가 제일 쉽다 그랬어

148. Vue.js 프론트엔드 프레임워크
요거
이 중 쉽다고 소문난 프레임워크

149. 그래서 찾아봄

150. Vue, Life cycle

151. 저만 어려운가 봅니다

152. 그래도 Vue쓰면서 가장 놀랍고 좋았던 컴포넌트!!

153. 예전 웹: css, html, js 한 덩어리

154. 요즘 웹: 컴포넌트로 분리되어 있음

155. 조상 컴포넌트

156. 부모 컴포넌트

157. 자식 컴포넌트 이런식으로 무한 분리

158. 내가 때리고 몸빵하고 힐도하고 다 할꺼야
예전 웹

159. 컴포넌트들한테 맡은바 잘 하라고 시킴.
요즘 웹

160. 마치 이렇게
검색 컴포넌트 Search.vue:
생김새,
행동을 가지고 있어요

161. 공지 사항에도 질문 답변 게시판에도 갖다 씀

162. 그렇다면 For문으로 컴포넌트 만들기!

164. 그러나 마냥 좋지만은 않았어요.

165. 프로세스 끝나는 타이밍 잡기의 어려움
언제 끝나? 언제까지 힐 해?

166. 장고 url, view 연동해줘야함

167. 결국 함수뷰, 클래스뷰 다 할 줄 알아야함
그까이꺼 하고 뛰어넘은

168. 카페에서 간지나게 코딩하고 싶어도

169. 듀얼 모니터앞의 지박령
Vue 때문에 상시 띄어놓는 도큐먼트 수만 4개
Vue, vuetify, vuex, vue router

170. + 눈물을 훔치며 마무리가 아니라 하는 시간

171. 오후 4시의 개발 인턴 1

172. 닮았나요?

173. 팀장님왈, 로켓에 탑승햇으면 중력정도는 견뎌줘야..

174. 고난, 역경 극복의 아이콘 왕좌의게임 아리아ㅠㅠ
해맑귀엽 -> 거지,남장 -> 장님까지

175. 시즌7에서 극복

176. 우리 모두 아리아처럼 개발자가 될거에요

177. 2017년 12월 파이썬 세미나 주제

178. ‘김은향’이 주니어 개발자가 되었다!
으냥
직업:

179. 감사합니다.