hooney.log

제목 어그로 통했나요? GPT의 작품입니다.  간단하게 next & typescript로 프로젝트 생성 알아보겠습니다.   1. 프로젝트 생성 명령어npx create-next-app@latest --ts next-study  이렇게 하면 최신 버전의 nextjs와 typescript를 이용해서 프로젝트가 생성됩니다.    2. 취향 정하기 위 명령어를 입력하면 몇 가지 질문을 합니다.하나씩 알아보면- Would you like to use ESLint? ... No / YesESLint를 사용할거야? - YES! - Would you like to use Tailwind CSS? ... No / YesTailwind CSS 사용할거야? - YES! - Would you like your code ins..

Expo FCM 푸시알림 구현하기!  설정은 여기서![RN] Expo FCM 푸시알림 구현하기 (1) (tistory.com) { const fcmToken = await messagi" data-og-host="devhooney.tistory.com" data-og-source-url="https://devhooney.tistory.com/315" data-og-url="https://devhooney.tistory.com/315" data-og-image="https://scrap.kakaocdn.net/dn/bMAZ1K/hyWg0oeflY/VmbYNkmYu3YeV5Jo4IJip0/img.jpg?width=500&height=500&face=0_0_500_500,https://scrap.kakaocd..

Expo FCM 푸시알림 구현하기!   1. 라이브러리 설치npm i expo-notificationsnpm i @react-native-firebase/messaging   2. FCM 토큰 받기 /** * FCM 토큰을 받습니다. */ const getFcmToken = async () => { const fcmToken = await messaging().getToken(); console.log('[+] FCM Token :: ', fcmToken); }; /** * FCM 메시지를 앱이 foreground 상태일 경우 메시지를 수신합니다. */ const subscribe = messaging().onMessage(async remoteMessage => { console.log('..

웹뷰와 웹브라우저 간 통신 방법 알아보기!        1. 웹뷰 -> 웹- RNconst webviewRef = useRef(null);// React Native에서 데이터를 웹뷰로 보내는 함수const sendDataToWebView = (data) => { console.log(data); const serializedData = JSON.stringify(data); // 객체를 문자열로 직렬화 webviewRef.current.postMessage(serializedData);};  - Web// 웹뷰에서 React Native로부터 데이터를 받는 함수window.addEventListener("message", (event) => { const receivedData = JSON.pa..

vite로 React 프로젝트를 생성해보면 알아서 잘 해주기 때문에 너무 간단하다.       npm create vite@latestyarn create vite  둘 중에 편한거로 만들면, vanilla, react 등등이 뜨는데 react를 선택. 그리고 typescript, javascript, remix 할 건지 뜨는데 편한거 선택. 보기중에 +swc 라는 것이 있는데,swc는 Speedy Web Compiler로 Rust로 개발되어 속도가 빠르다.babel의 대체재이다. 선택하면,프로젝트 폴더로 이동하여 npm i, npm run dev를 실행하면  이런 화면을 볼 수 있다. 기존에 사용하던 webpack과의 차이는  웹팩(Webpack)과 바이트(Vite)는 모두 현대적인 자바스크립트 프로젝..

eas 명령어 정리 !         eas login: EAS 계정에 로그인eas build: Expo 앱을 빌드하고 APK 또는 IPA 파일을 생성eas build -p android (안드로이드 빌드)eas build -p ios (iOS 빌드)eas submit: 빌드된 APK나 IPA 파일을 앱 스토어에 제출eas submit -p android (안드로이드 앱 제출)eas submit -p ios (iOS 앱 제출)eas update: 앱 스토어에 업데이트된 버전의 앱을 제출eas update -p android (안드로이드 앱 업데이트)eas update -p ios (iOS 앱 업데이트)eas device:create: 새로운 디바이스(iOS 또는 안드로이드)를 등록eas device:li..

1. eas-cli 설치npm install -g eas-cli  2. expo 가입https://expo.dev/signup Sign Up — ExpoCreate an account for Expo here.expo.dev  3. eas 로그인npx eas login  4. eas 빌드npx eas build:configure  5. eas.json 수정- build 부분만 수정함 "build": { "development": { "android": { "buildType": "apk" }, "ios": { "simulator": true } }, "production": {} },  6. android 빌드eas buil..

타입스크립트 기초 1. 옵셔널 체이닝 옵셔널 체이닝을 사용하면 충접된 객체의 속성이 존재하는가에 관한 조건 분기를 간단하게 할 수 있다. interface User { name: string, social?: { facebook: boolean twitter: boolean } } let user: User user = { name: 'aaa', social: { facebook: true, twitter: true } } console.log(user.social?.facebook); // true user = { name: 'aaa' } console.log(user.social?.facebook); // undefined 2. None-Null 어서션 연산자 컴파일 옵션 --strictNullChe..

타입스크립트 기초 1. Enum 타입 Enum을 사용하면 이름이 붙은 상수 Set을 정의할 수있다. JS에는 없는데 유용하다. // 기존에 이렇게 사용 하던 것을 const aaa = { 'bbb': '1', 'ccc' : '2', } // 이렇게 사용 할 수 있다. enum Aaa = { BBB,CCC } const ddd: Aaa = Aaa.BBB; console.log(ddd); // 1 2. 제네릭 타입 제네릭은 클래스와 함수에 대해, 그 안에서 사용하는 타입을 추상화해 외부로부터 구체적인 타입을 지정할 수 있는 기능. // T는 클래스 안에서 사용하는 임시 타입 이름. class Aaa { private bbb: T[] = []; push(item: T) { this.bbb.push(item);..

타입스크립트 기초 1. 타입 추론 타입스크립트에서는 명시적인 변수의 초기화를 수행하면 타입 추론을 통해 자동적으로 타입이 결정된다. const aaa = 10; console.log(age.legnth); // error! aaa는 number타입이므로 length 속성이 없음. 2. 타입 어서션 타입스크립트가 구체적인 타입을 알 수 없는 경우 타입을 정해줄 수 있다. const aaa: any = 'aaa'; const bbb: number = aaa as number; 다른 언어의 타입 캐스트와 비슷하고, 런타임 시 영향이 없으며 컴파일 과정에서만 사용한다. 3. 타입 앨리어스 타입 앨리어스는 타입 지정의 별명을 덧붙이는 기능이다. type 타입명 = 값 type Aaa = string 타입명은 보통..