[고민] 어떻게 하면 프론트엔드 테크 리더가 될 수 있을까?

프론트엔드 테크 리더가 되는 방법을 고민해봐요.

(좋은 글을 찾으면 계속해서 업데이트해요)

• 노력은 무자비하게 상대적이다. 남들보다 더 많이 노력하지 않았다면 뒤쳐지고 있는 것이다.

• 일잘하는사람 = 능력 x 리더십 x 인품
  https://youtu.be/iW6GPR2XFG0

• 제품, 동료, 성장

• 독서

시니어 개발자란? 🤴

• ChatGPT에 물어본 시니어 프론트엔드 개발자가 되는 방법 😲😲😲

How to Become a front end Senior Developer?

Becoming a front-end senior developer requires a combination of technical skills and experience, as well as soft skills such as communication and leadership. Here are some steps you can take to achieve your goal:

1. Master HTML, CSS, and JavaScript: These are the core technologies for front-end development, so you need to have a deep understanding of these technologies and how to use them effectively.

2. Learn a JavaScript framework or library: Familiarize yourself with popular frameworks such as React, Angular, or Vue.js. This will demonstrate your ability to work with modern front-end development tools.

3. Stay up to date with the latest technologies: The web development industry is constantly evolving, so it's important to keep up with the latest trends and technologies. This can be achieved by reading blogs, attending conferences, and participating in online communities.

4. Develop your problem-solving skills: Front-end development often requires finding solutions to complex problems. Improving your problem-solving skills will help you become more efficient and effective in your work.

5. Build a portfolio: Showcase your skills and projects by creating a portfolio website. This will demonstrate your abilities to potential employers and clients.

6. Improve your communication and leadership skills: As a senior developer, you'll likely be leading projects and working with cross-functional teams, so it's important to have strong communication and leadership skills.

7. Seek mentorship: Find a mentor who can provide guidance, support, and feedback as you grow in your career.

8. Gain experience: The more experience you have working on real-world projects, the more opportunities you'll have to develop your skills and demonstrate your abilities as a front-end senior developer.

Remember, becoming a senior developer is a continuous process, and you should never stop learning and growing.

• 시니어 개발자 역할에 대한 고찰 https://techblog.yogiyo.co.kr/%EC%8B%9C%EB%8B%88%EC%96%B4-%EA%B0%9C%EB%B0%9C%EC%9E%90-%EC%97%AD%ED%95%A0%EC%97%90-%EB%8C%80%ED%95%9C-%EA%B3%A0%EC%B0%B0-da6603e3aa2c

  • 폭넓은 지식을 토대로 상황에 따른 최적의 해답을 제시해주는 지식인
  • 엄청난 난제를 자신의 힘으로든 외부의 힘으로든 기어코 해결해버리는 해결사
  • 여러 가지 업무를 오랜 경험과 노하우로 빠르게 실행해 나가는 마스터
  • 오너십을 가지고 일하는 사람
  • 배울점이 있는 사람

• 주니어, 미드레벨과 시니어 개발자의 차이점 https://erwinousy.medium.com/%EC%A3%BC%EB%8B%88%EC%96%B4-%EB%AF%B8%EB%93%9C%EB%A0%88%EB%B2%A8%EA%B3%BC-%EC%8B%9C%EB%8B%88%EC%96%B4-%EA%B0%9C%EB%B0%9C%EC%9E%90%EC%9D%98-%EC%B0%A8%EC%9D%B4%EC%A0%90-d29bffecfec

  • 주니어 개발자들은 비용을 희생시키면서까지 코드에 집중합니다.
  • 시니어는 코드를 다뤄야하는 누군가들에 대해 생각하고, 주니어는 컴퓨터에서 작동시킬 생각만 합니다.
  • 시니어 개발자는 자체적으로 완전한 애플리케이션을 개발할 수 있습니다.
  • 시니어 개발자는 길을 잃지 않고 올바른 조치를 행하여 질문을 수행하는 방법을 알고 있습니다.
  • 시니어 개발자로서 중요한 업무는 경험이 부족한 개발자를 돕는 것입니다.
  • 훌륭한 프로그래머는 인간이 이해할 수 있는 코드를 작성합니다.

