yeeendy

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

잘한 점 면접스터디를 구성해서 각자 선정한 주제를 찾아보고 발표하는 스터디에 참여하였다. 항해에서는 별다른 CS 공부할 일이 없어 개인적으로 공부해야했는데 스터디라는 기회로 공부하게 되니 도움이 많이 되었고 4명이서 진행하는 만큼 다양한 주제로 공부할 수 있어 4배로 공부하는 느낌이 들었다. 개인적으로 지난 부트캠프에서 이해 못했던 개념들이 많았는데 항해에서 몰입하여 공부해보니 어려웠던 개념이 이해가 되었을 때 기분이 너무 좋았다. 지금 기운 그대로 유지해서 다른 개념들도 잘 섭렵하고 싶다. 아쉬운 점 공부시간은 평소와 같이 유지하였으나 몸상태가 좋지 않아 집중력이 떨어져 지난 주보다는 효율이 떨어졌던 것 같다. 레벨 1 과제를 제출하고 추후에 매니저님 피드백 바탕으로 리팩토링까지 진행하였는데, 과제기간..

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

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