전체 글5 [AWS] AWS S3 Bucket Github Action 로 CI/CD 구축 회사에서 공통적으로 사용할 컴포넌트를 만들고 디자이너 분께 검수를 받기위해 배포를 할 일이 생겼다. 로컬로 실행하고 아이피로 접근해 확인이 가능하지만, 매번 로컬을 실행시켜야하는 번거로움이 있기에 클라우드에 배포하기로했다. 처음에는 비교적 간단하게 자동배포를 할 수 있는 Netlify, Vercel에 하려 했지만 이게왠걸.... private repo는 유료라고한다... 그래서 회사프로젝트를 S3 Bucket에 배포를 하고있어서 S3에 배포하기로 했다. 1. 버킷 생성 1. 버킷 만들기 클릭한다. 2. '버킷이름'만 입력하고 그대로 하단에 '버킷 만들기' 를 클릭한다. 3. 만든 버킷이 목록에 보일 것이다. 버킷 클릭. 4. 권한 탭에서 퍼블릭 액세스 차단(버킷 설정)에 편집을 누른다. 5. 모든 퍼블릭.. 2023. 2. 7. [React] cloneElement vs createElement 차이 React Interview (리액트 면접 질문) [31 ~ 40] | Olaf's blog React Interview 원작자인 sudheerj 의 동의를 구하고 진행하는 번역본 입니다 :) 처음 해보는 번역이라 어색한 문맥이 많습니다 :) .. What is the difference between createElement and cloneElement?(createElement와 cloneElem appear.github.io [React] React.cloneElement 사용 사례 React.cloneElement를 어디다 사용하는지 알아봅니다. 해당 글의 번역입니다 : https://blog.logrocket.com/using-react-cloneelement-function/ Using th.. 2023. 1. 28. [React-query] 리액트쿼리 맛보기 ! 회사 프로젝트중에서 react-query를 사용하고 있었다. 전부터 공부해보고 싶었는데 이번기회에 시작해보게 되었다. 1. 리액트쿼리는 왜 사용할까? 데이터를 캐싱한다 - 캐싱 된 데이터로 인해서 API 콜을 줄여주며 서버에 대한 부담을 줄여줄 수 있다. 서버데이터와 클라이언트 데이터의 분리 다양한 hooks fetch 과정 간소화 2. 그렇게 좋다고하니 간단하게 한번 사용해보자 !! 우선 cra를 사용하여 react 프로젝트를 생성한다. npx create-react-app react-query-test 비동기 통신 라이브러리로는 axios를 사용할 것이고, 서버 관련 라이브러리로는 json-server를 사용 npm i json-server react-query를 설치한다. 여기까지하면 필요한 dep.. 2023. 1. 17. [CS] JWT 로그인 동작방식 이해하기 사이드 프로젝트로 소셜로그인, JWT 로그인을 구현해 보았지만 동작방식과 개념이 모호하여 짧게나마 정리해보았다. JWT : json web token 인증 : 식별 가능한 정보로 서비스에 등록된 유저의 신원을 입증하는 과정 인가 : 인증된 사용자에 대하여 자원의 접근권한을 확인하는 것 과정 사용자 로그인 DB에서 사용자가 있는지 확인 서버에서 Access Token, Refresh Token(JWT)을 cookie에 담아서 발급 이후 여러동작에서 해당 Token을 가지고 신원 확인 Token은 발급 시 유효기간 동안 되돌릴 수 없고 탈취당할 시 인증 정보가 모두 담겨 있으므로 위험하다. 때문에 Access Token의 생애주기를 짧게 갖고 만료시 Refresh Token을 이용하여 새로 발급한다. 토큰 .. 2023. 1. 13. 이전 1 2 다음
