느릿늘있

안녕하세요. 항해플러스 프론트엔드 3기 공식 인증 회고왕 김종현입니다.  회고왕으로 선정되었는데 10주 간의 항해 과정 전반에 대한 회고를 쓰지 않을 수 없었습니다. 회고 하나 열심히 썼을 뿐인데 풍성한 리워드를 제공해주신 항해 플러스에 감사드립니다!  항해 플러스는 수료식 때 모든 참가자들이 10주 간의 회고를 PPT로 작성하여 발표합니다! 저 또한 작성한 PPT와 함께 발표를 했고 발표했던 내용을 기록으로 남겨두고자 마지막 회고를 작성하게되었습니다!  제목은 " 나 혼자만 레벨업 못함 "으로 정해보았습니다. 사실 마지막 회고는 10주간 가장 기억에 남는 기술적 도전을 발표 주제로 삼아야 하지만 저는 기본만 쫓아가기도 벅찼었기 때문에 동기들에게 공유할만한 깊이 있는 기술적 도전이 없었답니다...ㅎㅎ 그..

Q1. 과제  성능개선 2주차를 마지막으로 10주간의 항해가 끝이 났습니다! 마지막 10주차는 성능 최적화를 코드 레벨에서 진행하는 것이었습니다. 사실 성능을 고민하면서 개발하는 주니어가 있을까요..?ㅋㅋㅋ 코치님께서도 성능 최적화는 주니어의 소양이라기보다는 시니어가 되기 위해 꼭 필요한 스킬이라고 말씀해주셨고 그런 의미에서 과정에 포함된 것 같습니다!Q2. 시도  깃헙 액션을 직접 고민해서 구성하지는 않았고 주어진 가이드대로 lighthouse.yml 파일 만들고 푸쉬가 발생할 때마다 성능 측정 보고서를 이슈로 생성되도록 만들었습니다. 보고서를 보면서 성능 최적화 요소가 하나씩 추가될 때마다 지표가 어떻게 개선되는 지 직접 눈으로 보고 성능 최적화 보고서를 README에 작성하였습니다.Q3. 결과Q4...

Q1. 과제  성능개선 1주차를 마무리하였습니다! 테스트 코드의 여파(?)를 감안해서 분량 조절을 해주셨습니다! 항해 막바지까지 단 한주를 남겨두고 단비와 같은 휴식을 가질 수 있었습니다.ㅎㅎ  과제 주제는 프론트엔드 인프라 성능 최적화였고 내용은 AWS 가입부터 S3 버켓 생성 그리고 CloudFront를 구축해보는 것이었습니다. 프론트엔드 배포 경험은 면접 단골 질문인데 이렇게 쉬운 내용인 줄은 정말 상상도 못했습니다. 간단하고 분량도 적었지만 인프라 관련 지식의 혈이 뚫리는 느낌이었습니다.Q2. 시도  AWS 가입부터 S3, CloudFront 구축, 보고서 작성까지 문제 없이 마무리했습니다. 이번 과제에서 학습한 개념들을 정리하면서 이번주 WIL 간단하게 마무리하도록 하겠습니다.1. GitHub ..

Q1. 과제  테스트 코드 2주차!! 1주차에 비하면 비교적 양도 적고 쉬운 편이었으나, 그것은 어디까지나 1주차가 지옥의 난이도였기 때문이었습니다...! 2주차 역시 매운맛 과제였답니다... ㅠ_ㅠ..  2주차 기본 과제는 캘린더 앱이 주어지고 모든 테스트 코드가 존재하는 상태에서 반복 일정 기능을 추가하되 TDD로 개발하는 것이었습니다. 기본적으로 일정 생성은 가능했고 반복 일정 옵션을 주면 일정이 여러개 생성되어 화면에 출력되는 그런 기능을 개발하는 과제였습니다. 심화 과제는 전체 앱에 대해 e2e 테스트나 시각적 회귀 테스트를 도입할 지 판단해보고 그 근거를 서술 하는 것과 실제로 일부 기능에 대해 도입해보는 것이었습니다.  과제를 보고 기본 과제 정도는 통과하겠다 싶었는데 막상 시작하고 나니 쿼..

Q1. 과제  수색대의 지옥주와 같다고 소문이 자자한 항해 플러스 프론트엔드 테스트 코드 주간이 시작되었습니다..! 2주밖에 안되는 시간에 아무것도 모르는 채로 테스트 코드를 할 줄 안다고 말할 정도로 성장할 수 있을까? 당연히 불가능한 일이었답니다..! ㅎ_ㅎ 항해 플러스는 현직자를 대상으로 하는 과정이기 때문에 저처럼 하나도 모르는 사람부터 이미 잘 하는 사람까지 다양한 사람들이 참여하고 있습니다. 좋았던 점은 이번 과제는 실력에 따라 과제를 선택적으로 할 수 있었다는 점입니다. 테알못인 저는 가장 쉬운 난이도로 과제를 제출했습니다. ㅎㅎ...Q2. 시도  이번 과제는 소스 코드와 테스트 목록이 주어졌습니다. 뭐든지 처음이 어려운 게 뭐부터 시작해야할 지 몰라서인 것 같습니다. 가장 쉬운 난이도의 과..

1. 문제 코드 it('검색어에 맞는 이벤트만 필터링해야 한다', async () => { const { result: searchResult } = renderHook(() => useSearch(events, new Date(), 'month')); const { filteredEvents, setSearchTerm } = result.current; act(() => { searchResult.current.setSearchTerm('헬스장'); }); filteredEvents.forEach((event: Event) => { const searchTargets: EventKeys[] = ['title', 'description', 'location..