JiSoo's Devlog

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

TypeScript는 JavaScript를 기반으로 한 프로그래밍 언어 TypeScript는 strongly-typed인데 프로그래밍 언어가 작동하기 전에 type을 확인한다는 것 코드에 실수가 있어도 프로그램이 작동하기 전에 TypeScript가 알려줄 것이다 => 보호조치 const plus = (a:number, b:number) => a+b; plus(1, 1) // plus("a", 1) 이렇게 하면 오류! TypeScript는 브라우저가 이해하지 못한다 사용자에게 publish 할 때 TypeScript가 compile해서 평범한 JavaScript로 만들어준다 타입스크립트로 리액트 앱 프로젝트 생성 npx create-react-app 내 앱 이름 --template typescript 타입..

dd = {"A+":4.5, "A0":4.0, "B+":3.5, "B0":3.0, "C+":2.5, "C0":2.0, "D+":1.5, "D0":1.0, "F":0.0} t = 0 r = 0 for i in range(20): a, b, c = input().split() b = float(b) if c != 'P': t += b r += b * dd[c] print('%.6f' % (r/t)) r = ['A+', 'A0', 'B+', 'B0', 'C+', 'C0', 'D+', 'D0', 'F'] g = [4.5, 4.0, 3.5, 3.0, 2.5, 2.0, 1.5, 1.0, 0] 리스트나 딕셔너리 둘 다 사용해 풀 수 있다 학점 총합을 답는 t와 학점*과목평점의 총합을 담는 r을 선언하고 0으로 초기화..

리액트에 CSS 적용하는 3가지 방법1. CSS 파일 만들어서 import2. style prop으로 자바스크립트 객체로 스타일 코드 넣어주기 style={{ }}3. CSS 모듈 사용하기 ~~.module.cssCSS 모듈 방식은 className을 랜덤하게 만들어 줘서 이름이 겹칠 걱정 필요 X   styled componentsstyled components는 다크 모드, 라이트 모드같은 걸 엄청 쉬운 방식으로 만들 수 있게 도와준다npm i styled-components 백틱(``) 안에 css 코드 쓰기const Father = styled.div`` styled를 import 하고 HTML 태그 사용하기import styled from "styled-components";const Fathe..