투명한유리구슬처럼보이지만 투명한유리구슬처럼보이지만

useMemo란? useMemo는 메모이제이션 기법을 이용해 연산의 결과값을 기억했다가 필요할 때 사용함으로써 불필요한 함수 호출을 막아 주는 리액트 훅이다. useMemo를 사용하면 특정 함수를 호출했을 떄 그 함수의 반환값을 기억한다. 그리고 같은 함수를 다시 호출하면 기억해 두었던 값을 반환한다. 따라서 useMemo를 이용하면 함수의 반환값을 다시 구하는 불필요한 연산을 수행하지 않아 성능을 최적화 할 수 있다. 이처럼 함수의 연산 결과를 기억하는 행위를 '메모이제이션 한다'라고 표현한다. const value = useMemo(callback, deps); // 콜백함수, 의존성배열 함수 useMemo를 호출하고 2개의 인수로 콜백 함수와 의존성 배열을 전달한다. 호출된 useMemo는 의존성 ..

Axios는 브라우저와 Node.js에서 사용할 수 있는 Promise 기반의 HTTP 클라이언트 라이브러리이다. Axios를 사용하면 간단한 방법으로 HTTP 요청을 보낼 수 있습니다. GET, POST, PUT, DELETE 등 다양한 HTTP 요청 방식을 지원하며, JSON, URL 인코딩, 멀티파트 등의 다양한 형식의 데이터를 처리할 수 있다. Axios는 또한 요청과 응답에 인터셉터(Interceptor)를 사용할 수 있습니다. 인터셉터는 요청이나 응답을 가로채서 처리할 수 있으며, 예를 들어 요청 시 인증 토큰을 설정하거나 응답 데이터를 처리하는 등의 작업을 수행할 수 있다. Axios는 매우 간단하고 직관적인 API를 제공하기 때문에, 많은 개발자들이 자바스크립트나 리액트와 함께 사용한다. ..

항해 대나무숲 항해99 주특기언어 과제 Lv.4 개발기간 : 3일 프로젝트 소개 주특기언어로 강의를 듣고 CRUD,로그인, 회원가입 구현 주제는 자유여서 항해에 관련된 주제로 정하면 좋을 것 같아서 결정. 항해에 대해 불만이라던가 좋은점을 익명으로 작성해서 부담없이 소통할 수 있다. 사용한 라이브러리 styled components react - router - dom json-server axios react-query 화면구성 주요기능 게시글 입력 기능 로그인 여부 확인 후 게시글 상세페이지 렌더링 게시글 수정, 삭제 로그인, 로그아웃 기능 구현 회원가입 기능 구현 트러블 슈팅 props 조건문 오류가 발생한 경로 header컴포넌트를 이용해서 상단에 header가 어떤 컴포넌트에도 보이도록 공통적으..

State https://ko.legacy.reactjs.org/docs/faq-state.html 컴포넌트 State – React A JavaScript library for building user interfaces ko.legacy.reactjs.org 공식문서에서 state에 대해서 'setState()는 컴포넌트의 state 객체에 대한 업데이트를 실행합니다. state가 변경되면, 컴포넌트는 리렌더링됩니다.' 라고 나온다. 각각의 컴포넌트들은 서로 독립적으로 작동하며, 자신이 관리하는 상태 데이터를 가지고 있따. 이 상태 데이터를 관리하기 위해 리액트에서는 state라는 개념을 제공한다. 우리가 요새 주로 사용하는 함수형 컴포넌트에서는 react16.8버전 이후부터, 'useState'라는..

axios와 fetch 특징 비교 브라우저 호환성 axios는 IE 11과 같은 오래된 브라우저와도 호환됩니다. 그러나 fetch는 IE 11을 지원하지 않습니다. API 디자인 fetch는 내장된 JavaScript API이기 때문에 API 디자인이 상대적으로 직관적입니다. 그러나 Axios는 더 많은 기능을 제공하며 요청 및 응답을 인터셉트하는 기능, 요청 취소 및 설정 변경 등을 쉽게 수행할 수 있습니다. 따라서 Axios는 더 편리하게 작업할 수 있는 API 디자인을 가지고 있다고 볼 수 있습니다. 프로미스 반환 axios는 프로미스를 반환하므로 요청을 연결하고 체이닝할 수 있습니다. fetch는 프로미스를 반환하지만, 체이닝을 위해 추가적인 노력이 필요합니다. 요청 취소 기능 axios는 요청을..

import React from "react"; import styled from "styled-components"; function HeightBox({ height }) { return ; } export default HeightBox; const StyledDiv = styled.div` height: ${(props) => props.height}px; `; 는 특정 높이의 공간을 만들기 위한 스타일드 컴포넌트이다다. 이 공간은 margin 속성으로 만들 수도 있지만, margin은 주변 요소들에도 영향을 미칠 수 있기 때문에 컴포넌트 간에 간격을 일정하게 유지하기 위해 사용한다. 또한, margin을 사용하면 컴포넌트의 구조와 무관하게 일정한 간격을 유지하기 어렵기 때문에, 와 같은 스타일드..

옵셔널 체이닝이란? 객체 내의 key에 접글할 때 그 참조가 유효한지 아닌지 직접 명시 하지 않고도 접근할 수 있는 연산자이다. ?. 앞에 평가대상이 만약 nullish ( undefined 또는 null ) 일 경우 평가를 멈추고 undefined를 반환한다. 삼항연산자의 ?과는 다른 개념이다. 삼항 연산자의 ?는 조건 연산자로서, 조건식이 참이면 첫번째 피연산자를 반환하고, 거짓이면 두번째 피연산자를 반환한다. 반면에, 옵셔널체이닝은 옵셔널 타입의 변수나 프로퍼티에 안전하게 접근하기 위한 방법 중 하나이며, 이를 통해 옵셔널 값이 nil일 경우 코드 실행 중 에러가 발생하는 것을 방지할 수 있다. nil은 말 그대로 '아무 것도 없음'을 의미하는 특별한 값인데 null과 개념은 비슷하지만, 사용되는 ..

설치방법 yarn add redux react-redux 기본세팅 1. src 폴더 아래에 redux폴더를 만든다. 2. redux폴더 아래에 각각 config, modules폴더를 만든다. 3. config폴더 아래에 configStore.js파일을 만든다. import { createStore } from "redux"; import { combineReducers } from "redux"; /* 1. createStore() 리덕스의 가장 핵심이 되는 스토어를 만드는 메소드(함수) 이다. 리덕스를 사용할 시 creatorStore를 호출할 일은 한 번밖에 없다. */ /* 2. combineReducers() 리덕스는 action —> dispatch —> reducer 순으로 동작한다. 이때 애..