본문 바로가기
728x90
반응형

분류 전체보기362

React Query - Placeholder, Initial Data React Query initial data 더 나은 사용자 경험 추구는 프론트엔드 개발자의 숙명과도 같다. 이를 위해 수많은 노력을 하게 되는데... 대표적인 사례가 → 서버에서 데이터를 받기 전 화면을 어떻게 그릴 것인가! 일반적으로는 로딩 화면을 보여주면 되지만... 이 역시 '최선의' 방안이라고 보기는 어려울 테다(기다리는 걸 좋아하는 사람은 없으니!) 그렇다면 '최선의' 방안이란 뭘까? → 서버 데이터를 받아오기 전에, 화면을 그려주는 건 어떨까? React Query는 이를 위해 여러 유용한 도구들을 제공한다. prefetchQuery : 추후 필요한 데이터 미리 가져오기 keepPreviousData : 쿼리 키가 변경되더라도 마지막으로 success된 data 유지 Placeholder, .. 2023. 8. 16.
23.08.06~23.08.13 업무 1. R&D 과제 수행 틈틈이 진행하던 R&D 과제를 이번 주 통으로 시간을 내 진행했다. 자세한 내용을 작성할 순 없지만... 1) 학습 데이터 생성을 위한 데이터 전처리 2) 한국어 형태소 분석 위 두 가지가 주된 업무였다. 1) 데이터 전처리 언어 모델이 학습할 데이터를 위해, 도메인과 관련된 단어 사전을 구축해야 했고, 이를 위한 데이터 전처리를 진행했는데... 말이 좋아 전처리지, 사실상 기존 데이터를 단어 사전과 일일이 매핑하는, 수작업 노동에 가까운 일이었다! 모델 학습을 위해 반드시 거쳐야 하는 과정임을 알곤 있지만, 눈이 침침... 목이 뻐근... 한건 어쩔 수 없던 일. 하하! 2) 한국어 형태소 분석 자연어 형태의 문장에서 유의미한 값을 얻어내야 했고, 이를 위해 한국어 형태소 .. 2023. 8. 16.
23.07.30~23.08.06 업무 1. 앱 테스트 코드 작성 지난주부터 끙끙거렸던, 컴포넌트 테스트 코드를 작성했다. 여느 문제가 그렇듯 다 해결하고 나니 별 게 없는 것처럼 느껴지지만... 어찌 됐던 현 앱 서비스 내에 테스트 코드를 작성하기 시작했다는 게 꽤나 뿌듯했던 한 주. 앱 내 현존하는 모든 요구사항과 기능들에 대한 테스트 코드를 한 번에 작성할 수는 없기 때문에, 가장 최근에 개발했던 리뷰 관련 페이지 테스트 코드를 작성했다. 테스트가 필요한 항목은 1) 샵이 보유한 모든 리뷰가 뜬다. 2) 각 리뷰는, 해당 리뷰 상태에 알맞은 라벨이 뜬다. 3) 페이지 접속 시 구독 여부와 토글 여부에 알맞은 라벨 문구가 뜬다. 4) 관리 버튼 클릭 시 관리 페이지로 이동한다. 가 있었고, 각 항목에 맞는 테스트 코드를 작성! 그 과.. 2023. 8. 16.
23.07.23~23.07.30 업무 1. 리뷰 요청 기능 배포 월요일에 로드맵 관련 회의가 길어져서, 실 배포는 화요일에 진행되었다. 배포 후 소소한 수정사항(중복 제출 방지, 로딩 추가 등)을 반영. global loading을 구현했는데, 지금껏 '이렇게 했으면 좋겠다'란 설계대로 코드를 작성해 꽤나 만족스러웠다. (store에서 로딩 상태를 제어, 원하는 쪽에서는 해당 상태를 업데이트. 해당 컴포넌트는 App단에 위치해 로딩 컴포넌트 내부에서 자신의 render 여부를 제어하는 형태) 코드를 작성하지는 않았지만, 현 웹에서 작성된 모달 역시 App단에 작성, 필요한 곳에서는 해당 action을 dispatch 할 수 있겠단 생각을 했으며 자연히 '각 컴포넌트의 관심사 분리와 추상화 레벨'에 대해 고민할 수 있었다. 2. 현 서비.. 2023. 8. 16.
23.07.16~23.07.23 업무 1. 업로드 이미지 지원 X 오류 수정 지난주 발생했던 이슈를 해결했다. 사용자의 이미지 업로드 시, 해당 이미지를 브라우저에 띄워줘야 했는데... window.URL?.createObjectURL?.(file) createObjectURL 메서드를 통해, 입력받은 Blob 객체를 DOMString으로 변환해 img의 src 속성으로 띄워주는 상황. 하지만 HEIC 이미지의 경우 해당 DOMString을 브라우저에서 올바르게 띄워주지 못했고(HEIC타입 지원 X) 따라서 해당 파일의 타입을 jpeg나 png 등으로 변환하기로 했다. https://www.npmjs.com/package/heic2any heic2any Converting HEIC/HEIF to PNG/JPEG/GIF in the br.. 2023. 8. 16.
23.07.09~23.07.16 업무 1. 기존 샵 랜딩 페이지 내 리뷰 추가 서비스 유료화 방안의 일환으로 각 샵의 링크에서 리뷰를 노출하고, 수집할 수 있는 기능을 개발하기로 했다. 이를 처음 들었을 때, 현재 다른 기능을 통해 수집된 샵의 후기 데이터를 활용할 수 있겠다는 생각이 들었고 팀원들과 논의 결과 해당 미용샵들을 대상으로 우선적인 배포를 진행하기로 했다. 각 미용샵의 후기를 조회하는 기능 + UI 수정을 이틀 정도에 마무리 지었는데, 리뷰가 추가된 페이지, 해당 페이지와 비슷하지만 미용샵 측에서만 접근하는 페이지, 리뷰가 존재하지 않는 미용샵 용 페이지 등... 비슷하지만 다른 페이지 구성 + 재사용할 수 있는 부분/그렇지 않은 부분 을 고려해 컴포넌트를 설계하는데 중점을 뒀다. 2. 리뷰 작성 기능 개발 알림톡을 받은 .. 2023. 8. 16.
삶의 태도로써의 lean 인간 스타트업 되기 이십 대 중반. 정말 우연한 계기로, 알베르토 사보이아의 아이디어 불패의 법칙 이란 책을 읽게 되었습니다. 난생처음 느꼈던 그날의 설렘과 두근거림은 저를 수많은 혁신가, 특히 스타트업 종사자들의 책과 인터뷰로 이끌었습니다. 그 해가 끝나갈 무렵, 저는 하나의 목표를 세우게 됩니다. 스타트업의 방식으로 삶을 살아가겠다. 그리고 현재. 개발, 디자인, 마케팅, 기획. 스타트업에 필요한 역량 중 아무것도 가진 게 없던, 대기업/공기업 취업을 준비하는 지방 사회과학대 출신 대학생 중 한 명이었던 전 3년 만에 약 2500여 개의 애견 미용샵이 가입한 서비스의 프론트엔드 개발자이자, 현재까지 10억 원의 사업 운영 자금을 확보한 스타트업의 공동 창업자로서 위 목표를 향해 지금도 열심히 달려 나.. 2023. 8. 16.
23.07.02~23.07.09 업무 1. 채팅방 내 로그인 기능 배포 지난주에 개발한, 보호자가 채팅방에 접근했을 때, 소셜 로그인 및 회원가입 유도하는 기능을 배포했다. 배포 전 release환경에서 내부 통합 테스트를 진행했는데, react-native-webview에서 페이지 route 발생 시 초기 세팅한 source의 header 속성이 유실되는 이슈가 있었다. https://github.com/react-native-webview/react-native-webview/blob/master/docs/Guide.md#Setting-Custom-Headers 공식문서에 (친절한) 설명 및 예제 코드가 있어, 수정 자체는 손쉽게 할 수 있었다. 하지만 위 방법은... 웹뷰 컴포넌트 내에서 해당 페이지 uri를 state로 관리하면.. 2023. 8. 16.
23.07.30~23.08.06 업무 1. 앱 테스트 코드 작성 지난주부터 끙끙거렸던, 컴포넌트 테스트 코드를 작성했다. 여느 문제가 그렇듯 다 해결하고 나니 별 게 없는 것처럼 느껴지지만... 어찌 됐던 현 앱 서비스 내에 테스트 코드를 작성하기 시작했다는 게 꽤나 뿌듯했던 한 주. 앱 내 현존하는 모든 요구사항과 기능들에 대한 테스트 코드를 한 번에 작성할 수는 없기 때문에, 가장 최근에 개발했던 리뷰 관련 페이지 테스트 코드를 작성했다. 테스트가 필요한 항목은 1) 샵이 보유한 모든 리뷰가 뜬다. 2) 각 리뷰는, 해당 리뷰 상태에 알맞은 라벨이 뜬다. 3) 페이지 접속 시 구독 여부와 토글 여부에 알맞은 라벨 문구가 뜬다. 4) 관리 버튼 클릭 시 관리 페이지로 이동한다. 가 있었고, 각 항목에 맞는 테스트 코드를 작성! 그 과.. 2023. 8. 16.
728x90
반응형

티스토리툴바