가수면

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;..

async function deletePost(postId) { const response = await fetch(`https://jsonplaceholder.typicode.com/postId/${postId}`, { method: "DELETE" }); return response.json(); } const { data, isLoading, isError } = useQuery(["comments", post.id], () => fetchComments(post.id)); // useMutation const deleteMutation = useMutation((postId) => { deletePost(postId); }); const updateMutation = useMutation(() =..

isFetching 비동기 작업 처리 중 isLoding isFetching 중이고 표시할 데이터도 없는 상태 (리액트 쿼리에선 만든 적이 없다는 의미이기도 함) 단, stale인 상태일 때가 아닌 데이터가 최신 상태일 때(staleTime이 만료되지 않았을 때)는 isFetching 이 표시되지 않음

설치 npm i @tanstack/react-query npm i @tanstack/react-query-devtools QueryClient와 QueryClientProvider 추가 (ReactQueryDevtools은 선택 사항) import { Posts } from "./Posts"; import "./App.css"; import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; import { ReactQueryDevtools } from "@tanstack/react-query-devtools"; // 추가 const queryClient = new QueryClient(); function App() { return (..

대가리 깨지는 줄 알았다... import { useCallback, useEffect, useState } from "react"; import { useDispatch, useSelector } from "react-redux"; import styled from "styled-components" import { __holiday } from "../../redux/modules/loginSlice"; const Calendar = () => { // 사용할 날짜들 상수로 선언 const today = { year: new Date().getFullYear(), month: new Date().getMonth() + 1, date: new Date().getDate(), }; // 리덕스 툴킷으로 ..

npm install react-hook-form 기본 import React from "react"; import { useForm } from "react-hook-form"; import styled from "styled-components"; const Login = () => { const { register,// input창 상태관리 handleSubmit,//form 함수 formState: { errors },// 유효성 파트 } = useForm(); const onSubmit = (data) => console.log(data); // console.log 대신 디스패치 들어가면 됨 return ( 이메일 {errors?.email?.type && ⚠이메일 형식에 맞지 않습니다.} 비..

설치 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파일 닫고 하는 걸 추천 숫자, 문자열, 불리언 문자열과 결합하면..

이번 주차엔 velog를 클론 코딩하는 프로젝트를 진행했었다. 프로젝트 이름은... consolog다. 처음 코딩을 시작하고 남들 다 부트스트랩 쓰며 토이프로젝트를 만들 때 굳이 css만 쓰며 머리 깨졌었던 경험이 굉장히 큰 도움이 되었다. 개인적으론 똑같이 뷰따는 건 어렵지 않았는데, 디테일한 애니메이션을 넣는 작업들엔 어려움이 있었다. 갑자기 추워진 날씨 탓에 팀원들의 컨디션이 안 좋아져 비록 생각했었던 기능과 페이지를 구현하지 못한 부분들은 조금 아쉬웠지만, 만들고보니 제법 그럴싸해 만족스럽다. 이번 주차에 내가 구현한 기능들 메인, 상세페이지 만들기 분기별 헤더 변경 (로그인/비로그인, 메인/상세) 메인 페이지 트렌딩, 최신 GET / 상세페이지 R D / 댓글 CRUD axios 인스턴스화 트러..

useEffect(() => { document.body.style= `overflow: hidden`; return () => document.body.style = `overflow: auto` }, [])

주차에 배운 것들 styled-components 숙달 defaultProps, 컴포넌트 내 선택자 사용, 컴포넌트 속성 재정의, 컴포넌트 재활용, 조건부 컴포넌트 출력, 글로벌 스타일 'react-cookie'를 활용한 로그인, 회원가입 기능 구현 axios 인스턴스, 인터셉트 baseURL 인스턴스로 만들고 env적용 인스턴스와 인터셉트를 활용한 토큰 보내기 트러블 슈팅 - styled-components 사용에 대한 문제 - 버튼과 인풋창, div를 컴포넌트화하는 작업에서 컴포넌트 하나로 전부 돌려쓰겠다는 생각을 하다보니 선택자, 속성 props 등 라이브러리 사용에 대한 어려움을 겪은 문제 해결 과정 및 해결 (1) 평소대로 구글링해봤지만 원하는 결과를 얻지 못함. (2) 찾다가 찾다가 못 찾아서..

컴포넌트화 (필수x) import { Cookies } from "react-cookie" const cookies = new Cookies() export const setCookie = (name: string, value: string, option?: any) => { return cookies.set(name, value, { ...option }) } export const getCookie = (name: string) => { return cookies.get(name) } 컴포넌트화 안 할 경우 쿠키에 저장 컴포넌트화 했을 경우 const jwtToken = await signIn(signInPayload) if (jwtToken) { setCookie('myToken', token, {..

form양식 제출하면 입력된 값을 제출 1. useRef 작성 const AuthForm = () => { const emailInputRef = useRef() const passwordInputRef = useRef() 2. 값을 내보낼 input창에 ref 적용 이메일 비밀번호 3. submitHandler 작성 const submitHandler = (event) => { event.preventDefault() const enteredEmail = emailInputRef.current.value const enteredPassword = passwordInputRef.current.value }

기존 컴포넌트 재활용 타입만 변경 속성 재정의 디폴트 값 객체로 설정할 때 사용법 애니메이션 스타일 컴포넌트에 조건주기

리덕스와 리덕스 툴킷을 배울 때까지만 해도 쉬웠었는데 axios로 서버와 통신하는 순간부터 어느 때보다도 많은 에러를 접할 수 있었던 주차였다.. 생소한 axios와 thunk를 접하며 비동기까지 섞이니까 확실히 지금까지 배운 과정 중에선 제일 어려웠던 듯... 그래도 쓰다보니 익숙해지긴 했지만 axios를 사용하는 다른 방법들이 또 있다고 하니 다음 주차엔 배운 것들을 다지며 채워나가는 시간을 가져야 할 것 같다, 이번 주차에 한 것들 작성한 redux코드들을 redux toolkit으로 전환 () axios와 thunk를 이용한 get, post, delete, patch extra reducers 객체 표기법으로 썼다가 RTK 2.0에서 객체 표기법이 삭제될 것이라는 말에 빌더 콜백 표기법으로 수정..

Styled Components는 createGlobalStyle()라는 함수를 제공하고 있다. 사용법은 아래와 같다. import { createGlobalStyle } from 'styled-components' const GlobalStyle = createGlobalStyle` html { font-size: 100%; } body { background-color: #eee8aa; } ` export default GlobalStyle 작성한 전역 스타일 컴포넌트를 애플리케이션의 최상위 컴포넌트에 추가해주면 하위 모든 컴포넌트에 해당 스타일이 일괄 적용된다. // App.jsx import GlobalStyle from "./GlobalStyle"; import Router from './com..

git clone --mirror (복사할 주소) cd (클론해온 폴더) git remote set-url --push origin (옮길 주소) git push --mirror

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