Frameworks

👉 wait-port란? Node.js 서버를 원하는 타이밍에 실행할 수 있도록 도와주는 JS 라이브러리 기능 1. docker-compose 서버 시작을 기다릴 수 있다. 2. HTTP 엔드포인트의 응답을 기다릴 수 있다. 3. DNS 레코드가 확인될때까지 기다릴 수 있다. 4. 앱 서버가 시작될 때까지 기다릴 수 있다. 👉 설치 npm i wait-port 👉 사용법 터미널 wait-port # -t : 최대 대기시간 지정 # Uri는 http:// 를 포함하고 있어야만 한다. JS 런타임 // 모듈 불러오기 const waitPort = require('wait-port'); const params = { host: 'google.com', port: 443, }; // Promise를 반환한다. ..

process란? Node.js의 현재 프로세스를 관리하기 위해, 기본적으로 제공되는 객체 현재 작업 디렉토리 가져오기 process.cwd()

ip란? 서버의 IP 주소를 알려주는 Node.js 패키지 설치 npm i ip // typescript npm i -D @types/ip 현재 Node.js 실행중인 컴퓨터 v4 ip 반환하기 import {address} from 'ip' function runServer(ip){} runServer(address())

app.json 이란? 엑스포 프로젝트의 설정파일 실제 파일 모습 { "expo": { "name": "bare_project", // slug가 바뀌면, expo가 이를 감지하고 즉시 배포(publish)한다. "slug": "bare_project", "version": "1.0.0", "assetBundlePatterns": ["**/*"], "ios": { // plist 파일설정을 추가하는 부분 "infoPlist": { "NSCameraUsageDescription": "Allow $(PRODUCT_NAME) to use the camera", "NSMicrophoneUsageDescription": "Allow $(PRODUCT_NAME) to use the microphone" } } } }

nvm으로 Node.js 16 lts 설치 nvm install 16 Node.js 16 lts 사용 ( expo 명령어 사용시 ) // 현재 expo는 node.js 17미만의 버전만 지원한다. nvm use 16 expo 프로젝트 생성 expo init ch9_1 // 4번째 bare workflow 선택 Typescript 설정 파일 생성 tsconfig.json Typescript 파일로 변경 App.js >> App.tsx expo start 로, Typescript 필수 라이브러리 내려받기 expo start 설치 패키지 ( template 사용시 ) expo install react-native-gesture-handler react-native-paper faker@5.5.3 moment ..

AndroidManifest.xml 파일이란? 리액트 네이티브가 스마트폰의 기능을 사용하려고 할때, 작성해야 하는 파일 expo에서 자동으로 작성한 파일

NVM 이란? 노드 버전 관리자 ( Node Version Manager ) Node.js의 버전을 관리한다. Node.js 버전 확인하기 node -v 설치가능한 버전 확인하기 nvm ls-remote 원하는 버전 설치하기 // 16.0.0 설치하기 nvm install 16.0.0 설치한 버전 확인하기 nvm ls 버전 바꾸기 ( 터미널 재실행시, 기본 버전으로 초기화됨 ) // v16.0.0으로 변경하기 nvm use 16.0.0

AsyncStorage란? React Native의 키-값 형태의 데이터 영구 저장소 - 문자열만 저장가능 - 앱 전체에 적용됨 - 암호화 되지 않음 - 비동기 방식으로 동작 - 영구 저장 ( 지울때까지 보존 ) - 브라우저의 LocalStorage와 비슷하다. ( 브라우저는 동기식 ) AsyncStorage에 데이터 저장하기 AsyncStorage.setItem(키, 값) .then(() => console.log('저장 성공')) .catch(e => console.log('오류', e.message)) /* AsyncStorage: { 키 : 값 } */ AsyncStorage에서 데이터 가져오기 AsyncStorage.getItem(키) .then(() => console.log('가져옴')) ...

Redux란? 여러 컴포넌트가 공유하는 state를 구현하는 Node.js 패키지 ( 전역 state ) 기본 동작 방식 1. store에 state저장 2. dispatch가 Action 이라는 이벤트 감지하고, reducer에게 Action 내용 전달 3. reducer가 Action에 맞춰 store내부 state변경 4. state 변경감지후, 필요한 화면 재렌더링 설치 npm i @reduxjs/toolkit npm i -D react-redux // typescript 사용시 npm i -D @types/react-redux Redux-Toolkit이란? configureStore() , createSlice() 등의 함수를 사용하여 기존의 Redux 코드를, 간편하고 가독성 좋게 바꿔준다. ..