학원에서 배운 것85 React 로 카카오톡 공유하기 기능 추가해보기 https://developers.kakao.com/tool/demo/message/kakaolink?message_type=scrap Kakao Developers 카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다. developers.kakao.com 카카오API 중 공유하기를 사용해보려고 한다... 이유는 만들고 있는 사이트에 저 버튼(노란..)을 만들어버렸기 때문이다. 구현방법을 체크하여 코드를 가져올 수 있는데, 직접 만든 버튼으로 메시지 > 기본 > 피드 를 선택하면 이런식으로 카카오톡 공유가 가능하다. 직접 만든 버튼 > 사용자 정의 메시지의 경우 그럼 이제 이걸 어떻게 리액트에 적용하는가가 문제인데, .. 2023. 5. 15. QA 라이브러리, JEST! Jest QA는 과거 대비 고객 만족도가 중요해진 현대에 각광 받고 있는 분야로, 모든 서비스에서 QA를 부서를 따로 둘 수 없기 때문에 개발자가 직접 테스트를 하게 된다. 예전에는 모든 테스트를 하나로 수행할 순 없이 Mocha 나 Jasmin으로 실행했지만 실제로 값을 비교하는 것은 Chai, Expect 를 사용하고 테스트 케이스는 Sinon, Testdouble을 썼었다고 한다. 대체로 유사한 방식이지만 다른 부분이 있어서 어려움이 존재했는데, 위의 여러가지를 하나에서 전부 수행할 수 있도록 해준 라이브러리가 JEST라고 한다. Jest 세팅 npm i -D jest 테스트는 jest를 이용할 것이므로 package.json 파일에서 스크립트 test 를 jest 로 수정해준다. 이제 npm te.. 2023. 5. 5. 팀플을 하면서 시도했던 드래그앤드롭 코드들.. 결국 dnd 라이브러리로 성공은 했지만 노가다와 삽질한 흔적을 남겨본다... // 드래그앤드롭 시안 1 const [originPos, setOriginPos] = useState({ x: 0, y: 0 }); const [clientPos, setClientPos] = useState({ x: 0, y: 0 }); const [pos, setPos] = useState({ top: 100, left: 0 }); const draggingRef = useRef(null); const draggingOverRef = useRef(null); const dispatch = useDispatch(); const onDragOver = e => { e.preventDefault(); }; const onDrag.. 2023. 4. 22. 우당탕탕.. 팀프로젝트 리액트로 드래그 앤 드롭 구현하기 바닐라 JS 로 했듯... 이번에도 드래그앤드롭 구현을.. 맡아버렸다 근데 좀더... ?? 띠용한거 같다... 왜냐하면 전에 드래그앤드롭은 그냥 아무 위치에 스티커를 붙여주는 느낌이라면 이번 프로젝트는 드롭 타겟에 촥!! 붙어야 하는데 이게 가능할지 잘 모르겠다 ...ㅠㅠ 일단은 서칭과 노가다의 힘으로 드래그앤 드롭은 되긴한다! const onDragOver = e => { e.preventDefault(); }; const onDragStart = e => { e.dataTransfer.effectAllowed = 'move'; const originPosTemp = { ...originPos }; originPosTemp.x = e.target.offsetLeft; //칸반보드 컨텐츠 부분부터 ori.. 2023. 4. 12. 이전 1 2 3 4 ··· 22 다음
