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 full-size slide

  2. ࣗѐ!


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

    View full-size slide

  3. ਢҕࠗद੘
    ૓૞ڪযٜযࠁפ
    ѐߊ੗ۆ ࢿ੢੉ۆ

    ղоೞחѪҗೞ૑ঋחѪ
    য়ט੉ঠӝ
    пୀఠ݃׮੺ݎ੉

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  8. ਢҕࠗद੘
    ૓૞ڪযٜযࠁפ
    ѐߊ੗ۆ ࢿ੢੉ۆ

    ղоೞחѪҗೞ૑ঋחѪ
    য়ט੉ঠӝ
    пୀఠ݃׮੺ݎ੉

    View full-size slide

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

    View full-size slide

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

    View full-size slide




  11. ਢҕࠗद੘

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  19. ୐ߣ૩੺ݎ

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

    View full-size slide

  20. ୐ߣ૩੺ݎ

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

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

    View full-size slide

  21. ਢҕࠗद_੘
    ૓૞ڪযٜযࠁפ
    ѐߊ੗ۆ ࢿ੢੉ۆ

    ղоೞחѪҗೞ૑ঋחѪ
    য়ט੉ঠӝ
    пୀఠ݃׮੺ݎ੉

    View full-size slide

  22. ੋఢद੘

    View full-size slide

  23. ੋఢद੘

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

    View full-size slide

  24. 내가아는것

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

    아 내길이 아닌가

    View full-size slide

  25. ࣗ৔
    ࣗ৔
    ࣗ৔ ࣗ৔
    ࣗ৔
    ࣗ৔
    ࣗ৔
    ੋఢद੘

    스스로해본작전회의

    View full-size slide

  26. ࣗ৔
    ࣗ৔
    ࣗ৔ ࣗ৔
    ࣗ৔
    ࣗ৔
    ࣗ৔
    ੋఢद੘

    스스로해본작전회의
    ‘੉೧೮׮.’ ۄח ޖ঺ੑפө!

    View full-size slide

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

    View full-size slide

  28. ੋఢद੘

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

    View full-size slide

  29. ੋఢद੘

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

    View full-size slide

  30. ੋఢद੘

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

    View full-size slide

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

    View full-size slide

  32. فߣ૩੺ݎ

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

    View full-size slide

  33. فߣ૩੺ݎ

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

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

    View full-size slide

  34. ਢҕࠗद_੘
    ૓૞ڪযٜযࠁפ
    ѐߊ੗ۆ ࢿ੢੉ۆ

    ղоೞחѪҗೞ૑ঋחѪ
    য়ט੉ঠӝ
    пୀఠ݃׮੺ݎ੉

    View full-size slide

  35. ׮द ࢿ੢ী؀ೠҊ޹

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  38. ࢿ੢਷ 

    ځݡৈ઱૑ঋח׮

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

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

    View full-size slide

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

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

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  60. ֎ߣ૩੺ݎ

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

    View full-size slide

  61. ֎ߣ૩ࢿ੢

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

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

    View full-size slide

  62. ֎ߣ૩ࢿ੢

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

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

    View full-size slide


  63. ੿ܻ
    ୐ߣ૩੺ݎ

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

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

    View full-size slide


  64. ੿ܻ
    فߣ૩੺ݎ

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

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

    View full-size slide


  65. ੿ܻ
    ࣁߣ૩੺ݎ

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

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

    View full-size slide


  66. ੿ܻ
    ֎ߣ૩ࢿ੢

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

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

    View full-size slide

  67. ਢҕࠗद_੘
    ૓૞ڪযٜযࠁפ
    ѐߊ੗ۆ ࢿ੢੉ۆ

    ղоೞחѪҗೞ૑ঋחѪ
    য়ט੉ঠӝ
    пୀఠ݃׮੺ݎ੉

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

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

    View full-size slide

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

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

    View full-size slide

  79. ղоೞ૑ঋחѪ ❌
    !
    About 이소영

    지금 다루는 것을 잘 쓰는 것에 집중 / 새로운 것에는 약간의 관심만
    ex: 오, SSR은 이런 상황에서 조합해서 쓰는군.

    View full-size slide

  80. ղоೞ૑ঋחѪ ❌
    !
    About 이소영

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

    View full-size slide

  81. ղоೞ૑ঋחѪ ❌
    !
    About 이소영

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

    View full-size slide

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

    실패했다면, 반복되지 않을때 / 나의 ‘기준’들이 많아질 때

    View full-size slide

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

    : 여러분의 성장 Step은 무엇인가요?
    실패했다면, 반복되지 않을때 / 나의 ‘기준’들이 많아질 때

    View full-size slide

  84. хࢎ೤פ׮

    View full-size slide