React Native 는 React 를 기반으로 Mobile App을 만들수 있는 프레임 워크이다. React native 를 이용하면 하나의 코드베이스로 안드로이드, ios 모두를 지원하는 앱 (하이브리드앱) 을 만들 수있는데. 이는 개발 생산성 관점에서 볼 때 큰 이점으로 작용한다. React Native 를 더 강력하게 하는 기술 "Webview" 이러한 하이브리드 앱의 강점을 한층 더 업그레이드 할 수 있는 기술이 있는데, 바로 Webview 라는 기술이다 Webveiw 를 이용하면 어플리케이션 내부에 인터넷 브라우저를 띄울 수 있다. 이 둘은 과거 팝업창에서 자주 쓰이던 window.postMessage 라는 메서드를 이용해 통신할 수 있는데 이를 이용해 React native 로 Native..

마이크로 프론트엔드? 마이크로 프론트엔드는 전체적인 웹 애플리케이션을 여러 개의 작은 독립적인 프론트엔드 애플리케이션으로 분할하는 아키텍처 패턴이다. 마치 MSA (Micro service architecture) 의 프론트엔드 판이라고 볼 수 있는데, 각 서비스를 분할해 관리함으로써 '독립적인 개발과 배포' , '기술 스택의 다양성' , '유지보수 용이성', '스케일링 용이성', '재사용성과 통합' 에서의 이점을 가진다 런타임 통합 vs 빌드타임 통합 마이크로 프론트엔드 아키텍쳐에서는 개별의 어플리케이션이 통합되는 시점에 따라 '런타임 통합' 과 '빌드타임 통합' 으로 나눠 볼 수 있다. 각각의 장/단점을 비교해보자면 런타임 통합 빌드타임 통합 구현 난이도 상대적으로 높음 상대적으로 낮음 배포 효율성 ..

React Native와 Flutter는 둘 다 인기 있는 모바일 앱 개발 플랫폼으로, 개발자들 사이에서 논란의 여지가 있는 두 가지 선택지이다. 비교 React Native Flutter 언어 Javascript Dart 메인테이너 Meta (Facebook) Google 진입장벽 상대적으로 낮음 상대적으로 높음 성능 상대적으로 낮음 상대적으로 높음 장점 React Native 낮은 진입장벽 React Native는 JavaScript를 사용하여 개발되며, 웹 개발자라면 당연하게도 JavaScript에 익숙하다. 이는 새로 학습하는 입장에서 React Native로 앱을 개발하는 데 낮은 진입 장벽으로 작용한다 커뮤니티 / 예제 React Native는 Facebook에 의해 개발되었으며, 진입장벽이 ..

React-virtual? React-virtual 라이브러리는 Tanstack 이라는 단체에서 관리되는 DOM 가상화 라이브러리이다. 리액트의 옛 공식문서에서 확인할 수 있 듯, 거대한 크기의 리스트를 화면에 랜더링할 경우, "가상화" 라는 방법을 통해 최적화 하는것을 권한다. 사용 필요성 모든 SNS 에 필수적으로 들어가는 기능인 무한 스크롤 (Infinite scroll) 은 무한 스크롤은 웹 페이지에서 사용자가 스크롤을 내릴 때 자동으로 추가 콘텐츠를 로드하여 페이지를 끊임없이 확장하는 기술로, 스크롤을 끝까지 내리면 새로운 콘텐츠가 동적으로 로드되어 사용자 경험을 향상시킨다. 또한 페이지 이동 없이 사용자가 머무는 시간을 늘려 사용자 유지율을 향상시킬 수 있어 웹 어플리케이션에 자주 사용되는 기..

Problem! 타 직군 일정에 의존적 이미 만들어진 서비스를 유지보수 하는 경우라면 잘 와닿지 않을 수 있지만, 회사에서 신규 기능을 개발하거나 개인 프로젝트를 진행하다보면 프로젝트 초기 프론트엔드 개발자의 워크로드가 상대적으로 타직군에 비해 낮다 는것을 알 수 있다. 프론트엔드 개발자라는 포지션이 가지는 특징이라고 볼 수 있는데 디자이너의 디자인 대로 UI를 만들고 백엔드 API를 연동해 서비스를 만들어 가야 하기 때문에 이런 상황에 상대적으로 다른 "타직군 일정에 의존적" 이라고 할 수 있다. (중간에서 이리치이고 저리치이고한다) 이 세상은 코드가 아니야! 개발자라면 본능적으로 이런 의존성에서 벗어나고 싶어할 것이다. 다만 현실은 코드로 이루어지지 않았고, 일정이라는게 내 마음대로 되는 게 아니다...

함수이름 짓기, 변수이름 짓기를 로직짜기보다 어려워하는 개발자들이 은근 많은데요? 그래서 자주 사용하는 함수명 접두사 를 정리해봤습니다. get - 어떤 값을 가져오는 함수를 나타낼 때 사용됩니다. set - 어떤 값을 설정하는 함수를 나타낼 때 사용됩니다. check - 어떤 조건을 확인하는 함수를 나타낼 때 사용됩니다. create - 새로운 객체나 요소를 생성하는 함수를 나타낼 때 사용됩니다. update - 기존의 데이터나 상태를 업데이트하는 함수를 나타낼 때 사용됩니다. delete - 어떤 요소나 데이터를 삭제하는 함수를 나타낼 때 사용됩니다. validate - 데이터나 입력 값의 유효성을 검사하는 함수를 나타낼 때 사용됩니다. render - 템플릿이나 데이터를 기반으로 화면에 렌더링하는 ..