Slide 1

Slide 1 text

੺ݎܻ٘࠵ࢿ੢ ೣԋੌೞҊर਷ѐߊ੗оغӝө૑ 한빛빌딩 A동 강의실 2019.12.13 15:20 ~ 16:00

Slide 2

Slide 2 text

ࣗѐ!

Slide 3

Slide 3 text

ࣗѐ! 웹 공부를 처음 시작 처음으로 무언가 만들어 봄 인턴 시작! (Banksalad) 입사 (Banksalad)

Slide 4

Slide 4 text

ਢҕࠗद੘ ૓૞ڪযٜযࠁפ ѐߊ੗ۆ ࢿ੢੉ۆ ղоೞחѪҗೞ૑ঋחѪ য়ט੉ঠӝ пୀఠ݃׮੺ݎ੉

Slide 5

Slide 5 text

૕ޙ : 언제 ‘한 단계 성장했다.’ 라고 말할 수 있을까요?

Slide 6

Slide 6 text

૕ޙ : 언제 ‘한 단계 성장했다.’ 라고 말할 수 있을까요? 이전보다 빠르게 개발할 때 ?

Slide 7

Slide 7 text

૕ޙ : 언제 ‘한 단계 성장했다.’ 라고 말할 수 있을까요? 같은 실수를 반복하지 않을 때 ? 이전보다 빠르게 개발할 때 ?

Slide 8

Slide 8 text

૕ޙ : 언제 ‘한 단계 성장했다.’ 라고 말할 수 있을까요? 질문에 답을 많이 할 수 있을 때 ? 프로젝트를 많이하면 ? 같은 실수를 반복하지 않을 때 ? 이전보다 빠르게 개발할 때 ?

Slide 9

Slide 9 text

ਢҕࠗद੘ ૓૞ڪযٜযࠁפ ѐߊ੗ۆ ࢿ੢੉ۆ ղоೞחѪҗೞ૑ঋחѪ য়ט੉ঠӝ пୀఠ݃׮੺ݎ੉

Slide 10

Slide 10 text

ਢҕࠗद੘ (오! 좀 재밌다! 괜찮은데?)

Slide 11

Slide 11 text

실제_만들어야했던_프로젝트_시안.png ਢҕࠗद੘

Slide 12

Slide 12 text

ਢҕࠗद੘

Slide 13

Slide 13 text

ਢҕࠗद੘ 어려워 보이는 스펙을! 구현했다! 코드를 작성하니까 돌아간다!

Slide 14

Slide 14 text

어려워 보이는 스펙을! 구현했다! 코드를 작성하니까 돌아간다! ਢҕࠗद੘

Slide 15

Slide 15 text

⚠ 무엇이든 짤 수 있을것 같다는 허황된 자신감에 빠짐 ⚠ ਢҕࠗद੘ 어려워 보이는 스펙을! 구현했다! 코드를 작성하니까 돌아간다!

Slide 16

Slide 16 text

ਢҕࠗद੘ 2달 후..

Slide 17

Slide 17 text

