강병진 멘토
✅ 사전과제
1. 전역변수를 사용하면 어떤 장점이 있나요?
2. e2e 테스트는 무엇인가요?
3. 테스트에서 `mocking`이란 무엇인가요?
4. Web Vitals에 대해 설명해주세요.
5. 리팩토링 경험이 있다면 무엇을 어떻게 리팩토링 했는지 작성해주세요.
✅ 1일차
왜 해당 라이브러리를 선택했는지 설명 가능하도록 준비, 하나만 진득하게 꾸준히
포트폴리오 예제 사이트: F-lab
⁕ 정보습득
1. 요즘IT
2. 코드너리
3. 커리어리 - 질문, 답변 활용
4. 프론트엔드 번역해주시는분들 구독
5. 스터디(커리어리, 인프런)
github blog → 날짜 수정 가능함
redux는 복잡한 로직에 더 적합함.
=> recoil, zustand 상태관리 라이브러리 추천. But, 이유를 설명할 수 있으면 redux도 괜찮음.
git rebase 정도까지는 능숙하게 다룰 수 있도록 연습.
인프런: 캡틴판교
deep dive, 동물책 → 자바스크립트 공부
개발자 공고 - 원티드
배포: amplify(aws)
✅ 2일차
⁕ 테스트 종류
1. 유닛 테스트
2. 통합 테스트
3. E2E 테스트
But, 프론트엔드에서는 유닛 테스트와 통합 테스트의 구분이 모호함. 그럼에도 불구하고 정의는 알고 있어야 함.
유닛 테스트 vs E2E 테스트. 둘 중에 선택한다면 E2E 테스트 → cypress 활용
소프트웨어 개발 방법론: TDD
⁕ 기술 면접 대비
1. 프로그래머스
2. Leetcode
3. 면접스터디 → 신입 질문 한정적
이직 사유: 조직 문화 굿, 팀원들 굿. But, ...
※ 절대 회사 욕 X
아키텍처 구조 = 폴더 구조
send bird - github: quickstart 검색
💯💯💯 리액트 중요 hook
useRef, useState, useEffect / useMemo, useCallback
아주아주아주 중요 거의 사용 안함
리액트 공식 문서 state 부분 참고
✅ 3일차
이력서
로그인 구현 → 인증 서비스로 보안 강화(당위성 강조)
💯💯💯 README.md를 활용한 프로젝트 설명
1. 블로그 링크
2. 아키텍처 구조
3. main branch에 빌드 방법 적기, git clone해서 .git 폴더 삭제 후 빌드 되는지 확인.
storage 활용: s3, hls
이력서: 재그지그
Introduction에서 흐름이 통일되도록 3~5줄
회사 연계 교육, 부스트캠프 굿
What is 싱글톤 패턴, hydrate???
✅ 4일차
⁕ 최적화
Lighthouse: Web vital 확인 가능
performance: 렌더링마다 스크린샷 확인 가능
profiler: 컴포넌트별 렌더링 확인 가능
💯💯💯 프로젝트 매니저 의존성 제거
package-lock.json, ...
lock 파일은 하나만 존재하도록 통일하자!
큰 이미지: Figma에서 2X로 변환 후 png로 Export
작은 이미지: svg로 Export
=> webP로 바꾸면 이미지 최대 압축 가능
회사 고를 때
1. 작은 규모(~ 시리즈 A 스타트업) : 대표 확인
2. 큰 규모(시리즈 B 스타트업 ~) : 개발팀 확인
신입 연봉은 매우 큰 거 아니면, 3400~3500이 최고. 여러가지 혜택받는 마지노선.
회사: 잡플래닛(3.1~4)
클라썸, 페이히어, 루닛, ...
💯💯💯 ChatGPT 3.5 활용법
1. 역할 부여 해주기
2. 단계별로 잠깐 생각하고 말해줘