typescript

진짜 열받게도... 티스토리 임시저장 오류 때문에 %_% 한 번 다 날리고 다시 쓴다... 진짜 너무너무너무 열받지만..!!!! 그래도 어떻게 해 다시 써야지 ㅠ.,ㅠ 나는 두번째쓰는거지만 읽는 사람은 처음이니까 처음처럼 써야해.... 진정해..... 부글부글 일단 머쓱하게도 바로 전 게시글에 chakra ui 가 좋다며 글을 썼으나, (그래도 앞으로 이전에 했던 것들을 쓰긴 할 것임.. 차크라 좋아여) 새로운 프로젝트에선 SSR 문제로 chakra를 쓰지 못하고 이런저런 이유로 tailwind를 쓰기로 하였다. SSR(Server Side Rendering): 사용자가 웹 페이지에 접속했을 때 서버가 사용자에게 랜더링될 HTML을 응답하여 브라우저가 바로 랜더링할 수 있게한다. 그 후 CSR과 동일하게..

npx create-react-app --template typescript Kakao Developer 등록하기 개발자 어플리케이션 등록하기 : https://developers.kakao.com/console/app 앱 키 얻기 '내 어플리케이션 ' 에 들어가면 키가 쭉 나오는데 거기서 Javascript를 선택한다. 여기 들어있는 키를, index.html 에 넣어주면 된다 public / index.html {}부분에 {}는 제외하고 ~~~ 를 넣어주면 된다! '.env' 로 설정하기 나의 소중한 key를 html에 냅다 박지 않고 따로 빼서 관리하는 방법이다 .env REACT_APP_KAKAO_MAP_KEY=내가 발급받은 KEY index.html 여기를 참고해서 넣어주었다 %REACT_APP..

설치 다크모드는 꼭 프로젝트 시작시에 고려해주기로 하쟈 타입스크립트 + 리액트 앱과 스타일 컴포넌트 설치하기 npx create-react-app my-app --template typescript npm i @types/styled-components 다크테마 만들기 🌒 GlobalStyles.ts import { createGlobalStyle } from "styled-components"; import reset from "styled-reset"; export const GlobalStyle = createGlobalStyle` ${reset} * { margin: 0; padding: 0; box-sizing: border-box; } body, html { font-size: 16px; } ..

만들어 보고 싶은 것을 인터넷에서 발견했는데, 그게 class로 만들어졌다는 것도 보고... 또 타입스크립트를 공부하면서 class 알긴 알지만 너란 녀석 내 동료가 되기엔 아직 많이 친하진 않은 거 같아 오늘 본격적으로 알아가는 사이가 되어보려고 한다. 그리고 타입스크립트를 곁들인... 냠냠 class 기본 문법 class 생성 class를 선언만 해준다면 class 객체를 바로 만들 수 있다. class Champions { } let zoe = new Champions(); 초깃값 설정 Constructor 를 이용해서 만들어 주면 된다. 쉽게 말해 class는 객체 생성기라고 볼 수 있는데, 이게 핵심이당 class Champions { constructor (name, Release) { thi..

function 함수(x :number | string){ return x + 1 } 이렇게 함수를 지정해주면 에러가 난다. 타입스크립트는 여러 개의 타입을 이용할 때 타입을 확정지어주지 않으면 까다로운 타입스크립트는 오류를 내기 때문에, narrowing을 꼭 해주어야 한다. 이럴 때 해결하는 방법이 narrowing이나 assertion을 이용하는 건데, assertion에 대한 내용은 저번 숙제 게시글에 있으니 기본적은 narrowing이나 정리해보도록 하장 If 문 function 함수(x: number | string){ if (typeof x === 'string'){ return x + '1'; } else { return x + 1; } } 제일 직관적이고 쉬운 방법이당 else {} 이거..

숙제 1 클리닝함수( ['1', 2, '3'] ) 이렇게 숫자와 문자가 섞인 array를 입력하면 [1,2,3] 이렇게 숫자로 깔끔하게 변환되어 나오는 클리닝함수를 만들어오고 타입지정 function 클리닝함수(x: (number | string)[]) { let 클리닝배열: number[] = []; if (typeof x === "string") { 클리닝배열.push(parseInt("x")); } else { 클리닝배열.push(x); } } 내가 처음에 만들었던 함수는 이랬다. 근데 클리닝배열 변수를 숫자만 이루어진 배열로 지정해주고, if문을 이용해 클리닝함수의 요소들을 하나씩 push 해주는 것. (push : 배열에 요소 추가 / concat : 배열과 배열 합침 - 아니 이걸 누가 아직도..

설치 🪛 npm install -g typescript npx create-react-app my-app --template typescript npm install --save typescript @types/node @types/react @types/react-dom @types/jest 문법 let 이름 :string = 'kim' 변수를 만들 때 타입지정하기.변수명 : 타입명 이렇게 쓴다 타입으로 쓸 수 있는 것들은 string, number,boolean, bigint, null, undefined,[], {} 등이 있습니다. let 이름 :string = 'kim'; 이름 = 123; 타입을 지정해놓으면 타입이 의도치 않게 변경될 경우 에러메세지를 띄워준다. 야! 이거 숫자야! let 이름 ..