heeney.log

거두절미하고 document.exeCommand() 방식은 정상적으로 동작은 하지만 웹 표준에서 Deprecated 되었기 때문에 공식문서에서도 사용되지 않으며, 대체 방법으로 Clipboard API 사용이 권장되고 있다. 그럼에도 불구하고 exeCommand를 사용해야했는데 이유는 http 사이트였기 때문이다. Clipboard API는 https OR localhost인 사이트에서만 동작한다. http 사이트에서는 복사가 안되는 문제가 발생하는 것이다.. 추후에 https로 변경될 가능성이 있으나 안전하게 가보기로 했다. 이 부분을 보완하기 위해 조건에 따라 실행하기로 결정했다. if (navigator.clipboard !== undefined) { navigator.clipboard .write..

내가 만든 로직이 제대로 작동하는지 확인하기 위해 작성하는 테스트 코드이다. 환경설정 /src 폴더 위치에 test라는 폴더를 만들고 그 안에 테스트 코드를 작성한 파일을 두면 된다. 파일명은 __test__ 혹은 .test.ts로 지정해준다. 함수를 테스트하는 경우 해당 컴포넌트를 import해와서 테스트를 진행하면 된다. 우선 필요한 라이브러리를 설치해야 한다. yarn add -D jest @types/jest yarn add -D ts-jest yarn add -D @testing-library/jest-dom @testing-library/react 필요한 파일로는 우선 테스트를 돌려볼 수 있는 파일이 필요할 것이다. /src/test/app.test.tsx ... root 위치에 jest.co..

[React / 2차 프로젝트] react-slick 적용법 2차 프로젝트부터는 라이브러리를 써보게 되었다. 1차 프로젝트에서는 학습을 위해 지양했었다. 라이브러리라고 무조건 좋지 않은 것도 아니고, 무조건 좋은 것도 아니다. 적재적소에 필요할 때 사용할 수 있어야 한다. 가스레인지를 쓰면 되는데 굳이 부싯돌로 불을 피울 필요 없기도 하다. 다양한 라이브러리를 만나면서 배울 수 있는 것도 많다. 그 코드를 뜯어보면서 학습효과를 본다던가 혹은 라이브러리 사용법을 익히면서 점점 다양하게 마주칠 라이브러리에 대한 진입장벽이 좀 낮아진다고 해야할까? 2차 프로젝트를 진행하면서 react-slick이라는 라이브러리를 활용해 캐러셀을 만들었다. 역시 유명한 만큼 편리하고 좋았지만 공식 문서를 보아도 해결되지 않는 ..

[React] fetch로 백엔드와 통신하면서 놓쳤던 부분 장바구니를 구현하면서 백엔드와 통신할 일이 많았는데, 이때 다양한 실수를 범했기에 기록한다. 다음 통신때는 절대 이런 실수를 하지 않으리 다짐해본다. 우선 내가 장바구니에서 백엔드와 통신해야했던 부분, 중요한 부분을 이야기 해보자면, 장바구니는 회원만 이용이 가능하다. 백엔드에 POST로 보내줄 body 내용은 JSON 문자열로 변환해야 한다. 전체 삭제 및 선택 삭제, 제품 직접 삭제가 가능하고 삭제한 내용은 DB에서 지워져야 한다. 구매하기를 누르면 구매한 데이터가 백엔드 측에서 따로 저장되어야 한다. 장바구니는 회원만 이용이 가능하다. 회원만 가능하다는 뜻은 결국 Token을 갖고 있는 회원만 장바구니에 접근이 가능하다는 뜻이다. 회원만 가..

[React] map 함수 적용시 key props를 부여하는 이유 본론부터 말하자면 key props를 지정해주지 않으면 사이트가 전체적으로 불필요한 랜더링을 진행한다. key값 부여 안하면 어떻게 될까? 🤓 콘솔에 에러 메세지가 뜬다. 너 동일한 형제들로 구성된 list(map에서 뿌려준 그 lists) 유닠크한 키 prop을 줘야돼. 왜 필요하지? 🤔 map으로 요소를 하나씩 뿌려준다고 하자. 리액트는 내용이 바뀔 때 다시 랜더링을 하는데 10개의 리스트중에 하나의 리스트만 바뀌었다면 리액트가 하나씩 리스트를 읽다가 여기서 달라졌네? 하고 전체를 재 랜더링 한다. 그걸 방지하기 위해 각각의 요소들이 고유한 정체성을 가지도록 key값을 부여하는 것이다. 그러면 리액트는 key값으로 변한 내용인지, 아..

react에서 jsx, css에 넣을 이미지 경로를 입력하는 방법 css background에 배경으로 넣거나 이미지 디렉토리를 src가 아닌 public에 보관하는 등 우리가 알고있는 평소의 html,css처럼 넣으려고 한다면 에러가 발생할 수 있다. 이미지 파일을 src에 배치할 경우 - jsx 이미지가 많아지면 코드가 길어져서 지저분하다. (비추) import Image from './ImageName.jpg'; - css background: url(./ImageName.jpg); 우리가 알고있는 방식대로 이미지 경로를 넣어주면 된다. 이미지 파일을 public폴더 안에 넣기 절대 경로로 연결해주어야 한다. - jsx - css 어쩔 수 없이 무조건 bg에 넣어주어야 한다 할때.. jsx내 태그안..