[OOP] 객체지향 5원칙(SOLID)- 단일 책임 원칙 (Single Responsibility Principle) 객체지향 5원칙 올바른 객체지향 설계를 위해 수립한 원칙이 있으며, 이 다섯 가지 원칙을 통틀어 객체지향 5원칙(SOLID) 이라 명명한다. 필수는 아니다. 적어도 이 규칙을 준수하면 준수할 수록 올바르게 설계된 객체지향...

useState 왜 비동기로 만들었을까? React 에서 state 는 컴포넌트 내부의 변경 가능한 값이다. 일반적으로 사용하는 변수를 놔두고, 왜 state 를 사용해서 값을 관리할까? state 가 갖는 특성 때문이다. 바로 값이 변경되면 리렌더링(Re-rendering) 이 발생하기 때문이다. -> 따라서 값이 변화함에 따라 실시간으...

[React] Event Capture, Bubbling 에 대해서… 패스트캠퍼스 React & Redux 과정중에서 생명주기에대해 배우는 중이었다. 이전 class 형 컴포넌트에서, 즉 16.8버전에서 Hook 이 나오기 전에는 이 생명주기가 굉장히 중요했다(지금 안중요하다는 것은 아님) willmount, update, didmount,...

Formik 과 Yup 을 통해서 submit 과 validate 를 동시에 진행해보자. 프론트엔드를 하면 빠질 수 없는 것이 Form 이다. 대표적인 라이브러리로 Formik 이 있다. npm i formik npm i yup 초기값 설정하기 form 에 사용 할 상태의 초기값을 initialValues 을 통해서 설정한다. const ...

SetTimeout 과 setInterval 을 이용한 호출 스케일링 일정 시간이 지난 후 원하는 함수를 예약 실행(호출)할 수 있게 하는 것을 ‘호출 스케일링’ 이라고 한다. setTimeout 을 이용해 일정 시간이 지난 후 함수를 실행하는 방법 setInterval 을 이용해 일정 시간 간격을 두고 함수를 실행하는 방법 자바스크립...

css 반응형 코드를 이쁘게 작성하기! // 반응형을 위한 브레이크 포인트(width) const breakpoints = [768, 1200]; // 각 요소를 미디어문으로 변경 export const media = breakpoints.map((bp) => `@media (max-width: ${bp}px)`); // 실제 적용하기 /...

[errors] git 사용중 꼬였을 때… 최근 cafe 24 와 협업을 하면서, 새로운 상품연동 페이지를 제작중에 있었다. 그런데 내가 실수로 main branch에 작업을 하고있었다… 다행이도 fork 해온 나의 레포에서 작업이 되었지만, 이전으로 되돌리기에는 다른사람의 commit 도 있었고 , 너무 많은 commit 을 되돌려야 했다. 실수...

antd form 사용시 form.Item props 에는 입력값을 검증해주는 rule 이나 custom validator 를 사용할 수 있다. <Form.Item name={'itemCd'} label="상품코드" labelAlign="left" rules={[ { required: true, }, { min: 1, message:...

SheetJS 를 시작해보자…(1) SheetJS 를 공부하게 되는 계기 물류회사 특성상 , 입고/ 출고/ 주문정보 등록을 엑셀로 작성하는 경우가 많다. 판매몰에서도 이러한 양식을 엑셀로 다운받을 수 있게 되어있다. 따라서 엑셀을 데이터화 하거나 데이터를 엑셀화 시킬 수 있는 것은 물류 개발자에게 있어서 필수역량이 되겠다. 나 또한 이런부분을 마스...

Next <Image> 태그에 대해서 내가 만든 컴포넌트에는 이미지 업로드 내용이 있다. <img> 태그를 사용하려 했으나 ? next 에서 import 해온 next/image 의 <Image> 태그를 사용하라고 알려준다. 그 이유는 next 에서는 이미지를 최적화 시켜주기 때문이다. Why Image tag? ...