원티드에서 나오는 좋은 챌린지이다!
2월 교육도 나온 상황이니 신청 하실 분들은 빨리 신청!!
[프리온보딩 FE 챌린지 25년 2월 교육 신청 링크]
목표: 시간을 아낄 수 있는 방법
1. 레거시를 다루는 방법
2. 최적화
3. 데이터 수집 툴 편하게 쓰는법
이번시간
- 레거시 어디까지 고칠까?
- 프로젝트 톺아보자!
- 초기 대응
레거시란?
- 신규개발이 이미 멈춘 오래된 기술로 작성한 코드(이해하기 어려운 구조 코드)
왜 문제가 될까?
5WHYS: 왜? 5번로 근본적인 원인을 찾는 기법
예시] 코드가 이상하네? 왜 ?이상함? -> 코드가 문서에 적힌채로 동작안함
왜 코드가 문서에 적힌대로 작동안해? 왜왜왜?
(그냥 이상해라는 말을 안하게 된다. 근본적인 이유를 찾는 과정이 있어야한다[디버깅])
주로 문제가 되는 영역
- 테스트 부족 - 테스트 코드가 한줄도 없었어요
- 비효율적 설계 - 코드가 복잡하고 알아보기 어려웠다
- 문서 부족 - 문서에 써있지 않는다
- 그 외에도 문제가 된다
- 예상치 목한 동작이 발생
- 핸들링 하고 있지 못하기 때문
레거시 어디까지 고쳐야할까?
- 최소한 내가(+팀이) 핸들링 할 수 있는 수준까지는 고쳐야합니다!
1. 환경
- 코드가 돌아가고 있는 환경에 대한 설정(디바이스 사양, 웹뷰에서 쓰는지)
- CI/CD 파이프라인 포함 (구축할 수 있어야한다)
2. 기능
- 기능에 대한 확실한 명세(확실히 알기)
- 주요 화면과 컴포넌트 역할 정의
- 유저 동선(동선 파악 꼭)
- 상태관리 흐름과 로직
- 라우팅 흐름 및 스타일 체계
3. 모니터링
- 주요 이벤트 및 에러 로깅 체계 구축 프론트엔드에서는 특히 중요해요.
(로깅, 센트릭, 센트릭과 슬랙 연동)
+) 팀과 어떤 이슈던 공유해야한다.
프로젝트 어떤거 뜯어보면 좋을까?
1) 막막하고
2) 사이드 이펙트 터지고
3) 초기화, 구린 누더기 상태
모든코드는 쉬운게 장땡이다~
코드가 어떤 것인지 정리해두기
꼭 확인 할 것
- 기능
- 외부 시스템 의존도
- 프로젝트 구조
- 환경
- 리소스(팀+나)
- 중요도 파악
1. 기능
-
유저의 동선, 어떻게 해야 어떻게된다 명세해야한다(명세서)
예시] 대기능: 로그인 - 중기능: 인증,..
2. 외부 시스템 의존도 체크
예시] 상담버튼 -> 외부(카카오톡 상담)]-> 돌아오기-> 구매하기 누르기
예시] - 유저정보를 외부 시스템에 넣어주기 -> 상담 끝내고 다시 돌아왔을때 -> 데이터 가져오기(돌아와서 구매했나? 별점 몇점줬나? 무슨 상담했나?(마케팅데이터))
- 외부의 무언가가 가진 제약사항
- 결제에도 큰 의존도가 있음
3. 프로젝트 구조
- package.json
- 어떤 버전인지- 의존성 트리도 한번 봅시다(npm ls)
- 빌드 스크립트 등도 확인해주세요.(test 방법이 들어가있음)
- 테스트 스크립트(다 확인하기)
- repo 구조 분석
- 폴더 구조 확인-
나눠 있는 패턴을 어떻게 가져가고있는지(뭐가 뭐를 참조해서 짰는지)
- layer : 계층 구조
- feature: 기능 구조
-
provider 폴더
- 권한을 다룰때 많이 다룬다.
시작점 찾기 (app에서 시작하겠지)
4.환경
- 비즈니스 로직 파악
- api 호출은 어떻게 하는지?- 인증 관리는 어떻게 하는지?
- 데이터 흐름과 상태관리
- 데이터를 만들기- 보관하고
- 삭제하는 방식
- 의존성은 어떻게 처리하는지
- CI/CD 파이프라인(진짜 잘알고있어야한다)
- 프로젝트 빌드하고 배포하는 방식 확인- 환경 구성하는 방법이랑 친숙해지기
- 환경설정
5. 중요도
- 이 프로젝트 정말 중요할까?
- 고객에게 영향을 주는지(어드민? 백오피스?,,,로그인)
- (어드민 이런거는 버그나도 나중에 고쳐도되는거)- 내부의 돈 버는 팀에게 영향을 주는지
- 자주 쓰는지
- 회사의 비전에 보탬이 되는지?
- 질문할때 팀장님이나 사수님께 빨리물어보고 빨리 수정하는게 좋다.
- 중요도는 낮은데 자꾸 수정요청이 온다면?(약관 페이지..?)
- 모든걸 다할필요 ㄴㄴ 시간을 아껴서 다른 중요한 기능에 치중
6. 리소스(나+팀)
- 시간: 얼마나 확보할수있을까?
- 역량: 우리가 제일 능숙한 방식으로 해결할 수 있을까? or 같이 스터디를 해야하나?
3. 초기 대응
목표?(팀이랑 꼭 합의)
- 우리가 해결하려는 문제
- 해결하는 방식
추천 패턴
일부를 바꿔가면서 점진적으로 레거시 수정
작업 스콥 어케 잘라요?
- 기능 단위로 자르기
기능 중심 설계(FSD)
로그인 예시(레거시 삭제해보자!)
1. 코드를 그대로 두기!
2. **⭐테스트 코드 제스트 코드 공부하기**
- 명세에 따라서 테스트코드를 짤수있다.
- 테스트하고 끝이면 안된다.
- ⭐실패시 레거시 코드로 돌아가게 점진적 적용에 대한 심리 적 부담을 덜어야한다.
-> 진짜 오래걸리는 과정(장기전,, 꼼꼼히 진행)
✨🌏확장해 나가는 프론트엔드 개발자입니다✏️