• 함께 일하고 싶은사람 2 (시니어) https://velog.io/@city7310/%ED%95%A8%EA%BB%98-%EC%9D%BC%ED%95%98%EA%B3%A0-%EC%8B%B6%EC%9D%80-%EC%82%AC%EB%9E%8C-2.-%EC%97%85%EB%AC%B4-%EC%8A%B5%EA%B4%80-%EC%A1%B0%EA%B8%88%EB%8D%94-%EB%88%88%EC%9D%84-%EB%86%92%EC%97%AC%EC%84%9C-wdgfmbqv

  • 관성에 의해 일하지 않고, 잘 하기 위한 방법을 고민하는 사람
  • 동료와 회사를 존중하는 사람
  • 변화에 대한 이성적이고 기민한 대응
  • 적절한 수준의 엔지니어링을 할 수 있는 사람
  • Next step에 대한 설계가 되는 사람
  • 알아서 잘 하는 사람
  • 우리만의 정답을 찾는 사람
  • 세심한 타당성 조사(feasibility check)
  • 위협을 예측하고 미리 보완하는 사람

• 테크 리더로 일하면서 얻은 8가지 교훈 https://yozm.wishket.com/magazine/detail/1393/

  • 테크리더의 역할: 아키텍트, 프로젝트 관리자, 소프트웨어 엔지니어, 멘토 및 팀원 역할을 동시에 수행합니다.
  • 팀의 요구사항을 우선적으로 처리하기
  • 시간 관리를 잘하기
  • 일을 위임하기
  • 프로세스를 개선하기
  • 개발자 경험 최적화하기
  • 어려운 피드백을 잘하기
  • 올바른 판단 내리기
  • 언제나 공부하기

• 센드버드 7원칙
  https://sendbird.com/ko/blog/%EC%8A%A4%ED%83%80%ED%8A%B8%EC%97%85-%EB%AF%B8%EC%85%98-%EA%B0%80%EC%B9%98-%EC%84%BC%EB%93%9C%EB%B2%84%EB%93%9Csendbird%EA%B0%80-%EC%A4%91%EC%9A%94%EC%8B%9C-%ED%95%98%EB%8A%94-%EA%B0%80%EC%B9%98

• 쿠팡의 15가지 리더쉽 원칙 https://www.coupang.jobs/kr/why-coupang

좋은 동료 되기 🥰

• 리더라면 1on1을 잘 활용하자
  https://brunch.co.kr/@exceo/135

  • 적극적으로 경청하기
  • 비밀 보장하기
  • 마음 열기
  • 아젠다 미리 정하기

• 좋은 동료가 되는 업무 습관 https://velog.io/@city7310/%ED%95%A8%EA%BB%98-%EC%9D%BC%ED%95%98%EA%B3%A0-%EC%8B%B6%EC%9D%80-%EC%82%AC%EB%9E%8C-1.-%EC%97%85%EB%AC%B4-%EC%8A%B5%EA%B4%80-w1mfhsf2

• 좋은 질문 하기
  • 답변자에게 요구하는 액션 알리기
    • 도움 필요, 의사결정 요청, 정보 요청, 정보 공유 등
  • 질문의 배경
  • 답변자를 위한 부가정보
• 독성말투 사용하지 않기 https://edykim.com/ko/post/tech-has-a-toxic-tone-problem-lets-fix-it/
• 효과적인 코드리뷰를 위한 리뷰어의 자세 https://tech.kakao.com/2022/03/17/2022-newkrew-onboarding-codereview/
  • PR 템플릿으로 체크리스트를 만들고 PR을 점검한다.
  • 코드리뷰는 명확한 기준과 설명이 필요하다.
  • 답을 알려주지 말고 스스로 고민할 수 있게 키워드를 제시한다. <- 내 의견: 코드 리뷰를 배움의 장소로 활용할 수 있다. 하지만 스스로 고민하게 하는 것은 시간이 많이 소요되고 잘못된 결론에 도달하여 시간을 낭비할 수도 있다. 비용과 배움의 가치를 잘 트레이드 오프해야한다. 나는 대안을 제시하여 시간을 절약하며 학습도 가능하게 하는 방식을 더 선호한다.
  • 코드를 일관되게 유지한다.
  • 목적이 불분명할 경우, 리뷰이의 의도를 물어보고 리뷰어의 생각을 전한다.
  • 리뷰할게 없다면 칭찬을 남긴다.

전문성 키우기 😎

나를 성장시키기

• 회사에서 본인을 빠르게 성장시키는 방법
  https://www.youtube.com/watch?v=drBdnrlsq9o&t=354s&ab_channel=%EC%A1%B4%EC%9E%A1%EC%83%9D%EA%B0%81
  • 나를 자주 피드백 하기
  • 내가 병목이 되지 않게 하기
  • 내 역할과 상하 관계 이해하기
  • 더 나은 방법을 끊임없이 공부하고 제시하기
  • 강점에 집중, 약점은 팀원과 함께 보완하기
  • 과거를 버리고 새로운 것들을 계속 배우기
  • 내 사고가 위축되어있지 않는지 확인하기
  • 내적 동기부여: 관계, 자율, 숙련, 목적 R.A.M.P
    결론: 나의 실력, 마음가짐, 성실성

