본문 바로가기

Computer Programming/React

리액트 AWS S3 버킷으로 파일 업로드 구현하기
Computer Programming/React 2023. 7. 19. 리액트 AWS S3 버킷으로 파일 업로드 구현하기 S3를 이용해서 파일을 업로드하는 프로세스이다. 클라이언트에서 S3에 파일을 업로드하고, S3에 저장된 파일을 클라이언트에서 사용할때는 생성된 URL 객체로 접근해서 사용할 수 있다. 우선 리액트 앱을 S3로 빌드한 뒤 생성되는 객체 중 이미지를 저장하는 객체를 하나 만든다. - 참고 자료 https://www.youtube.com/watch?v=-BmF30R_erk 이 자료로 초기 설정한 뒤에 권한 관련된 부분은 S3 배포 설명 사이트를 참고했다. (티스토리 글 쓰다가 캐시 날아가서 트러블슈팅 정리한거 다 날아가버림) ㅠㅠ 우선 aws-sdk 라이브러리를 설치해주고 S3 upload 생성자를 만든 뒤 만든 파일 배열을 보내면 업로드되어 url로 배열에 담긴다. ./utils/awsS3 import AW..
React axios instance 사용법 (API 모듈화)
Computer Programming/React 2023. 7. 18. React axios instance 사용법 (API 모듈화) 1. Axios Instance 생성법 api/axios.js import axios from "axios"; const instance = axios.create({ baseURL: "http://localhost:4000", withCredentials: true, }); export default instance; 이제까지 해왔던 프로젝트 중 가장 스케일이 커서 이번엔 baseURL을 사용해보려고 axios instance를 생성해봤다. base url 뿐만 아니라 타임아웃 설정, 요청 인터셉터 추가, 응답 인터셉터 추가 등의 역할을 수행한다. 그래서 한마디로 api를 모듈화한다고 생각하면 된다. 인증이 필요한 요청이면 요청 인터셉터에서 헤더에 token을 추가하는 등의 과정을 효율적으로 수행하며 ..
리액트 기능구현 스터디- 3. Infinite Scroll 리팩토링 회고 (vs react-virtualized)☀️
Computer Programming/React 2023. 7. 10. 리액트 기능구현 스터디- 3. Infinite Scroll 리팩토링 회고 (vs react-virtualized)☀️ 1. 주제 소개 1) 완성 조건 STEP 1 : 리스트 구현 + 리스트 아래에 목록 추가 STEP 2 : 스크롤이 맨 바닥을 바라보면 로드 STEP 3 : 확대 축소를 해도 문제없이 되는지 2) 시간 - 07.08 토요일 오후 3시~ 오후 8시 3) 사용기술과 라이브러리 - React, styled-components, font awesome icons, react-loader-spinners 4) 폴더 구조 이번에는 간단하게 필요한 부분만 넣었다. 5) 전체 회고 인피니티 스크롤을 구현하는데에는 크게 두가지 방법이 있다. 1) Scroll Event로 핸들링하기 2) Intersection Observer API를 이용하기 다음 프로젝트 때에도 인피니티 스크롤을 구현하게 될텐데 이때는 이벤트를 핸들링하..
카카오 개발자들의 React Query 선택 이유 | react-query 사용법
Computer Programming/React 2023. 7. 6. 카카오 개발자들의 React Query 선택 이유 | react-query 사용법 1. React Query란? 1) 기존 미들웨어의 문제점? 이전까지 API 통신을 리덕스와 사용하기 위해서는 리덕스 툴킷의 Redux-thunk, 또는 Redux-saga라는 라이브러리를 채택해서 사용했다. 하지만 이 두가지는 리덕스의 라이브러리이고, 리덕스는 전역상태관리 전용이기때문에 다수의 API 통신에 사용하기에는 어려움이 있었다. 다수의 컴포넌트에서 동일한 API를 호출하거나, 특정 컴포넌트에서의 API응답이 다른 컴포넌트의 API 응답에 영향을 미치는 경우 등 사용자의 시나리오에 대응하기가 적합하지 않았다. 코드량이 너무 많고 복잡할 뿐더러 리덕스가 비동기 데이터 관리를 전문적으로 해주지 않아 이러한 라이브러리를 사용할 때 규격화가 잘 안되어 있어 오류를 발생시키기도 했다. redux tool..
리액트가 Virtual DOM을 사용하는 이유?
Computer Programming/React 2023. 7. 5. 리액트가 Virtual DOM을 사용하는 이유? 1. DOM 조작의 비효율성과 Virtual DOM의 등장 우선 DOM이란 무엇일까? https://nayoungkim00.tistory.com/47 [Browser] DOM (Document Object Model) https://nayoungkim00.tistory.com/44 브라우저의 구조와 렌더링 엔진의 working process 에 관한 글을 먼저 작성했습니다. 이후 DOM 에 관해 모던 자바스크립트 Deep dive 책을 읽고 정리해보았습니다. 프론트엔드 nayoungkim00.tistory.com DOM은 객체를 문서구조로 표현하는 방식으로, XML이나 HTML로 작성된다. 웹 브라우저는 이 DOM을 활용해 객체에 자바스크립트와 CSS를 적용한다. 추가 ) 브라우저의 렌더링 과정 http..
axios instance와 interceptor | toolkit + thunk로 API 비동기 처리
Computer Programming/React 2023. 7. 3. axios instance와 interceptor | toolkit + thunk로 API 비동기 처리 1. instance 생성 /.axios/api.js 에서 api 가공하기 import axios from "axios"; const instance = axios.create({ baseURL: process.env.REACT_APP_SERVER_URL, }); export default instance; 이후 axios 를 사용하려면 Import 해와서 import api from "./axios/api"; const { data } = await api.get("/todos"); axios => api로 변경해주면 된다. 그리고 baseURL을 지정해놨기 때문에 /todos 까지만 작성해도 된다. 2. interceptor 생성 import axios from "axios"; const instan..
React 기능 구현 스터디 - 2.검색 기능 (리팩토링 회고) ☀️
Computer Programming/React 2023. 7. 3. React 기능 구현 스터디 - 2.검색 기능 (리팩토링 회고) ☀️ 1. 주제 소개 1) 완성 조건 STEP 1 : 검색어를 입력하여 데이터를 가져와서 뿌려주기 STEP 2 : 검색어를 입력하면 자동완성창 혹은 연관검색어 검색창완성 STEP 3 : option 드롭다운으로 옵션선택할수있게하기 2) 시간 - 07.01 토요일 오후 3시~ 오후 9시 (1시간동안 밥 먹음. 그리고 후회함) 3) 사용기술과 라이브러리 - React, react-router-dom, lodash, styled-components, material-ui icons 4) 폴더 구조 5) 전체 회고 이번 코드에서도 Flux 패턴을 적용해 각 컴포넌트와 컨테이너의 기능들을 명확히 하려고 노력했다. 짧은 시간이었어서 아쉽게도 렌더링 최적화와와 env 파일을 활용하지 못해서 아쉬웠지만, 정해진 시간이 지나..
Redux Toolkit 으로 카운터 | 투두 리팩토링 ☀️
Computer Programming/React 2023. 6. 30. Redux Toolkit 으로 카운터 | 투두 리팩토링 ☀️ 리액트에서 리덕스를 편하게 이용할 수 있도록 Redux toolkit 라이브러리를 사용해보자 1. store (configStore.js) 변경하기 import counter from "../modules/counter"; import { configureStore } from "@reduxjs/toolkit"; // const rootReducer = combineReducers({ // counter, // }); // const store = createStore(rootReducer); const store = configureStore({ reducer: { counter: counter, }, }); export default store; combineReducers 와 createStore을..
Storybook 스토리북이란?
Computer Programming/React 2023. 6. 29. Storybook 스토리북이란? 1. Storybook이란? Story북이란 컴포넌트 단위의 UI 개발환경을 지원하는 도구이다. 우리가 잘 알고있는 다양한 조직의 웹페이지에서 컴포넌트가 어떻게 구성되어있는지 확인할 수 있고, 내가 원하는 텍스트나 디자인으로 변경해서 사용할수도 있다. 스토리북을 사용함으로서 개발자들은 컴포넌트를 분리하고 독립적으로 테스트할 수 있으며, 컴포넌트를 쉽게 재사용하고 유지 관리하는데 도움을 준다. 또한 docs 탭에 가면 컴포넌트를 문서화해서 저장할 수 있기 때문에 해당 컴포넌트 자체 혹은 Props에 어떤 기능을 수행하는지 등의 설명을 확인할 수 있다. 2. Storybook 사용하기 1) 프로젝트 생성 - 컴포넌트를 모아 둘 리액트 프로젝트를 생성한다. npm create-react-app react-st..

티스토리툴바