일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
- 성장일지
- rust
- 항해
- 개발공부
- webGPU
- 개발자
- naver
- 테스트 코드
- 항해 플러스
- 자바스크립트
- javascript
- 리뷰
- 보안
- 항해99
- FE
- 항해 플러스 프론트엔드
- 항해플러스
- wil
- 분기 회고
- frontend
- 개발 공부
- GPU
- React Query
- 백준
- 프론트엔드
- 알고리즘
- React
- 회고
- 성능최적화
- typescript
- Today
- Total
목록프론트엔드 (13)
느릿늘있
안녕하세요. 항해플러스 프론트엔드 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주밖에 안되는 시간에 아무것도 모르는 채로 테스트 코드를 할 줄 안다고 말할 정도로 성장할 수 있을까? 당연히 불가능한 일이었답니다..! ㅎ_ㅎ 항해 플러스는 현직자를 대상으로 하는 과정이기 때문에 저처럼 하나도 모르는 사람부터 이미 잘 하는 사람까지 다양한 사람들이 참여하고 있습니다. 좋았던 점은 이번 과제는 실력에 따라 과제를 선택적으로 할 수 있었다는 점입니다. 테알못인 저는 가장 쉬운 난이도로 과제를 제출했습니다. ㅎㅎ...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..
Q1. 과제 테오가 말아주는 클린 코드!! 항해 플러스에서 경험할 수 있는 특별한 시간이었습니다! 그 마지막 챕터가 마무리되었는데요. 마지막 주제는 FSD(Feature Sliced Design)이었습니다! FSD는 FE 진영에서 아주 핫한 디자인 패턴이라고 볼 수 있습니다. 공식 문서가 있는 Design Pattern이 있다..? 조만간 프론트엔드 개발의 표준이 될 수도 있는 패턴이고 FSD가 제안하는 철학을 이해하는 것만으로도 좋은 개발자가 되기에 충분히 필요한 부분이라고 느꼈습니다. 디자인 패턴이 백엔드에 비해 프론트엔드에서는 크게 중요성을 인정받지 못하는 느낌인데요. 공부를 하면서 React와 FSD 조합이 큰 규모의 개발에 있어서 앞으로의 시장을 이끌어 갈 것 같다는 느낌을 받았습니다! FS..