본문 바로가기

분류 전체보기184

[React-Native] ScrollView 스크롤 버벅임 최적화하기 ⚡ ScrollView 버벅임 현상 외주 업체에서 상품소개 페이지를 만들었다고 해서 확인을 해봤습니다. 아이폰에서는 잘 작동하지만 안드로이드에서는 스크롤이 불가능할 정도로 버벅거리는 현상이 발생했습니다. react-native의 스스로 화면 밖 요소를 최적화해주는 FlatList 를 사용해 볼까 싶었지만 일정한 포맷이 반복되는 요소들이 아니어서 결국엔 ScrollView를 사용할 수 밖에 없었습니다. 처음에는 상태 관련된 최적화가 되어 있지 않아서 발생하는 문제인 줄 알았지만, 이리저리 헤매다 결국엔 ScrollView 내부에 너무 많은 요소가 존재해 발생하는 문제라는 것을 알아냈습니다. ScrollView 내부엔 40장 이상, 총합 7mb 정도 되는 이미지들과 가벼운 컴포넌트들이 있었는데 최신 기기에서.. 2023. 10. 14.

[React/TypeScript] 절대경로 CRA 템플릿 npm 배포 ⚡ npm배포 지금껏 오픈소스에 대한 막연한 환상을 지닌 채로 언젠가는 나도 도전해봐야 할 일이라고 생각하며 가슴 한편에 묻어두고 있었습니다. 그러다 약간의 여유가 생겼고 도전해봄직 하다는 자신감도 생겼지만 막상 뭘 해야 될지 몰랐습니다. 고민에 고민을 거듭하다, 일단 최대한 간단하고 npm 배포 연습용 소재를 찾다 저만의 템플릿을 올려보기로 결정했습니다. 항상 새로운 프로젝트를 만들 때마다 매번 똑같이 정형화된 포맷을 만들어주기도 귀찮았고, 남들이 안써도 내가 쓰면 그만이라는 생각으로 제작해 봤습니다. 그럼 어떤 라이브러리와 보일러 플레이트가 템플릿에 녹아있는지 소개드립니다. ⚡ cra-template-lasbe React - TypeScript와 recoil, styled-components, cra.. 2023. 9. 11.

[React] ErrorBoundary를 통한 선언적인 에러 핸들링, react-query를 이용한 재호출 방법 ⚡ 리액트에서의 에러 핸들링 리액트의 한 컴포넌트에서 에러가 발생했을 때 적절한 에러 핸들링을 하지 않는다면 애플리케이션 전체가 중단될 수 있습니다. 저는 평소 API 호출 로직에 try - catch 를 이용해 구구절절 명령형으로 에러를 처리하곤 했습니다. 이와 같은 방식은 한 컴포넌트 안에 에러가 발생했을 경우, 에러가 발생하지 않았을 경우 두 가지 조건에 대한 로직이 섞여 코드 라인 수가 길어지고 가독성을 저해합니다. 또한 에러 핸들링에 대한 명확한 기준이 없다면 개발자마다 다른 에러 핸들링으로 코드의 통일성을 잃어버릴 수 있습니다. 하지만 위와 같이 ErrorBoundary를 이용해 선언적으로 에러 핸들링을 하게 되면 에러 핸들링에 관한 모든 권한을 위임하게 되어 하위 컴포넌트에서는 에러 발생에 .. 2023. 9. 4.

