성장하는 프론트엔드 개발자 되기 - 원티드 온라인 Live Talk #20 후기

작성 : 2021-03-25수정 : 2021-03-27

목차 펼치기




원티드 온라인 Live Talk #20

  • 성장하는 프론트엔드 개발자 되기.


장현석

우아한형제들 테크코스교육개발팀 프론트엔드 코치



성장해야만 하는 이유

  • 우리는 왜 성장하고 싶을까?


  1. 솔직한 욕망 드러내기
    성장은 수단인가, 목표인가?

  2. 목표에 맞는 방향 조준하기
    방향이 있다면 중간은 간다

  3. 직접 실행하기
    아무것도 하지 않으면 아무 일도 일어나지 않는다

  4. 성장 확인하기
    적절한 피드백 & 피드포워드



고민 위임

  • 우리의 고민은 나쁜 게 아니다


  1. 고민은 생각할 수 있는 기회
    생산적인 생각해볼 수 있는 기회

  2. 의미있는 고민하기
    고민에도 밀도가 있다

  3. 더 깊이 고민하기
    한번 도망가면 평생 도망갈 수도 있다

  4. 고민보다는 실행
    백 번 고민하는 것보다 한 번 실행하는 것이 낫다



유효하지 않은 질문

  • 우리는 왜 질문에 의존할까요?


  1. 스스로에게 질문해보기
    스스로 해결해보자

  2. 정해진 답 확인하지 않기
    질문은 심리 테스트가 아니다

  3. 결정권 위임하지 않기
    내 인생은 내가 결정한다

  4. 옳은 결정이 되도록 노력하기
    잘못된 결정인 것 같아 후회된다면 그 결정을 성공으로 바꿔보자



모범 사례

  • best practice를 검색하거나 남들이 만든 것들을 clone coding하여 얻는 배움에 대해서는 자기 걸로 만드는 노력이 필요하다.


  1. 남과 비교하지 않기
    남과 비교할 시간에 자기 객관화를 하자

  2. 지름길을 바라는 것은 순간의 요행
    그 길이 내 길은 아니더라

  3. 길을 잃고 헤매는 것도 엄청난 배움
    생각보다 더 기억에 남는다

  4. 잘 하고 싶은 것이 있다면 그것을 하자
    나보다 더 잘하는 사람은 나보다 더 시간을 쏟은 사람이더라



Front-end Engineer

  • 기술적인 부분에 매몰되어 사용자의 경험을 해치게 되는 것은 아닌지





김민준

리디 라프텔 사업부 프론트엔드 파트장


