공부하자 공부 공부하자 공부

에러 게시판 리스트를 보여주는 페이지에서 다른 페이지로 이동한 후 다시 게시판 리스트 페이지로 돌아왔을 경우 같은 데이터가 추가되는 에러 발생 원인 같은 데이터인지 아닌지 구별할때 데이터 하나만 가지고 구별했다. 그러다보니 순서가 바뀌어서 들어오게되면 같은 데이터라도 들어가게 되는게 원인이었다. if ( state.listData.length !== 0 && state.listData.filter((el) => el.boardId === data[0].boardId).length === 0 ) { state.listData = [...state.listData, ...result]; } 해결 데이터 하나만 가지고 비교하는 것이 아니라 전체를 비교해서 기존 데이터에 없는 데이터만 추가하게끔 로직을 변경했다..

에러 원인 redux로 리팩토링하는 과정에서 axios 요청을 redux안에 넣고 싶다라는 생각에 넣어 봤더니 생긴 에러이다. boardListItemAdd: ( state, ) => { const fetchData = async () => { const res = await axios.get(`/boards?page=${isPage}&size=16`); const { data, likeList } = res.data; const result = data.map((board: BoardDataProps) => { return { ...board, like: likeList.some( (el: { boardId: number; boardTitle: string }) => el.boardId === boar..

에러 React 환경에서 작성된 코드를 S3에 정적 웹페이지 배포를 하고 배포된 페이지에서 새로고침을 하게되면 발생하는 에러이다. 원인 React에서 작성된 Route의 path를 배포된 환경에서는 사용할 수 없기 때문이다. 시도 Cloud Front사용 Cloud Front를 사용하면 특정 에러 발생시 새로운 주소로 리다이렉션이 가능해진다. 새로고침시 주소가 올바르게 서버 주소로 요청을 보내는게 확인됐지만 Cloud Front로 배포할 경우 배포주소 시작이 https가 된다. 이 말은 보안 때문에 http에 요청을 보내고 응답을 받을 수 없다는 말이다. index.html에 아래의 코드를 넣으라는 방법도 해봤지만 빌드하고 배포하는 순간 페이지가 검게 변하는 현상이 생겼다. 출처:https://velog..

첫 생각 처음에는 키프레임을 사용하고 애니메이션 시간을 정해서 움직이게 하면 되겠다! 라는 생각을 가지고 구현을 했다. // MainLayout.tsx const ContentBox = styled.div` width: 400%; display: flex; margin-left: ${(props) => (props.img ? `300%` : `none`)}; animation-duration: ${(props) => (props.img ? `18s` : `none`)}; animation-name: ${(props) => (props.img ? `img` : `none`)}; animation-iteration-count: ${(props) => (props.img ? `infinite` : `none`..

에러 무한 스크롤이 동작하는 페이지에서 다른 페이지로 이동했다가 다시 무한스크롤이 동작하는 페이지에 오니 발생하는 에러였다. 에러의 내용은 map 메서드를 사용하는데 전달해준 key의 값에 같은 값이 있다라는 에러였다. 원인 map 메서드에 작성되는 첫번째 태그에 key값이 주어진다. key값은 고유한 값으로 전달해야 되기 때문에 받아오는 item들의 id값을 전달해 주었다. 그런데 같은 데이터가 들어가면서 같은 id값이 들어가는 것이 오류였다. (filteredData.length === 0 ? isData : filteredData)?.map((el) => { return ; //key값으로 고유한 boardId값을 넣어주었다. } 해결 원래는 요청을 미리 차단해 막고싶었다. 하지만 아직 찾지 못해서..

금요일에 서버 연결 테스트 하면서 헤더에 하드 코딩 해놓았던 토큰을 오늘 깃헙에 그냥 올려버렸다. 바로 알아차려서 바로 환경변수로 지정하고 적용했다. 처음에 서버로부터 받은 토큰을 하드코딩했다. .env.development.local파일을 ./client폴더 안에 만들어 환경변수를 설정해줬다. React환경에서는 REACT_APP_을 앞에 사용해야한다. (!중요: 안하면 undefined 뜸) index.tsx에서 axios.defalts설정을 해줬다. axios.defalts.headers.common은 axios의 모든 요청의 헤더에 넣는 값을 설정할때 쓰인다. 환경변수 설정과 axios.defalt 설정으로 간단해진 네트워크 요청! 출처 https://yamoo9.github.io/axios/gu..

GitHup에 기능구현한 파일을 merge하면 우리가 사용하고 있는 AWS의 S3에 자동으로 정적 배포가 되게 해놓았다. 그런데 배포된 서버의 주소를 하드 코딩하지 않고 .env 파일을 만들어 환경변수 설정을 하고 사용한다. 하지만 github에 push할 때는 .env파일이 포함되지 않는다. 즉, 환경변수의 값이 undefined가 되어 서버와 통신할 수 없게 된다. 전에 자동배포를 하면서 만든 client.yml을 수정해서 merge를 하게 되면 github action에서 미리 등록해둔 서버 url을 사용해 .env.production.local 파일을 만들고 환경변수를 설정하고 이 환경변수를 사용할 수 있게 하면 된다. name: client on: pull_request: branches: - ..

드디어 서버와 연결됐다.! 저번에 만들어둔 무한스크롤로 테스트 해봤다! 너무 잘됐다! 역시 통신을 시작하니 재미가 있어진다! board를 작성할때 이미지를 첨부하면 서버에 post요청을 보내는 곳에서 에러가 발생했다. 500에러를 뱉어내길래 서버 문제인것 같았는데 ajax요청을 보낼때 데이터 타입의 문제로 발생하는 에러였다. formdata의 형태로 보냈어야하는데 기본으로 json형태로 전달하게 설정해둔 것을 까먹고 요청을 보내 에러가 발생한 것이다. 설정해둔 것을 주석 처리하고 다시 이미지 요청을 보내니 정상적으로 작동했다. axios 기본 설정 이번에 하면서 알게된 것인데 axios의 url과 header를 일일이 적지 않고 path부분만 작성하면 되는 설정이 있었다. import axios from..