본문 바로가기

분류 전체보기

리액트 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을 추가하는 등의 과정을 효율적으로 수행하며 ..
리액트 기능구현 스터디-4. 카카오, 네이버, 구글 소셜로그인 리팩토링 회고 ☀️
프로젝트 회고 🌊 2023. 7. 14. 리액트 기능구현 스터디-4. 카카오, 네이버, 구글 소셜로그인 리팩토링 회고 ☀️ 1. 주제 소개 1) 완성 조건 STEP 1 : 소셜로그인 규격 로그인 버튼을 넣고 인가코드까지 받아오기. STEP 2 : 백엔드 서버를 통하여 accessToken 받고 로그인 완료. 로그아웃 완료 STEP 3 : 자동로그인 , token 삭제시 라우팅처리 2) 시간 - 07.12 오후 3시~ 오후 9시 (리팩토링: 07.13) 3) 사용기술과 라이브러리 - React, styled-components, react-router-dom v6, axios, react-redux, redux-toolkit 4) 전체 회고 개인프로젝트로 하고 있던 블로그 프로젝트에 기존 로그인 말고도 소셜로그인을 추가했다. 기존로그인은 항해에서 올려준거라 언제 서버 꺼질지 몰라서... 일단 소셜로그인은 백엔드를 가지고 있으니..
리액트 기능구현 스터디- 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를 이용하기 다음 프로젝트 때에도 인피니티 스크롤을 구현하게 될텐데 이때는 이벤트를 핸들링하..
CPU와 메모리 그리고 M1, M2 chip
Computer Programming/CS 2023. 7. 7. CPU와 메모리 그리고 M1, M2 chip 1.컴퓨터의 구조 1) CPU CPU는 컴퓨터의 두뇌로, 메모리에 저장된 명령어를 읽어들이고, 읽어 들인 명령어를 해석해 실행하는 부품이다. CPU를 구성하는 가장 중요한 세 가지는 산술논리연산장치(ALU), 레지스터, 제어장치(CU)이다. -구조 1) ALU : = 계산기. 오직 연산만을 위해 존재하는 부품으로 컴퓨터 내부에서 수행되는 대부분의 계산을 도맡아한다. 2) 레지스터: CPU 내부의 작은 임시 저장장치. 프로그램을 실행하는데 필요한 값들을 임시로 저장한다. CPU 안에는 하나가 아닌 여러개의 레지스터가 존재하고 각각 다른 역할을 한다. 레지스터에는 다음과 같은 종류가 있다. 메모리 주소 레지스터: (MAR) : 읽고 쓰기 위한 주기억장치의 주소 저장 프로그램 카운터 (PC) : 다음에 수행할..
카카오 개발자들의 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..
인증/인가 (세션, 토큰, JWT)
Computer Programming/CS 2023. 7. 5. 인증/인가 (세션, 토큰, JWT) 1. 세션 vs 토큰 1) 세션 id를 이용하는 방식 (세션 기반 인증 시스템) 유저가 로그인할 때 서버는 세션을 생성한 후, 그 세션의 id를 클라이언트에 보내준다. 클라이언트는 이 id를 브라우저에 저장해두었다가 인증이 필요한 데이터를 가져올 때 서버에 id값을 같이 보내면 서버는 그 id를 통해 세션 데이터베이스에서 이 세션이 유효한지 확인하는 방식으로 인증한다. 2) JWT를 이용하는 방식 (토큰 기반 인증 시스템) 유저가 로그인할 때 서버가 인증 정보를 보내주는데 (사진 참고), 암호화나 시그니처 추가가 가능한 데이터 패키지 안에 인증 정보를 담아서 보내준다. (세션보다 정보가 많음) 이 패키지가 JWT(JSON Web Token) 이다. 여기서 담기는 정보 중 accessToken과 refre..
리액트가 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..
CSS display: -webkit-box 란? (투두리스트 리팩토링 2☀️)
Computer Programming/CSS 2023. 7. 5. CSS display: -webkit-box 란? (투두리스트 리팩토링 2☀️) 이번 투두리스트 코드리뷰에서 페어팀이 아이템 안의 텍스트 (title, text)가 길어질수록 길어진 상태 그대로 보여진다는 점을 지적해주셨다. 원하는 기능을 추가하지 못한것도 문제이지만, 그것보다 이미 사용자가 사용하고 있는 만들어진 기능에서 UI/UX 적인 부분에서 문제가 있다는게 더 심각...... 어떤 행동, 어떤 입력이 들어올지 모르니 나중에 프로젝트를 할때도 다양한 피드백을 받는게 좋을 것 같다. 아무튼 그래서 텍스트가 일정 길이 이상 길어지면 ...으로 표시되게 하고, 상세페이지로 들어오게 유도한 다음 상세페이지에서 조금 더 길게 보여주게 구현했다. 물론 상세페이지에서도 3줄 이상 길어지면 ...으로 표시된다. 하지만 충분히 (약 55자 정도) 쓸 수 있다. 만약 이게 조금 좁다는 의견이 있..

티스토리툴바