What is "Redux" ? 🔻 A state management system for cross-component or app-wide state. ✔️ state를 3종류로 크게 나눌 수 있다. 1. Local state : 하나의 컴포넌트에 종속되는 state 2. Cross-Component state : 하나 이상의 컴포넌트에 영향을 미치는 state(prop drilling) 3. App-Wide state : app전체의 기본적인 모든 컴포넌트에 영향을 미치는 state 🤷🏻‍♀️ React Context도 있는데 왜 Redux? context API의 단점 > 대규모의 app작업 시 state관리를 위해 : 수많은 context provider 컴포넌트가 중첩되어 복잡해진다. : prov..

const ImageUpload = ({ title }) => { const [selectedFile, setSelectedFile] = useState([]); const fileInput = useRef(); const fileSelectedHandler = (e) => { const fileName = e.target.files[0].name; window.localStorage.setItem(fileName, fileName); const addImg = () => { let imageArr = [...selectedFile]; imageArr.unshift(fileName); setSelectedFile(imageArr); }; addImg(); }; const addImgBtn = (e) =>..

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

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'] ..