밝을희 클태

포트폴리오를 만드는 중인데 외부 라이브러리 없이 만드는 중이라 직접 구현한 이미지 슬라이더를 블로그에 정리를 하려고 한다.구현 방법이미지가 보이는 고정된 영역, 해당 영역 밖으로 넘어가는 요소들은 overflow: hidden을 사용해서 숨김위의 영역 뒤에 이미지들을 삽입버튼을 클릭할 때마다 이미지들의 위치를 옮겨준다. container├── slider-container│ ├── button (left arrow)│ ├── slider-img-container│ │ └── img-inner-container│ │ └── Image│ └── button (right arrow)└── circle-container 사용하는 변수들와 훅 const [imgWidth, setI..

별들을 담을 컨테이너를 우선 만들어줘야 한다 ... ... 그러고 나서 해당 컨테이너에 원하는 만큼 별을 찍고useEffect(() => { const makeStars = () => { const starContainer = starRef.current; if (starContainer) { starContainer.innerHTML = ""; for (let i = 0; i  여기서 만약 브라우저의 크기가 변경될 때마다 새로 별들을 찍으려면useEffect Hook 맨 밑에 아래의 코드를 넣으면 브라우저의 크기가 줄거나 늘어나면 새로 별들의 위치를 계산해서 찍을 수 있다. ..

프로젝트를 마무리하면 이제 배포를 해야 하는데 github를 이용하면 정적 웹 사이트를 무료로 호스팅 할 수 있다. $ npm i gh-pages 깃허브 페이지 배포를 도와주는 라이브러리를 다운로드한다. 그리고 package.json scripts 부분에 deploy 명령어를 추가해 주고, "scripts": { ... ... "deploy": "gh-pages -d build" }, 최상단 부근에 homepage도 추가해준다 github닉네임이 hello, 배포하려는 레포지토리 이름이 world면 "https://hello.github.io/world"로 해주면 된다. "name": "test", "version": "0.1.0", "private": true, "homepage": "https://깃..

ERROR  Error: [Reanimated] Mismatch between JavaScript code version and Reanimated Babel plugin version (3.5.3 vs. 3.4.2).See `https://docs.swmansion.com/react-native-reanimated/docs/guides/troubleshooting#mismatch-between-javascript-code-version-and-reanimated-babel-plugin-version` for more details.Offending code was: `function anonymous(){const{createLayoutAnimationManager}=this._closure;globa..

먼저 s3 bucket을 사용하기 위해선 bucket을 만들고 Access Key를 발급받아야 한다.https://gaebarsaebal.tistory.com/13 [AWS] AWS S3 bucket 정책 설정aws s3 bucket에 이미지 업로드를 하기 위해서 정책 설정 등 변경해야 할 것이 있다 s3 bucket 정책 설정 { "Version": "2012-10-17", "Statement": [ { "Sid": "PublicListGet", "Effect": "Allow", "Principal": "*", "Action": [ "s3:List*gaebarsaebal.tistory.comhttps://gaebarsaebal.tistory.com/14 [AWS] AWS S3 Access Key 발급,..

brew로 설치 시 # 설치했던 버전 다 삭제 $ rbenv uninstall -f $ brew uninstall rbenv $ brew uninstall ruby_build # ruby 삭제 시도 시 Cocoapods는 Ruby 기반으로 동작하는 도구이므로, Ruby가 제거되면 Cocoapods도 작동하지 않을 수 있습니다. 그래서 제대로 삭제할 겸 cocoapods도 삭제 $ brew uninstall cocoapods $ brew uninstall ruby brew로 삭제를 해줘도 관련 설정파일들이나 폴더들이 남아 있다 $ rm -rf ~/.gem $ rm -rf ~/.bundle $ rm -rf ~/.rbenv

https://brew.sh/index_ko Homebrew The Missing Package Manager for macOS (or Linux). brew.sh Homebrew 설치 $ /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)" node 설치 $ brew install node # 체크 $ node -v $ npm -v cocoapods 설치 CocoaPods는 iOS 및 macOS 애플리케이션 개발을 위한 의존성 관리 도구입니다. CocoaPods를 사용하여 외부 라이브러리와 프레임워크를 쉽게 가져올 수 있으며, 프로젝트에서 사용하는 라이브러리의 버전 관리와 의존성 해결을..

IOS # Using npmnpm install --save @react-native-firebase/app# Using Yarnyarn add @react-native-firebase/app우선 firebase 설치해 주고project/ios/Podfiletarget 'project_name' do config = use_native_modules!밑에  코드를 추가해 준다 pod 'GoogleUtilities', :modular_headers => true pod 'FirebaseCore', :modular_headers => true pod 'FirebaseAnalytics' pod 'FirebaseAuth' pod 'FirebaseFirestore'$ pod install 초기화 코드#..

설치$ npm install react-native-picker-select # React Native users$ npm install @react-native-picker/picker$ npx pod-install # Expo$ expo install @react-native-picker/pickerimportimport RNPickerSelect from 'react-native-picker-select';codefunction Category({ onChangeCategory }) { return ( onChangeCategory(value)} items={[ { label: "영화", value: "movie" }, { label: "책", value: "book" ..

react native와 라이브러리들을 업데이트하고 나니GestureDetector must be used as a descendant of GestureHandlerRootView. Otherwise the gestures will not be recognized. See https://docs.swmansion.com/react-native-gesture-이런 오류가 난다GestureDetector는 GestureHandlerRootView의 자식으로 사용되어야 한다해결 방안import { GestureHandlerRootView } from 'react-native-gesture-handler';export default function App() { return ( ... );}..

react-native-reanimated를 설치하고 나니 아래와 같은 에러가 난다Error: Reanimated 2 failed to create a worklet, maybe you forgot to add Reanimated's babel plugin?...babel.config.js을 수정하지 않아서 나는 오류다해결 방안babel.config.jsmodule.exports = { presets: ['module:metro-react-native-babel-preset'], plugins: ['react-native-reanimated/plugin'],};위와 같이 plugins를 수정해 준다

githubhttps://github.com/oblador/react-native-vector-icons설치$ npm install --save react-native-vector-icons라이브러리 연결 아래부터는 쉬운 방법이라는데 나는 해봤는데 안된다.... 아이콘 하나 설치하기 힘들다... 그래도 해보실 분들은 ... UIViewControllerBasedStatusBarAppearance UIAppFonts AntDesign.ttf Entypo.ttf EvilIcons.ttf Feather.ttf FontAwesome.ttf FontAwesome5_Brands.ttf FontAwesome5_Regular.ttf FontAwesome5_So..

0.7.0 이상 버전에서 폰트 적용하는 법구글폰트눈누폰트project root경로에서 assets/fonts/ 에 다운로드한 폰트를 저장하고없으면 만들어야 한다react-native.config.js 파일을 만들어서module.exports = {assets: ["./assets/fonts/"],![]};내용을 적는다 그리고$ npx react-native-asset 잘 됐겠지만 한번 xcode info에서 Fonts provided by application을 확인해서 내가 적용하고 싶은 폰트가 잘 link 됐는지 확인하자

프로젝트를 진행하면서 react native 0.71.8을 사용하고 있었는데0.72.1 버전으로 업그레이드를 했다그런데 코드에 아무 변화가 없는데 버전을 업데이트하고 나서 잘 작동하던 앱이 먹통이 됐다증상useState 변수들의 상태가 변하지 않음코드에 변수나 Text를 수정할 때 실행되는 hot reload에는 앱이 계속 먹통이지만 console.log를 코드의 아무 곳에 나 추가하면 앱이 너무나 잘 작동함 당연히 기존에는 잘 돼서 코드 문제 일 거라곤 전혀 상상도 못 하고 애꿎은 라이브러리들을 탓하면서 삭제하고 새로 깔고 버전 다운그레이드 하고 거의 이틀을 이 짓만 했다끝내 라이브러리들은 문제가 없음을 확인하고 코드를 들여다보기 시작했는데 ...const [isSwitch, setIsSwitch] =..

일단 flatlist의 전체 코드다   View style={{ flex: 1 }}> FlatList style={{ flex: 1 }} data={rememberBooks} keyExtractor={(item) => item.idx} renderItem={({ item }) => Item title={item.title} />} numColumns={numColumns} /> View> data의 예시다 const rememberBooks = [ { idx: 1, title: "Book 1" }, { idx: 2, title: "Book 2" }, { idx: 3, title: "Book 3" }, { idx: 4, title: "Book 4" }, { idx: 5, title: "Book 5" }, ..