개발 블로그

JSON & 통신 JSON ( JavaScript Object Notation) : 데이터를 주고 받을 수 있는 데이터 형식이다. JSON에서 사용 가능한 타입 : String / Number / Boolean / null / Object / Array 일반적으로 객체와 배열이 JSON 데이터에서 최상위 레벨에 있다. - String을 감쌀 때 "쌍따옴표"만 유효하다. { "name": "Kim" } - Parse & Stringify 파싱과 직렬화 : JSON데이터를 파싱하면 자바스크립트 객체가 되어서 자바스크립트에서 데이터를 사용할 수 있다. parse() : JSON을 파싱하여 자바스크립트 값으로 바꾼다. stringfy() : 자바스크립트 객체를 JSON 문자열로 직렬화 한다.

https://github.com/manonkim/exchange_cal GitHub - manonkim/exchange_cal Contribute to manonkim/exchange_cal development by creating an account on GitHub. github.com Exchange Rate Calculator timestamp 변환 Unix 타임 스탬프는 1970 년 1 월 1 일 00:00:00 UTC 이후 경과 된 시간이며 초 단위로 표시된다. JavaScript Date 객체는 1970 년 1 월 1 일 00:00:00 UTC 이후 경과 된 시간을 밀리 초 단위로 표시합니다. new Date()를 사용하여Date()클래스에서 새 객체를 생성하면 생성 된 시간을 밀리 ..

keyof ✔️ keyof : Object 타입에 사용하면 object 타입이 가지고 있는 모든 key 값을 union type으로 합쳐서 내보내준다. object의 key를 봅아서 새로운 타입을 만들고 싶을 때 사용한다. interface Person { age: number; name: string; } type PersonKeys = keyof Person; //"age" | "name" let a1: PersonKeys = "age"; let b1: PersonKeys = "agee"; //에러 [key : string]를 keyof 하면 stirng | number 타입이된다. object key 값에 숫자를 넣어도 문자로 치환되기 때문에 ( [key : number]는 typeof하면 numb..

declare 외부 js 파일 import 했을 때, 파일이 ts로 작성된게 아니라 js로 작성된 파일이면 에러가 발생한다. 이럴 때 declare 쓰면 이미 정의된 변수나 함수,타입을 재정의하여 '타입에러나 변수없다는 에러' 방지할 수 있다, // data.js let a = 1; let b = {name : 'kim'} //index.ts (data.js파일에서 변수 a를 가져다가 쓰고싶을 때) declare let a : number; 'a 라는 변수를 이 파일에서 잠깐 정의한다" (a라는 변수 어디에 있으니까 그만 징징거려라) js로만 작성된 외부 라이브러리 쓸 때 유용, ts 버전이 없다면 직접 declare로 타입작성하면 된다. ts파일들은 변수만들 타입 까먹어도 자동으로 타입지정이 되어있으니..

React - TypeScript typescript 셋팅이 완료된 react 프로젝트 설치 npx create-react-app 프로젝트명 --template typescript 기존 프로젝트에 typescript만 더하고 싶으면 npm install --save typescript @types/node @types/react @types/react-dom @types/jest 🔻 JSX문법을 지원하는 tsx 확장자 사용 JSX 타입지정 🔻 JSX.Element let 박스 :JSX.Element = let 버튼 :JSX.Element = 좀 더 정확하게 타입을 지정하고 싶으면 같은 기본 태그들은 JSX.IntrinsicElements let 박스 :JSX.IntrinsicElements['div'] ..

웹 브라우저? 🔻 웹 브라우저? : 서버에서 받아온 HTML, CSS, JS를 실행시켜주는 프로그램이다. 브라우저는 자바스크립트를 실행하는 과정이 있다. 브라우저는 C++이라는 언어로 코드가 짜져있는데, 브라우저는 실행해야할 자바스크립트 코드를 발견하면 C++ 언어로 만들어둔 stack에 넣어서 돌린다. stack은 다 집어넣고 맨 윗줄부터 하나하나 실행시키는 공간이다. 하지만, 서버로의 ajax 요청, eventlistener, setTImeout 이런 코드들은 코드를 처리하기까지 시간이 오래걸린다. 그래서 이런코드들은 stack에 쌓아서 실행하지않고, Queue라는 곳에 집어넣고 기다렸다가 stack이 비어있을 때 차례로 Queue에서 stack으로 집어넣어서 실행해준다. 따라서, stack을 바쁘게..

🤷🏻‍♀️ 왜 잔디안심어짐? : 로컬에서 git push할 때 email과 github에 등록된 email이 다르기 때문이다. 🔻 해결 1. 작업중인 곳에서 local에 등록된 email 확인한다. $ git config --list 2. github - setting - email 에서 저장된 email 확인한다. 3. email 다르면 통일시켜준다. $ git config user.email "[github 이메일]" 모든 프로젝트에 대해서 이메일 바꿔주려면 $ git --global config user.email "[github 이메일]"

getter / setter : 데이터의 무결성을 보존하기 위해 쓰는 키워드이다. 데이터를 수정하거나 출력할 때 직접 원본 데이터를 만지는게 아니라 함수로 간접적으로 다룬다. (immutable) //내년나이를 알고싶으면? age를 직접사용하지않고, nextAge라는 함수를 따로 만들어서 let 사람 = { student: true, age: 14, nextAge() { return this.age + 1; }, }; 🤷🏻‍♀️ 왜 굳이 따로 꺼내서 사용함? - object안이 복잡할수록 함수 만들어놓는게 데이터 꺼내기 쉽다. - 내부에 있는 age 변수를 건드리지 않아서 실수방지하므로 좀 더 안전해진다. 🔻 함수로 object 데이터 수정 object안 데이터를 수정하고 싶을 때 object.key =..

Rest parameter rest parameter는 항상 [ ] 안에 담겨오기 때문에 타입지정도 array처럼 해준다. function Plus(...a: number[]) { console.log(a); } Plus(1, 2, 3, 4, 5); Destructuring 1. parameter에 object처럼 타입지정. 2. type 키워드로 따로 만들어서 지정. // Object let person = { student: true, age: 20 }; // 파라미터에 object처럼 타입지정 function 함수({ student, age }: { student: boolean; age: number }) { console.log(student, age); } 함수({ student: true, ..

HTML 변경 🔻 null이 들어오는 경우 체크해주는 옵션 tsconfig.json 파일에서 "strickNullChecks" 옵션을 true로 지정한다. 혹은 그냥 "strict" : true 를 하면 strickNullChecks 자동으로 true로 켜진다. 🔻 selector로 html을 찾으면 못찾을 경우가 null값이 되어서 변수가 union type이다. ( Element | null ) let 제목 = document.querySelector("#title"); 제목.innerHTML = 'hi' //error 해결책 1) narrowing if (제목 != null) { 제목.innerHTML = "hi"; } 해결책2 ) instanceof 사용하는 narrowing if (제목 inst..