JiSoo's Devlog

$ npx create-expo-app --template What is your app named? 앱이름 react native는 css가 가지지 않은 속성을 가진다 ex) padding 세로, 가로로 주기 paddingHorizontal: 20, paddingVertical: 20 TouchableOpacity는 누른 요소를 약간 투명해지게 만든다 // 투명도 조절 가능 TouchableHighlight는 요소 클릭하면 배경색이 바뀌게 해 준다 onPress는 유저가 Touchable 눌렀을 때 실행되는 이벤트 onPressOut은 손가락이 영역 벗어날 때 실행 underlayColor로 배경색 지정 TouchableWithoutFeedback은 화면의 가장 위에서 일어나는 탭 이벤트 listen ..

자바스크립트의 데이터 타입 ● 원시 타입 : 객체가 아닌 모든 타입으로 메서드를 갖지 않는다undefined : 선언 후 값 할당 Xnull : 명시적으로 비어있음을 나타내는 값, typeof로 확인 시 object 반환Boolean: 참 거짓, 조건문에서 truthy, falsy 값 존재  falsy → false, NaN, null, undefined, 0, -0, "", '', ``  truthy → if (1){ }Number : 모든 숫자, 진수별로 별도 데이터 타입 제공 XBigInt : number의 한계를 넘은 더 큰 숫자 저장String : 텍스트 타입(작은따옴표, 큰따옴표, 백틱)  → 템플릿 리터럴은 같은 줄 바꿈 가능, 문자열 내부에 표현식 작성 가능  → 문자열이 원시 타입이라 한..

react native는 웹사이트가 아니기 때문에 html X -> div 쓸 수 없다 View는 container ->div 대신 View를 사용하기 때문에 항상 import 해줘야 한다 react native에 있는 모든 text는 text component에 들어가야 한다 Hello! I'm jisoo~~ 스타일 적용 시 웹에서 사용하던 모든 것을 사용할 수는 없다 const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#fff', alignItems: 'center', justifyContent: 'center', }, }); ↑ StyleSheet.create는 object를 생성하는 데 사용 Styles object..

React Native 앱에서 가장 중요한 부분은 bridge들을 통해 코드가 운영체제와 통신을 할 수 있게 하는 인프라 시설 Expo는 작성한 코드의 결과를 앱에서 즉시 확인할 수 있다 -> 인프라 시설 npm install --global expo-cli React Native는 브라우저를 사용하지 않는다 React Native는 인터페이스로 우리와 운영 체제(iOS, 안드로이드) 사이에 있는 것 -> 코드가 iOS 또는 Java 안드로이드 코드로 번역된다 iOS와 안드로이드가 event를 듣고 bridge를 통해 JavaScript에 메시지 전달 JavaScript는 개발자들이 메시지를 주고받기 위해 쓰는 레이어일 뿐 npx create-expo-app 앱이름 npx expo login ** 관리자..

함수의 call signature 타입 만들기 type Add = (a:number, b:number) => number; const add:Add = (a, b) => a + b; a:number, b:number 이렇게 할 필요 X 오버로딩은 함수가 서로 다른 여러 개의 call signatures를 가지고 있을 때 발생시킨다 직접 작성하기보다 외부 라이브러리에 자주 보이는 형태 다른 여러 개의 argument를 가지고 있을 때 발생하는 효과 type Add = { (a:number, b:number) : number (a:number, b:string) : number } const add: Add = (a, b) =>{ if(typeof b === "string") return a return a..

타입스크립트는 자바스크립트 기반으로 만들어진 언어 타입 안정성이 가장 큰 장점 strongly typed(강타입) 프로그래밍 언어 타입스크립트는 작성한 코드가 자바스크립트로 변환된다 타입 시스템 - 명시적 정의(변수 선언 시 타입 정의) -> Type Checker에게 타입을 추론하는 것을 허용 let a : boolean = true let b : number[] = [] b.push(1) - 변수만 생성 let a = "hello" optional const player : { name: string, age?:number } = { name: "jisoo" } player.age가 undefined일 가능성 체크 ↓ if(player.age && player.age < 10) { } : 앞에 ? 붙..

정수 내림차순sort().reverse() map() 메서드는 배열 내의 모든 요소 각각에 대해 주어진 함수를 호출한 결과를 모아 새로운 배열 반환배열의 각 요소에 대해 실행한 callback의 결과를 모든 새로운 배열을 반환const array1 = [1, 4, 9, 16];const map1 = array1.map((x) => x * 2);console.log(map1);// Array [2, 8, 18, 32]arr.map((e) => { if (e != min) { answer.push(e); } }); 배열.sort()파라미터로 a, b 두 개의 요소를 입력받을 경우리턴값 리턴값 > 0 : b가 a보다 앞에 오도록리턴값 = 0 : a와 b의 순서 변경 X 배열.sort((a..

Recoil은 React JS에서 사용할 수 있는 상태관리 라이브러리 npm install recoil Atom은 상태의 일부를 나타내는데 어떤 컴포넌트에서나 읽고 쓸 수 있다 각각의 atom 안에는 우리가 원하는 어떤 value든 저장할 수 있다 어떤 component에서 어떤 value에 접근하려면 component를 직접 atom에 연결하면 된다 전역 상태를 어플리케이션의 분리된 공간에서 관리하는 것이 훨씬 나은 방법 react-hook-form npm install react-hook-form const { register } = useForm(); register 함수를 사용하면 onChange 이벤트, value, useState 모두 필요 없다 register 함수가 반환하는 객체를 가져다가..

몫 구하기 1. parseInt 2. Math.floor 두 자연수의 곱 = 최대공약수 x 최소공배수 최소공배수 = 두 자연수의 곱 / 최대공약수 round()로 소수점 n자리 반올림 // 소수점 첫째자리 re = Math.round(num * 10) / 10; // 소수점 둘째자리 re = Math.round(num * 100) / 100; 문자열을 배열로 자르기 - split() 메소드 문자열의 모든 문자열을 분할하려면 매개변수로 구분자를 전달해 주면 된다 const str = 'Hello'; str.split(); > ['Hello'] const str = 'Hello'; str.split(''); >> ['H', 'e', 'l', 'l', 'o'] 배열의 모든 요소 연결해 하나의 문자열로 만들려면..

React Query는 편리한 방식으로 데이터를 fetch 시킬 수 있다 npm i react-router-dom React RouterDom은 어플리케이션에 URL을 가질 수 있게 해 주고 기본적으로 각기 다른 화면을 갖도록 해준다 / -> All coins /:id -> /btc -> Coin Detail Nested router /btc/information /btc/chart Nested Router(중첩된 라우터)란 한 스크린 내에 또 다른 Router를 가질 수 있는 것 Switch는 한 번에 하나의 Route를 렌더링 할 수 있는 방법 Router에게 우리의 URL이 변숫값을 갖는다는 것을 말해주는 방식 import { useParams } from "react-router-dom"; int..