React

개념 SWR은 vercel에서 제작한 모듈이며, 데이터를 가져올 때 쓰인다. vercel의 SWR 공식문서 "SWR"이라는 이름은 HTTP RFC 5861(opens in a new tab)에 의해 알려진 HTTP 캐시 무효 전략인 stale-while-revalidate에서 유래되었습니다. SWR은 먼저 캐시(스태일)로부터 데이터를 반환한 후, fetch 요청(재검증)을 하고, 최종적으로 최신화된 데이터를 가져오는 전략입니다. SWR을 사용하면 컴포넌트는 지속적이며 자동으로 데이터 업데이트 스트림을 받게 됩니다.그리고 UI는 항상 빠르고 반응적입니다. 장점 단 한 줄의 코드로 프로젝트 내의 데이터 가져오기 로직을 단순화할 수 있다. 빠르고, 가볍고, 재사용 가능한 데이터 가져오기 내장된 캐시 및 요청 ..

: 상태관리 라이브러리redux 등장배경MVC패턴 형식으로 state가 변화되면 Model, View, Controller에 이벤트가 발생하고 값이 변화하는 구조였다. 이를 양방향 데이터 흐름이라고 한다. 이는 복잡하며 데이트 흐름이 한번에 판단하기 힘들다. 이러한 단방향 데이터 흐름이 있다.즉 redux이다. redux는 MVC패턴의 단점을 개선하는 것이 목적이다.리덕스를 사용하면 컴포넌트들의 상태 관련 로직들을 다른 파일들로 분리시켜서 더욱 효율적으로 관리 할 수 있으며, 글로벌 상태 관리를 쉽게 할 수 있다.Redux의 3가지 원칙리덕스 사용을 위해서는 다음의 3가지 원칙을 지켜야 한다.단일 스토어 : 하나의 애플리케이션 내부에는 하나의 스토어를 만들어 사용해야 한다. 여러 개의 스토어를 만들어 사..

reducer : 현재 상태와 액션 객체를 파라미터로 받아와서 새로운 상태를 반환해주는 함수이다. function reducer(state, action) { // 새로운 상태를 만드는 로직 // const nextState = ... return nextState; } reducer 에서 반환하는 상태는 곧 컴포넌트가 지닐 새로운 상태가 되게 된다. action : 업데이트를 위한 정보이다. 주로 type값을 지닌 객체 형태로 사용되기도 한다. useReducer useReducer를 쓸려면 reducer의 구조를 알아야 되서 살펴보았다. useReducer()함수는 첫번째 인자로 넘어오는 reducer 함수를 통해 컴포넌트의 상태(state)가 행동(action)에 따라 어떻게 변해야하는지를 정의한다..

1. 사용 이유 공식문서에 따르면 앱이 커짐에 따라 타입체킹을 통해 많은 버그를 잡을 수 있습니다. 일부 어플리케이션에서 Flow나 TypeScript같이 어플리케이션 전체에서 타입체크를 할 수 있는 자바스크립트 확장을 사용할 수도 있습니다. 하지만 이런 것들을 사용하지 않는다면 React에서 빌트 인 타입 체킹이 가능합니다. 컴포넌트의 props에서 타입을 체크하고싶다면 특별한 propTypes 속성을 할당할 수 있습니다. 위의 같은 이유가 대표적이다. 자바스크립트의 유연한 특성 때문에 작성이 편한 반면, 파일이 많아지면 생산성이 떨어진다는 점 때문에 타입스크립트를 많이 사용한다. 자바스크립트를 이용해 앱을 개발해야 하는 상황에서는 이러한 문제점을 피하기 위해 PropTypes를 활용하는 것을 권장한다..

로그인을 구현하기만 하면 될 줄 알았더니 몇일간 로그인이 유지된다는 말을 듣고 수정해야겠다는 생각이 들어 홈페이지를 봤다. 그런데 나는 매번 로그인하고 로그아웃을 해서 몰랐던 것 같다. 그래서 localstorage에 로그인 정보를 입력하고 그에 대한 값을 삭제하지 않아 계속 로그인이 유지되는 것이었다. 이에 대해 글을 써보려고 한다. LocalStorage 홈페이지를 구성하다보면 cookie나 session등 저장소를 저장하게 된다. 이도 하나의 종류이며 만료시간은 존재하지 않는다. 그러나 Javascript를 사용하여 TTL(Time to Live)을 추가하여 일정 시간이 경과한 후 localStorage의 항목을 무효화할 수 있다. 만료시간 설정 후 저장 function setWithExpiry(k..

navigate도 많이 쓰고 여러가지 쓰는데 부모 컴포넌트에서 자식 컴포넌트에 값 전달하는 방법도 있을 것 같아, 찾아보다가 정리하게 되었다.props의 개념상위 컴포넌트에서 하위 컴포넌트로 값을 전달하는 수단.하위 컴포넌트에서 상위 컴포넌트가 전해준 값에 접근을 할 수 있게 한다.하위 컴포넌트에서 상위 컴포넌트로 값을 전달할 수 없다.props의 사용1. 상위 컴포넌트에서 하위 컴포넌트로 값 전달1) 상위 컴포넌트(부모 컴포넌트)function 함수=()=>{ const [변수, set변수] = useState('')}const 상위페이지이름 =()=>{ }2) 하위 컴포넌트(자식 컴포넌트)전달 받은 값 : {props.value}값이 전달되는 방식상위 컴포넌트에서 넘겨주고자 하는 값을 선언한다. ..

홈페이지는 나혼자 구현해서 시간이 없기에 모바일까지 코드구현하는데 시간이 소요된다. 사이트를 보고자 하는 사용자를 위하여 모바일 페이지에서 데스크톱으로 이동하여 사이트를 이동할 수 있도록 모바일 페이지에서 데스크톱 페이지로 이동하라는 문구를 구현하고자 하였다. 1. react-device-detect 설치 npm i react-device-detect react-device-detect를 설치하여 모바일에 보일 화면을 만든다. 2. 모바일에 보일 화면 준비 import React from "react"; import styled from "styled-components"; const Outer = styled.div` display: flex; justify-content: center; `; cons..

table 태그를 사용하여 디자인을 구성하였다. 게시글에 대한 데이터는 db에 저장하였다. 그리고 게시글을 등록했을 경우 페이지가 이동되면서 게시판에서 내가 쓴 글을 볼 수 있도록 구현하였다. 아래는 내가 꾸민 게시판 글쓰기 페이지이다. 게시판 게시글 생성하기 게시판을 구성할 때 필요한 것은 사진을 참조해서 보면 맨 위에서부터 글 제목, 작성자, 내용, 비밀번호와 비밀글 설정, 개인정보 수집 및 동의 등이 필요했다. 이메일의 경우는 비회원과 회원을 구분하지 않으므로 비회원도 글을 작성할 수 있도록 하였다. 그래서 이는 꼭 필요한 항목이 아니기에 없어도 되고, 작성하지 않아도 alert창이 뜨지 않게 구성하였다. useInput 생성 코드가 너무 길어서 커스텀하여 useInput과 useInputRef를 ..