😆 My name is Ez : 쉽다 쉬워 개발life

이번 프로젝트는 가장 작은 아톰형식의 컴포넌트부터 시작한다. 그래서 각 같은 공통컴포넌트를 먼저 하나 만들어보고 리뷰하기로 했다. 오늘까지 작업은 했고 내일 같이 모여서 리뷰를 하기로 했다. 우리 프로젝트에서 아주 많이 사용되는 Input을 먼저 만들기로 했는데, InputBasic이라고 정했다. 단순 텍스트뿐 아니라 , 숫자, 음수, 소수점, 계좌번호, 온도, 전화번호 등.. 다양한 형태의 텍스트를 입력받고 컨트롤해야 한다. 그리고 인풋 내부 라벨(단위 표기), 검색창의 돋보기 등 다양한 형태도 가지고 있어서 어떻게 처리할지 고민을 많이 했다. 일단 CSS 관련된 부분은 퍼블리싱이 나오면 적용한다고 생각하고 각각의 위치를 먼저 잡았다. Prop로는 간단하게 value, setValue, classNam..

새롭게 다시 진행하는 프로젝트에서는 Moment.js를 버리고 Day.js로 변경하면 좋겠다고 했다. 더 이상 업데이트가 진행되지 않기 때문이다... (이 부분은 매우 불안😥) Moment.js 홈페이지에만 가도 메인 배너옆에 이런 글이 적혀있다. (다른 권장 사항들을 안내) Moment에서 추천해 준 라이브러리 다운로드 현황이다. 그중에서 Day.js를 선택한 건 사용방법이 Moment.js와 동일하고 가벼운 용량 때문이다. 일단 변경하는 부분에서 굉장히 편리하다. 설치방법 npm install dayjs --save 사용방법 (간단한 사용법만 소개) /** 1. 날짜 객체 생성하기 */ //현재 날짜 객체 생성 dayjs(); // 원하는 날짜 객체 생성하는 방법 dayjs('2023-07-24');..

Atomic Design Pattern에 대해서 공부하고 지금 하고 있는 프로젝트에서 Storybook을 적용해서 컴포넌트를 관리하면 좋을 것 같다는 생각이 들었다. 2023.07.20 - [⌨️ Web Front-End/NextJs] - [Design Pattern] : Atomic Design (아토믹 디자인) 사실 처음 리액트를 배웠을 Storybook에 대해서 들었지만 그때는 리액트조차 이해하지 못한 상태라서 그냥 듣고 넘겼는데 갑자기 떠올랐다. 시니어분에게 적용하면 좋을 것 같다고 말씀을 드렸는데... 사실 뭘 할 줄 알아야 적용할 텐데.. 그래서 며칠 전부터 시간 될 때마다 공식문서와 블로그들을 참고해서 기본 세팅과 버튼 정도 구분하는 것까지 해보았다. 1. StoryBook이란? StoryB..

🤦🏻‍♂️ 모르는 게 너무나도 많다... 오늘은 아침 Front개발자 회의를 하다. 백앤드 시니어분께서 input에 타이핑만 해도 모든 화면에서 랜더링이 된다고 해서 어떻게 처리하면 좋을지 프론트 시니어분께 질문을 하셨다. 그때 하신 말씀이 lodash - Debouncing을 사용하면 좀 줄어들 거라고 하셨는데 난 무슨 말인지 몰라서 ㅎㅎ 메모장에 개념만 써두었다. 정말 모르는 게 너무나도 많다... (개념은 가볍게 익히고 실제로 적용하는 방법정도 작성해볼까 한다.) - lodash 사용 예정 1. Debouncing(디바운싱) 디바운싱이란? 유저가 요청을 보낼 때 일정한 시간격차를 두고, 연속에서 발생한 이벤트를 하나로 묶어서, 처음이나 마지막 한 번에 해당 요청(이벤트)을 실행하는 방식을 말한다. ..