JiSoo's Devlog

JSXXML과 유사한 내장형 구문으로 자바스크립트 표준의 일부는 아니다반드시 트랜스파일러를 거쳐야 자바스크립트 런타임이 이해할 수 있는 의미 있는 자바스크립트 코드로 변환된다JSX가 주로 사용되는 곳은 리액트 내부에서 반환하는 html과 자바스크립트 코드이지만 한정돼 있는 것은 X ◦ JSXElementJSX를 구성하는 가장 기본 요소로 HTML의 요소와 비슷한 역할JSXElement가 되기 위해 JSXOpeningElement, JSXClosingElement, JSXSelfClosingElement, JSXFragment 중 하나여야 한다JSXElementName은 JSXElement의 요소 이름으로 쓸 수 있는 것을 의미한다// JSXIdentifierfunction Valid1() { retur..

package.json 초기화 npm init -y typescript 설치 npm i -D typescript tsconfig.json 파일 만들기 code tsconfig.json tsconfig.json 파일이 있으면 vs code는 우리가 타입스크립트로 작업한다는 것을 즉시 알게 된다 { "include":[ "src" ] } include 배열에는 자바스크립트로 컴파일하고 싶은 모든 디렉터리 넣기 -> 타입스크립트가 src의 모든 파일을 확인한다는 것을 의미 compilerOptions에서 outDir라는 키를 만들어주는데 이 키는 자바스크립트 파일이 생성될 디렉터리를 저장한다 타입스크립트는 컴파일러니까 index.ts 같은 파일들을 일반적인 자바스크립트로 컴파일시켜준다 { "include": ..

타입스크립트에서는 파라미터들을 써주기만 하면 알아서 constructor 함수를 만들어 준다 필드의 보호 등급, 이름, 타입만 써주면 된다 private 키워드는 오로지 타입스크립트가 우리를 보호해 주기 위해서만 사용한다 abstract class User { constructor ( private firstName:string, private lastName:string, public nickname:string ) {} getFullName() { return `${this.firstName} ${this.lastName}` } } class Player extends User { } const jisoo = new Player("jisoo", "lim", "지수"); ❌ jisoo.firstName..

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

함수의 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) { } : 앞에 ? 붙..

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 함수가 반환하는 객체를 가져다가..

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

리액트에 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..