전체 글
react-countdown-circle-timer 소개
npm 사이트: https://www.npmjs.com/package/react-countdown-circle-timer react-countdown-circle-timer Lightweight React countdown timer component with color and progress animation based on SVG. Latest version: 3.0.9, last published: 3 months ago. Start using react-countdown-circle-timer in your project by running `npm i react-countdown-circle-timer`. There www.npmjs.com 설치방법 npm npm i react-countdown..
SVG 태그
이번 프로젝트를 하면서 처음으로 SVG태그라는 것을 보았다 평소에 fontawsome에서 아이콘을 쓰고 있었는데 여기에 SVG태그가 사용이 되고 있었고 클론 코딩 중에 SVG태그를 사용할 일이 생겨서 한번 찾아보았다 SVG 만능설 이 svg태그는 백터형 이미지 포맷이다 이와 비교되는 것으로는 이미지 파일(jpg,png등) 이 있다. 이 둘의 차이점을 보면 이미지 파일을 이루는 것은 작은 픽셀이어서 크기를 키울수록 픽셀이 깨지는 화질 차이가 나지만 svg는 백터로써 크기가 변해도 화질이 깨지지 않는다 svg는 각 좌표에 점을 찍어서 이으는 개념으로 만들어지기 때문이다 그렇다 보니 이미지 파일은 이 픽셀을 저장하기 위해 용량이 svg파일보다 상대적으로 크다. svg파일은 점을 찍어서 이으는 개념인 백터이므로..
props로 modal관리는 이제 그만
페이지로 만들기는 싫고 간단한 창을 띄워 한 페이지 내에서 유저의 접근을 받고 싶을 때 modal을 애용해 왔다 새 페이지를 왔다 갔다 하는 것보다 좀 더 한 템포 빠르게 유저와의 상호작용이 일어나 좋아했다. Modal 동작원리 modal을 동작하게 하는 방법에는 크게 2가지가 있다 modal open close시에 dom에 직접 component를 넣다 빼는 방법 css의 visible을 이용해서 modal이 안보이는 것처럼 보이게 하는 방법 1번의 방법은 open close마다 component를 랜더링 한다는 의미는 modal전체를 다시 그려야 한다는 것이므로 modal이 커질수록 open close시에 반응이 늦어진다는 이야기이다. 그래서 대부분의 modal창에서는 2번 방법을 사용한다. Moda..
쿠키 와 CORS 에러
사용된 기술 프론트 : React(CRA), RTK-Query 백앤드 : Spring 브라우저 환경: Chrome 백앤드 서버 도메인: AWS서버에서 나온 도메인 프론트 서버 도메인: localhost3000 목표 프론트에서 백앤드 서버로 API요청 테스트 해보기 쿠키 쿠키에 관한 삽질 내용을 정리해보자 한다 우리는 카카오 로그인을 사용하려 하였다 https://developers.kakao.com/docs/latest/ko/kakaologin/rest-api Kakao Developers 카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다. developers.kakao.com 카카오의 로그인 방법중 REST API..