가수면

1. 콘솔창의 결과 전역 변수로 저장 2. Object.keys(temp1).join() 입력 후 복사 3. vscode에 붙여넣기 후 쉼표 선택 후 'Ctrl(Command)+D: 같은 문자열 선택' 4. Object.values(temp1).map(v => typeof v).join() 5. 3번 과정으로 정제 후 'Shift+Alt(Option)+i: 선택한 모든 문자열에 가장 우측 끝으로 포커싱'을 이용해 붙여넣기 JSON데이터를 타입스크립트 타입으로 빠르게 변환시켜주는 사이트 https://app.quicktype.io/?l=ts http://json2ts.com/ Instantly parse JSON in any language | quicktype app.quicktype.io

리액트 스타일드 컴포넌트를 활용한 예시) const GlobalStyle = createGlobalStyle` html { font-size: 62.5%; } body { font-size: 1.6rem; } `; rem은 최상위 요소(html 태그)에 지정된 font-size의 값을 기준으로 한다. html의 기본 font-size는 16px이다. 즉, 아무런 설정을 하지 않았을 때 1rem = 16px이라는 공식이 성립된다. 따라서 1rem을 10px로 맞추기 위해선 html의 기본 크기를 10px로 만들면 된다. 그러나 html의 font-size를 10px로 줄여버리게 되면 치명적인 문제가 생긴다. 바로 1rem이 10px이 됐을지 언정 16px이 기본값이었던 각 태그들의 font-size도 10..

숫자, 넘버 둘 다 사용하고 싶을 때 const [counter, setCounter] = useState(1); setCounter("안녕"); 로그인 로직에 적용 버튼이 form 밖에 있을 경우 MouseEvent import React, { useState } from "react"; const App = () => { const [value, setValue] = useState(""); const onChange = (event: React.FormEvent) => { const { value } = event.currentTarget; setValue(value); }; const onSubmit = (event: React.FormEvent) => { event.preventDefault()..

interface 객체의 모양을 확인해줌 예시 1) import Circle from "./Circle"; const App = () => { return ( ); }; export default App; import React from "react"; import styled from "styled-components"; interface ContainerProps { bgColor: string; } const Circle = ({ bgColor }: ContainerProps) => { return Circle; }; export default Circle; // const Container = styled.div도 가능 const Container = styled.div` width: 200px;..

설치 npx create-react-app 내 앱 이름 --template typescript npm i --save-dev @types/라이브러리 이름 기존 앱에 설치 npm install --save typescript @types/node @types/react @types/react-dom @types/jest npx tsc --init index파일에 as HTMLElement 추가 const root = ReactDOM.createRoot(document.getElementById("root") as HTMLElement); tsconfig.json파일에 "jsx": "react-jsx" 추가 tsc app.ts ※ 열려있는 js파일 닫고 하는 걸 추천 숫자, 문자열, 불리언 문자열과 결합하면..

만일 비동기 작업이 시행되기 전에 초기값이 비어 에러가 나는 상황이라면 다음과 같은 방법들을 사용할 수 있다. (초기값이 없어서 오류가 일어나는 상황 등을 방지.) 1. 초기값을 설정해준다. const initialState = [{ title: "", id: 0 }] 2. null 병합 연산자 사용 const {title, id} = data ?? { title: "", id: 0} 왼쪽 피연산자가 null 또는 undefined일 때 오른쪽 피연산자를 반환하고, 그렇지 않으면 왼쪽 피연산자를 반환하는 논리 연산자이다. 3. 옵셔널 체이닝 사용

json server 설치 yarn add json-server json server 실행 yarn json-server --watch db.json --port 3001 Axios 설치 yarn add axios 형태 Promise를 기반으로 한 비동기 처리 (async await 이용) // src/App.js import React, { useEffect, useState } from "react"; import axios from "axios"; // axios import 합니다. const App = () => { const [todos, setTodos] = useState(null); // axios를 통해서 get 요청을 하는 함수를 생성합니다. // 비동기처리를 해야하므로 async/a..

데이터를 불러오는데 문제가 있다면 다음 사항들을 체크해보자.

스크립트 순서 맨 위에 위치시킬 경우 'defer' 속성을 붙여 주고, 외에는 맨 뒤에 붙여줘야 한다.

만들어둔 페이지를 내리다가 보니 맨 위로 가기 기능이 없다는 것을 깨달았다. 위로 가기 기능 만드는 순서는 다음과 같다. 1. html에 구역 만들기 img는 css에 background-image로 빼도 좋다. 2. css로 꾸미기 .toTop { width: 40px; height: 40px; position: fixed; right: 30px; bottom: 30px; display: none; } .toTop > img { width: 40px; } 3. Jquery로 스크립트 짜기 $(document).ready(function () { # 화면을 아래로 스크롤했는지 여부를 확인 $(window).scroll(function () { if ($(this).scrollTop() > 100) { $..