절망 드리븐 성장: 함께 일하고 싶은 개발자가 되기까지

'2019 한빛 데브그라운드 주니어' 행사에서 발표한 내용입니다.
웹 공부를 시작할때부터 인턴, 그리고 지금까지 겪었던 절망과 그 절망에서 얻었던 성장을 공유합니다.

Transcript

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

   View Slide

2. ࣗѐ!
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

    View Slide

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

    View Slide

12. 
    
    
    ਢҕࠗद੘
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

16. ਢҕࠗद੘
    2달 후..
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

20. ୐ߣ૩੺ݎ

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

    View Slide

21. ୐ߣ૩੺ݎ

    աחചݶ੉ٜ݅য૑ח੤޷ীबஂ೧ࢲഈস੉ࠛоמೠ௏ٜ٘ܳ݅঻ҳա
    ୐ߣ૩ࢿ੢

    খਵ۽ա੄ݽٚ௏٘ীחb੉ਬ`о੓যঠೠ׮
    ਢҕࠗद੘
    

    View Slide

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

    View Slide

23. ੋఢद੘
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

32. View Slide

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

    View Slide

34. فߣ૩੺ݎ

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

    View Slide

35. فߣ૩੺ݎ

    ب੷൤੉೧ೡࣻহযࢲաחೠ઴بޅ૞ѷҳաʜ
    فߣ૩ࢿ੢

    ੉೧ۆࢸݺೡࣻ੓חࣻળ੉׮աחޙࢲ۽੿ܻೞחҗ੿ীࢲо੢৮߷൤੉೧ೡࣻ੓׮
    ੋఢद੘
    
    

    View Slide

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

    View Slide

37. ׮द ࢿ੢ী؀ೠҊ޹
    

    View Slide

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

    View Slide

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

    View Slide

40. ࢿ੢਷ 

    ځݡৈ઱૑ঋח׮
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

50. ׮द ࢿ੢ী؀ೠҊ޹
    ࣁߣ૩੺ݎ

    bೞ؍؀۽` Ҋৈ੓૑ঋӝਤ೧ࢲաחযڌѱ೧ঠೡө
    

    View Slide

51. ׮द ࢿ੢ী؀ೠҊ޹
    ࣁߣ૩੺ݎ

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

    b੉೧`׮਺b࠺౸ೞ੗ݽٚѪীח؊ա਷ߑߨ੉੓ਸࣻ੓׮
    ӒܻҊաחӒߑߨਸ଺ইঠೠ׮
    (ब೒ ࣗ೐౟ਝয ᬊ )
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

62. ֎ߣ૩੺ݎ

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

    View Slide

63. ֎ߣ૩ࢿ੢

    bDPSFמ۱ਸ֫੉੗`ۄח݈਷୶࢚੸੉׮
    ֎ߣ૩੺ݎ

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

    View Slide

64. ֎ߣ૩ࢿ੢

    bDPSFמ۱ਸ֫੉੗`ۄח݈਷୶࢚੸੉׮
    ֎ߣ૩੺ݎ

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

    View Slide

65. ✅
    ੿ܻ
    ୐ߣ૩੺ݎ

    աחചݶ੉ٜ݅য૑ח੤޷ীबஂ೧ࢲഈস੉ࠛоמೠ௏ٜ٘ܳ݅঻ҳա
    ୐ߣ૩ࢿ੢

    খਵ۽ա੄ݽٚ௏٘ীחb੉ਬ`о੓যঠೠ׮
    

    View Slide

66. ✅
    ੿ܻ
    فߣ૩੺ݎ

    ب੷൤੉೧ೡࣻহযࢲաחೠ઴بޅ૞ѷҳաʜ
    فߣ૩ࢿ੢

    ੉೧ۆࢸݺೡࣻ੓חࣻળ੉׮աחޙࢲ۽੿ܻೞחҗ੿ীࢲо੢৮߷൤੉೧ೡࣻ੓׮
    

    View Slide

67. ✅
    ੿ܻ
    ࣁߣ૩੺ݎ

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

    b੉೧`׮਺b࠺౸ೞ੗ݽٚѪীח؊ա਷ߑߨ੉੓ਸࣻ੓׮
    ӒܻҊաחӒߑߨਸ଺ইঠೠ׮
    

    View Slide

68. ✅
    ੿ܻ
    ֎ߣ૩ࢿ੢

    bDPSFמ۱ਸ֫੉੗`ۄח݈਷୶࢚੸੉׮
    ֎ߣ૩੺ݎ

    ૑ध਷दрਸٜ੉ݶ঳ਸࣻ੓ਵա DPSF ӭՔೠ௏٘ܳ૞חמ۱
    חӒۧ૑ঋ׮
    ѐߊ੗੄DPSFמ۱ਸযڌѱ֫ੌࣻ੓ਸө
    ղ13਷ղо׮दࠁ੗
    ௏ܻ٘࠭ܳৌब൤ೞ੗
    زܐ੄௏٘חߓ਎੼੉݆׮
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

75. ղоೞ૑ঋחѪ ❌
    5
    %
    %
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

79. ղоೞ૑ঋחѪ ❌
    !
    About 이소영
    매일 매일 꾸준히 신기술을 학습하며, Main으로 사용하는 React의 모든 최신 스펙을 

    다 따라갈 뿐만 아니라, Vue, Angular, Svelete, Preact는 어느정도 다룰 줄 알고
    Vanilla JS도 소홀히 하지 않아서 JS기본기 서적또 꾸준히 읽고 함수형으로 코드를
    새롭고 유려하게 짜기위해 매일매일 짰던 코드도 다시 짜보고 Reactive Programming에
    대해서 Stream을 자유자재로 다루기 위해 SideProject를..
    

    View Slide

80. ղоೞ૑ঋחѪ ❌
    !
    About 이소영
    매일 매일 꾸준히 신기술을 학습하며, Main으로 사용하는 React의 모든 최신 스펙을 

    다 따라갈 뿐만 아니라, Vue, Angular, Svelete, Preact는 어느정도 다룰 줄 알고
    Vanilla JS도 소홀히 하지 않아서 JS기본기 서적또 꾸준히 읽고 함수형으로 코드를
    새롭고 유려하게 짜기위해 매일매일 짰던 코드도 다시 짜보고 Reactive Programming에
    대해서 Stream을 자유자재로 다루기 위해 SideProject를..
    저는 이렇게 꾸준히 소화하지는 못합니다..
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

86. хࢎ೤פ׮
    

    View Slide