Front-end/Module
프로젝트 중 imageURL을 사용하여 다운로드 버튼을 누르면 이미지가 다운로드할 수 있게끔 하는 기능을 만들어야 했다. 위 기능을 구현하면서 겪은 어려움은 크게 2가지였다. 1. 서버에서 오는 imageURL을 그대로 href 속성에 넣어주면 제대로 동작하지 않는다. 2. 1.을 해결하기 위해 imageURL url을 fetch 해줬어야 했는데, CORS에러가 발생했다. 해결방법을 블로그에 남겨 정리해보려고 한다. 1. 서버에서 오는 imageURL을 그대로 href 속성에 넣어주면 제대로 동작하지 않는다. 먼저 첫번째 문제를 해결해 보자. 방법은 간단하다. 태그 href에 경로와 download 속성에 저장될 파일 이름을 지정해 주면, 다운로드가 가능하다. 그런데, 서버에서 오는 imageURL을 그..
회원가입시에 주소값을 필요로 할때, 특히나 주소의 경우에는 정확한 값을 받아올 필요가 있다. 이때는 사용자가 직접 주소 값을 입력하는 것 보다 우편번호 검색 서비스를 이용해 정확한 값을 받아 오는 것이 좋다. react-daum-postcode를 선택한 이유 따로 key를 발급받을 필요 없이 사용할 수 있다. 회원가입 기능을 구현하면서, 정확한 주소를 받기 위해 우편번호 API가 필요했다. https://github.com/bernard-kms/react-daum-postcode GitHub - bernard-kms/react-daum-postcode: 리액트 컴포넌트로 만든 Daum 우편번호 검색 서비스입니다. 리액트 컴포넌트로 만든 Daum 우편번호 검색 서비스입니다. Contribute to ber..
프로젝트에서 위치를 지도 위의 마커로 표현해야 하는 화면이 있어 @react-google-maps/api 라이브러리를 사용해 구현해 보았다. google, kakao, naver 중 google API를 선택한 이유 프로젝트 내에 google address api를 사용해 주소를 가져오는 기능도 있었기에, 지도를 띄우는 것도, google address api에서 발급받은 API 키를 동일하게 사용할 수 있어 google address api를 사용하게 되었다. 왜 @react-google-maps/api인가 다른 라이브러리에 비해 Weekly Downloads가 높았고, Last publish 도 내 기준 7일전으로, 업데이트가 꾸준히 진행되고 있는 것 같았다. 구글 공식 유튜브계정인 Google Ma..
이번 프로젝트에서 제일 많이 다뤘던 라이브러리는 단연코 yup이랑 Formik이었다. 웹에서 사용하는 모든 form을 위 라이브러리를 적용해, 유효성 검사를 해주었다. Yup & Formik를 쓰면 form 내의 state관리가 편하며, 스키마 기반 유효성 검사로, 보다 편리하게 양식 검사를 수행할 수 있다. 이전보다, 알게된 것이 많아진 것 같아 다시 한번 정리해보려고 한다. 핸드폰 유효성 검사 프로젝트 특성 상, 정규표현식을 사용하는 것보다, phone Validation 라이브러리를 사용하는게 마음이 편했다. import "yup-phone"; yup에 적용가능한 yup-phone 라이브러리를 사용해줬다. yup-phone github phone: yup .string() .min(9, '핸드폰 번..
declarations file 만들기 // styled.d.ts import "styled-components"; declare module "styled-components" { export interface DefaultTheme { colors: { gray_100: string; gray_200: string; }; } } 먼저, 선언 파일을 생성해준다. 그리고 DefaultTheme에 타입을 추가 해준다. (+ d.ts파일은 구현부가 아닌 선언부만을 작성하는 용도의 파일로, JS코드로 컴파일되지않음. 선언 코드(declare)만 작성이 가능) 이제,DefaultTheme는 prop.theme에 적용시켜줄 것이다. theme 만들기 이제 위에서 선언한 DefaultTheme을 사용하여 테마를 만..
react-slick라이브러리에서 dots를 바꾸기 위해서는 setting(props)값에 dotsClass를 추가해줘야 한다. default로 되어 있는 class 선택자 대신 dotsClass명으로 class 선택자명을 바꿔 커스텀이 가능하다. DOCS 버튼의 색깔과 크기, 버튼 양 옆 마진 값을 바꿔주고 싶었다. import React from 'react' import Slider from 'react-slick' import './slick.css' export default function ImgSlide({images}: any) { var settings = { dots: true, infinite: false, speed: 500, slidesToShow: 1, slidesToScroll..
Iamport는 PC/모바일 웹에서 PG사의 결제 연동을 도와주는 라이브러리다. (PG(사) : 이니시스, 나이스 페이먼츠 등과 같이 중간에서 온라인 지불과 결제대행을 하는 전자결제 대행사) Iamport를 활용해 몇 줄의 코드만으로 결제 서비스를 구현할 수 있어 개발자는 비지니스 로직과 서비스 자체에 집중할 수 있게 된다. const { IMP } = window; IMP.init('imp00000000'); // impAccount 관리자 페이지에서 가져온 가맹점 번호를 통해 IMP 객체를 init 해준다. IMP.request_pay(param, callback) IMP.request_pay는 param, callback 2개의 argument를 받는 함수다. IMP.request_pay( { pg..
Formik은 동기 및 비동기 양식 수준 및 필드 수준 유효성 검사를 지원하며, Yup을 통해 스키마 기반 양식 수준 유효성 검사를 수행할 수 있다. 즉 많은 input값을 작성할 때, 우리는 일일이 해당 input값에 대한 useState와 handleChange를 작성해야 될 것이다. 이렇게 되면 코드의 양은 증가할 것이고 더러워 질 것이다. 이런 귀찮은 작업을 Formik 라이브러리로 해결할 수 있다. 다음 코드를 통해 Formik & Yup에 대해 알아보자 // src/components/signup.js import React from "react"; import "./Signup.css"; import { useFormik } from "formik"; import * as Yup from "..