HTML, CSS, JS

• 모던 자바스크립트 poiemaweb https://poiemaweb.com/
• 모던 자바스크립트 튜토리얼 https://ko.javascript.info/
• 성능최적화 https://ui.toast.com/fe-guide/ko_PERFORMANCE
  • 로딩 최적화
    • 블록 리소스 최적화(레이아웃 도중에 css, js 파싱 금지)
      • css
        • link를 head에 작성
        • media 속성으로 사용 조건 추가
        • @import url() 사용금지(병렬불가)
      • js
        • script를 body 하단에 작성
        • async, defer 속성 사용
    • 리소스 요청 줄이기
      • 요청에 100ms, 다운로드에 1ms
      • 이미지 스프라이트
      • 웹팩 번들링
    • 리소스 용량 줄이기
      • 중복 코드, 불필요한 태그 제거
      • 라이브러리 필요한 함수만 import
      • 웹팩 minify, ugly
    • 간결한 css 선택자 사용
  • 렌더링 최적화
    • 레이아웃 최적화
      • 강제 레이아웃 피하기
        • style 변경 후 offsetWidth 강제 레이아웃 반복 사용 금지
      • 영향받는 엘리먼트 제한하기
        • inline은 좌우엘리먼트에 영향 유의
        • 자식의 높이가 바뀔때 부모의 높이 고정
        • 가능하면 하위 엘리먼트 조작하기
        • 엘리먼트 조작할때 숨기기 display: none
      • 클래스 규칙수 줄이기
      • DOM 깊이 줄이기
      • 애니메이션 최적화
        • 애니메이션의 한 프레임은 10ms 미만으로
        • css 애니메이션 사용
          • position: absolute, fixed. 주변 레이아웃에 영향을 주지 않음
          • transform() 사용. 콤포짓만 수행
        • js일 경우 requestAnimationFrame( callback ) 사용하여 프레임마다 콜백 실행하기
• 웹 성능 최적화 방법 https://velog.io/@hsecode/%EC%B5%9C%EC%A0%81%ED%99%94-%EC%9B%B9-%EC%84%B1%EB%8A%A5-%EC%B5%9C%EC%A0%81%ED%99%94-%EB%B0%A9%EB%B2%95-5%EB%B6%84-%EC%99%84%EC%84%B1
• 당신이 모르는 자바스크립트의 메모리 누수의 비밀 https://ui.toast.com/posts/ko_20210611
• 자바스크립트는 어떻게 작동하는가: 메모리 관리 + 4가지 흔한 메모리 누수 대처법 https://engineering.huiseoul.com/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8%EB%8A%94-%EC%96%B4%EB%96%BB%EA%B2%8C-%EC%9E%91%EB%8F%99%ED%95%98%EB%8A%94%EA%B0%80-%EB%A9%94%EB%AA%A8%EB%A6%AC-%EA%B4%80%EB%A6%AC-4%EA%B0%80%EC%A7%80-%ED%9D%94%ED%95%9C-%EB%A9%94%EB%AA%A8%EB%A6%AC-%EB%88%84%EC%88%98-%EB%8C%80%EC%B2%98%EB%B2%95-5b0d217d788d

Web

• MDN https://developer.mozilla.org/ko/

FrontEnd

• 프론트엔드개발용어 https://velog.io/@cookie004/61-frontend-web-development-buzz-words

• 프론트엔드 기술면접 인터뷰 질문 모음 https://realmojo.tistory.com/300

• TypeScript

  • (번역)더 좋은 타입스크립트 프로그래머로 만드는 11가지 팁 https://velog.io/@lky5697/11-tips-that-help-you-become-a-better-typescript-programmer

• React

  • 리액트 렌더링 가이드 https://velog.io/@superlipbalm/blogged-answers-a-mostly-complete-guide-to-react-rendering-behavior
  • useState로 상태 구조 잘못 작성하고 계세요 https://velog.io/@jay/do-not-put-everything-in-usestate
  • 리액트에서 useState를 사용하면서 저지를 수 있는 흔한 실수들 https://ktseo41.github.io/blog/log/avoid-these-common-pitfalls-of-react-usestate.html
  • useEffect 잘못 쓰고 계신겁니다. https://velog.io/@jay/you-might-need-useEffect-diet
  • 더 나은 리액트를 위한 삽질 (props, state, variable, useEffect) https://velog.io/@goyoung2/do-not-waste-a-time-in-react-props-state-variable-useEffect
  • (번역) 리액트와 함께 일반적으로 사용되는 라이브러리들 https://velog.io/@sehyunny/libraries-that-are-commonly-used-with-react

