![]()
📍 웹 브라우저 동작 HTML, CSS로 → 브라우저 Critical Rendering Path를 통한 렌더링 과정 HTML → DOM, CSS → CSSOM DOM: HTML을 브라우저가 해석하기 편한 방식으로 변환한 객체 트리 CSSOM: CSS Object Model Render Tree 생성: 청사진 Layout: Render Tree 기반으로 요소들 배치 결정 Painting Update DOM이 수정되면 Critical Rendering Path 다시 실행 Reflow(다시 Layout), Repaint 는 성능 낮게하는 주범→ DOM을 수정하는 과정 최소화하기 다만, Layout과 Painting은 매우 비싼 과정 → JS가 DOM을 수정하면서 업데이트가 발생 결론 다양한 업데이트 → 동시에..
개발 React Native Expo JavaScript Donut chart https://dev.to/franciscomendes10866/how-to-create-a-donut-chart-using-react-native-svg-30m9 How to Create a Donut Chart using React Native SVG Overview One of the things we all end up needing to do at some point in our career is... dev.to * animation version. https://www.youtube.com/watch?v=x2LtzCxbWI0 Bottom Sheet @gorhom/bottom-sheet@^4 : 많이 쓰이지만, De..
https://eunguru.tistory.com/122 Mac에서 기본 터미널로 SSH 연결하기 Mac OS X는 UNIX기반의 운영체제로서 OpenSSH SSH Client와 SSH Server를 기본적으로 포함하고 있다.Mac에서 사용할 수 있는 다양한 SSH 클라이언트 프로그램이 있지만, 훌륭한 프로그램은 상용프로그램이 많 eunguru.tistory.com ** Permission denied(publickey) 에러의 경우 아래의 방법 참고 (ppk파일 있을때) https://lab.naminsik.com/4043 lab.naminsik lab.naminsik - 개발자 남인식 Lab. lab.naminsik.com https://jojoldu.tistory.com/540 AWS에서 수동으로 ..
1. axios 라이브러리 설치 yarn add axios axios를 사용해서 GET, PUT, POST, DELETE 등의 메서드로 API 요청 2. 사용 const TestApi = async() =>{ try{ const response = await axios.get( //api 주소 ); console.log(response.data) }catch(e){ console.log(e) } } TestApi() 참고 https://react.vlpt.us/integrate-api/01-basic.html 1. API 연동의 기본 · GitBook 1. API 연동의 기본 API 연동을 하기 위해서, 우선 프로젝트를 새로 만들어주도록 하겠습니다. $ npx create-react-app api-int..
![]()
0. 문제 한 page단위로만 Album assets를 받아옴 (대략 20개) const { assets } = await MediaLibrary.getAssetsAsync(); 1. 해결 MediaLibrary.getAssetAsync()로 반환되는 PagedInfo의 endCursor(마지막 asset id)를 이용 → AssetsOptions를 { after : endCursor }로 하는 MediaLibrary.getAssetAsync( { after : endCursor } ) 실행 → endCursor부터 한 page 단위 assets 가져와서 기존 앨범 사진 뒤에 추가한다. FlatList의 onEndReached를 통해 계속 가져와서 기존것에 추가 반복.. * PagedInfo의 hasNe..
![]()
0. 설치 npx expo install expo-media-library config plugin이 프로젝트에 있는 경우 { "expo": { "plugins": [ [ "expo-media-library", { "photosPermission": "Allow $(PRODUCT_NAME) to access your photos.", "savePhotosPermission": "Allow $(PRODUCT_NAME) to save photos.", "isAccessMediaLocationEnabled": true } ] ] } } 1. 앨범 권한 앨범 접근 권한을 묻고, 접근 권한을 얻으면 앨범 컴포넌트로 이동 const { status: albumStatus } = await MediaLibrary.r..
![]()
0. 설치 npx expo install expo-camera config plugin이 프로젝트에 있는 경우 { "expo": { "plugins": [ [ "expo-camera", { "cameraPermission": "Allow $(PRODUCT_NAME) to access your camera." } ] ] } } 1. 카메라 권한 카메라 접근 권한을 묻고, 접근 권한을 얻으면 카메라 컴포넌트(CameraScreen.js)로 이동 const { status: cameraStatus } = await Camera.requestCameraPermissionsAsync(); // 권한을 획득하면 status가 granted 상태 if (cameraStatus === 'granted') { navig..
![]()
0. 파일구조 * TypeScript인 경우 1,2 과정 생략하고 tsconfig.json만 설정해도 됨! 1. babel-plugin-module-resolver 설치 babel-plugin-module-resolver는 Babel 플러그인으로, 모듈 경로를 재정의하거나 별칭(alias)을 설정하여 절대경로로 import 할 수 있게 한다. Babel : ES2015 이상의 최신 명세의 문법을 구형 브라우저에서도 동작하는 코드로 트랜스파일해주는 개발 도구 : 개발 환경에서만 필요한 패키지 이므로 --save-dev 옵션이나 -dev 옵션을 추가하여 devDependencies에 설치한다. npm 문서: https://www.npmjs.com/package/babel-plugin-module-resolv..
