프론트엔드 개발자의 기록 공간

입사 직후 도메인도 모른 채 맡았던 D'CENT Wallet React 마이그레이션, 그 마지막 회고 글이 올라왔습니다.▎Vue 2.7 → React 19 전환 결과에 대한 성과를 숫자로 정리해봤습니다.😄 새로운 스택을 익힌 것보다, 팀이 더 빠르고 안전하게 움직일 수 있는 기반을 만드는 일이 얼마나 중요한지 체감한 시간이었습니다.옆에서 많이 도와주신 FE 팀원분들께 다시 한번 감사드립니다.🙇‍📦 번들 & 전송- 합계 26.0MB → 20.9MB (-19%)- Gzip 전송 10.0MB → 5.8MB (-42%)- CSS 796KB / 93개 파일 → 134KB / 2개 파일 (-83%)⚙️ CI/CD- 빌드 시간 5.1분 → 2.4분 (-53%)- S3 배포 2.1분 → 0.3분 (-86%)?..

요즘 SNS를 보면 AI를 활용해 수익화를 했다는 글을 쉽게 볼 수 있습니다.저 역시 그런 글을 볼 때마다 “아, 미리 해볼 걸…” 하고 그냥 넘기곤 했습니다.그러다 문득 이런 생각이 들었습니다.“AI를 실무에서 쓰는 개발자인 나도, 정말 ‘딸깍’으로 돈을 벌 수 있을까?”마침 네이티브 앱 생태계도 경험해보고 싶었기 때문에 간단한 앱을 만들어 직접 수익화를 실험해보기로 했습니다.(프로그래밍 좀비 인프런 강의 영상을 참고했습니다 :)기술 스택저는 프론트엔드 개발자로 React를 사용하고 있어 React Native를 선택했습니다.iOS / Android 동시 대응 가능기존 React 경험 활용 가능빠른 개발을 위해 Expo를 사용했고 iOS 시뮬레이터와 Android 에뮬레이터 환경에서 개발했습니다.사이드..

내 마음대로 정리하는 "프론트엔드 성능 최적화 가이드" 프론트엔드를 개발하다보면 어떤 부분에서 최적화를 할 수 있을까?에 대한 고민을 많이 하게 됩니다.이론적으로 캐싱을 활용하거나, 로딩 성능과 렌더링 성능을 하면 된다고 생각을 하지만,실무에서 어떻게 확인하고 적용할 수 있을까? 이론적으로 부족한 부분은 무엇일까에 대한 고민으로 해당 책을 구매하여 읽게 되었습니다.해당 책을 읽고 제가 몰랐던 정보나, 유용하다고 생각하는 핵심 부분만 마음대로 정리해서 기록해 보았습니다.비교적 짧게 정리해서 축약된 부분이 많으니 필요시 해당 키워드로 검색해서 따로 찾아보면 좋을 것 같습니다.소개웹 성능을 결정하는 요소는 크게 로딩 성능과 렌더링 성능으로 나눌 수 있다.로딩 성능은 서버에 있는 웹 페이지와 웹 페이지에 필요한..

yapp 24기 활동이 끝난 시점에 늦었지만, 지원하게 된 계기와 지원 과정부터 활동 과정까지의 후기를 남길려고 합니다. 지원계기현재 저는 프론트엔드 개발자로 약 1년 반 동안 현업에서 일하고 있습니다. 그동안 많은 실수와 성공을 겪으며 성장했지만, 대부분의 직장인들이 그렇듯, 시간이 지나면서 반복적인 업무에 익숙해지게 되었습니다. 특히, 팀의 특성상 레거시 시스템을 다루거나 단순한 작업을 처리하는 경우가 많았습니다. 그 결과, Next.js와 같은 최신 기술을 학습해도 실무에 적용할 기회는 많지 않았습니다.이러한 한계를 느끼면서 새로운 기술, 환경, 사람들과의 협업을 통해 제 시야를 넓히고자 대외 동아리에 지원하게 되었습니다. yapp 24기 Web 파트 지원후기자기소개서 - 면접 - 결과 순으로 전형..

Web Components웹 컴포넌트는 그 기능을 나머지 코드로부터 캡슐화하여 재사용 가능한 커스텀 엘리먼트를 생성하고 웹 앱에서 활용할 수 있도록 해주는 다양한 기술들의 모음입니다.웹 표준 기술로 모든 브라우저에서 동작하고 플랫폼 간 호환성을 높여줍니다. (미지원 브라우저 제외 및 구버전 브라우저에서는 polyfill을 사용하여 지원 가능)다양한 프레임워크나 라이브러리에서 Web Components를 사용할 수 있기 때문에, 기술 스택에 구애받지 않고 사용할 수 있습니다.특징Custom elementshtml tag 자체를 커스텀하게 만들고 browser 사용할 수 있도록 만들어 줍니다.customElements.define 메소드를 이용Shadow DOM다른 DOM과의 분리를 통해 DOM을 캡슐화합니..

requestAnimationFrame이 무엇인지 알아보기 전에 다음과 같은 이슈를 만난적이 있나요?(requestAnimationFrame 개념을 바로 습득하고 활용 사례를 보고 싶다면, requestAnimationFrame 타이틀로 바로 이동하셔도 무방합니다.) useEffect 비동기로 인한 이슈 개요 : 사용자에게 화면을 제공한 후 어떠한 로직을 처리하고 싶어서 useEffect에 해당 로직을 작성했지만,화면 표시전에 로직이 실행되어 (컴포넌트 렌더링과 화면에 노출 시점의 간극으로 인해) 문제가 되었던 적이 있나요? 제가 겪었던 이슈를 말씀드리겠습니다.제가 원했던 경우는 사용자에게 화면을 제공한 후 searchParams값이 있으면 alert 띄우기라는 단순한 조건이었습니다.이를 위해 다음과 같..