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

첫 생각 처음에는 키프레임을 사용하고 애니메이션 시간을 정해서 움직이게 하면 되겠다! 라는 생각을 가지고 구현을 했다. // 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..

CSS가 어느정도 끝났기 때문에 슬슬 필요한 기능구현을 하기로 했다. 그 중에서 나는 무한 스크롤을 하기로 했다. 1. 무한 스크롤(Infinite Scroll) 리스트들을 보는 방법은 여러가지가 있다. 데이터를 전부 받아와서 전부 한번에 나타내기 페이지로 나누어 보기 무한 스크롤 이 중 내가 구현하려는 무한 스크롤은 데이터의 일부를 받아오고 이후 스크롤이 정해진 구간을 넘어 갔을때 다시 요청을 보내서 스크롤이 늘어나는 방식으로 리스트를 보여주는 방식을 말한다. 구현하는 방식은 얼추 알고 있었다. 일정 부분의 데이터를 처음받고 map으로 뿌려준다. 스크롤이 content의 마지막에 도달했을때 다시 데이터 요청으로 보내고 리스트 업데이트 하기. import { useState, useEffect } fro..

어제 멘토분이 말씀하시길 요즘은 반응형이 기본이다! 라고 하셨다. 초기 기획 당시에는 반응형을 할 생각을 하지 않았다. 그래서 부랴부랴 CSS가 거의 끝난 오늘 해보기로 했다. 1. 반응형 요즘에는 인터넷을 컴퓨터로만 접속하는 것이 아닌 태블릿, 핸드폰으로도 접속한다. 그 화면에 맞춰 화면이 다르게 보이는 게 반응형이라고 할 수 있다. 반응형을 하지 않았을 때 화면을 줄이게 되면 화면에 있는 item들이 이상하게 배치되는 것을 확인할 수 있다. 1. 1 @media @media only screen and (max-width: ;) { // max-width의 아래 크기일때 적용되는 CSS } 반응형을 구현하기 위해서는 @media를 사용해야 한다. ()안에 조건이 되는 크기 등을 적어 놓는다. 그리고 ..

1. 텍스트 에디터 프로젝트에 텍스트 에디터를 사용하기로 했다. 텍스트 에디터는 글을 작성하는 기능을 구현할 때 단순 textarea를 사용하는 것이 아닌 ckEditor React-MD-Editor Toast UI React-qill 위보다 많은 텍스트 에디터가 존재하지만 이번에 이미지 업로드를 구현하면서 사용해본 에디터들이다. 처음에 React-Md-Editer를 하고 싶기도 했고 가장 이뻐 보이기도 했어서 선택을 했다. 마지막엔 결국 Toast UI로 했다. 2. 이미지 업로드 구조 이미지의 업로드 구조는 위와 같다. 1. Browser에서 image 업로드시 image를 formdata형식으로 Server로 post 요청한다. 2. image를 받은 Server는 AWS S3 버킷으로 image를..