[React] 선언적으로 유저 행동 이벤트 추적하기 with React.cloneElement() ⚡️ 선언적으로 유저 행동 이벤트 추적하기 최근에 B2C 업무에 투입되며 전반적인 앱 플로우와 곧 제가 하게 될 업무에 대해 설명을 들었습니다. 그중 data-driven 한 의사 결정을 위해 유저 이벤트 추적 툴을 도입한 상태였고, 정해주는 이벤트에 추적 기능을 붙이는 업무도 하게 될 것이라는 말씀을 들었습니다. 그러면서 예시 코드를 보여주셨는데 예시로 다음과 같이 버튼 클릭 이벤트 핸들러 함수 안에 추적 툴에서 제공한 함수를 이어붙인 모양이었습니다. const handleClickSignUp = () => { 이벤트_추적(); // ~~~ 회원가입(); // ~~~ } 이러한 방식은 하나의 함수에 두가지 이상의 기능이 담겨 가독성을 해치고 유지보수가 여러워 질 것이 뻔합니다. 그렇다면 기능을 분리하고.. 2023. 8. 29.

프론트엔드 개발자 입사 만 1년차 회고 ⚡️ 2023.04 ~ 2023.08 📌 8월 16일 8월 16일, 광복절 다음 날. 벌써 취업 후 1년이 지났다. 이제 와서 생각해 보면 너무나 빠르게 흘러온 것 같아 기억이 흐릿하지만 주기적으로 작성한 회고를 보니 지나온 일들이 어제 같이 생생하다. 너무 정신 없이 살아 어제 먹은 식사도 기억을 잘 못하는 걸 보니 최소 분기 단위로 회고록을 작성해야겠다고 다짐한다. 📌 커피챗 얼마 전 블로그 댓글로 어떤 학생이 나와 커피챗을 하고 싶다는 댓글이 달렸다. 처음엔 너무 당황스러웠다. 아직까진 항상 도움을 받을 존재란 생각을 했는데 누군가 내 도움을 필요로 했기 때문이다. 또한 중고거래 제외하고 온라인을 통해 누군가를 만난다는 것이 처음이기도 하고, 댓글로 미리 알려준 질문 내용들은 내 머릿속에 아직 정리.. 2023. 8. 26.

[React, 사이드 프로젝트] 링모(LINGMO), 당신의 링크 모음 ⚡️ 당신의 링크 모음, LINGMO 링모(LINGMO) - 당신의 링크 모음 개성 있는 나만의 링크 모음을 만들어보세요! lingmo.me 주변 사람들이 자신의 링크 모음을 인스타그램 프로필에 올려두는 것을 보고 시작하게 된 사이드 프로젝트입니다. 비슷한 링크 모음 서비스를 찾아보며 완전히 따라잡기는 무리라고 생각해 기존 기능은 가져가되, 링모에서는 더 다양하고 자유롭게 색을 사용할 수 있는 것을 차별점으로 가져갔습니다. 회사를 다니며 혼자 기획과 디자인, 개발을 하다 보니 처음부터 많은 기능들을 넣기엔 무리가 있어 핵심 기능에만 집중하고 추후 더 다양한 기능들을 추가할 생각입니다. 📌 개발 기간 2023년 2월 ~ 2023년 3월 / 2023년 6월 ~ 2023년 7월 초반에 핵심적인 기능 구현은 한.. 2023. 8. 21.

[React] SPA 사이드 프로젝트 검색 엔진 최적화(SEO) 끝장내기 ⚡ SEO, 검색엔진 최적화 검색 엔진 최적화 (Search Engine Optimization)는 웹 사이트의 가시성을 향상시키고 검색 엔진 결과 페이지(SERP)에서 상위에 노출되도록 하는 노력을 의미합니다. 즉, 네이버나 구글 검색 결과 상위에 노출되도록 하는 일련의 과정이나 행위입니다. 사이드 프로젝트를 진행하며 이왕 만든거 많은 사람들에게 노출되고 사용 되었으면 하는 마음에 SEO를 알아보고 적용해봤습니다. 그럼 제가 프로젝트를 검색엔진에 최적화 시키기 위해 어떠한 것들을 적용했는지 소개합니다. 📌 Meta Tag 메타 태그는 검색 엔진 최적화 (SEO)의 중요한 요소 중 하나로서, 웹 페이지의 콘텐츠를 검색 엔진에게 설명하고 해석할 수 있는 정보를 제공합니다. 메타 태그를 적절하게 설정하면 검.. 2023. 8. 13.

[React] 스크롤 애니메이션, IntersectionObserver + styled-components 📒 React 스크롤 애니메이션 구현하기 사용자의 눈길을 끌기 위해 다양한 방법들이 사용 되는데, 그 중에서도 가장 눈에 띄던 것이 스크롤 애니메이션이었습니다. 실제 사이드 프로젝트에서 구현한 모습은 다음 링크에서 확인할 수 있습니다. 링모(LINGMO) - 당신의 링크 모음 개성 있는 나만의 링크 모음을 만들어보세요! lingmo.me 직접 구현해보니 생각했던 만큼 어렵지도 않았던 스크롤 애니메이션을 React로 간단하게 구현해본 후 hook으로 분리해 재사용이 용이하도록 개선한 코드를 소개합니다. 📌 라이브러리로 쉽게 구현하기 [React] 리액트 스크롤 애니메이션 라이브러리 개발 스크롤 애니메이션 기능을 쉽고 빠르게 구현하고 싶으신 분들은 위 글을 참고해주세요! 📌 IntersectionObserv.. 2023. 8. 6.

[React] Whitelabel Error Page 에러, 리액트로 간단하게 해결하기 ⚡ 리액트 Whitelabel Error Page 리액트 프로젝트 진행 중 백엔드의 API를 CORS 없이 호출하기 위해 craco의 devServer proxy를 설정해주었습니다. 그렇게 proxy 설정을 마치고 CORS를 해결했으나 이상하게도 라우팅을 통한 페이지 이동은 잘 되지만 새로고침만 하면 다음과 같은 에러가 발생했습니다. 📌 원인 검색해봐도 제대로 된 원인을 알 수 없어 곰곰히 생각해보니 proxy 이후에 문제가 발생한 것을 토대로 라우팅에 원인이 있다고 판단했습니다. 리액트 라우터가 자신에게 들어오는 요청을 토대로 페이지를 이동해야 하지만 root(’/’)에 포함된 모든 url을 백엔드 서버로 proxy 해버리는 바람에 스프링 부트 서버에서 Whitelabel Error Page 에러를 뱉.. 2023. 8. 4.

이전 1 2 3 4 5 6 ··· 21 다음

티스토리툴바