Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

SoYoung210
December 13, 2019

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

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

SoYoung210

December 13, 2019
Tweet

More Decks by SoYoung210

Other Decks in Technology

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