Front-end

export default function Index() { const [count, setCount] = useState(0); const PrevCountRef = useRef(); useEffect(() => { console.log("work"); PrevCountRef.current = count; }); const PrevCount = PrevCountRef.current; console.log(count, PrevCount); return ( Now :{count} Before : {PrevCount} setCount(count + 1)}> up ); } 프로젝트를 진행하면서 이전 state값을 알아야 하는 경우가 발생했다. 공식 문서에서는 위의 예제와 같이 알려주고 있었다. function..

Non-null assertion operator 변수의 내부 값에 접근할때 TS 컴파일러는 항상 null, undefined 체크를 해준다. 이때, Non-null assertion operator(!)는 TypeScript에게 해당 속성이 null 일 수 있는 것처럼 보이지만 해당 값은 null이 들어오지 않는다고 확신해준다. optional chaining operator optional chaining operator (?.) 는 체인의 각 참조가 유효한지 명시적으로 검증하지 않고, 연결된 객체 체인 내에 깊숙이 위치한 속성 값을 읽을 수 있다. optional chaining 과 non-null assertion의 차이점 non-null assertion -> null, undefined 일 경..

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 "..