profile
Log, To Be Better Me

Redux Toolkit 에서 createAsyncThunk 사용하여 비동기 처리하기

thunk 란? > Thunk 란? 특정 작업을 나중에 할 수 있도록 미루기 위해 함수 형태로 감싼 것 예를 들어 주어진 파라미터에 1을 더하는 작업이 있다면 addOne() 이라는 작업을 1초 뒤에 실행할 수 있도록 addOneThunk 라는 함수로 감쌌는데 이

3일 전
·
0개의 댓글

Redux 에서 비동기 처리하기 (소개)

User 의 정보가 redux store 에서 state 로 관리되고 있을 때, 수정 사항이 발생한 경우 DB 의 정보를 수정함은 물론 redux store 의 state 도 변경되어야 한다. useEffect 내부에서 axios 를 통해 서버에 정보를 전달하고, state 를 업데이트 해야한다면 Component 의 useEffect 내부에서 axio...

2022년 5월 10일
·
0개의 댓글
post-thumbnail

Express + AWS S3 이미지 업로드하기

1. AWS S3 란 > AWS Simple Storage Service(S3) 데이터를 버킷 내의 객체로 저장하는 객체 스토리지 서비스 웹 사이트 및 모바일 애플리케이션 등에서 원하는 양의 데이터를 저장하고 보호할 수 있다. 데이터에 대한 액세스를 최적화, 구조화 및 구성할 수 있는 관리 기능을 제공한다. 버킷 > AWS S3 에 저장된 객체에 대한 ...

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

[React] 이미지 파일 업로드 기능 구현

벨로그의 설정 페이지를 보면, 위 이미지와 같이 썸네일 이미지, 이미지 업로드 버튼 / 이미지 제거 버튼이 있다. 이처럼 클라이언트 앱에서 이미지 업로드 버튼을 클릭해 이미지를 선택하고, 서버를 통해 클라우드 스토리지(오브젝트 스토리지)에 이미지 파일을 업로드해

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

Migrating from Create React App to Next.js

1. Update package.json, dependencies react-scripts , react-router-dom 제거 (react, react-dom 은 유지) next 설치 script 에 next 관련 명령어 추가 next dev : localhost

2022년 3월 2일
·
0개의 댓글

about SSR (feat.Next.js)

0. CSR/SSR 1) 전통적인 Web Framework Browser 에서 Server 로 요청을 보낸다. Server 는 해당 요청을 분석해 이에 맞는 HTML 응답을 내려준다. 2) CSR 페이지 새로고침 최소화, 더 빠른 응답성을 위해 등장 React.js

2022년 2월 26일
·
0개의 댓글

[velog 클론 코딩 개발기 -5 ] 다크 모드 (2)

다크/라이트모드 별 스타일 정의 다크/라이트 모드 별 스타일 정의하기 ThemeVariables 라는 type 으로 lightThemeVariables, darkThemeVariables 2개의 객체를 만들었다. 이 객체를 가공하여 css variable 을 만들고 컴포넌트에서 참조할 수 있는 구조로 만들 것이다. 먼저 css variable 로 만들...

2022년 2월 17일
·
0개의 댓글
post-thumbnail

[velog 클론 코딩 개발기 -4 ] 다크 모드 (1)

TypeScript, React, Emotion.js 환경에서 다크 모드 구현하기

2022년 2월 8일
·
0개의 댓글
post-thumbnail

[React] Emotion.js 로 Theme 설정하기

React.js, Emotion.js, Typescript 환경에서 Theme 설정하기

2022년 1월 20일
·
0개의 댓글
post-thumbnail

[velog 클론 코딩 개발기 -3 ] 트렌딩 포스트 페이지 개발

HomeTab Component 구현 구조 HomeTabLeftAreaBox HomeTabLink 2개, TimeFrameDropdownButton 1개로 구성 HomeTabLink * 설치 * npm i -D react-icon 를 통해 react-icon pa

2022년 1월 11일
·
0개의 댓글
post-thumbnail

[Javascript] 비동기를 이해하기 위한 개념 (1) - Blocking / Non Blocking & Sync/ Async

Blocking / Non Blocking & Sync/ Async

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

[React] React Router Hooks

React Router 는 라우터의 상태에 액세스하고 구성 요소 내부에서 탐색을 수행할 수 있는 Hooks를 제공한다.withRouter HOC 를 사용해야 match, location, history 객체에 접근할 수 있었던 기존 방식을 대체하는 데에 좋은 hooks

2021년 12월 21일
·
0개의 댓글
post-thumbnail

[velog 클론 코딩 개발기 - 3 ] Intersection Observer로 무한 스크롤 기능 구현

Server 에 Parameter 전송하기 client 에서 요청 횟수 (lodePostCount) 라는 변수를 url 경로에 담아 Node.js 기반 Server에서 데이터 15개씩 가져오기 req.params API를 이용해 loadPostCount 라는 파라

2021년 12월 14일
·
0개의 댓글

[TypeScript] 인터페이스

TypeScript Interface 에 대해 알아보자.

2021년 11월 30일
·
0개의 댓글

[React] 무한 스크롤 기능 구현

IntersectionObserver API 를 사용하여 무한 스크롤 기능을 구현해보자!

2021년 11월 22일
·
0개의 댓글
post-thumbnail

[CSS] 미디어 쿼리

반응형 웹을 위한 기술 중 하나인 미디어 쿼리에 대해 알아보자.

2021년 11월 16일
·
0개의 댓글

[TypeScript] 타입스크립트의 여러가지 타입

문자열 리터럴과 숫자 리터럴을 타입으로 정의할 수 있다.enum 키워드를 사용해 정의. 열거형 타입의 각 원소는 값 또는 타입으로 사용 가능 열거형 타입은 객체로 존재하며, 각 원소는 이름과 값이 양방향으로 매핑된다.단, 열거형 타입의 값으로 문자열을 할당하는 경우 단

2021년 11월 16일
·
0개의 댓글

[React] 서버와 통신해보자! (feat.axios)

React 로 구성한 클라이언트 환경에서, 서버와의 통신을 통해 데이터를 받아오기 위해서 fetch 또는 axios 를 사용합니다. 이 글은 각 방법에 대해 알아보고 제 프로젝트에 적용시킨 결과를 정리한 글입니다. 1. axios? fetch? 2) Why axi

2021년 11월 10일
·
0개의 댓글
post-thumbnail

[velog 클론 코딩 개발기 -2 ] 페이지 라우팅

react-router-dom 을 사용하여 SPA 페이지 라우팅 기능 구현해보기.

2021년 11월 1일
·
0개의 댓글