1. 올바른 초기값 설정const [count, setCount] = useState();const [list, setList] = useState(); 위의 초기값설정은 아래처럼 변경되어야 올바른 초기값 설정입니다.const [ count, setCount ] = useState(0);const [ list, setList ] = useState([]);왜 이렇게 값을 설정해야하는지 한번 알아보겠습니다. 초기값 ?가장 먼저 렌더링될대 순간적으로 보여질 수 있는 값이기도 하다. 당연히 초기에 렌더링 되는 값 초기값 지키지 않을 경우 ? 렌더링 이슈, 무한루프, 타입 불일치로 의도치 않은 동작 발생 -> 런타임 에러 초기값을 넣지 않으면 ? : undefined 상태를 CRUD => 상태를 지울때도 초..
클린코드란 1. 클린코드는 무적이 아니다 클린코드가 무조건 최고는 아니다 무조건 클린코드 === 좋은코드는 아니다 클린코드를 지켰다며 TDD를 통과했다며 기뻐하지만 React 앱이 동작하지 않음 성급한 기술 도입으로 과도한 추상화 팀원들에게 피해를 줌 2. 클린코드보다 중요한 것은 상당히 많다. 작성한 코드의 확장성 React 앱의 완성도 앱의 완성도가 떨어지는 경우 사소한 동작에도 잦은 버그가 발생 함께 개발하는 팀원들과의 코드를 두고 할 수 있는 소통 Vite란? 공식문서에 따르면 프랑스어로 빠르다를 의미하고, 빠르고 간결한 모던 웹 프로젝트 개발 경험에 초점을 맞춰 탄생한 빌드 도구이다. 개발 시 네이티브 ES Module을 넘어 더욱 다양한 기능을 제공 번들링 시, Rollup 기반의 다양한 빌드..
화면구성 메인화면 대쉬보드(Carousel) 등록된상품 최근본상품 하단(Footer) 카테고리 로그인화면 회원가입 화면 비밀번호 찾기화면 마이페이지화면 회원정보수정화면 내 게시물 조회 좋아요 대여해주는상품 쪽지함 쪽지상세화면 쪽지함에서 거래하기 화면 상품등록 상품상세화면 상품상세 댓글, 대댓글 상품에 대한 쪽지보내기 검색화면 카테고리 클릭 화면 프로필조회 신고화면 관리자페이지
진행하고 있는 프로젝트에서 react-query를 도입하려고 합니다. 그 이유와 어떻게 적용했는지 살펴보고 최종적으로 사용했을 때와 사용하지 않았을 때의 성능까지 비교해보겠습니다. 먼저 리액트쿼리에 대해 간단하게 알아보겠습니다. react-query? React-Query는 데이터를 불러오고 캐싱하며, 서버 데이터와의 동기화 및 업데이트 하는 작업을 개발자가 쉽고 간단하게 할 수 있도록 도와주는 라이브러리 입니다. 즉 '비동기 로직을 쉽게 다룰 수 있게 해준다'라고 이해하면 될 것 같습니다. 데이터 캐싱기능을 잘 사용하기 위해서는 리패치가 일어나는 조건과 옵션 2가지에 대한 이해가 필요합니다. stale : 사전적의미로 "신선하지 않은" 리액트 쿼리는 기본적으로 캐싱된 데이터를 stale한 상태로 여깁니..
Carousel 도입이유 현재 프로젝트를 진행하면서 페이지가 너무 정적인 경향이 크다고 생각했습니다. 그래서 동적인요소를 추가하고자 했고 그 중에서도 대쉬보드에 Carousel을 도입하여 메인페이지에 동적인 느낌을 주려고 했습니다. 현재 사이트 모습 현재 메인페이지의 모습입니다. 화면 중앙에 위치한 대시보드에 Carousel을 도입해 자동으로 대쉬보드가 전환되고 또한 사용자가 화살표를 클릭하면 원하는 대쉬보드를 보여줄 수 있게 구현하고 싶습니다. Carousel(캐러셀)이란? 캐러셀은 슬라이드쇼와 같은 방식으로 콘텐츠를 표시하는 UX구성요소입니다. 버튼을 눌러 옆으로 사진이 넘어가며 모션이 마치 회전목마와 비슷하다고 하여 붙여진 이름입니다. 캐러셀은 용도에 따라 자동재생되게 하거나, 사용자가 수동으로 넘..
상황 사용자가 상품을 클릭하면 최근에 클릭한 상품의 순서대로 최근 본 상품이라는 단어 아래에 해당 상품들을 출력하고 싶었습니다. 해결방법 현재 ItemMain이라는 컴포넌트에서 위의 정보들을 보여주고 있습니다. 여기서 상품들을 api를 통해 호출하고 state배열에 저장한다음 return문 안에서 상품들을 map을 이용해 보여주고 있습니다. 그래서 이미 호출한 state배열을 활용하고자 했습니다. 최근본상품의 컴포넌트를 호출할때 props로 상품들(state배열)을 전달하고 해당 컴포넌트의 useEffect문 안에서 findIndex함수를 통해 상품의 정보를 배열에 저장해주고 출력해주었습니다. 간단하게 순서대로 설명해보면 1. 메인페이지를 접속할때 localStorage에 wathced 배열 생성. 2...
현재 서버에서 주는 UTC시간의 형식입니다. 아래의 시간을 KST로 변환해보겠습니다. 위의 UTC시간은 a라는 곳에 담겨져있고 a를 콘솔로 출력했었습니다. 먼저 a데이터를 new Date()로 감싸서 const kor = new Date(a); 아래의 형태로 만들어줍니다. 다음으로 console로 아래처럼 입력하고 확인해보면 console.log(kor.toLocaleString()); console.log(kor.getTimezoneOffset()); 아래의 데이터가 나오고 -540 즉 UTC시간은 한국보다 9시간 빠른것을 알 수 있습니다! 그래서 여기 hour에 9시간만 더해주면 되지 않을까? 라는 생각을 했습니다. kor.setHours() 함수를 이용해 시간을 +9시간 해줍니다. getHours(..
결론 부터 말씀드리자면 아래와 같이 클릭을 할때 navigate로 navigtae('주소', { state : 보내고자하는 데이터} )를 사용하면 데이터를 전달할 수 있습니다. 받는 컴포넌트에서는 useLocation을 import하고 아래와 같이 사용하면 콘솔에서 출력이 됩니다. 해당 기능이 필요했던 이유 현재 만들고 있는 페이지에서 카테고리의 항목을 클릭하면 해당카테고리 항목의 페이지로 이동하여 그에 맞는 데이터값들을 보여줘야 했습니다. 서버에서 카테고리에 맞는 데이터를 불러오려면 아래와 같은 형식이 필요했습니다. 그래서 저는 맨뒤에 ' 보드게임 ' 이라는 값 즉, 카테고리 명이 필요했습니다. 처음에 2개의 api를 호출해야하는 줄 알았습니다. 즉, 모든 상품의 데이터 api -> post 카테고리 ..
서버에서 많은 데이터를 가져오는 작업 같은 경우는 오래걸리기 때문에 useEffect 훅을 이용해 데이터를 가져오는게 좋은 방법이라고 배웠습니다. 아직 리액트가 익숙하지 않아서 axios를 사용했을때 겪었던 문제점과 해결방법에 대해 글을 작성해보겠습니다. 먼저 문제가 발생한 상황부터보겠습니다. 첫번째 문제 상황 서버api 데이터를 이용한 요소 생성시 데이터가 할당되기전에 요소가 생성 -> 오류 아래의 이미지를 보시면 왼쪽상단에 카테고리 버튼을 클릭했을 경우 카테고리 목록이 나오는데 이때 카테고리 목록은 서버에서 받은 카테고리 데이터입니다. 그래서 axios.get을 이용해 데이터를 받아와야하는데 배운대로 useEffect안에 해당 코드를 적었습니다. 그리고 받은 데이터를 이용해 return문안에서 아래처..
리액트에 관해서 프로젝트를 하고 공부를 하면서 get을 통해 서버에서 데이터를 가져오는 작업은 무리없이 잘 실행했었습니다. 근데 이번에 백엔드(Spring)과 협업하여 프로젝트를 진행하는 과정에서 데이터를 서버에 보내야하는 과정이 필요했습니다. 그래서 이번에는 axios.post를 통해 서버에 실제로 데이터를 전달하는 방법에 대해 알아보겠습니다. POST POST : axios.post(url,data [, config]) axios에서 Request Method를 사용하기 위해서는 axios에 . 을 붙히며 소문자로 Req Method를 넣어주면 됩니다. 그리고 해당 메서드의 파라미터에는 API의 주소를 넣습니다. 그리고 POST메서드에서는 일반적으로 데이터를 Message Body에 포함시켜 보냅니다..
오늘은 프로젝트 도중 발생한 문제점을 알려드리고 어떻게 해결했는지 알려드리겠습니다. 리액트-스프링 프로젝트를 진행하고 있는 도중에 로그인기능을 구현하고 있었습니다. 이렇게 로그인화면에서 서버에 저장되어 있는 아이디와 비밀번호를 입력하고 Login 버튼을 클릭하면 메인페이지로 이동하면서 상단의 nav바의 로그인/회원가입버튼이 로그아웃 버튼으로 바뀌게 해주는 작업이었습니다. 아래 처럼 axios.post를 이용해 사용자가 입력한 데이터를 서버에 보내주었습니다. 문제점 리렌더링 X 처음에는 생각없이 당연하다는 듯이 navigate로 메인페이지로 이동시켜주었는데 여기 부분이 문제였습니다. 로그인이 성공하면 nav바를 리렌더링시켜줘야하는데 navgiate로 이동을하면 리렌더링이 발생하지 않았습니다. 여기서 문제를..
Request & Response 클라이언트는 서버에게 요청을 보냅니다. "회원가입 시켜줘" , "게시물 생성해줘" 등등 이때 API라는 체계를 이용하여 클라이언트와 서버간에 요청과 응답을 주고 받습니다. 그 중에서도 더 체계적으로 API를 관리하기 위해 REST API가 등장했습니다. REST API는 HTTP프로토콜을 사용해 통신하며, HTTP 메서드로 요청을 표현한다는 특징이 있습니다. 요청을 보낼 때는 보낼 정확한 서버 주소를 알아야 합니다. 서버주소는 '서버주소/A'와 같이 구성되어 있습니다. 서버주소는 말 그대로 서버 컴퓨터가 위치한 곳의 주소이고, 슬래시 뒤의 A라는 곳에는 원하는 요청 기능을 적어줍니다. 예를 들면 서버주소/signin 은 로그인 기능을 수행하고 서버주소/signup은 회원..
REST API란? 서버와 통신하는 방식 중 한가지로 http 메서드를 사용하여 데이터를 요청/전송합니다. 기존에 많이 사용하던 SOAP API의 경우 서비스 인터페이스를 이용해 서버에 접근했다면, REST는 인터넷 식별자(URI)와 HTTP프로토콜을 이용해서 접근하는 것이 특징이며 사용법이 단순하여 높은 보안수준을 요구하는 작업이 아닐 경우 일반적으로 많이 선호되는 통신방법입니다. 데이터 포맷은 브라우저 호환성이 좋은 JSON을 사용하며 resource, method, messgae로 구성됩니다. 쉽게 말하자면, REST API는 url 주소와 메서드로 CRUD 요청을 하는 것 입니다. 클라이언트가 서버에게 요청을 보내는 유형은 크게 4가지로 나눌 수 있고, 이게 바로 CRUD 입니다. 종류 용도 GE..
자바스크립트의 sync / async 관련 상식 자바스크립트는 일반적인 코드를 작성하면 synchronous(동기)하게 처리 됩니다. 코드적은 순서대로 윗줄부터 차례로 코드가 실행된다는 뜻입니다. 자바스크립트는 이상한 함수들을 사용하면 asychronous(비동기적)하게 코드실행이 가능합니다. ajax, 이벤트리스너, setTimeout 이런 함수들을 쓸 때 그런 현상이 일어납니다. 이런 함수들은 처리시간이 오래걸립니다. ajax를 예로 들면 인터넷 상황이 안좋으면 코드실행이 오래걸릴 수 있습니다. 그래서 ajax 요청하는 코드들은 순차적으로 실행되지 않고 완료되면 실행됩니다. 예를 들어보면 console.log(1+1) axios로 get요청하고나서 console.log(1+2) 실행해주는 코드 con..
리액트 18버전 이후부터 렌더링 성능이 저하되는 컴포넌트에서 쓸 수 있는 혁신적인 기능이 하나 추가되었습니다. useTransition 이건데 이걸로 오래걸리는 부분을 감싸면 렌더링시 버벅이지 않게 해줍니다.(코드실행시점만조절해주는식) batching automatic batching이라는 기능이 있는데 state변경함수를 연달아서 3개 사용하면 재렌더링도 원래 3번 되어야하지만 리액트는 재렌더링을 마지막에 1회만 처리해줍니다. 일종의 쓸데없는 재렌더링 방지기능이고 batching이라고 합니다. setCount(1) setName(2) setValue(3) //여기서 1번만 재렌더링됨 근데 문제는 ajax요청, setTimeout안에 state변경함수가 있는 경우 batching이 일어나지 않습니다. 리..