: (…) (규칙이 없었고, 기억도 나지 않음.) ( : Container가 하나밖에.. 이벤트 핸들링위치..컴포넌트 기준은.. store는 무슨 규칙으로.. 파일명은 무슨 규칙… css className은 왜 제각각..?.. slider는 어떤 로직으로…안되는 것도.. 테스트 코드도 없고.. 왜 같은 로직이 여기저기.. 휴, 어떤 구조로 되어 있는 건지 코드 흐름 한번 설명해 주시겠어요? ਢҕࠗद੘

Slide 18

Slide 18 text

내가 만들었지만 나도 기억이 안난다. 다른 사람에게 설명할 수 없다. ਢҕࠗद੘

Slide 19

Slide 19 text

내가 만들었지만 나도 기억이 안난다. 다른 사람에게 설명할 수 없다. 코드에 규칙이 없으면 협업할 수 없다. ਢҕࠗद੘

Slide 20

Slide 20 text

୐ߣ૩੺ݎ
 աחചݶ੉ٜ݅য૑ח੤޷ীबஂ೧ࢲഈস੉ࠛоמೠ௏ٜ٘ܳ݅঻ҳա ਢҕࠗद੘

Slide 21

Slide 21 text

୐ߣ૩੺ݎ
 աחചݶ੉ٜ݅য૑ח੤޷ীबஂ೧ࢲഈস੉ࠛоמೠ௏ٜ٘ܳ݅঻ҳա ୐ߣ૩ࢿ੢
 খਵ۽ա੄ݽٚ௏٘ীחb੉ਬ`о੓যঠೠ׮ ਢҕࠗद੘

Slide 22

Slide 22 text

ਢҕࠗद_੘ ૓૞ڪযٜযࠁפ ѐߊ੗ۆ ࢿ੢੉ۆ ղоೞחѪҗೞ૑ঋחѪ য়ט੉ঠӝ пୀఠ݃׮੺ݎ੉

Slide 23

Slide 23 text

ੋఢद੘

Slide 24

Slide 24 text

ੋఢद੘ 배울것목록 Clean Architecture Rx.js TypeScript Git Flow 많은 양의 코드 읽는 법 DI

Slide 25

Slide 25 text

내가아는것 ❌ 배울것목록 Clean Architecture Rx.js TypeScript git flow 많은 양의 코드 읽는 법 DI ੋఢद੘ 아 내길이 아닌가

Slide 26

Slide 26 text

ࣗ৔ ࣗ৔ ࣗ৔ ࣗ৔ ࣗ৔ ࣗ৔ ࣗ৔ ੋఢद੘ 스스로해본작전회의

Slide 27

Slide 27 text

ࣗ৔ ࣗ৔ ࣗ৔ ࣗ৔ ࣗ৔ ࣗ৔ ࣗ৔ ੋఢद੘ 스스로해본작전회의 ‘੉೧೮׮.’ ۄח ޖ঺ੑפө!

Slide 28

Slide 28 text

이해라는 것은 정리하는 것이다. 정리란, 남에게 설명할 수 있는 정도. - ‘인턴상륙작전’ 발표 中 ੋఢद੘

Slide 29

Slide 29 text

ੋఢद੘ 설명을 해봅니다. 누구에게? 다음으로 들어올 ‘누군가’에게

Slide 30

Slide 30 text

ੋఢद੘ 설명을 해봅니다. 누구에게? 다음으로 들어올 ‘누군가’에게

Slide 31

Slide 31 text

ੋఢद੘ 0. Git Setting 회사의 Git Setting은 내가 하던것과 많이 다름 1. Clean Architecture(기존 구조) 발표자료 형식으로 제작. : 설명하듯 내용을 정리할 수 있음

Slide 32

Slide 32 text

No content

Slide 33

Slide 33 text

정리 + 공유 = 피드백 ੋఢद੘

Slide 34

Slide 34 text

فߣ૩੺ݎ
 ب੷൤੉೧ೡࣻহযࢲաחೠ઴بޅ૞ѷҳաʜ ੋఢद੘

Slide 35

Slide 35 text

فߣ૩੺ݎ
 ب੷൤੉೧ೡࣻহযࢲաחೠ઴بޅ૞ѷҳաʜ فߣ૩ࢿ੢
 ੉೧ۆࢸݺೡࣻ੓חࣻળ੉׮աחޙࢲ۽੿ܻೞחҗ੿ীࢲо੢৮߷൤੉೧ೡࣻ੓׮ ੋఢद੘

Slide 36

Slide 36 text

ਢҕࠗद_੘ ૓૞ڪযٜযࠁפ ѐߊ੗ۆ ࢿ੢੉ۆ ղоೞחѪҗೞ૑ঋחѪ য়ט੉ঠӝ пୀఠ݃׮੺ݎ੉

Slide 37

Slide 37 text

׮द ࢿ੢ী؀ೠҊ޹

Slide 38

Slide 38 text

׮द ࢿ੢ী؀ೠҊ޹ 1년전, 학부생 이소영이 생각한1년차 개발자 https://hypebeast.kr/2017/8/10-strongest-super-saiyan-transformations-dragon-ball

Slide 39

Slide 39 text

׮द ࢿ੢ী؀ೠҊ޹ 1년전, 학부생 이소영이 생각한1년차 개발자 https://hypebeast.kr/2017/8/10-strongest-super-saiyan-transformations-dragon-ball 1년후, 1년차 개발자 이소영 https://tdgall.com/64574658

Slide 40

Slide 40 text

ࢿ੢਷ 
 ځݡৈ઱૑ঋח׮

Slide 41

Slide 41 text

׮द ࢿ੢ী؀ೠҊ޹ 업무 !== 성장 반복적인 업무를 비슷한 Spec의 기능을, 노가다로 많은 부분의 코드를 변경하는 일을 버그를 만나고 해결하는 일들을

Slide 42

Slide 42 text

׮द ࢿ੢ী؀ೠҊ޹ 업무 !== 성장 반복적인 업무를 비슷한 Spec의 기능을, 노가다로 많은 부분의 코드를 변경하는 일을 버그를 만나고 해결하는 일들을 Copy & Paste === 그 단계에 머무르는 것 ⛱

Slide 43

Slide 43 text

׮द ࢿ੢ী؀ೠҊ޹ 업무 !== 성장 반복적인 업무를 비슷한 Spec의 기능을, 노가다로 많은 부분의 코드를 변경하는 일을 버그를 만나고 해결하는 일들을 업무 === 성장 자동화 할 수는 없나? 더 나은 패턴은 없나? 자동화 할 수는 없나? 팀내 지식 공유를 통한 ‘모두의 성장’으로 https://speakerdeck.com/jaeyeophan/mentoseuwa-inteonkolra

Slide 44

Slide 44 text

׮द ࢿ੢ী؀ೠҊ޹ 자동화 할 수는 없나? - 브릿지 페이지 제작 자동화

Slide 45

Slide 45 text

׮द ࢿ੢ী؀ೠҊ޹ 자동화 할 수는 없나? - 프로젝트 스캐폴딩

Slide 46

Slide 46 text

׮द ࢿ੢ী؀ೠҊ޹ 팀내 지식 공유를 통한 ‘모두의 성장’으로

Slide 47

Slide 47 text

׮द ࢿ੢ী؀ೠҊ޹ 팀내 지식 공유를 통한 ‘모두의 성장’으로

Slide 48

Slide 48 text

׮द ࢿ੢ী؀ೠҊ޹ 더 나은 패턴은 없나? - ‘당연한 것은 없다.’ Clean Architecture-in Banksalad

Slide 49

Slide 49 text

׮द ࢿ੢ী؀ೠҊ޹ 더 나은 패턴은 없나? - ‘당연한 것은 없다.’ Clean Architecture-in Banksalad Brand New Architecture

Slide 50

Slide 50 text

׮द ࢿ੢ী؀ೠҊ޹ ࣁߣ૩੺ݎ
 bೞ؍؀۽` Ҋৈ੓૑ঋӝਤ೧ࢲաחযڌѱ೧ঠೡө

Slide 51

Slide 51 text

׮द ࢿ੢ী؀ೠҊ޹ ࣁߣ૩੺ݎ
 bೞ؍؀۽` Ҋৈ੓૑ঋӝਤ೧ࢲաחযڌѱ೧ঠೡө ࣁߣ૩ࢿ੢
 b੉೧`׮਺b࠺౸ೞ੗ݽٚѪীח؊ա਷ߑߨ੉੓ਸࣻ੓׮ ӒܻҊաחӒߑߨਸ଺ইঠೠ׮ (ब೒ ࣗ೐౟ਝয ᬊ )

Slide 52

Slide 52 text

׮द ࢿ੢ী؀ೠҊ޹ 자동화 새로운 구조 지식 공유 redux 추상화 뿌-듯 (가끔) 버그해결에 도움

Slide 53

Slide 53 text

׮द ࢿ੢ী؀ೠҊ޹ ‘익명’ OO ✨ My- Bro FP 세션 공유

Slide 54

Slide 54 text

׮द ࢿ੢ী؀ೠҊ޹ ‘익명’ OO ✨ My- Bro FP 세션 공유 https://joeun.dev/

Slide 55

Slide 55 text

׮द ࢿ੢ী؀ೠҊ޹ 코딩을 이루는 요소는 지식 코드

Slide 56

Slide 56 text

׮द ࢿ੢ী؀ೠҊ޹ 코딩을 이루는 요소는 webpack React - 최신스펙 좋은 Library 다루기 SSR 구현 지식 코드

Slide 57

Slide 57 text

׮द ࢿ੢ী؀ೠҊ޹ 코딩을 이루는 요소는 webpack React - 최신스펙 좋은 Library 다루기 SSR 구현 지식 코드

Slide 58

Slide 58 text

׮द ࢿ੢ী؀ೠҊ޹ 코딩을 이루는 요소는 지식 코드 webpack React - 최신스펙 좋은 Library 다루기 SSR 구현

Slide 59

Slide 59 text

׮द ࢿ੢ী؀ೠҊ޹ 2 : 각 페이지를 이루는 코드는 책처럼 읽혀야 합니다. 다음 페이지로 넘어갈 때, 다음장을 읽는 것처럼 흐름대로 읽혀야 합니다.

Slide 60

Slide 60 text

׮द ࢿ੢ী؀ೠҊ޹ 2 : 각 페이지를 이루는 코드는 책처럼 읽혀야 합니다. 다음 페이지로 넘어갈 때, 다음장을 읽는 것처럼 흐름대로 읽혀야 합니다. ! : 음, 내코드는 어떻지?

Slide 61

Slide 61 text

׮द ࢿ੢ী؀ೠҊ޹ 흐름이 이리저리 튀고, 창의적이라고 생각한 가독성 나쁜 로직들이 흩어져 있고, 함수 이름이 불분명 하고, 수정에 용이할것 같지 않은 코드.gif

Slide 62

Slide 62 text

֎ߣ૩੺ݎ
 ૑ध਷दрਸٜ੉ݶ঳ਸࣻ੓ਵա DPSF ӭՔೠ௏٘ܳ૞חמ۱ חӒۧ૑ঋ׮ ѐߊ੗੄DPSFמ۱ਸযڌѱ֫ੌࣻ੓ਸө ׮द ࢿ੢ী؀ೠҊ޹

Slide 63

Slide 63 text

֎ߣ૩ࢿ੢
 bDPSFמ۱ਸ֫੉੗`ۄח݈਷୶࢚੸੉׮ ֎ߣ૩੺ݎ
 ૑ध਷दрਸٜ੉ݶ঳ਸࣻ੓ਵա DPSF ӭՔೠ௏٘ܳ૞חמ۱ חӒۧ૑ঋ׮ ѐߊ੗੄DPSFמ۱ਸযڌѱ֫ੌࣻ੓ਸө ׮द ࢿ੢ী؀ೠҊ޹

Slide 64

Slide 64 text

֎ߣ૩ࢿ੢
 bDPSFמ۱ਸ֫੉੗`ۄח݈਷୶࢚੸੉׮ ֎ߣ૩੺ݎ
 ૑ध਷दрਸٜ੉ݶ঳ਸࣻ੓ਵա DPSF ӭՔೠ௏٘ܳ૞חמ۱ חӒۧ૑ঋ׮ ѐߊ੗੄DPSFמ۱ਸযڌѱ֫ੌࣻ੓ਸө ׮द ࢿ੢ী؀ೠҊ޹ ղ13਷ղо׮दࠁ੗ ௏ܻ٘࠭ܳৌब൤ೞ੗ زܐ੄௏٘חߓ਎੼੉݆׮

Slide 65

Slide 65 text

✅ ੿ܻ ୐ߣ૩੺ݎ
 աחചݶ੉ٜ݅য૑ח੤޷ীबஂ೧ࢲഈস੉ࠛоמೠ௏ٜ٘ܳ݅঻ҳա ୐ߣ૩ࢿ੢
 খਵ۽ա੄ݽٚ௏٘ীחb੉ਬ`о੓যঠೠ׮

Slide 66

Slide 66 text

✅ ੿ܻ فߣ૩੺ݎ
 ب੷൤੉೧ೡࣻহযࢲաחೠ઴بޅ૞ѷҳաʜ فߣ૩ࢿ੢
 ੉೧ۆࢸݺೡࣻ੓חࣻળ੉׮աחޙࢲ۽੿ܻೞחҗ੿ীࢲо੢৮߷൤੉೧ೡࣻ੓׮

Slide 67

Slide 67 text

✅ ੿ܻ ࣁߣ૩੺ݎ
 bೞ؍؀۽` Ҋৈ੓૑ঋӝਤ೧ࢲաחযڌѱ೧ঠೡө ࣁߣ૩ࢿ੢
 b੉೧`׮਺b࠺౸ೞ੗ݽٚѪীח؊ա਷ߑߨ੉੓ਸࣻ੓׮ ӒܻҊաחӒߑߨਸ଺ইঠೠ׮

Slide 68

Slide 68 text

✅ ੿ܻ ֎ߣ૩ࢿ੢
 bDPSFמ۱ਸ֫੉੗`ۄח݈਷୶࢚੸੉׮ ֎ߣ૩੺ݎ
 ૑ध਷दрਸٜ੉ݶ঳ਸࣻ੓ਵա DPSF ӭՔೠ௏٘ܳ૞חמ۱ חӒۧ૑ঋ׮ ѐߊ੗੄DPSFמ۱ਸযڌѱ֫ੌࣻ੓ਸө ղ13਷ղо׮दࠁ੗ ௏ܻ٘࠭ܳৌब൤ೞ੗ زܐ੄௏٘חߓ਎੼੉݆׮

Slide 69

Slide 69 text

ਢҕࠗद_੘ ૓૞ڪযٜযࠁפ ѐߊ੗ۆ ࢿ੢੉ۆ ղоೞחѪҗೞ૑ঋחѪ য়ט੉ঠӝ пୀఠ݃׮੺ݎ੉

Slide 70

Slide 70 text

ղоೞחѪ 기록, 또 기록, 공유 https://github.com/soYoung210/soso-tip/issues https://so-so.dev/

Slide 71

Slide 71 text

ղоೞחѪ 기록, 또 기록, 공유

Slide 72

Slide 72 text

ղоೞחѪ 기록, 또 기록, 공유 https://jbee.io/essay/lets_conference/

Slide 73

Slide 73 text

ղоೞחѪ 기록, 또 기록, 공유 https://jbee.io/essay/lets_conference/ 준비하는 과정 = 또 한번의 성장

Slide 74

Slide 74 text

ղоೞחѪ 기록, 또 기록, 공유

Slide 75

Slide 75 text

ղоೞ૑ঋחѪ ❌ 5 % %

Slide 76

Slide 76 text

ղоೞ૑ঋחѪ ❌ 5 % % witter riven evelopment

Slide 77

Slide 77 text

ղоೞ૑ঋחѪ ❌ 5 % % witter riven evelopment GraphQL Super Awesome Custom Hooks React묻고 Vue 더블로 가 React묻고 Angular 더블로 가 Animation 성능 최에ㅔ적화 Rx?

Slide 78

Slide 78 text

ղоೞ૑ঋחѪ ❌ 5 % % witter riven evelopment GraphQL Super Awesome Custom Hooks React묻고 Vue 더블로 가 React묻고 Angular 더블로 가 Animation 성능 최에ㅔ적화 Rx? 이걸 다 해야하나..?

Slide 79

Slide 79 text

ղоೞ૑ঋחѪ ❌ ! About 이소영 매일 매일 꾸준히 신기술을 학습하며, Main으로 사용하는 React의 모든 최신 스펙을 
 다 따라갈 뿐만 아니라, Vue, Angular, Svelete, Preact는 어느정도 다룰 줄 알고 Vanilla JS도 소홀히 하지 않아서 JS기본기 서적또 꾸준히 읽고 함수형으로 코드를 새롭고 유려하게 짜기위해 매일매일 짰던 코드도 다시 짜보고 Reactive Programming에 대해서 Stream을 자유자재로 다루기 위해 SideProject를..

Slide 80

Slide 80 text

ղоೞ૑ঋחѪ ❌ ! About 이소영 매일 매일 꾸준히 신기술을 학습하며, Main으로 사용하는 React의 모든 최신 스펙을 
 다 따라갈 뿐만 아니라, Vue, Angular, Svelete, Preact는 어느정도 다룰 줄 알고 Vanilla JS도 소홀히 하지 않아서 JS기본기 서적또 꾸준히 읽고 함수형으로 코드를 새롭고 유려하게 짜기위해 매일매일 짰던 코드도 다시 짜보고 Reactive Programming에 대해서 Stream을 자유자재로 다루기 위해 SideProject를.. 저는 이렇게 꾸준히 소화하지는 못합니다..

Slide 81

Slide 81 text

ղоೞ૑ঋחѪ ❌ ! About 이소영 지금 다루는 것을 잘 쓰는 것에 집중 / 새로운 것에는 약간의 관심만 ex: 오, SSR은 이런 상황에서 조합해서 쓰는군.

Slide 82

Slide 82 text

ղоೞ૑ঋחѪ ❌ ! About 이소영 지금 다루는 것을 잘 쓰는 것에 집중 / 새로운 것에는 약간의 관심만 ex: 오, SSR은 이런 필요성 때문에 나왔군. '좋음'이 충분히 검증 된 뒤에 도입해도 늦지 않는다. 실무의 바람은 그렇게 빨리 바뀌지 않는다.

Slide 83

Slide 83 text

ղоೞ૑ঋחѪ ❌ ! About 이소영 지금 다루는 것을 잘 쓰는 것에 집중 / 새로운 것에는 약간의 관심만 ex: 오, SSR은 이런 필요성 때문에 나왔군. '좋음'이 충분히 검증 된 뒤에 도입해도 늦지 않는다. 실무의 바람은 그렇게 빨리 바뀌지 않는다. 지식의 홍수에서 오는 초조함은 불안감이었다. 불안감은 무력감이 되었고, 이는 잘되던 일도 안되게 했다.

Slide 84

Slide 84 text

૕ޙ : 언제 ‘한 단계 성장했다.’ 라고 말할 수 있을까요? 실패했다면, 반복되지 않을때 / 나의 ‘기준’들이 많아질 때

Slide 85

Slide 85 text

૕ޙ : 언제 ‘한 단계 성장했다.’ 라고 말할 수 있을까요? : 여러분의 성장 Step은 무엇인가요? 실패했다면, 반복되지 않을때 / 나의 ‘기준’들이 많아질 때

Slide 86

Slide 86 text

хࢎ೤פ׮