본문 바로가기
RN2. 앱 만들기 $ expo init myWeather $ npm start 다음과 같은 화면이 뜨면 된 것이다. 그렇 컨트롤 c를 눌러서 종료를 한 후 컴퓨터와 폰에서 Expo에 로그인해주자 $ expo login 컴퓨터로 로그인 한 후 다시 run을 실행해보자 $ npm run $ expo install expo-location https://openweathermap.org/api 2022. 5. 21.
RN1. Expo 설치 1. RN은? 2. RN이 작동 흐름? Native (iOS와 안드로이드)에서 이벤트를 듣고 이벤트에 대한 데이터를 모아서 JSON 타입으로 만든다. Native는 브릿지를 통해서 JSON 타입으로 만들어진 페이로드를 JS로 보낸다 JS는 브릿지로 부터 전달받은 이벤트에 관련된 메세지를 통해 코드를 실행시키고 다시 Native에 메세지를 보내준다. 2.Expo란? 폰 안에 있는 RN 코드를 실행시켜서 모바일에서 RN 코드를 바로 미리보기 할 수 있음 2. Expo 설치 2-1. 엑스포 설치 $ npm install --global expo-cli 2-2. 새로운 프로젝트 생성 $ expo init my-project 2-3. 맥 사용자라면 watchman 또한 설치해야 한다 $ brew update $ .. 2022. 5. 21.
React Navigation5. 네비게이션 생명주기 1. addListenr() function Profile({ navigation }){ React.useEffect(() => { const unsubscribe = navigation.addListener('focus', () => { //스크린이 focus 되었을 때 실행될 코드 }); return unsubscribe; },[navigation]); return ; } 사이드 이펙를 수행하기 위한 방법으로는 이벤트를 수동으로 설정하는 대신 useFocusEffect 훅을 사용할 수 있다. useFocusEffect는 리액트의 useEffect 훅과 같지만 네비게이션 생명주기에 따라 실행된다. 2. useFocusEffect() 훅 import { useFocusEffect } from '@reac.. 2022. 5. 20.
React Navigation4. header bar 설정 목차 헤더 타이틀 설정 타이틀에 params 사용 options 업데이트 헤더 스타일 적용 공통 options 공유 1. 헤더 타이틀 설정 스크린 컴포넌트에서는 객체 또는 객체를 반환하는 함수 인 options 프롭을 사용할 수 있다. 1-1. 객체 반환 시 1-2. 함수 반환 시 { title: route.params.name} } /> options가 함수일 경우, 전달된 인자는 다음의 두가지 속성을 가진 객체이다 navigation: 스크린에 대한 네비게이션 옵션 route: 스크린에 대한 라우터 옵션 2. 타이틀에 params 사용하기 타이틀에 파람스를 사용하기 위해서는 configuration 객체를 반환하는 함수 인 options 프롭을 만들어야 한다. 컴포넌트가 렌더되기 이전에 정의되기 때문.. 2022. 5. 20.
[errorMessage] Operation not permitted expo 로그인 시 다음과 같은 에러 메세지가 확인된다면 시스템 설정 > 보안 설정 > 파일 및 폴더 설정에서 워치맨을 체크해주자 2022. 5. 20.
타입스크립트7. 설치 및 설정 목차 타입스크립트 설치 src 디렉토리 및 index.ts 생성 타입스크립트 컴파일(outDir, target, lib 속성) 패키지의 타입 정의 1. npm init 및 타입 스크립트 설치 npm init -y $ npm install -D typescript 설치 후 package.json 파일을 확인해보면 아래와 같이 devDependencies에 typescript를 확인할 수 있다. 2. src 디렉토리 및 디렉토리 내부에 index.ts 생성 3.타입스크립트 컴파일 $ touch tsconfig.json 커맨드 입력 시 아래와 같은 파일이 생성된다. 가장 먼저 타입스크립트에게 알려줘야 하는 것은 어디에 타입스크립트 파일이 위치하는 지 알려줘야 한다. json 파일이기 때문에 json 객체 안에.. 2022. 5. 17.
타입스크립트6. 객체지향 프로그래밍 목차 클래스(추상 클래스, 추상메서드) interfaces와 type interface와 type의 비교 인터페이스 사용해서 클래스가 특정 모양을 따르도록 하기 1. 클래스 class Player { constructor( private firstName: string, private lastName: string, public nickname: string ){} } const son = new Player('heungmin','son','쏘니'); son.firstName// 에러 발생.속성값 firstName은 private하며 'Player' 클래스 내부에서만 접근 가능함 1-1. 추상클래스란? 다른 클래스가 상속받을 수 있는 클래스 직접 새로운 인스턴스를 생성할 수는 없는 클래스 자바스크립트로 .. 2022. 5. 16.
타입스크립트5. 함수의 call signatures 목차 call signatures 오버로딩(overloading) 다형증(polymorphism) generic 1. call signatures란? 함수 위에 마우스를 올렸을 때 보게 되는 것 함수를 어떻게 호출해야 하는 지와 함수가 반환하는 데이터의 유형도 보여줌 타입스크립트를 사용해서 콜 시그니처를 작성하면 프로그램을 디자인 하면서 데이터의 유형을 미리 생각하고 코드를 구현 할 수 있게 된다. type Add = (a: number, b:number) => number;// 함수를 작성하기 전, 함수의 동작을 미리 작성해두면 const add: Add = (a,b) => a + b//데이터 유형을 지정해주지 않아도, TS가 콜 시그니쳐를 추론함 2. 오버로딩(overloading) 함수가 서로 다른.. 2022. 5. 15.
타입스크립트4. 데이터 타입(2) 목차 tuple undefined, null any TS에만 있는 특이한 데이터 타입(void,unknown,never) 1. tuple이란? array을 생성 최소한의 길이를 가져야 함 특정 위치에 특정 타입이 있어야 함 다음과 같이 배열의 엘리먼트가 순서대로 string, number, boolean 유형인 배열이 있다고 하자. ['son', age, true] 이러한 배열을 타입스크립트로 생성하려면 어떻게 하면 될까? const player: [ string, number, boolean ] = [ 'son', 30, true ] // 위와 같이 코드를 작성한다면 타입스크립트는 다음과 같이 이해한다 // plyaer는 배열이며 // 3개의 엘리먼트를 가진다. // 각각의 엘리먼트의 데이터 유형은 배.. 2022. 5. 15.

티스토리툴바