[2023 첫번째 개취콘] JUMPIT TO FRONT-END 후기

2023 첫번째 개취콘

 

 

점핏

 

4월 30일에 점핏에서 주최한 개취콘을 시청했다. 오프라인으로 가고 싶었지만 200명 추첨이기에 깔끔하게 마음 접고 온라인 중계를 선택했다. SNS 맞춤 광고로 떠서 개취콘이 열리는 것을 알게 되었는데, 주변에서도 신청한 분들이 좀 계셨다. 내가 참여 신청하게 된 계기는 우선 세션 주제와 구성이 마음에 들었고, 인강으로 알고 있던 강연자 분도 계셨고, 심지어 이번 행사가 무료라는 점 때문이었다.

 

💚1부 : 센스 있게 일하는 FE 개발자 되기 (13:30 - 15:00)
Session 1. FE 개발자의 소프트 스킬과 하드 스킬 - 김태곤 강연자님
Session 2. 협업?! 이렇게 한 번 해봐 - FE 개발자가 타 직군과 대화를 잘 해야하는 이유 - 유동균 강연자님

💚2부 : Fit한 정보로 성장 부스트업 (15:30 - 17:00)
Session 1. FE 개발 트렌드 - 리액트 개발 생태계와 Next.js까지 - 이인제(소플) 강연자님
Session 2. 타입스크립트로 FE 개발 레벨업 - 장기효(캡틴판교) 강연자님

 

 

오프라인의 현장감과 몰입감, 다양한 체험이나 굿즈는 받지 못했어도 편안한 공간에서 마음껏 메모하며 강의를 들을 수 있었다. 지루한 순간 없이 세션 4개가 후루룩 지나갔다. 너무 무겁지도 않고 주니어 개발자에게 필요한 얘기들이 나와서 재밌게 들을 수 있었다. 세션마다 Q&A 시간도 가지면서 적당한 호흡으로 이어졌다. 강연을 들으며 기록했던 내용을 블로그에 옮겨보려 한다.

 

 

---

 

 

 

 

💚1부 : 센스 있게 일하는 FE 개발자 되기

Session 1. FE 개발자의 소프트 스킬과 하드 스킬 - 김태곤 강연자님

• 개발자도 커뮤니케이션을 포함한 소프트스킬이 필요
• 시간 위를 걷는 프로그래밍
  • <구글 엔지니어는 이렇게 일한다>
  • 예전엔 IE가 대세였지만 시간이 지나면 변화가 생길수밖에 없다. 유지보수가 잘 되도록 해야함
• 좋은 코드의 조건 1 : 테스트가 용이한 코드
  • E2E, 콘솔을 이용한 액션 직전과 직후 비교 등 
  • 기능별로 로직 분리
  • 모킹 - 비동기 처리 부분  
• 좋은 코드의 조건 2 : 읽기 쉬울 것
  • 변수, 함수 이름이 좀 길어도 됨, 명확한게 좋다, 구체적으로 짓기
  • 개인 프로젝트 혹은, 회사에서 허용을 한다면 한글로 지어도 됨 
• 좋은 코드의 조건 3 : 일관성 
  • 모두가 같은 규칙을 적용하는것, 합의가 중요
• 테스트 코드는 가능한 부분부터 작성하자
  • 슬프게도 대부분의 회사에서는 TDD 하기 어려운 환경이다
  • 회귀버그. 버그가 발생한 부분은 또 발생함 - 버그가 발생한 부분이라도 테스트 작성
  • 테스트 코드 없이 리팩토링하는 것은 낙하산 없이 뛰어내리기 (마틴 파울러)
• 한 커밋에는 한가지 문제만 : 작게, 자주 커밋해서 추적 가능하게 유지하자
• 실험은 한번에 하나씩만 하자 : 고생 = (학습 + 프로젝트) x2. 한 프로젝트에서는 하나만 실험할 것
• 나만의 학습 루틴을 만들자
  • 어차리 평생 공부해야 함
  • 프론트엔드 개발자에게는 지식 하나를 3년 쓰면 그것도 긴 것
  • 영상/책 발췌독/따라치기/스터디 등등
  • 가장 좋은 공부 방법은 교육 : 동료/러버덕 학습법(인형에 대고 설명)
• 대체로 옳은 기술은 없다. 상황에 따른 선택이 있을 뿐 
  • 두루뭉술한 원칙은 있다
  • 클린코드란 무엇? : 유명한 사람들도 저마다 답변이 다르다
  • 알면서도 비효율적인 선택을 해야될 때가 있다

• 프론트 개발자는 절반정도는 UX 전문가가 되어야 함 : 코드 뒤에 사용자가 있다
• 풀스택 엔지니어링 지식은 익히되, 풀스택 엔지니어를 지향하진 말자 : 전문 분야를 가지자. 하나 잘하기도 어렵다
• 안된다는 말 그만 : 시간과 돈을 앞세우자
  • 거절의 3단계 : 숙고 - 대안 제시 - 이득(거절되도 이득, 몇 기능을 빼자고 해도 이득, 거절하기엔 너무 많은 돈을 받아도 이득) 
