본문 바로가기

Frontend4

React-Native M1 Mac 세팅 애플 실리콘 맥을 새로 장만하면서 RN을 세팅하는 방법 정리이 글은 node, Homebrew는 설치되었다고 가정하고 작성합니다.RN을 위한 도구, 라이브러리 설치X-code 설치React-Native를 위한 X-code를 애플 앱스토어에서 검색 후 설치하면 됩니다.watchman 설치다음 명령어를 통해서 watchman을 설치합니다.> brew install watchmancocoapod 설치다음 명령을 사용해 iOS 개발을 위한 CocoaPods를 설치합니다.> sudo gem install cocoapods저의 경우 위 명령어를 사용한 뒤 Ruby 버전으로 인한 아래와 같은 에러가 나왔습니다.ERROR: Error installing cocoapods: The last version of d.. 2024. 9. 20.
모바일 터치를 위한 버튼의 범위를 늘리는 CSS 현재 웹의 사용자는 데스크톱으로만 웹을 이용하지 않고 모바일로도 접근하는 경우가 많아지면서, 이제는 반응형 UI로 웹을 제작하는 것이 당연해졌습니다. 기존의 마우스로 클릭하는 버튼의 경우에는 정교하게 클릭할 수 있기 때문에 작은 사이즈의 버튼도 사용자의 경험에서 불편한 점이 없었지만,모바일에서 접근한 경우에는 그 버튼의 크기에 따라 터치하는 정확도가 떨어지면서 사용자의 의도와는 다른 결과가 나올 수 있습니다. 이런 문제를 해결하기 위해서는 클릭이 필요한 텍스트나 버튼의 크기를 키우는 방법이 있지만, 기존 데스크톱과 모바일간의 UI 차이가 커지며 개발에 들어가는 리소스가 더 많아질 수 있고 디자인 적인 문제도 발생할 수 있습니다. 이러한 상황에 기존의 크기를 유지하며, 터치 및 클릭이 가능한 범위를 늘리는.. 2024. 5. 12.
react-native run ios 시뮬레이터 build 에러 react-native로 개발을 하는 도중 yarn start, npx react-native run-ios등을 사용한 명령어를 사용해도ios 시뮬레이터가 열리지 않는 문제가 발생했습니다.> react-native run-ios위 명령어를 통해서 프로젝트를 실행하게되면, ios 시뮬레이터가 자동으로 켜지면서 해당 프로젝트가 시뮬레이터 내부에서 실행되어야하지만,다음과 같은 에러가 나오면서 빌드를 실패했다는 메시지를 띄우고 시뮬레이터에서 실행하지 않는 문제가 발생했습.. 2024. 4. 23.
Next.js 프로젝트에 Jupyter-UI 라이브러리 적용 이 글에서는 React 기반의 프레임워크인 Next.js 프로젝트에 Data-Layer에서 제공하는 jupyter-ui 라이브러리를 적용한 경험을 공유합니다. 특히, 기존에 사용하던 Yarn 1.22.xx 버전에서 3.5.0버전으로 Yarn을 업그레이드하는 과정을 중점적으로 다룹니다. Yarn 버전 업그레이드의 필요성 기존 환경 프로젝트: React 기반의 Next.js 패키지 매니저: Yarn 1.22.xx jupyter-ui 라이브러리를 프로젝트에 통합하며, 기존 Yarn 버전과의 호환성 문제가 발생했습니다. 특히, jupyter-ui라이브러리가 요구하는 특정 의존성 버전을 해결하기 위해 Yarn 버전 업그레이드가 필요했습니다. 기존 next.js 프로젝트에서는 jupyter-ui 라이브러리를 사용하.. 2024. 4. 22.