프론트엔드 개발자로서의 성장

  • 스스로에게 질문, 내가 아직 잘 모르는 것이 무엇인가?

    • 내 눈앞에 놓인 것 중 모르는 것들에 대해 차근차근 알아가기, 단 그러다보면 뭘 해야 될지 모르는 시점이 온다.

    • 다른 개발자들과 소통하거나, 기술 컨퍼런스에 참여하여 인사이트를 얻거나, 동영상 및 해외 자료를 확인하면 좋은 자극이 될 수 있다.

  • 새로운 기술을 배우는 것만이 성장은 아니다

  • 현재 내 기술과 나와 더 연관성이 있고 도움이 되는 기술들을 갈고 닦자

    • 옛날에 썼던 코드를 리팩토링하는 것

  • 어떻게 하면 더 효율적으로 일할 수 있을까?에 대한 고민

  • 프로그래밍이 전부가 아니라, 소통 또한 매우 중요한 가치이다.

    • 프론트엔드는 기획/디자인 및 백엔드 와 소통할 기회가 많다.

    • 또한 이 부분에 관심을 가지자

    • 피그마 추천

  • 사이드 프로젝트

    • 꾸준함

    • 개발 기간 정하기

      • 배포와 릴리즈가 목표이고, 사용자의 반응을 보기 위함

    • 기술과 프로덕트 중 택 1

      • 새로운 기술을 적용해 볼 수 있는 기회이지만, 러닝커브 및 효율면에서 떨어질 수 있다.

      • 한 쪽에 포커싱을 맞추는 것이 좋다.

    • 실용성 있는 프로덕트 만들기

    • 기획 프로세스는 중요하다. 기획 없이는 한계가 있다.

    • 릴리즈 후 회고를 작성하자.


    무엇을 모르는 지 파악 > 개발자들과의 소통하며 인사이트 > 가진 기술을 갈고 닦기 > 소통에 관심가지기 > 백엔드, 디자인, 기획팀과 소통에 관심가지기 > 사이드 프로젝트 진행해보기




    변정훈

    당근마켓 SRE


    오픈소스로 성장하는 개발자






    깊이의 확장

    • 사용하는 프레임워크 또는 라이브러리 등 오픈소스의 내부 구조

      • ex) React Virtual DOM, Hook이 어떻게 구현되어 있나

      • 기술의 한계 및 범위 등을 파악할 수 있다.

      • 내부 코드를 보는 연습은 시간이 많이 걸린다.

        • 익숙해질 수록 빨라지고 두려움이 없어진다.

        • 대부분은 좋은 코드를 보고 배울 수 있다.

    • 프로젝트의 초기 버전을 보는 것도 좋다.

    • 결국은 브라우저 위에서 동작한다.

      • HTML

      • 브라우저의 렌더링

      • JavaScript 엔진 (V8, SpiderMonkey)

      • ECMAScript

      • CSS Specification

    • 기술이 바뀌어도, 기존 기술과 비슷한 접근 방법을 조금씩 개선해서 나오거나 다른 해법을 제시하는 것이다.

    • 현재 사용 중인 오픈소스의 이해가 높을수록 더 빨리 적응할 수 있다.


    영역의 확장

    • 프론트엔드가 커버할 수 있는 범위가 커지고, 구성이 달라지고 있다.

      • SPA

      • JAMstack

      • Site Generator

        • Jekyll, Gatsby

      • Headless CMS

    • 서버와 별도로 배포

      • 배포 파이프라인의 구성

      • 배포 구성 결정 (서버, 스토리지, CDN)

      • Branch, Pull Request 별 Preview

    • 프론트엔드 서버

      • Next.js

      • 서버 운영 경험, 모니터링, 장애 대응에 대한 방법들이 필요해짐

    • CDN / Serverless

      • HTTPS 구성

      • 접근 제어

      • 서버리스 관리 및 운영


    • 전부 직접 하진 못하더라도 개선점 등을 같이 논의할 수는 있어야 한다.

    • 앞으로도 생길 변화에 대응하려면 어떤 변화가 생기는 지 알아야 한다.




    React 상태 관리 라이브러리

    • 좋아하는 걸 쓰는 게 맞다.

    • recoil 이 편하고 좋기는 한데, 아직 공식 릴리즈가 되지 않고 문서가 적어 조심스럽다.


    프론트엔드 개발자들 속 차별성을 가지는 방법

    • 프로그래밍을 잘한다.

    • 꼼꼼하다.

    • 최적화 경험이 많다.


    중압감을 이겨낸 경험

    • 본인 실력에 대한 객관화 할 기준을 마련하자

    • 언젠가는 이겨낼 때 까지 버텨낼 수 밖에 없다.

    • 잘하는 사람처럼 되고 싶다는 마음으로 계속 앞으로 달리다보면 어느 순간 이겨져 있다.

    • 누군가에게는 긍정적인 자극제가 될 수 있는 만큼 성격 마다 대응이 다를 것 같다. 그런 본인만의 방법을 만들어 보면 좋을 것 같다.


    어떻게 시작하면 좋을 지?

    • 무엇을 만들면서 어떤 기술을 고민해서 사용하였고 왜 이렇게 사용했고 개발했는 지 등등에 대한 디테일이 필요하다


    사수 없는 환경에서 어떻게 성장할 수 있나?

    • 짧은 기간은 괜찮지만, 누군가 내 코드를 볼 수 있는 환경과 아닌 환경은 다를 수밖에 없다.

    • 문제에 대해 혼자 생각하는 것보다 여럿이 생각하는 게 좋다

    • 누군가와 같이 일한다는 것은 큰 가치이다.


    퍼블리셔와 프론트엔드 개발자의 차이를 두는 지

    • 퍼블리셔라는 직군이 사라진 회사들도 있다.

    • 현업에서는 점점 구분을 안하는 분위기이며 그게 맞는 방향인 것처럼 나아가고 있다.

    • 프론트엔드의 영역이 커져가고 있다.

      • 구분된다면, 프론트엔드 내에서 구분되지 않을까?


    훌륭한 샘플이 될 만한 오픈소스가 있을까?

    • Scrapy

    • 매터모스트 메신저

    • redux-thunk

    • lodash

    • 인플루언서들의 사이드 프로젝트


Wanna get in touch?

All Icons byiconiFy