• 이직은 늘 준비하는 것 : 이력서를 반년/1년에 한번은 업데이트해야 함. 그래야 회사에서 내가 하는 일이 커리어에 도움될지 아닐지 판단 가능
• 이직할 때 볼 것 : 커리어, 연봉, 워라밸
  • 커리어가 좋으면 검증된 사람이기 때문에 기업이 돈을 더 쓰더라도 좋은 사람을 뽑으려고 함
  • 신입이면 워라밸은 어느정도 포기해야 할 수도
  • 커리어 = 시간 + 스토리. 스토리 없는 연차는 독이다 
  • 같은 조건일 경우 성과급/복지보다는 연봉(이직의 기준)
  • 자신의 기술이 메인으로 사용되는 회사로 가는 것이 좋다 
  • 뱀 머리보다 용의 꼬리가 낫다 : 뱀 머리로서 하드캐리 자신있으면 예외 
  • 호인과 호구는 다르다 : 컴퓨터 수리기사가 아닙니다
• 실무능력 = 프로그래밍 스킬(구현) + 도메인 지식(문제 정의 - 해당 기업에서만 배울 수 있기도 하며 배우기 어려움) + 커뮤니케이션(협업)
• 독서하듯 코드를 읽자 - 많이 읽어야 잘 쓸 수 있음
• 질문에도 기술이 있다 - 구글의 15분 규칙(15분동안 엄청 고민해보고 답이 안나오면 질문하자)
• 전문가 얘기를 너무 많이 듣지 말자 : 내 문제는 내가 제일 잘 안다

 

 

요새 데브로드에서 배우는 내용과 겹치는 부분도 있어서 유익했다. 특히 테스트 부분이 그랬다. 얼마 전에 처음 테스트 코드를 짜본다고 고생했었는데 관련한 팁을 주셔서 좋았다. 개발 선배로서, 직장 선배로서 후배들이 겪지 않았으면 하는 시행착오를 많이 말씀해 주셨다. 특히 부드럽게 돌려말하기라든지, 이직 주제로 한 내용은 많은 개발자가 직장에서 고민하고 있을 것이기 때문에 이런 말씀이 값졌다. 강연 시간이 조금 길어져서 Q&A가 생략되어 아쉬웠지만 그만큼 많은 조언을 주셨다.

 

 

 

 

💚1부 : 센스 있게 일하는 FE 개발자 되기

Session 2. 협업?! 이렇게 한 번 해봐 - FE 개발자가 타 직군과 대화를 잘 해야하는 이유 - 유동균 강연자님

유동균 강연자님의 강의 자료

 

• 기획자, 디자이너, 개발자를 이어주는 번역기가 되자(중간다리)
• 소통을 잘하는 프론트 개발자는 팀 전체의 퍼포먼스를 증가시킴
• 소통을 잘 하려면?
  • 맥락 파악하기 : 이 사람이 무엇을 모르는가 (모르는걸 설명해주기)
  • 의도 파악하기 : 이 사람이 무엇을 알고 싶은가
  • 맥락 + 의도 : 불필요한 커뮤니케이션 비용 감소
  • 목적지향적인 태도로 대화하자 : 감정에 사로잡히면 대화의 본질을 잃는다. 이루고자 하는 목적에 집중하자 
  • 광범위한 이해도를 갖자 : 기획/백엔드 등에 대한 이해를 하자
    • 내가 이해해야 쉽게 설명할 수 있다
    • 필요하다면 추가로 학습을 할 것
• Q&A
  • 기획/디자이너에게 역으로 피드백 주기 - 기존의 방식이 유저랑 익숙하고 개발도 편할 것 같다고 제안하기
  • 소통 방식이 잘 안 맞는 동료에게는 어떠한 방식으로 소통해달라고 요청하기/커피챗하기

 

 

앞서 강연이 길어져 본인의 발표 시간이 줄어들었는데도, 내용을 그만큼 줄여서 제 시간에 맞추셨다. 이런 모습에서 강연자님의 주제와 잘 맞는 '커뮤니케이션을 잘 하는 개발자'의 면모를 보여주셨다. 온화하고 상대의 말을 잘 들어주시는 분위기셨다. 같이 일하고 싶은 개발자, 동료의 모습은 저런 모습이 아닐까? 내가 어떤 방식으로 소통하는지, 어떻게 비춰질 지 생각해보는 시간이 되었다. 특히 마음에 들었던 부분은 무작정 '이거 안 돼요'라고 하지 말고, '이 부분이 문제라 이런 대안을 고려해보면 어떨까요?'하고 목적과 상대의 기분을 고려해 소통하는 방법이었다. 내 경험에 비추자면 어느 직장이든 일 문제보다 사람 문제가 더 힘들었기에, 그런 요소를 줄이고 회사와 팀의 공동 목표에 집중하면 더 발전적이지 않을까 싶다.

 

 

