React-persist 적용하여 Redux store 유지하기

이번 프로젝트에서 상태관리는 Redux를 이용했다. 내가 맡은 부분 중 전역 상태관리가 필요한 것은 아래 두 가지였다.모달로그인 유저 정보 저장모달은 모든 페이지에서 사용 가능하도록 modalReducer를 만들고 리덕스 스토어에 저장하여 상태관리를 했다. 문제는 로그

4일 전
·
0개의 댓글
·

OSI 7계층 / 프로토콜 정리

네트워크란 원하는 정보를 원하는 수신자 또는 기기에 정확하게 전송하기 위한 기반 인프라이다. 네트워크 기술이란 서버와 클라이언트의 정보가 오고 가는 다리 역할을 하는 기술의 총칭을 의미한다.국제 표준화 기구인 ISO(International Standardization

2022년 6월 30일
·
0개의 댓글
·
post-thumbnail

[Node.js] AWS S3 로 이미지 업로더 구현하기

프로젝트 개발 초기 naver Book API를 이용해서 일괄적으로 책 정보를 받아와서 DB에 저장했다. 그러다보니 이미지 url을 text로 입력 받는 형태로 기존 상품 수정 페이지를 구현하게 되었는데 관리자가 새로운 책을 등록할 경우 이미지 파일을 업로드 하여 DB

2022년 6월 17일
·
0개의 댓글
·

[React] react router dom-v6 활용하기

<BrowerRouter> 로 감싸서 Router Context를 만들어줘야 react router dom 을 활용할 수 있다. <Route> 안에 path를 지정하고 element에 렌더링할 컴포넌트를 넣으면 된다. <Routes> 는 Route로 생

2022년 6월 17일
·
0개의 댓글
·

[React] 리액트 앱 스타일링하기

CSS importCSS moduleCSS-in-jsCSS 파일을 Import해서 사용하는 방식으로 필요한 모든 CSS 스타일을 하나의 파일에 작성하여, 자바스크립트 파일과 코드 분리가 가능하다.컴포넌트가 많지 않을 경우, 하나의 CSS 파일에 코드를 관리할 수 있음C

2022년 6월 17일
·
0개의 댓글
·

[React] 리액트 Hook에 대한 모든 것

Hook은 기존 함수형 컴포넌트에서도 클래스형 컴포넌트의 기능을 사용할 수 있게 하는 기능이다. 즉, 함수형 컴포넌트에서 React state와 생명주기 기능(lifecycle features)을 연동(hook into) 할 수 있게 해주는 것이 바로 Hook이다.컴포

2022년 6월 10일
·
0개의 댓글
·

[React] 리액트에서의 이벤트 만드는 방법

이벤트란 사용자의 행동에 반응하는 기능을 정의하는 것을 의미한다. 이벤트의 종류는 다음과 같으며, 이 외의 다양한 이벤트가 존재한다.Keyboard EventsFocus EventsMouse EventsTouch EventsUI EventsReact에서 이벤트를 처리할

2022년 6월 10일
·
0개의 댓글
·

[React] 리액트 생명주기

생명주기(Life cycle)는 클래스 컴포넌트에 적용된다. 생명주기란 앱이 실행되고 종료되는 과정을 특정 시점 별로 나눠둔 것을 말한다. 파이썬의 클래스 객체로 예를 들면, 클래스가 생성되면 생성자가 호출되고 소멸되면 소멸자가 호출된다. 간단하지만 이러한 요소의 시작

2022년 6월 10일
·
0개의 댓글
·

[React] 리액트 컴포넌트와 State란?

React에서 페이지를 구성하는 최소단위이다. Component의 이름은 대문자로 시작한다.함수형 컴포넌트와 클래스 컴포넌트로 나누어진다.먼저 함수형 컴포넌트를 선언해주고, ReactDOM.render()를 이용해 렌더링을 해주면 된다. 매개변수로 함수형 컴포넌트를 &

2022년 6월 8일
·
0개의 댓글
·

[React] 리액트로 프로젝트 시작하기

아래 명령어를 터미널에 입력하면 리액트 프로젝트를 시작할 수 있다.npx 명령어는 npm 패키지를 1회성으로 내려 받아 실행할 때 사용하는 명령어이다.최신버전으로 다운로드 받아야 개발과정에서 발생하는 에러가 적다고 한다.단, 리액트 프로젝트의 디렉토리명은 react를

2022년 6월 7일
·
0개의 댓글
·

자바스크립트(JS) 입출력 : readline 모듈 이용하기

모듈을 불러오기 위해서는 require(모듈 이름)를 이용해야 합니다. 불러온 모듈은 readline이라는 변수에 저장합니다.여기서 const는 선언한 변수가 상수임을 나타내며, 해당 변수의 값을 변경하는 것은 불가능합니다.정의한 변수를 이용해 readline inte

2022년 4월 12일
·
0개의 댓글
·

[CSS] 반응형 웹 실습하기

반응형 웹을 구현하기 위한 CSS 속성에 대해 학습함.IE 상위 버전에서 위의 기능들을 지원하게 하려면 prefix 접두사를 작성해야 한다.transition 속성을 한줄로 작성할 때 duration의 순서가 무조건 delay보다 먼저이다.위 의 코드에서 2s가 dur

2022년 4월 7일
·
0개의 댓글
·