[project] Art Friendly

초기 설정 https://reactnative.dev/docs/environment-setup?guide=native&os=macos 개발 환경 세팅은 위에 공식 문서를 참고해서 하는 게 가장 좋습니다. 블로그나 다른 사이트를 참고하실 경우 구버전 세팅일 수 있기

react-native로 연결하기 위한 첫걸음은 webView를 도입하는 것입니다.react-naitve 프로젝트 내 App.tsx에서 WebView 컴포넌트를 생성하고 source에 uri를 제공하면 앱에 웹 화면을 띄울 수 있습니다.본격적으로 개발을 시작하기 전에

서비스 UI 구현을 이제 막 시작했습니다. 이전에 프로젝트에선 기한에 맞춰 프로젝트를 정신없이 진행 하느라 디테일한 부분들을 많이 놓쳤던 것 같습니다. 그 중 하나가 서비스가 더 역동적이고 자연스러워지는 애니메이션 기능이었습니다.첫 로딩 페이지의 로고가 뜨기 전에 물결

이번에 구현해본 애니메이션은 슬라이드 넘기기 애니메이션과 자동 슬라이드 입니다.제가 구현하고 있는 서비스에 로그인 시 가장 처음 만나는 화면이기 때문에 단순히 나열해 놓은 포스터와 그 정보들을 애니메이션 없이 넘기면서 보는 것은 사용자 입장에서 재미가 없을 것 같다고

Vercel에서 배포 과정에서 빌드 시 이러한 오류를 만났습니다CSS 최소화(CSS Minimizer) 플러그인이 오류를 발견했다는 내용이었으며 특정 문자에 문제가 있다는 내용이라는 것을 확인하였습니다.하지만 로컬에서 어플은 정상 작동하였고... tailwindCSS를

프로젝트 진행 중 버셀에 배포 중 이런 오류가 떴습니다.원인은 Cannot read file '/tsconfig.json'라는 오류와 같이 루트 디렉토리에서 tsconfig.json을 찾을 수 없다는 것이었습니다.서칭을 해본 결과 eslintrc.json에서 tscon

IntersectionObserver로 애니메이션을 구현하려는 타겟이 화면에 들어오면 애니메이션을 실행합니다.IntersectionObserver가 등장하기 이전에는 scroll event를 사용하여 브라우저나 html 요소의 높이를 측정하여 설정한 높이에 따라 애니메

리액트 네이티브 웹뷰를 사용하여 하이브리드 앱 서비스를 제작하고 있습니다. 처음 리액트 네이티브를 사용하여 웹뷰를 제작하고 있어 사소한 기능 하나도 찾아보면서 구현 중입니다.웹뷰를 구현하는데 있어서 중요한 점은 아마도 'react-native와 웹뷰 사이를 어떻게 부드

웹뷰로 하이브리드 앱을 만들기 위해선 모바일 환경에서 일어난 일들을 웹뷰에 전달하여 저장하거나 처리하는 과정이 필요합니다.리액트에서 전달하고자 하는 정보를 string 형식으로 전달합니다.객체나 배열을 전달할 경우 JSON.stringify로 변환하여 전달합니다.Web

소감 일주일 동안 개고생하면서 저만의 방식으로 웹뷰에서 위치 서비스를 구현했습니다. 제가 서칭 능력이 부족했을 수도 있지만 웹뷰로 위치 서비스를 처음부터 끝까지 구현해 낸 자료를 찾기 어려웠습니다. 리액트 네이티브와 웹뷰 간의 통신, 모바일에서 위치 권한 얻는 법,

어플이 점점 커지고, 다양한 기능을 활용하려면 결국 전역 상태관리는 필요하게 되는 것 같습니다.reducer 값 안에 계속해서 reducer를 추가할 수 있습니다.만들어 놓은 store를 Provider로 App을 감싼 후 속성으로 store를 넣어줍니다.간단하게 전달

토스트의 상태를 boolean 값으로 관리하여 좋아요 버튼을 누를 시 토스트 팝업이 뜨게 합니다.여러 컴포넌트에서 토스트 팝업을 사용하기 위해 리덕스로 상태를 관리하였습니다.active 리듀서로 상태를 변경합니다.dispatch로 좋아요 버튼을 눌렀을 때 토스트 팝업의

사용자 경험을 개선하는 사례가 있으면 작더라도 남기려고 합니다.좋아요 클릭 시 2초 동안 토스트 팝업이 뜨도록 구현하였으나 좋아요 버튼을 짧은 시간에 여러 번 클릭하게 되면 토스트 팝업이 빠르게 사라지는 문제가 발생하였습니다.좋아요 버튼을 눌렀을 때 setTimeout

스와이퍼 라이브러리와 사용할 모듈을 import 합니다.주의할 점은 특정 모듈은 css도 함께 import 해야 정상적으로 작동합니다.슬라이드를 적용할 곳을 Swiper 컴포넌트로 감싸고 각각의 슬라이드를 SwiperSlide 컴포넌트로 감싸면 됩니다.주의할 점은 디자