분류 전체보기
-
우아한테크코스, 그리고 2023년을 마치며Study/일상·회고 2023. 12. 28. 01:05
지난 11월 말, 우아한테크코스를 수료했습니다. 그리고 목표하던 회사도 들어가게 되었습니다. 2023년을 마무리 하는 글 겸, 개발자가 되기까지의 여정을 회고하려고 합니다. 우테코를 마무리하며 그동안은 우테코에서 매 레벨이 끝날 때 마다 회고 글을 하나씩 작성하곤 했으나, 레벨 4~5 회고는 마음의 여유가 없어서 적지 않았습니다. 레벨 4 기간에는 레벨 3 때 팀 프로젝트로 만든 서비스를 고도화하고, 운영하고 유지보수 하면서 사용자 경험을 얻는 기간이었습니다. 개인적으로 저에게 이 시기는 창업은 개발과는 다른 영역임을 깨닫게 되는 시기였습니다. 내가 만든 프로그램이 과연 사용자들에게 어떤 도움이 될까? 이렇게 하면 좋아하겠지? 사용자의 니즈를 정확하게 파악하는 것은 정말로 어려웠습니다. 우리 서비스의 사..
-
msw 2.0를 활용한 api mocking (설치 및 기본 세팅)Frontend/React·React Native 2023. 11. 1. 15:38
프론트엔드 개발을 하기 위해서는 서버와의 통신이 필연적입니다, 하지만 개발을 하다보면 백엔드에서 api의 제작이 늦어질 수 있습니다. 이런 경우에는 어떻게 해야할까요? 백엔드에서 api를 다 만들어 줄 때까지 기다려야 할까요? 만약 서버가 완성이 되더라도, 실패에 대한 테스트는 어떻게 진행할 수 있을까요? msw가 이러한 문제들을 해결해줍니다. 클라이언트 개발 환경에 포함되어있는 msw가 서버의 역할을 대신하면서 요청/응답을 mocking 하게 되며, 각종 통신 상황에 대해서 테스트를 진행합니다. msw의 핵심 개념은 다음과 같습니다. 1. Intercepting requests 클라이언트에서 발생하는 요청을 가로챕니다. 사용자가 서버로 보내려던 요청이 msw로 흘러갑니다. 2. mocking respo..
-
React에서 Google Maps API, Tanstack Query로 대용량 마커 데이터를 관리하는 방법Frontend/React·React Native 2023. 10. 26. 09:54
최근 진행한 프로젝트에서는 다음과 같은 핵심 기능이 필요했습니다. 1. 대량의 데이터(전국 약 6만여 건)를 사용자의 화면에 해당하는 영역만 적당하게 마커로 렌더링 해줄 것 2. 사용자가 움직일 때 마커 렌더링을 새롭게 진행할 것 3. 한번 렌더링 한 마커는 유지하고, 화면에서 벗어난 마커는 해제할 것 4. 사용자가 화면을 축소하는 경우 마커를 다른 방식으로 보여줄 것 5. 지도는 지도대로 동작하고, React는 React대로 동작하여 독립적인 환경을 보장할 것 이 프로젝트에서는 Google Maps API, React, Tanstack Query를 사용했으며, 이를 적절하게 제어할 수 있는 전략이 필요했습니다. 일단, 미리 말씀드리자면.. 일정한 수 이하의 데이터를 다루거나 마커가 동적으로 관리될 필요..
-
카페인 서비스와 함께하는 전기차 여행 - 2Study/일상·회고 2023. 10. 26. 01:22
이 글은 카페인 서비스 팀 블로그 에도 작성되어있는 글 입니다. 이 글은 센트와 함께 작성한 글입니다. 안녕하세요? 센트와 가브리엘 입니다. 저희 카페인 팀에서는 지난번 카페인 서비스 1차 체험 진행 이후 일부 기능 개선이 있었습니다. 기능 개선의 유용성을 판별하고자 카페인 서비스 2차 체험을 다녀왔습니다. 저희 팀에서 1차 체험 이후 개선한 사항은 다음과 같습니다. 1. 지역검색 이제는 검색어를 입력하는 경우, 전국 도시의 주소가 같이 제공됩니다. 2. 충전소 마커를 확인할 수 있는 지도 영역 확장 (기존에는 위 사진보다 좁은 영역만을 호출하는 것이 허용되었다.) 모바일에서 좀 더 넓은 영역을 호출하는 것을 허용했습니다. 원래는 디바이스 너비를 고려하지 않고 줌 레벨 기준으로 요청을 제한했으나, 이..
-
React에서 Google Maps API를 자유롭게 사용하는 방법 (@googlemaps/react-wrapper)Frontend/React·React Native 2023. 10. 24. 15:39
React에서 Google Maps API를 사용하기 위해 사용하는 @react-google-maps/api나 react-google-maps 같은 라이브러리들을 사용하는 방법이 있을 것입니다. 이 라이브러리들을 사용하면 Google Maps API에 있는 주요 기능들을 React 컴포넌트처럼 사용할 수 있지만, 여러 가지 문제가 있습니다. 실제 Google Maps API에서 제공하는 환경과 달라 제대로 된 기능을 활용하기 어렵습니다. 구글 지도에서 제공하는 기능들을 직접 접근하여 개발하는 것이 아닌, 라이브러리에서 제공하는 컴포넌트에 의존하여 개발을 하다보면 트러블 슈팅을 할 때 문제가 발생합니다. 과거 React Native에 Google Maps API를 사용하기 위해 라이브러리(react-nat..
-
카페인 서비스와 함께하는 전기차 여행 - 1Study/일상·회고 2023. 10. 11. 00:18
이 글은 카페인 서비스 팀 블로그에도 작성되어있는 글 입니다. 카페인 서비스를 개발하면서 가장 많이 받은 피드백 중 하나는 사용자 경험이 반드시 필요하다는 것이었습니다. 아무래도 전기자동차를 보유한 팀원들이 아무도 없다보니 실제 사용자들이 겪는 어려움을 예상할 수 밖에 없었습니다. 따라서 전기 자동차 운전자들을 찾아내어 수차례 인터뷰를 진행하였는데 실제 차주들이 원하는 기능이 무엇인지, 어떤 어려움을 겪는지를 확인하여 이를 바탕으로 서비스를 개발하였습니다. 서비스를 처음 개발하였을 때 가장 많이 받았던 피드백은 앱 로드 속도가 너무 느리다는 것이었습니다. 서비스 초기에는 로딩 속도가 너무 느려서 사용자들에게 서비스 사용을 권장하기 미안한 상태였습니다. 따라서 실사용자를 모집하는 것 보다 서비스 안정화에 ..
-
우아한테크코스 5기 FE 레벨 3을 마치며...Study/일상·회고 2023. 9. 4. 12:05
우아한테크코스의 레벨 3은 팀 프로젝트 기간입니다. 대학교에서 경험했던 캡스톤 수업과 굉장히 유사한 방향으로 진행되지만, 디테일한 측면에서 굉장히 달랐습니다. 프론트엔드와 백엔드 크루들이 한 팀을 이뤄서 프로젝트를 진행하며, 우테코가 끝날 때 까지 진행됩니다. 팀 프로젝트는 캡스톤 수업과 어떤 점이 달랐나? 프로젝트에 진입하기 앞서 주제 선정이 굉장히 치열했으며, 선정 이후에도 기획 단계에서도 날카로운매운 피드백이 오갔습니다. 우테코에서는 프로그래밍 뿐만 아니라 소프트스킬 습득에도 굉장한 노력을 기울입니다. 어쩌면 팀 프로젝트에서 사용할 소프트스킬을 위해 그동안 이런 노력을 기울인게 아닌가 싶을 정도로 많은 대화가 오가야 했습니다. 팀 프로젝트 주제는 단순히 프로젝트를 했다! 가 아닌, 실제 사용자를 고..
-
고밀도 지도 데이터 관리를 위한 효과적인 전략: 지도 확대 및 마커 제어Frontend/JavaScript 2023. 8. 25. 00:22
지도 기능에서 가장 핵심인 기능 두 가지를 뽑자면, 지도 그 자체와 지도 위에 그려지는 마커를 뽑을 수 있을 것입니다. 지도 위에 마커를 그리는 일은 그다지 어렵지 않고, documents 에 있는 예제들을 잘 따라하면 누구나 충분히 구현할 수 있을 것입니다. 하지만 마커의 갯수가 과도하게 많다면 어떤 전략을 세울 수 있을까요? 최근 진행한 서비스에서는요 ... 최근 진행한 서비스에서 지도는 굉장히 중요한 요소 중 하나였습니다. 사용자들이 궁금한 장소의 주변에 있는 충전소를 시각적으로 제공해주기 위해서는 지도를 잘 제어할 수 있어야 했습니다. 특히 전국에 이미 수만 대의 충전소가 보급이 된 상황에서 충전소 마커를 모두 그려주기 위해서는 많은 제약이 있었고, 마커를 적당한 수준으로 렌더링 하려면 클라이언트..