neda의 블로그

230717 Algolia를 사용하여 firebase firestore에서 텍스트 검색 algolia 확장을 사용하여 firestore의 데이터를 검색하는 방법 algolia를 통한 텍스트 검색을 위한 순서 Algolia 회원 가입 Algolia에서 Index 생성 Algolia 확장 프로그램 설치 firebase 요금제를 Blaze 요금제로 변경 Algolia 세팅 및 확장 설치 algoliasearch를 사용하여 데이터 검색 Algolia 가입 및 인덱스 생성 -> 아래 주소에서 가입 후 대시보드에서 새로운 인덱스를 생성 Site Search & Discovery powered by AI Create AI-powered search & discovery across websites & apps. ww..

230716 내일배움캠프 9주차 WIL Facts 리액트 level 4,5 과제를 위한 nodejs 서버 만들기 mongoose를 사용하여 기본 crud 기능 구현 게시글 이미지를 위해 aws presigned url을 통해 이미지를 업로드하여 사용 redux-thunk를 사용해 인증 상태 전역 관리 Feelings jwt를 사용하여 인증을 관리하는 부분이 어려웠다 redex-thunk를 사용한 인증 상태 관리가 어려웠다. Findings extrareducer를 통해 redux-thunk에서 비동기 작업의 상태(pending, fulfill, reject)에 따라 전역 상태를 각각 관리하였다. Future 다음에는 react-query를 사용해 인증 상태를 관리하는 방법도 찾아 보아야겠다.

230714 jwt 자동 로그인 만들기 react와 react-router-dom을 사용하면 로그인이 되어 있더라도 새로고침이나 url 직접 변경 등을 하면 페이지를 완전히 새로 불러오기 때문에 다시 로그인을 수행해야 한다. 사용자 권한이 필요없는 페이지라면 상관이 없지만, 사용자 권한이 필요한 페이지로 직접 이동하거나 그 페이지에서 새로고침을 했을 때는 자동으로 로그인이 되어야 한다. 자동 로그인 순서도 액세스 토큰과 리프레쉬 토큰을 통해 인증된 사용자인지 확인하고 마지막으로 유저 데이터를 확인한다음 정상 응답을 보낸다.

230713 react 인증을 위한 페이지 컴포넌트 문제가 생긴 것은 url을 통해 직접 페이지에 접속할 때였다. 예를 들어 '글 작성 페이지' 컴포넌트에서는 인증된 사용자인지 확인하고 비로그인 상태이면 홈페이지로 페이지를 이동시킨다. 하지만 url을 통해 직접 페이지에 접속하면 인증이 완료되기 전에 '글 작성 페이지'에서 로그인 상태를 확인하고 비로그인 상태라 판단하여 홈페이지로 보내버린다.또한 인증이 필요한 페이지가 많아지면 매번 페이지에 인증된 사용자인지 확인해야 하는 번거로움이 있다. 항상 비로그인 상태로 판단되는 문제 url을 통한 직접 이동 시 Redux에서 인증 전에 해당 페이지 컴포넌트에서 인증확인을 먼저 함 -> 항상 비로그인 상태로 처리됨 페이지 컴포넌트에서는 자동로그인이 되고 있는 중..

230712 리액트 같은 src 경로 이미지 리로드하기 presigned url을 통해 이미지를 업로드하면 미리 지정해 둔 버킷과 키를 사용하여 업로드가 된다. 이미지를 업로드할 때 버킷의 파일 경로를 사용해 미리 보기를 표시하는데, 파일을 변경해도 브라우저에서 이미지를 캐싱하기 때문에 다시 리로드 시키지 않는다. 원인은 브라우저의 이미지 자동 캐싱 awsImageUrl 경로에 있는 파일이 변경해도 브라우저는 변경 여부를 알 수 없기 때문에 캐싱한채로 리액트에서 리렌더링 되어도 다시 불러오지 않는다. 따라서 캐싱을 무시하고 같은 경로의 이미지를 다시 불러올 수 있는 방법을 찾아야 한다. 이미지 경로에 현재 시간을 이용하기 src에 있는 값을 변경하면 다른 경로로 인식하여 다시 불러오게 되는데, 이 값을 ..

