목록TIL (105)
ksw_devlog
Class에서 Type script 복습 class Car { model :string; price :number; constructor(a :string, b :number){ this.model = a; this.price = b; } tax() :number{ return this.price * 0.1 } } let car1 = new Car('소나타', 3000) console.log(car1.tax()) console.log(car1) -------- class Word { num; str; constructor(...param : any[]){ let nums :number[] = []; let strs :string[] = []; param.forEach((i)=>{ if(typeof i =..
function 내함수(x :number | string){ return x + 1 //에러남 } Operator '+' cannot be applied to types 'string | number' and 'number' string | number 같은 union type 에는 일반적으로 조작을 못하게 막아놔서 그렇습니다. 이런 메세지를 보면 1. 타입을 하나로 Narrowing 해주거나 2. Assert 해주거나 둘 중 하나 해주면 됩니다. Type Narrowing if문 등으로 타입을 하나로 정해주는 것을 뜻합니다. 그래서 아까 함수를 사용할 때 function 내함수(x :number | string){ if (typeof x === 'number') { return x + 1 } else ..
타입스크립트 설치 => npm install -g typescript or 1. npm init -y 2. npm install typescript 3. npx tsc --init ---- tsc -w => ts파일을 js로 실시간으로 갱신시켜줌 let 이름 :string = 'kim' 변수를 만들 때 타입지정이 가능합니다. 변수명 : 타입명 이렇게 씁니다. 타입으로 쓸 수 있는 것들은 string, number, boolean, bigint, null, undefined,[], {} 등이 있습니다. let 이름 :string = 'kim'; 이름 = 123; 타입을 지정해놓으면 타입이 의도치 않게 변경될 경우 에러메세지를 띄워줍니다. 덕분에 타입관련 버그들을 사전에 찾아 없앨 수 있습니다. let 이름..
npm install -g => 컴퓨터 전체에 설치 npx tsc --init => tsc 모듈은 한 번만 쓰고 버림 npx tsc -> ts에서 js형식으로 바꿔줌 TS를 JS로 변환해야하는 이유 -> 브라우저는 TS를 이해 못함 출력 때 : npx tsc, node index.js or : npm install -g ts-node 설치후 ts-node ./index TS type 기본 타입의 종류 String Number Boolean Object Array Tuple Enum Any Void Null Undefined Never -> https://likeable-eggnog-5b5.notion.site/3-9c1cd3359dee4039ab3553e7579d11d7 3. 기본 타입 기본 타입의 종류..
리액트 네이티브 프로젝트를 하면서 보낸 한 주였다. 내가 맡은 부분은 OPEN API에서 useQuery를 이용해 정보를 불러와서 사용하는 것과 리뷰댓글 작성,수정,삭제 부분이었다. 이번 프로젝트에선 제공된 튜터님의 코드를 많이 참고하면서 작업을 하였는데 내가 직접 로직을 짜보면서 기능구현을 제대로 못 한게 아쉬웠었다. 물론 CRUD부분은 firebase를 이용하게 돼서 firebase에서 쓰이는 hook를 쓸 수 밖에 없어서 그랬던 것 같다. 프로젝트를 하면서 js 공부를 더 해야겠다고 느꼈고 다음에는 json을 활용하여 CRUD를 구현해보겠다는 생각이 들었다.
KPT 회고록 keep : 팀원들끼리 서로 소통하면서 제공된 튜터님의 강의와 코드를 참고하면서 프로젝트를 진행할 수 있었습니다. problem : 처음에 yarn을 쓰면서 작업하였는데 알 수 없는 오류들이 많아서 결국 yarn에 대한 파일을 삭제하고 npm으로 진행하였습니다. firebase를 활용하여 CRUD 작업을 하였는데 데이터 불러오는 기능을 구현할 때 useEffect에 의존성배열을 잘못 넣어주면서 데이터가 무한루프가 돼서 firebase 서버 무료 사용량이 초과되는 현상을 겪었습니다. CRUD를 구현할 때 제가 직접 로직을 짜면서 구현하고 싶었지만 마땅한 로직을 짜지 못하였습니다. try : 튜터님 코드를 많이 참고하면서 기능을 구현하였습니다. 코드를 보면서 사용한 함수와 어떻게 활용했는지 이..
usequery를 이용하여 사용하는 api 연결 import styled from '@emotion/native'; import { useQuery, useQueryClient } from 'react-query'; import MusicalCard from '../components/Musicals/MusicalCard'; import Loading from './Loading'; import { useState } from 'react'; import { RefreshControl } from 'react-native'; import { getBoxOfficeWeek } from '../api'; import { filterOnlyMusicals } from '../util'; // 모든 공연 페이지..
리뷰 삭제, 수정 -> ReviewEdit.jsx deleteDoc, updataDoc, useMutation 등 이용하였다. export default function ReviewEdit({ navigation, route: { params: { review, from }, }, }) { const [newratings, setNewratings] = useState(0); const [newContents, setNewContents] = useState(''); const isDark = useColorScheme(); const deleteReview = async (id) => { await deleteDoc(doc(dbService, 'reviews', id)); }; const editRev..