1. 여러분에게 바라는 점2. 11주차 과제 공통 피드백1) router와 store의 의존성을 제거하기2) axios instance 적극 활용하기3) verecl 의존성 제거하기4) router에 대해 확실하게 이해해보기5) react와 vue의 차이점에 대해 생각해보기3. QnAQ. 스토리북 관련Q. 시간 관리Q. 디렉토리Q. 팀 프로젝트 관련Q. 팀프로젝트할 때 신경쓰면 좋은 것 Q. React와 Vue의 차이
1. 여러분에게 바라는 점
- 단기(?) 목표
- 팀 활동이 끝났을 때 (9월 27일 기준) 우리가 어떤 모습이면 좋을지 상상해보기
ex) 우리 팀이 해산할 때, 저에게 여러분들이 조금 더 편하게 대했으면 좋겠다.
→ 만만한 멘토가 되고 싶어요
- 중장기(?) 목표
- 프로그래머스 활동이 끝났을 때 우리가 어떤 모습일지 상상해보기
- 주변 사람을 잘 활용했으면 좋겠다.
- 공부는 혼자서도 충분히 가능하다.
- 함께 무언가를 하는 경험은 혼자서는 불가능
ex) 정찬욱
→ 혼자서 공부는 열심히 잘 하는 편
→ 커뮤니케이션 스킬을 익히는 것
→ 의도적으로 팀원들과 대화도 많이 하고 (엄청 내향적이지만….)
→ 같이 할 수 있는 활동들도 찾아보고
→ 이전 보다는 확실히 커뮤니케이션에 대한 숙련도를 높이는 것.
- 공부해야할게 굉~~~~~~~~~~~~~장히 많은 상황에서, 어떤 자세를 취해야 좋을까?
- 뭔가 많다
- 리액트
- 뷰
- 타입스크립트
- …
- 이걸 대체 왜 쓸까?
- 왜 리액트를 쓰는거지?
- 뭐가 얼마나 좋길래 쓰는거지?
- 실제로 현업에서 어떻게 쓰이는건지?
- 타입스크립트는 왜 쓸까?
- 프론트엔드개발자가 현업에서 정확히 어떤 일들을 얼마나 효과적으로 하고 있을까
- 어떻게 기업이 개발자가 이윤을 가져다 줄 수 있을까
- 개발자도 회사의 직원이 될텐데
- 회사도 이윤을 추구하는 집단인데
- 개발자는 어떻게 회사에 이윤을 가져다줄 수 있을까
- 네카라쿠배당토야*******
- 카카오
- 라인
쿠팡- 배민
- 당근마켓
- 토스
- 야놀자
- 프론트엔드 개발자 → 웹뷰 → 뭐가 좋은거지?
- 장점
- 코드를 따로 관리할 필요가 없고
- 레이아웃을 통일시킬 수 있고
- 단점
- 운영체제마다 웹뷰에 대한 관리가 필요하다
- 빠르게 개발할 수 있다.
- 성능이 빠른게 아니라
- 성능을 포기할만큼의 가치가 있을까?
- 트렌드에 빨리 따라갈 수 있지 않을까?
- 배포
- 네이티브
- 각각의 네이티브 개발자 10명 → 20명
- 문제가 터졌는데
- 당장 해결해야 되는데
- 어플은 설치나 업데이트를 해야 문제가 제대로 해결 되는데
- 이걸 사용자들이 수동으로 해야 되고
- 위험성이 내재
- 웹뷰
- 배포하면 바로 반영
- UI도 똑같이 가져갈 수 있고
- 인력수급 → 12명
- 네이티브 개발자 각각 1명
- 프론트엔드 개발자 10명
- 개발자가 어떻게 기업에 이윤을 가져다주지?
- 돈을 벌어들이자 → 제품을 만든다
- 돈을 덜쓰게 하자
- 서버 자원을 아끼거나
- 빠른 시간안에 개발
- 리액트 같은 라이브러리나 프레임워크
- 설계
- 커뮤니케이션
- 코드리뷰
- 커피챗
- 스크럼
- 클린코드
- 남도 읽게 쉽게 만들어서 (커뮤니케이션을 잘하게 하자) 코드를 관리하고 수정하는 것
- 변화에 빠르게 대응하자
- 변화에 빠르게 대응할 수 없는 코드가 클린코드가 맞을까?
- 설계와도 엮여있다.
- 요구사항에 변화가 생겼을 때, 내 코드가 얼마나 빠르게 잘 효과적으로 대응할 수 있을까
- 알잘딱깔센 대응 가능?
- “목적”
- 우리가 공부를 왜 하는가
- 이 기술을 왜 배우는가
- 배워서 어디에 어떻게 써먹어야 효과적인가
- 내가 그걸 판단할 수 있는가
- 가령, 어떤 상황에서는 react를 쓰는게 효과적이고, 어떤 상황에서는 react를 안 쓰는게 효과적이고, 이걸 구분할 수 있는가
- 항상 typescript를 쓰는게 좋은건가?
- 항상 react를 쓰는게 좋은건가?
- 항상 vercel에 배포하는게 좋은건가?
- ….
- webpack 왜쓰지?
- vite는 왜쓰지?
- 목적을 생각하지 않고 공부를 하면 길을 잃기 싶고, 역효과가 발생할 수 있다.
- 면접관이 너 그렇게 공부 열심히 했는데, 그거 왜 했어?
- 그냥.. 시켜서 했어요……?
- 커리큘럼에 있어서 했어요….
- 큰일남…
- 왜 강사가 이걸 전달할까
- 현업에서 어떻게 쓰이길래 그런걸까
- CSS는 어쩌다가 이렇게 만들어졌을까…. 일관성이라곤 눈씻고 찾아봐도 없다
display: block- 나 자신에 대한 영향
display: flex- 자식들에게 영향
display: grid- 자식들에게 영향
- 프로토타입은 왜 쓰는걸까. 이게 효과적인건가?
- 항상 “why”를 생각해보자.
주니어게에는 “가능성”이 훨씬 중요하다.
여태까지 쌓아올린건 사실 회사 가면 그렇게까지 유의미하진 않다.
현재상태: 1 만큼 공부함
“성장가능성을 보니까, 한 1년 뒤에는 20만큼 할 것같아” → 내가 공부해온 과정을 보여주면 됨. 내가 무슨 목적을 가지고, 어떤 생각을 가지고 공부했는지.
현재상태: 10 만큼 공부함
그런데 이 사람을 계속 보니까 (공부해온 과정이나 생각이나 사고방식을 보니까) 1년이 지나도, 한 15만큼만 할 것 같아 → 우리 팀에 필요한 사람인가? 아닌 것같은데?
주니어에게만 해당되는 이야기.
2. 11주차 과제 공통 피드백
종길님 제출한 과제를 기준으로 설명할 예정입니다!
(원래 효리님껄로 하려다가… 리팩토링을 잘 해주셔서 ㅋㅋ)
1) router와 store의 의존성을 제거하기
2) axios instance 적극 활용하기
3) verecl 의존성 제거하기
4) router에 대해 확실하게 이해해보기
5) react와 vue의 차이점에 대해 생각해보기
3. QnA
질문 사항 미리 작성해주세요!
Q. 스토리북 관련
강의에서 주로 스토리북을 통해 컴포넌트를 만드는 학습이 이루어지더라구요!
저는 스토리북하면 디자인 시스템이 많이 떠오르는데 쉽게 적용하거나 참고해볼만한 디자인 시스템을 알려주실 수 있을까요..?
Installation
How to install and set up Chakra UI in your project
https://chakra-ui.com/getting-started
seed-design
daangn • Updated Sep 18, 2023
Q. 시간 관리
멘토님의 시간 관리가 궁금합니다!
업무뿐만 아니라 여러 멘토링 활동으로 바쁘실텐데 멘토님의 효율적인 시간 관리 팁을 궁금하네요!!
- 잠을 최대한 줄입니다…… 🥲
- 오후 6 ~ 7시 → 회사일
- 저녁먹고 (1시간)
- 산책하고 (2시간)
- 하루 평균 10.5km
- 하루 15000보
- 오후 10시 ~ 11시
- 새벽 3 ~ 4시
- 10 ~ 3
- 10, 11, 12, 1, 2 → 5시간
- 코드리뷰
- 멘토링
- 기타등등
- 회사에 있는 시간 중에 내가 써도 되는 시간 (지금 같은)은 업무 중에 하기도 하고
- 멘토링이 없거나, 코드리뷰가 없으면 회사 일을 하기도 하고
Q. 디렉토리
디렉토리를 나누는 기준이 궁금합니다. 예를 들어 타입 선언해놓은 파일은 types 폴더에 두는 게 좋을까요? 아니면 다른 방식으로 나누는 게 좋을까요? 그리고 타입 선언 파일명, 변수명 지을 때 신경써야 하는 부분이 있을까요?
타입도 어떤 상황에서 쓰이는지를 판단해서, 상위 폴더 내에서 관리한다거나, 혹은 별도의 관심사 별로 폴더를 나눠서 관리 한다거나
ex1) client 요청을 주고 받는 타입 → API 클라이언트를 관리하는 폴더 내에 정의
ex2) 어플리케이션에 전반적으로 쓰이는 도메인 타임 → 도메인 폴더에 정의
ex3) 컴포넌트 내에서만 쓰이는 타입 (props 같은) → 컴포넌트 파일 내에 정의
Q. 팀 프로젝트 관련
팀 프로젝트의 주제를 정할 땐 프로젝트의 목적을 정해서 진행하자(공부용인지, 정말 배포용인지, 커뮤니케이션이지) ⇒ 프로젝트를 통해 어떤 것을 얻고 싶은지 정하고 나에게 필요한 것들을 정리해서 진행한다.
Q. 팀프로젝트할 때 신경쓰면 좋은 것
- 이 기능을만들 때 얼마나 시간이 걸릴 것인가 (예상)
- 만들고 나서 점검 -> 실제로 얼마나 걸렸네? -> 왜 이런 차이가 발생할까 -> 다음에 더 빨리 만들기 위해선 어떤 자세가 필요할까 -> 퀄리티는 괜찮았나 -> 퀄리티를 확보하기 위해선 무엇을 해야 좋을까 -> .....
- 협업
- 분업
- ........
- 협업 도구로 무엇을 사용할 것인가
- 노션
- 지라
- 깃허브
- ...
- 회의는 어떻게 할 것인가
- 그냥 하루종일 디스코드에서 이야기를 하면 되나?
- 정해진 시간에만 필요한 논의를 하면 되나?
- ...
- 어려운 문제가 발생 했을 때
- 바로 공유할 것인가
- 아니면 혼자서 어느정도 알아보고 공유할 것인가
- 우리 팀의 정책은 어떻게 가져갈 것인가
- 어떤게 우리 팀에게 더 효과적인가.
Q. React와 Vue의 차이
vue -> 편의기능을 굉장히 많이 제공
react -> 니가 다 알아서 해
vue -> 렌더링 최적화도 내가 알아서 해줄게
react -> 렌더링 최적화? 그거 니가 알아서 해야지
vue
-> 난 프레임워크야!
-> 사용 방법이 굉장히 제한적
-> 상태관리 라이브러리: vuex, pinia, vue-query, ...
react
-> 난 라이브러리야!
-> 사용 방법이 굉장히 중구난방
-> 상태관리 라이브러리가 수십개
mobx, redux, recoil, jotai, justand, react-query, swr, ....
vue
-> 러닝커브도 낮고, 꼭 프론트엔드 개발자가 아니여도 잘 하기 쉬움
-> 백엔드 개발자가 백 오피스 만들 때에도 많이 사용
(백엔드를 사용하기위한 툴)
-> 서비스를 만들 때에도 많이 사용
react
-> 러닝커브도 높고, 프론트엔드를 전문적으로 해야 어느정도 잘 사용할 수 있음
-> 에초에 백오피스를 이렇게 복잡한 애로 만들 필요가 없음... 시간낭비 + 인력낭비
-> 프론트엔드 배웠으면, 잘 하면, 리액트 써도 되겠지
-> 하지만 꼭 리액트를 쓸 필요는 없다
react를 잘 한다 = javascript를 잘 할 수 밖에 없는 조건
javascript를 잘 모르면 react는 당연하게도 잘 못하게 됨
vue는 javascript를 엄청 딥하게 할줄 몰라도 개발하는데 그렇게까지 큰 문제는 없다.
vue -> 훨씬 쉽다.
react를 잘 한다는 것은 결국 고급 인력이 될 확률이 높다
vue는 어렵지 않기 때문에, 인력의 대체가 조금 더 쉬운 편
처음에 vue를 하게 되었던 이유
- 팀이 풀스택 (각자 서비스를 1개 ~ 2개를 맡아서 운영)
- java + spring + vue + ...
- java위주의 공부를 하다가, 회사 분위기상 프론트엔드 팀이 생겼어야 했고, 자연스럽게 조금 더 react에 관심을 가지게 되었었다.
그런데 프론트엔드만 전문적으로 하는 팀에서는 뭐 굳이.. vue를 쓸 필요가 있을까?
- 서서히 react를 공부하기 시작