개발49 [항해플러스] 프론트엔드 3기 장단점 솔직 후기 나는 어떤 개발자?경영학과를 전공한 후 MD를 하다가 퇴사 후 부트캠프를 수료했다. 이후 아이 교육 서비스를 하는 회사에 입사하여 3년 차 프론트엔드 개발자로 근무 중이다. 회사에서는 유일한 프론트로서 백오피스를 포함하여 웹 개발이 필요한 모든 서비스의 프론트 개발을 담당하고 있는데, 아무래도 혼자 개발을 하다 보니 라이브러리 및 프레임워크 선택부터 개발/테스트까지 모든 과정에서 항상 무엇을 선택하고 어떻게 개발해야 하는지에 대한 끊임없는 고민을 하고 있다.항해 플러스 지원계기지난 2년 동안 꾸준히 스터디를 운영해 왔는데, 차근차근 실력이 늘고 있다는 생각은 들었지만 시간이 어느 정도 지나고 나니 스스로 잘하고 있는 지를 점검하고 싶었다. 내가 짠 코드들이 과연 건강한 코드인지, 개발을 할 때 어떤 구.. 2024. 10. 22. [항해플러스] 클린코드 (진짜진짜 더러운 코드 개선하기) 이번 주 과제굉장히 더럽고 더럽고 더럽고 더럽고 더러운 코드를 개선하는 게 이번주의 과제였다. javsacript로 1차 개선한 후 개선된 코드에 2차로 react + typescript를 입히면 되는 과제였다. 말만 들으면 '개선' 및 기존 기능 테스트 통과라는 것 외에 크게 요구사항이 없기 때문에 처음에는 이전 과제들에 비해할 만하겠다!라고 생각했지만, 일주일이 지나고 나니 그 어떤 주차보다 시간이 부족하고 어려웠던 주차였다. PR을 올려주신 다른 분들의 리뷰도 봤을 때 전반적으로 다들 비슷한 생각이신 것 같았다.평일 QA 때 어쩌다 보니 이런저런 질문들을 많이 드리면서 코치님께 '개선 전 코드는 어떻게 만드셨나요?'라고 여쭤봤는데, 의외로 AI는 덜 더럽게 만들어줘서 손수 더럽게 만들어주셨다고 했다.. 2024. 10. 18. [항해플러스] React Hooks 직접 구현하기 (useRef, useMemo, useCallback, ...) 이번 주 과제얕은 비교와 깊은 비교 로직 구현useRef 구현위 비교 함수와 직접 구현한 useRef를 활용하여 memo, useMemo, useCallback 구현샘플 애플리케이션 최적화 진행 (직접 구현한 훅 활용, 하나로 합쳐져 있는 Context 분리)이번 주 새롭게 알게 된 내용Object.is()// Before if (typeof objA !== typeof objB) return false;if (objA === null || typeof objA !== "object") return objA === objB; // after if (Object.is(objA, objB)) return true; if (typeof objA !== "object" || typeof objB !== "o.. 2024. 10. 12. [항해플러스] 프레임워크 없이 SPA 만들기 Part 2 가상DOM 구현 회고 이번주 새롭게 알게 된 내용Diffing 알고리즘SPA를 구현을 떠올리면, Part 1에서 진행했던 라우팅 처리 방법이 핵심적이긴 하지만 필요한 부분만 업데이트하는 것도 큰 특징 중 하나이다. 이번 과제에서는 Diffing 알고리즘을 통해 업데이트되는 부분만 부분적으로 렌더링을 하는 기능을 구현했다. 사실 좀 막막한 부분도 있기는 했는데, 참고 자료랑 과제 구현 파일에 달린 주석들을 참고로 해서 생각보다는 금방 적용할 수 있었다. 중간에 돔 객체로 만드는 과정에서 children을 제대로 업데이트해주지 않아 파일이 제대로 적용되지 않는 문제가 있었는데, 집단지성의 힘으로 해결할 수 있었다. (3기 17팀...💖)1. 렌더링 가능한 형태로 풀어주고2. oldNode, newNode를 비교해서 여러 케이스.. 2024. 10. 3. [항해플러스] 프레임워크 없이 SPA 만들기 Part 1 회고 프로젝트를 진행하면서 부딪혔던 기술적인 문제(문제, 시도, 해결, 알게된 것)템플릿 리터럴로 HTML을 innerHTML에 넣어 렌더링을 구현했는데, 테스트 코드를 돌렸을 때 렌더링을 시킨 HTML에 있는 id를 읽어오지 못하는 이슈가 있었다. 템플릿 리터럴이 innerHTML에 들어가기 이전에 이벤트를 등록할 경우 내부에 있는 id를 읽어오지 못한다는 사실을 알게 되었고 실행 순서를 조정하는 과정을 통해 해결할 수 있었다.에러 바운더리를 try, catch로 구현을 하고 싶었는데 이벤트가 전파되지 않아 결국 window.addEventListener('error', () => {}) 방식으로 구현했다. 오늘 1주차 과제에 대한 solution을 듣다보니 구조를 잘 짜게 되면 try, catch로도 구.. 2024. 9. 28. [항해플러스] 프론트 3기 과정을 시작하며... 항해 플러스 참여 계기항해99를 수료하고 벌써 3년차 개발자가 되었다. 운 좋게 좋은 회사에 입사하여 근무를 하게 되었는데, 유일한 프론트엔드 개발자이다보니 혼자 업무하는 것에 대한 아쉬움이 항상 있었다. 개발을 하다보면 수 많은 프레임워크나 라이브러리를 검토하고 결정해야 하는 순간들이 찾아오는데, 이럴 때 같이 고민을 나눌 수가 없고 또 구조적인 부분이나 현재 갖고 있는 생각들을 나누기가 쉽지 않았다. 스터디를 통해 어느정도 해소하려고 해보았지만 확실히 현업에서 하는 것처럼 시니어분들의 피드백을 받기가 어려웠기 때문에 새로운 과정이 필요하겠다는 생각이 들었다.항해 면접관을 하는 도중 항해 플러스가 생겼다는 소식을 듣게 되었고 이 과정에 바로 참여하고 싶었지만 당시 상황 때문에 계속 미루고만 있던 상황에.. 2024. 9. 21. 이전 1 ··· 5 6 7 8 9 다음 반응형
