분류 전체보기64 0063. 실전 프로젝트 시작 - PapayaV1 환경 설정 하기 이제 어느 정도 눈칫밥으로 개발할 수 있기에 실제 프로젝트를 시작하기로 했다. 레퍼런스를 분석하면서 그대로 앱을 만들어보고, 우리의 차별점을 붙여서 완성해 나갈 생각이다. 프로젝트를 시작하는 데 꽤나 스트레스받는 것이 환경설정인데, 다음의 흐름을 따라오면 크게 어려울 것은 없을 것이다. 1. 프로젝트 새로 생성 npx react-native init MyNewProject 이는 해당 경로에 설치가 필요하다. [cd (경로)]로 이동해서 설치하자. MyNewProject는 내 프로젝트 이름을 쓰면 된다. templat download install dependencies 이거 한방으로 웬만한건 다 설치가 끝난다. 2. package.json 설치 위에서의 react-native init MyNewProje.. 2024. 2. 19. 0062. TypeScript 공부하기11 - 클래스, 암묵적 Any 해결법, 접근제어자, 인터페이스와 클래스 섹션 6. 클래스 2강. 타입스크립트의 클래스 1) 암묵적 any 금지 - noImplicitAny 옵션 설정방법 이렇게 타입을 추론할 수 없을 때, any 타입으로 정의한다. any 형식이 매우 위험한 타입이기 때문에 오류를 발생시키는 것이다. 이때, tsconfig.json 파일에서 "noImplicitAny" 옵션을 false로 설정하면 에러가 사라진다. 암시적 any를 허용하지 않을 것이냐? → false 이기 때문에 허용하라는 뜻이다. 하지만, 이 옵션을 설정하면 암시적 any를 봐주기 때문에 타입스크립트를 사용하는 의미가 줄어든다. 그래서 원래 설정값이 꺼져 있으니 그대로 두거라, 옵션을 true로 설정하거나, 주석처리해서 없애는 게 좋고, 상황에 따라서 예외적으로 쓰는 것을 권장한다. 2) .. 2024. 2. 11. 0061. TypeScript 공부하기10 - JavaScript 클래스, 생성자, 인스턴스, 메서드, 프로퍼티, 상속 섹션 6. 클래스 1강. 자바스크립트의 클래스 소개 1) allow.Js : ts 환경에서 js 파일 사용하도록 설정하기 src폴더에 .js파일을 만들면 tscongfig에 오류가 난다. "include" 옵션을 "src"로 설정했기 때문에 src 디렉토리 내의 모든 타입스크립트 파일을 타입스크립트 컴파일러가 관제하고 있다. 모니터링 중 ts 파일이 아닌 js 파일이 생겼기 때문에 오류가 나는 것이다. 그래서 여기에 "allowJs": true를 추가한다. 그러면 오류가 사라진 것을 확인할 수 있다. 2) class let studentA = { name: "초보", grade: "A+", level: 5, study() { console.log("열심히 코딩함"); }, introduce() { con.. 2024. 2. 11. 0060. TypeScript 공부하기9 - 인터페이스, 표기법, 확장, 선언 합치기, 모듈 보강 섹션 5. 인터페이스 1강. 인터페이스 1) 인터페이스란? 인터페이스 : 상호 간에 약속된 규칙 타입에 이름을 지어주는 또 다른 문법 + 객체의 구조를 정의하는데 특화된 문법 (타입 별칭에서는 제공하지 않는 상속, 합침 등의 객체 타입을 다루는 여러 특수한 기능을 제공함) 인터페이스를 잘 알면 객체 타입 정의를 할 때 다양한 방법을 활용할 수 있다. interface Person { //객체 타입 정의 readonly name: string; //읽기전용으로 설정 가능 codingLevel?: number; //선택적 프로퍼티로 설정 가능 sayHi: () => void; //type 표현방식 sayHi2 () : void; //호출시그니처, 매서드의 이름이 소괄호 앞에 붙는다. } type Func =.. 2024. 2. 11. 0059. TypeScript 공부하기8 - 함수 오버로딩, 사용자 정의 타입 가드(Custom Type Guard) 섹션 4. 함수와 타입 4강. 함수 오버로딩 함수를 매개변수의 개수나 타입에 따라서 여러 가지 버전으로 정의하는 방법을 말한다. 자바스크립트에서는 지원이 안되고, 타입스크립트에서 지원이 된다. 함수의 여러 버전들을 만들어준다. 이 버전들을 오버로드 시그니처라고 하는데, 함수의 구현부 없이 선언식만 써 놓은 것이다. - 오버로딩을 위해 매개변수별로 각각 함수의 버전을 써 놓은 것으로 이해하면 된다. function func(a: number): void; function func(a: number, b: number, c: number): void; 어떤 함수가 오버로드 시그니처를 갖고 있으면 이 함수를 호출할 때, 인수들의 타입이 구현부에 정의된 매개변수의 개수나 타입을 따르지 않고 오버로드 시그니처들의.. 2024. 2. 10. 0058. TypeScript 공부하기7 - 함수와 타입, 함수 타입 표현과 호출 시그니처, 호환성(반환값, 매개변수) 섹션 4. 함수와 타입 1강. 함수 타입 1) TypeScript 초기 패키지 설치 패키지 기본값으로 알아서 설치 npm init -y 내장 기능들에 대한 타입 선언 추가 npm install @types/node 컴파일 파일 만들기(tsconfig.json) package.json 에서 type 추가 tsconfig에서 module을 ESNext로 설정했기 때문에 필요 node가 ES module 시스템을 사용하도록 설정하는 것 scr 폴더와 index.ts 파일 만들어서 간단히 코드 써주고 tsc 컴파일하면 dist 폴더에 index.js가 생긴다. node dist/index.js ts-node src/index.ts 실행해 보면 정상적으로 로그가 출력되는 것을 볼 수 있다. 2) 함수 타입 정의 .. 2024. 2. 10. 0057. Client에서 Postman과 연결된 로그인 확인하기(Feat. API) 1. react-native-config 설치 및 환경설정 앞에서 설치했다면 건너뛰어도 된다. https://coder-chobo.tistory.com/57 0056. Client에서 Postman으로 API 회원가입(POST) 요청 보내기(.env 활용) 1. react-native-config 설치 전역(global) 설치 npm i -g react-native-config 로컬 설치 npm i react-native-config 2. build.gradle 설정 루트 디렉토리\android\app/build.gradle의 파일을 선택한다. 비슷한 위치에 하나 더 있으니 coder-chobo.tistory.com 2. SignIn Code 입력 try { setLoading(true); console.. 2024. 2. 8. 0056. Client에서 Postman으로 API 회원가입(POST) 요청 보내기(.env 활용) 1. react-native-config 설치 전역(global) 설치 npm i -g react-native-config 로컬 설치 npm i react-native-config 2. build.gradle 설정 루트 디렉토리\android\app/build.gradle의 파일을 선택한다. 비슷한 위치에 하나 더 있으니 헷갈리지 않도록 한다. 정확한 위치에는 코드가 많을 것이다. android 폴더 안의 build.gradle 파일 안의 코드는 그렇게 많지 않다. 정확한 위치에 다음의 코드를 추가한다. apply from: project(':react-native-config').projectDir.getPath() + "/dotenv.gradle" 3. Postman 회원가입(POST) IP주소 확인.. 2024. 2. 8. 0055. 실전 FE 개발 배우기12 - 웹소켓 연결하기, 실시간 데이터 받기, 로그아웃(Bearer 토큰) 섹션 2. 서버 API 연동하기 8강. 웹소켓 연결하기 1) 웹소켓 기반 라이브러리 요청-응답 방식이 아니라 실시간 양방향 통신 가능 기존 : app → axios → 응답 소켓 : 한 번만 연결을 맺으면 연결이 끊어지기 전까지 실시간으로 가능. 서버에서 먼저 보내줄 수도 있다. 대신, 배터리 소모가 있다. npm i socket.io-client 웹소켓 라이브러리 설치 2) Custom hooks 자주 쓰는 것은 hook으로 만든다. Custom hook에 익숙해져야 한다. import { io, Socket } from 'socket.io-client'; import Config from 'react-native-config'; let socket: Socket | undefined; const us.. 2024. 2. 7. 0054. 실전 FE 개발 배우기11 - accessToken과 refreshToken, EncryptedStorage와 AsyncStorage 사용하기 섹션 2. 서버 API와 연동하기 7강. accessToken과 refreshToken 로그인을 하고 나면 서버개발자가 프론트 개발자에게 name, email, accessToken, refreshToken 등을 줄 것이다. dispatch( userSlice.actions.setUser({ name: response.data.data.name, email: response.data.data.email, accessToken: response.data.data.accessToken, refreshToken: response.data.data.refreshToken, }), ); 위의 규격대로 data를 받기로 한 약속인 것이다. 통신할 때 token을 넣어 줘야 서버가 내가 누군지를 알 수 있다. App.. 2024. 2. 6. 이전 1 2 3 4 ··· 7 다음
