chez Manon

localStorage 웹페이지를 새로고침하면 모든 state는 리셋된다. state 데이터를 DB로 저장하면 되는데, 좀 더 간단한 방법으로 localStorage가 있다. 사이트마다 5MB정도의 텍스트, 숫자 데이터를 저장할 수 있다. local Storage / Session Storage 개발자 도구에서 Application - Storage local Storage : 유저가 브라우저 청소를 하지않는 이상 영구적으로 남아있다. Session Storage : 브라우저를 끄면 날라간다. localStorage 조작 localStorage.setItem('key', 'value'); //추가 localStorage.getItem('key'); //읽기 localStorage.removeItem('k..

How does react work? React : A JavsScript library for building user interfaces. React는 component로 UI를 효율적으로 구축하고 업데이트한다. React는 component와 state를 관리하는 라이브러리일뿐이다! 컴포넌트들을 관리하고, 컴포넌트의 props, state, context가 변할 때 마다 그것을 쓰는 component를 update하고 컴포넌트가 화면에 새로운 내용을 띄우려는지 확인한다. 새로운 내용이 있으면 react가 reactDOM으로 전달해서 DOM이 새로운 화면, 즉 새로운 component를 화면에 띄운다. ( DOM : html을 계층구조화하여 트리구조로 만든 객체 모델이다. DOM을 활용하여 Java..

🔻 Prettier 옵션 커스텀 1. .prettierrc 파일 생성 - 옵션 커스텀 설정가능한 전체 옵션 { "arrowParens": "avoid", // 화살표 함수 괄호 사용 방식 "bracketSpacing": false, // 객체 리터럴에서 괄호에 공백 삽입 여부 "endOfLine": "auto", // EoF 방식, OS별로 처리 방식이 다름 "htmlWhitespaceSensitivity": "css", // HTML 공백 감도 설정 "jsxBracketSameLine": false, // JSX의 마지막 `>`를 다음 줄로 내릴지 여부 "jsxSingleQuote": false, // JSX에 singe 쿼테이션 사용 여부 "printWidth": 80, // 줄 바꿈 할 폭 길이 "..

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()클래스에서 새 객체를 생성하면 생성 된 시간을 밀리 ..

Carousel 캐러셀 슬라이더는 일반적으로 이미지를 옆으로 넘기며 정보를 확인할 수 있는 방식이며, 많은 웹페이지에서 더 나은 사용자 경험을 위하여 자주 사용된다. 라이브러리를 사용하면 보다 쉽게 구현이 가능하지만 vanilla JavaScript로도 충분히 가능하다. 이번에는 React hooks의 useState, useEffect, useRef와 styled components로 무한반복 슬라이드를 구현해보려고 한다. setting npx create-react-app react-carousel npm install --save styled-components Slide component Carousel component의 요소가 되는 slider component를 만든다. import Rea..

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을 바쁘게..