---

 

 

💚2부 : Fit한 정보로 성장 부스트업

Session 1. FE 개발 트렌드 - 리액트 개발 생태계와 Next.js까지 - 이인제(소플) 강연자님

이인제(소플) 강연자님의 강의 자료

 

• 프론트는 개발 트렌드가 빨리 변함
• 리액트의 생태계 
• 언어
  • JS
  • TS
• 라이브러리/프레임워크
  • 리액트
  • 갯츠비 : SSG
  • 넥스트 : SSR
• 스타일링
  • Sass : css 전처리기
  • 이모션 : CSS in JS 
  • styled-components
  • 스티치스
  • 테일윈드
• 상태관리
  • 리덕스
  • 몹엑스 - 요즘은 언급 빈도가 줄음
  • 리코일 - 메타에서 개발
  • 저스탠드 - 요새 치고 올라옴 
• 데이터 패칭
  • 리액트 쿼리 
  • SWR - vercel 개발 
• UI 라이브러리
  • MUI - 머테리얼 디자인 시스템에서 맞춰서 나온것
  • 앤트디자인 - 독자적 생태계 구축
  • 차크라 - 요새 핫함. 가볍고 심플 
  • 리액트 부트스트랩 
  • 시맨틱 UI - 애니매이션 쉽게 적용 
  • 블루프린트 - 모바일보다 데스크탑에 최적화
  • 레딕스 - 개발자가 직접 스타일을 입힘. 웹 접근성때문에 사용. WAI-ARIA
• 라이브러리는 목적과 상황에 맞게 사용하자 
• Next.js 
  • vercel 개발
  • SSR
  • pages - 라우터가 내장됨. 배치만 잘 해주면 됨 
  • 빌트인 SCC 서포트
  • 이미지, 폰트 등 최적화
  • API Routes 
  • 사용해야 하는 이유 : 백, 프론트를 하나의 프로젝트로 개발할 수 있음 
• Q&A
  • 나만의 프로젝트를 처음부터 끝까지 내가 원하는 기술들로 개발해보자
  • 리덕스 등은 깊이있게, 스타일, 디자인 관련은 이것저것 해보자 : 하나를 알면 다른 것들이 비슷한 경우도 있다
  • 라이브러리 버전이 업데이트되면 릴리즈 노트를 참고해 크게 바뀐 부분이나 영향을 미칠 부분을 파악해 그런 부분 위주로 학습하자

 

 

리액트 개발 생태계를 쭉 훑어주셨다. 이 중 강의 자료 이미지에서 맨 윗줄을 제외하면 나머지는 써본 적이 없거나, 아예 모르는 것도 있었다. 데이터 패칭 라이브러리는 아직 사용해본 적이 없어서 어떤 개념인지 잘 모르는데, 추후 학습해봐야겠다. 특히 중요한 상태관리도 훈련이 필요하다! Next.js도 사용해 봤었는데 페이지 처리가 혁신적이었다. 요새는 다시 React로만 개발하고 있는데 새로 업데이트된 내용도 알아보고 넥스트의 핵심인 SSR도 다시 숙지해야겠다. 

 

 

 

💚2부 : Fit한 정보로 성장 부스트업

Session 2. 타입스크립트로 FE 개발 레벨업 - 장기효(캡틴판교) 강연자님

• 타입스크립트를 쓰는 이유?
  • 유지보수가 쉽고 생산성이 높아서 
  • 개발자 경험 - IDE와의 호환. 자동완성
  • 사용자 경험 - UX. 미리 개발단에서 버그를 잡음 (사용자 보호로 사용자 경험을 증가시킨다)
• 도입하기 어려운 이유
  • 학습비용 - 언어를 하나 더 배우기 힘듦
  • 적용비용 - 이미 JS로 서비스 운영 중
• 현실적인 접근 방식 - JSDoc
  • JS에 설명을 추가하는 방법 
  • 물 흐르듯 TS로 옮겨갈 수 있다
  • 동일 내용을 TS로 작성하면 코드의 양을 확 줄일 수 있다

 

 

처음 타입스크립트에 입문할 때 인강으로 도움을 많이 받은 강연자님이었다! 유쾌하고 밝은 이미지셔서 강연 시간에도 현장 참여자 분들의 웃음이 많이 들렸다. '회사에서 타입스트립트를 도입하고 싶지 않아하는데 어떻게 해야 할까요?'라는 질문에 JSDoc을 사용해 은근하게 타입스트립트를 집어넣을 수 있다고 말씀해 주신게 기억에 남는다. 나도 회사에 가면 여러가지 고민이 생길텐데, 이렇게 누군가에게 물어보고 도움받는 순간이 절실해질 때가 있을 것이다. 그래서 개취콘같은 이런 자리가 값지고 소중했다.