FE/react17 [React] github action 리액트 .env file 추가하기 이전 글 [React] react프로젝트 github action으로 CI/CD 구축하기(aws S3, cloudfront) 문제상황 : .env 파일이 github action으로 S3에 올라가지 않는다 이전 글에서 github action을 통한 클라이언트 배포자동화 과정에 대한 글을 다뤘습니다. 배포 이후 프로덕트에 들어가보니, 요청 URL에 undefined가 들어오는 것을 확인했습니다. 제가 만든 프로젝트에 server url은 .env파일에 넣어 환경변수로 사용하고 있었는데, 이 .env 파일은 보안상의 이유로 대개 gitignore로 관리됩니다. github에 푸시되지 않았으니 .env 파일 없이 빌드되어 이 같은 문제가 발생한 것입니다. github action으로 .env 파일 생성하기 .. 2023. 4. 25. [React] react프로젝트 github action으로 CI/CD 구축하기(aws S3, cloudfront) 해당 글은 aws S3 + cloudfront로 이미 배포된 프로젝트를 github action으로 배포 자동화를 하는 과정을 담은 글로, S3 + cloudfront로 배포하는 전과정을 담고있지는 않습니다. 계기 사실 나는 devops와는 거리가 먼 프론트엔드 개발자라 그냥 github action으로 cicd하면 된다더라!!! 정도만 풍문으로 들었다ㅋㅋ 지난 프로젝트 때는 그냥 포트폴리오용 플젝이었고, 최종 완성된 프로젝트를 한번만 배포하고 유기....했기때문에 배포자동화가 필요없었다. 그러나 이번 Froggy 프로젝트는 향후 실제 유저 유치를 목표로 지속적인으로 기능이 추가될 예정이기 때문에 배포할 일이 잦을 예정이다. 매번 빌드하고 S3에 올리는 것이 귀찮으니 이참에 배포 자동화라는 것을 해보자!.. 2023. 4. 24. [React-query] useInfiniteQuery의 select로 반환값 변환하기 임의로 qeury의 반환값을 useState로 수정하고 사용하여 생긴 문제 useInfiniteQuery로 받아온 데이터들만 화면에 바로 렌더링되지않고, 꼭 refetch가 일어나야만 그림이 그려지는 문제가 생겼다. 처음엔 useInfiniteQuery 훅의 문제인가했는데 react-query devtool을 확인해보면 분명 정상적으로 캐싱이되고 있었다. 생각해보니 useInfiniteQuery의 data구조가 조금 복잡해서 postList라는 state를 만들어서 fetch성공시 데이터를 평탄화시키도록 해놨는데, 그 부분이 문제였다. const [postList, setPostList] = useState([]); const { isLoading, fetchNextPage, hasNextPage } =.. 2023. 3. 31. [React] 리액트 refresh token 구현 (with. axios interceptor) Axios interceptor와 Refresh Token axios 공식문서에 따르면, interceptor는 api 요청에서 then이나 catch로 처리되기 전에 응답을 가로챌 수 있도록 하는 것입니다. 프로덕트에서 로그인 시에만 가능한 행동들의 경우 header에 athorization : token 옵션을 함께 보내야합니다. 이때 토큰이 만료되면 서버에서 토큰 만료로인한 오류응답을 줍니다(저희는 401이 토큰 만료 오류입니다). 토큰 탈취 문제를 피하고자 엑세스토큰의 유효시간은 짧게 설정해두고, 리프레시토큰을 통해 엑세스토큰을 재발급받아야하는데, 서비스를 이용하는 유저입장에서 반복적으로 401에러를 보는 것은 굉장히 불편한 일입니다. 그래서 저희는 401에러가 나오면, 유저가 보지 못하게 중간에.. 2023. 3. 21. [React] useState로 드롭다운 필터버튼 만들기 위에 사진처럼 필터버튼 드롭다운 형태로 만들어야하는 상황인데요, 먼저 input 태그의 select option과 가장 유사하게 생겼다는 생각이들었지만... 커스텀하는게 더 어렵겠단 생각이 들어서 버튼과 useState를 이용해 구현해보았습니다. 구현 목표 1. 버튼이 눌리면 한개짜리 버튼은 숨기고 확장된 모습을 렌더링한다. 2. 선택한 옵션에 맞게 글씨가 바뀌게 한다. 구현 방법 및 설명 버튼을 만들기 위해선 두개의 상태를 관리 해주어야합니다. 1. 버튼이 확장된 상태인가? isExpanded (boolean) isExpanded가 false일 땐 버튼한개가 보이고, default입니다. 한개 버튼을 누르면 isExpanded가 ture가 됩니다. articleBtnExpandHandler() isEx.. 2023. 3. 4. 이전 1 2 3 다음
