yeeendy

첫 번째 input에 minlength, maxlength, pattern이 안 먹혀서 따로 함수 구현해야함 => 추후 구현 예정 두 번째 useEffect에 async await 적용하기 useEffect(async () => { const data = await fetchUser(userId); setUser(data); }, [userId]); 이런 식으로 하면 부수 효과 때문에 에러가 난다 에러 해결 useEffect(() => { async function fetchAndSetUser() { 1 const data = await fetchUser(userId); setUser(data); } fetchAndSetUser(); 2 },[userId]); useEffect 내에서 async awai..

aws에서 IAM 사용자 등록을 할 때 액세스 키 발급을 받아야 하는데 나는 이런 식으로 나오지 않고 이런 식으로 나와서 액세스 키 발급을 받을 수가 없었다. 찾아본 결과 액세스 키 발급을 받으려면 일단 IAM 사용자 등록 후 사용자 이름을 클릭해보면 오른쪽에 액세스 키 만드는 부분이 있다! .csv파일 다운받아서 사용하면 된다 터미널에 aws configure하고 액세스키, 비밀번호 등록하면 완료 :)

api 세팅 // src/api/todos.js import axios from "axios"; const getTodos = async () => { const response = await axios.get(`${process.env.REACT_APP_SERVER_URL}/todos`); return response.data; }; const addTodo = async (newTodo) => { await axios.post(`${process.env.REACT_APP_SERVER_URL}/todos`, newTodo); }; const removeTodo = async (id) => { await axios.delete(`${process.env.REACT_APP_SERVER_URL}/todos/..

들어가기에 앞서 SPA, MPA에 대해 알아보자. SPA 여기서 SPA란, Single Page Application의 약자로, 하나의 페이지로 구성된 웹 애플리케이션이다. SPA로 개발된 웹사이트에서는 카테고리에 있는 각 메뉴를 선택하면 보통 헤더는 고정되어 있는 상태로 메인화면 혹은 클릭한 부분만 바뀐다. MPA 반면 MPA란, Multi Page Application의 약자로, 탭을 이동할 때마다 서버로부터 새로운 HTML을 새로 받아와서 페이지 전체를 렌더링 하는 전통적인 웹 페이지 구성 방식이다. 일반적으로는 SPA에서는 CSR로 렌더링하고, MPA에서는 SSR로 렌더링 한다. SPA는 웹 애플리케이션에 필요한 정적 리소스를 한꺼번에 모두 다운로드하고, 이후 새로운 페이지 요청이 왔을 때 필요한..

과제를 하면서 내가 평소에 긴가민가 했던 부분을 정리해보고 가면 좋을 것 같아서 3가지를 정리해보려고 한다. input, label 연결은 필수인가? form 태그에 대하여 e.stopPropagation() input 속성들 type="text": 문자 type="number": 숫자 type="password": 비밀번호 type="button": 버튼 type="submit": form 데이터 제출 시 type="reset": form 데이터 초기화 type="radio": 라디오 (단일선택) type="checkbox": 체크박스 (다중선택) type="file": 파일 업로드 시 type="hidden": 화면에 보이지 않는 숨겨진 요소 등등... name 서버로 보내질 이름 label inpu..

왜 리액트 쿼리인가? 기존의 리덕스는 코드량이 많고, 비동기 데이터 관리를 위한 전문 라이브러리가 아님 중요한 3가지 포인트 Query : 데이터에 대한 요청 (R) Mutation : 데이터 변경 (CUD) Query Invalidation : 무효화(최신화) 사용방법 기본 세팅 import React from "react"; import Router from "./shared/Router"; import { QueryClient, QueryClientProvider } from "react-query"; const queryClient = new QueryClient(); const App = () => { return ( // QueryClientProvider : 데이터를 읽어오는 기능(Query..

리덕스 thunk 리덕스 미들웨어 중 하나로 thunk를 사용하면 액션이 리듀서로 전달되기 전에 중간에 어떤 작업을 더할 수 있다. 객체가 아닌 함수를 dispatch! thunk 흐름 dispatch(함수) -> 함수실행 -> 함수 안에서 dispatch(객체) 사용방법 툴킷 API인 createAsyncThunk import해오기 함수 명은 __를 붙여 작성하는 것이 thunk convention이다. 예시 // src/redux/modules/counterSlice.js import { createSlice, createAsyncThunk } from "@reduxjs/toolkit"; export const __addNumber = createAsyncThunk( // 첫번째 인자 : action..

기존의 redux는 ducks패턴에 맞춰 코드를 작성하다보니 전체적인 코드의 양이 늘어 가독성이 떨어지는 등 불편함이 커졌다. 그래서 리덕스 팀에서 코드는 더 적게, 더 편하게 리덕스를 사용하기 위해 리덕스툴킷(RTK)을 만들었다. 사용방식은 기존과 동일하고 액션 세팅, 스토어 등 모듈 파일 부분만 좀 다르다. 리덕스툴킷(RTK) 설치방법 툴킷 사용을 위해 react-redux도 꼭 같이 설치해주어야 한다. yarn add react-redux @reduxjs/toolkit npm install react-redux @reduxjs/toolkit 예시로 보는 redux와 redux-toolkit의 코드 차이 // 일반 리덕스 예시 코드 // Action Value const ADD_NUMBER = "AD..

HTTP(HyperText Transfer Protocol) 들어가기에 앞서 클라이언트 - 서버 간의 통신은 어떻게 하는걸까? 클라이언트와 서버 간의 통신은 요청과 응답으로 구성된다. 요청이 있어야만 응답이 온다 클라이언트와 서버는 HTTP라는 프로토콜을 이용해서 요청과 응답을 주고 받는다. HTTP를 이용해 주고받는 메시지는 "HTTP 메시지"라고 부른다. 프로토콜(Protocol) 프로토콜은 통신 규약, 즉 약속이다. 앞서 웹 애플리케이션 아키텍처에서는 클라이언트와 서버가 서로 HTTP라는 프로토콜을 이용해서 서로 대화를 나눈다고 했는데, 요청을 하기 위해서는 각자의 프로토콜마다 지켜야 하는 약속이 있다. 주요 프로토콜 OSI 7 Layers 해당 프로토콜이 어떤 계층(layer)에 속해있는지를 표시..

프로토타입 객체 자바스크립트의 모든 객체는 자신의 부모 역할을 담당하는 객체와 연결되어 있다. => 부모 객체의 프로퍼티 또는 메소드를 상속받아 사용할 수 있게 한다. 이러한 부모 객체를 Prototype(프로토타입) 객체 또는 줄여서 Prototype(프로토타입)이라 한다. Prototype 객체는 생성자 함수에 의해 생성된 각각의 객체에 공유 프로퍼티를 제공하기 위해 사용한다. 자바스크립트의 모든 객체는 [[Prototype]]이라는 인터널 슬롯을 가진다. [[Prototype]]의 값은 null 또는 객체이며 상속을 구현하는데 사용된다. [[Prototype]] 객체의 데이터 프로퍼티는 get 액세스를 위해 상속되어 자식 객체의 프로퍼티처럼 사용할 수 있다. 하지만 set 액세스는 허용되지 않는다...