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..

타입스크립트 기초 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 타입명은 보통..

타입스크립트 기초 1. 변수 변수 선언에는 var, let, const 사용 // var 변수: 타입 = 값 // let 변수 : 타입 = 값 // const 변수 : 타입 = 값 // ex let aaa = aaa; let bbb: string = bbb; const ccc = 1; 2. 원시타입 원시타입(primitive type)인 string, number, boolean은 타입스크립트에 대응하는 타입이 있음. 타입이 한번 정해지면 다른 값 대입이 안됨. let aaa: number = 1; let bbb: boolean = false; let ccc: string = 'ccc'; aaa = 'aaa'; // X bbb = 200; // X 3. 배열 배열도 타입지정하면 지정된 타입만 추가가 가능..

리액트 네이티브 버전 : "react-native": "0.69.2" 드랍다운(Dropdown) 사용하기 라이브러리를 활용하여 드랍다운을 사용해봤다. 웹개발을 할 때는 HTML에서 기본으로 제공하는 건데, 리액트 네이티브는 라이브러리를 설치해서 사용해야했다. npm i react-native-dropdown-picker 명령어로 설치하면 "react-native-dropdown-picker": "^5.4.3" 버전이 설치 된다. - 예시 코드 const [open, setOpen] = useState(false); const [value, setValue] = useState(null); const [items, setItems] = useState([ {label: '보기1', value: '1'}, ..

리액트 네이티브 버전 : "react-native": "0.69.2" 라이브러리를 활용하여 현재 위치의 경도, 위도를 가져와봤다. npm i @react-native-community/geolocation 로 설치하면 "@react-native-community/geolocation": "^3.0.3" 버전이 설치된다. 안드로이드와 iOS 설정을 해줘야 한다. - iOS ios 폴더에서 pod install 후 Info.plist에 NSLocationWhenInUseUsageDescription 을 찾아서 아래 코드를 넣어준다. NSLocationAlwaysAndWhenInUseUsageDescription NSLocationAlwaysUsageDescription - Android andriodMani..

React Native AsyncStorage 사용하기 현재 개발하면서 사용하는데, 자꾸 console로 찍어 보면 이상하게 나와서 사용법을 정리해보려고 한다. 일단 AsyncStorage는 웹에서 사용하는 LocalStorage와 같은 기능을 한다고 생각하면 편하다. 리액트나 리액트 네이티브에서는 상태관리하는 라이브러리들이 있는데, 난 일단 Context를 사용한다. 그리고 로그인 토큰을 보관하기 위해서 AsyncStorage를 사용한다. 상태관리로 하면 앱이 종료되었을 때는 초기화가 되기 때문에 자동 로그인을 위해서 AsyncStorage를 사용한다. 1. 저장 AsyncStorage.setItem('key', value); 자바의 맵 처럼 키, 밸류 방식으로 저장하고 사용한다. 혹시 String 값..

리액트 네이티브로 간단한 앱을 만들면서 겪었던 일을 기록합니다. 리액트 네이티브 버전 : "react-native": "0.69.2" - 화면에서 달력을 그려보려고 한다. - 직접 만들 수도 있지만, 귀찮으니 사람들이 만들어놓은 라이브러리를 쓴다. - 기본 디자인이 심플하고 마음에 들어서 선택했다.(기능은 거기서 거기) npm i react-native-calendars - 라이브러리를 설치한다. - 코드 작성 { setSelectedDate(day.dateString); }} markedDates={markedSelectedDates} /> - 테마는 원하는 색으로 변경하면 된다. - 사실 github을 참고하는게 제일 좋지만... 그게 귀찮으면 이 코드를 복사해서 사용해도 된다. - 참고 https:..

http://devhooney.tistory.com/84 [RN] React Navigation TopTab 추가 리액트 네이티브로 간단한 앱을 만들면서 겪었던 일을 기록합니다. 리액트 네이티브 버전 : "react-native": "0.69.2" - 지난번에 하단 탭을 만들었었다. - 이번에는 상단에 위치하는 탭을 만들어보았다 devhooney.tistory.com 이 포스팅과 이어지는데, tabBarActiveTintColor: 'red'는 선택한 탭일 경우의 글자 색을 변경한다. tabBarInactiveTintColor: 'blue'는 선택 안한 탭일 경우의 글자 색을 변경한다. tabBarPressColor: 'red'는 선택하려고 터치 했을 경우 글자 색을 변경한다. tabBarIndicato..