• Storybook

  • 컴포넌트 시각화
  • UI/UX 테스트
  • 아토믹 디자인

• 디자인 패턴

  • 컨텍스트-컨테이너-프리젠터 패턴 Context API https://itchallenger.tistory.com/716?category=1063250
  • 컨테이너 - 프리젠터 패턴 https://velog.io/@goyoung2/container-presenter-pattern-in-react
  • 리액트 프로젝트에 디자인 패턴 적용하기 https://velog.io/@eunbinn/modularizing-react-apps?utm_source=substack&utm_medium=email
  • 옵저버 패턴
  • 팩토리 패턴

• 테스팅

  • 정적 테스트(린트, 타입체크)
  • 단위 테스트(유틸, 훅, 컴포넌트)
  • 통합 테스트(목데이터, 목서버)
  • E2E 테스트(실제 서버, DB, 브라우저)

최신 기술 따라잡기

• Vite bundler
  • https://vitejs-kr.github.io/guide/
• yarn berry zero-install
  • https://github.com/yarnpkg/berry
  • https://kasterra.github.io/setting-yarn-berry/
• zero-runtime css-in-js: Linaria
  • https://github.com/callstack/linaria
• ErrorBoundary, Suspense
  • https://toss.im/slash-21/sessions/3-1
• react-query
  • https://github.com/TanStack/query
  • https://kyounghwan01.github.io/blog/React/react-query/basic/#react-suspense%E1%84%8B%E1%85%AA-react-query-%E1%84%89%E1%85%A1%E1%84%8B%E1%85%AD%E1%86%BC%E1%84%92%E1%85%A1%E1%84%80%E1%85%B5
• Storybook
  • https://storybook.js.org/tutorials/intro-to-storybook/react/ko/get-started/
• Next.js
  • https://kyounghwan01.github.io/blog/React/next/basic/#app-tsx
• SvelteKit
  • https://velog.io/@eunbinn/exploring-sveltekit-in-2022-by-building-a-portfolio-website
  • https://www.youtube.com/watch?v=o1Hy7cpSXjA&ab_channel=%EC%BD%94%EB%94%A9%EC%95%A0%ED%94%8C
  • https://www.youtube.com/watch?v=Y7PHBSqDfvE&vl=ko
• monoRepo
  • 개념 https://d2.naver.com/helloworld/0923884
  • 도구 https://d2.naver.com/helloworld/7553804
  • pnpm, Turborepo, npm workspace 등

이슈 해결하기 ✨

• node 실행할 때 환경변수 설정해주는 라이브러리 cross-env
  • "start": "cross-env NODE_ENV=dev node index.js"
• CORS, cookie 설정
  • FE: withCredentials, POST
  • BE: CORS(origin, method), Cookie(credentials, secure, samesite=none, expires, httpOnly), bodyParser
• 소셜 로그인 쿠키 이슈 (OAuth, cookie, JWT)
  • 모든 쿠키 허용 필요
  • 삼성인터넷 스마트 트래킹 방지 해제 필요(쿠키를 삭제함)
• typescript-git 파일 대소문자 구분 이슈
• 윈도우에서 리눅스 환경 사용
  • WSL(Windows Subsystem for Linux)
• 모바일 백버튼 이슈. 뒤로가기 제어
  • listen, action, hash, store
  • https://velog.io/@goyoung2/how-to-control-history-back-in-react
• 개발 컨벤션 lint, prettier 설정
• 엘리먼트 드래그
• 뒤로가기 제어
• tsc emotion 이슈

기록하기 📑

• 메모하기
• TID(Today I Did) 작성하기
  • 일일 단위로 업무 내용을 간략하게 정리한다.
  • 이슈 발생시 이슈를 어떻게 해결했는지 작성한다.
  • 나중에 같은 이슈가 재발생시 문서화하여 팀에 공유한다.
• 블로그 작성
• 포트폴리오 작성(한달 주기로 업데이트)
  • https://goyoung2.notion.site/Hoodie-da631f0a1bec426ab4c36c0aa41e4b15
• 회고 하기(이슈, 프로젝트, 연말, 이직 등)
  • Jbee.log(2022) https://jbee.io/essay/2022_retro/
  • 주니어 개발자의 2022년 회고 https://junilhwang.github.io/TIL/Review/2022-year/end/#%E1%84%92%E1%85%A1%E1%86%B7%E1%84%81%E1%85%A6-%E1%84%8B%E1%85%B5%E1%86%AF%E1%84%92%E1%85%A1%E1%84%80%E1%85%B5