230711 AWS S3 Presigned URL로 게시글 이미지 업로드 이미지와 같은 대용량 파일을 서버에서 모두 처리하면 서버에서 받은 다음 다시 업로드 해야 하므로 응답 시간도 오래 걸리고 부하도 커진다. s3에서는 presigned url을 통해 원하는 곳에서 파일을 업로드할 수 있도록 기능을 제공하고 있다 이미지 업로드 시 클라이언트에서 서버로 presigned url을 요청 -> 서버에서 apigateway rest api로 presigned url 요청 -> apigateway에서 lambda 함수 호출 -> lambda 함수는 url을 만들어 서버에게 반환 -> 서버에서 클라이언트에게 url 반환 -> 클라이언트에서 presigned url로 이미지 업로드 //nodejs 18 Lambda..

230710 mongoose populate 연산을 통한 데이터 한 번에 가져오기 mongoDB는 join을 지원하지는 않지만 그와 유사한 lookup 연산을 지원한다. mongoose에서는 populate 연산을 통해 여러 컬렉션의 데이터를 한 번에 가져올 수 있다. 아래와 같이 글 데이터를 만들었다. userId는 users 컬렉션의 user 데이터를 가리키는 objectId이다. 글 데이터에는 userId가 아닌 user의 이름이 필요하다. populate 연산을 사용하면 userId 값을 통해 users 컬렉션의 user 데이터를 가져올 수 있다. posts = await Post.find().populate("userId"); 이렇게 user 데이터를 가져왔더니 user 데이터에는 또 자신이 작..

230709 내일배움캠프 8주차 WIL Facts redux-toolkit, axios, redux-thunk, react-query 등 리액트 심화 주차 시작 인증 인가를 위한 JWT 학습 Feelings 한 번에 여러 가지를 배우니까 복잡해진 것 같다. JWT토큰이 사용하기 쉽기는 하지만, 보안이 허술해 보인다. Findings 전역 상태 관리가 필요한 비동기 작업은 thunk를 사용하고 나머지는 그냥 react-query를 사용하면 되는건가?? Future 일단 인증 관련 데이터는 전역적으로 관리 해야 하기 때문에 redux를 사용해서 관리해야겠다. 게시글 관련 데이터는 보여주기만 하면 되니까 react-query를 사용해봐야겠다.

230708 VScode에서 import문을 별칭을 사용하여 절대 경로로 사용하기 절대 경로 alias 설정 1.vite.config.js 변경 //프로젝트 루트 경로의 config 파일 // 자바스크립트 프로젝트 -> vite.config.js // 타입스크립트 프로젝트 -> vite.config.ts import { defineConfig } from 'vite' import react from '@vitejs/plugin-react' import path from 'path'; // https://vitejs.dev/config/ export default defineConfig({ resolve: { alias: { '@': path.resolve(__dirname, './src'), }, }, ..

230707 jwt 토큰을 통한 인증 토큰을 사용한 인증 클라이언트는 아이디와 패스워드 정보를 통해 서버로 인증 요청 인증 정보를 검증하고 유효한 사용자인 경우 액세스 토큰, 리프레쉬 토큰(선택 사항)을 함께 발급 클라이언트가 보호받는 리소스에 접근하고 싶다면 서버에게 액세스 토큰과 함께 요청 서버는 유효한 액세스 토큰인지 검증하고 유효한 경우 리소스를 응답 액세스 토큰의 유효성 검사에 실패 시 리프레쉬 토큰이 있다면 이를 통해 액세스 토큰 재발급 리프레쉬 토큰이 없다면 로그아웃 함으로써 다시 로그인하여 액세스 토큰을 발급받을 수 있도록 조치 액세스 토큰 액세스 토큰은 주어진 권한 내에서 리소스에 접근할 수 있다. 유효 기간이 없다면 다시 회수할 방법이 없으므로 토큰 발급 시 유효 기간 설정은 필수이다 ..