너와 나의 프로그래밍

아마 대표적으로 유명한 Javascript Library Web Editor로 유명한 Quill은 Web에서 많이 봤을법한 텍스트 에디터다. WYSIWYG이라는 에디터로도 불리는데 WYSIWYG은 What You See Is What You Get, "보는 대로 얻는다"라는 문서 편집 과정에서 화면에 포맷된 낱말, 문장이 출력물과 동일하게 나오는 방식이라고 한다. 많은 라이브러리를 사용해본적은 없지만 그래도 항상 내 Needs에 맞는 텍스트 에디터 라이브러리는 Quill이였다. 그 중에 React나 Next.js에서도 접목시킬 수 있는 React-Quill이라는 Quill 기반 라이브러리까지 있어서 개발하기도 쉬워졌다. 특히 이 라이브러리는 Quill - Your powerful rich text edi..

API를 호출해서 Blob 타입의 Response 값을 받을 때 다운로드 기능을 구현하는 과정을 설명하려고 한다. 예를들어 "엑셀" 다운로드를 할 때 서버에서 만들어진 Excel을 클라이언트단에서 즉시 다운로드 기능을 구현하려면 아래와 같이 작업하면 된다. // API를 호출하는 코드 const getExcel = useCallback(async () => { try { const blob: Blob = await api.getExcel(); // 타입 명시 const url = window.URL.createObjectURL(blob); const link = document.createElement("a"); link.href = url; link.setAttribute("download", "mem..

Pagination 기능은 정말 프론트엔드 개발에 있어서 피할 수 없는 개발중에 하나라고 생각한다. 항상 개발을 할 때 마다 페이징 처리가 은근히 어렵다는걸 항상 느끼는데 구글링을 해봐도 각자 방식이 너무 다를뿐더러 너무 코드도 뒤죽박죽이라 최대한 깔끔하게 최대한 쉽게 구현을 해봤다. 개발 환경은 React.js와 Typescript를 기본적인 디자인은 Styled Component를 사용했다. 조건 🤔 다양한 페이지네이션의 조건들이 있지만 이번에 구현해본 조건은 아래와 같다. 한 페이지 안에 10개씩 보여주기 페이지의 번호는 5개씩 보여주기 페이지 번호를 눌렀을 때 해당 페이지를 보여주기 페이지 번호의 양 옆에 뒤로 건너뀌기, 뒤로 가기 / 다음 페이지로 가기, 앞으로 건너뛰기 첫 시작과 맨 끝으로 갔..

Dropdown 기능이나 SelectBox를 div와 input Element tag로 Custom하게 구현할 때 div의 목록을 클릭해서 클릭한 목록의 대한 값을 input value에 나타내주는 기능을 구현하는 도중 onClick을 했을 때 onChangeHandler로 변경하는 input value의 값을 어떻게 변경해야하는지 막막함이 다가왔다. input의 value의 값을 useState Hook을 통해 변경할 때 대표적으로 2가지 방법을 사용하고 있다. // 1. 단일적으로 선언 const [data, setData] = useState(""); // 2. Object에 리스트형식으로 초기값 선언 const [data, setData] = useState({ testData: "" }) 변경할..

MSW(Mock Service Worker)?🤔 프론트엔드 개발을 하다 보면 백엔드 API 개발 속도와 맞지 않아 화면 단을 먼저 개발하거나 자신이 직접 Dummy Data를 만들어서 억지로 개발하는 경우가 많이 있었다. 그때마다 억지로 JSON을 데이터를 만들거나 백엔드 API 개발을 하는 데까지 기다렸다가 겨우 일정에 맞춰 빡빡하게 개발하는 경우가 많았는데, 최근에 토이프로젝트를 하면서 찾게 된 게 MSW(Mock Service Worker)다. MSW는 말 그대로 Mock 데이터를 API 통신처럼 사용하게 해줄 수 있는 라이브러리이다. 백엔드에서 앞으로 나올 API의 명세서가 있거나 Request에 필요한 어떤 키값을 쓸 건지 전달만 받으면 따로 별도의 서버를 사용하지 않고도 프론트엔드 프로젝트에서..

Intro🙂 React의 많은 상태 관리 라이브러리들 중에 대표적인 라이브러리는 아마 Redux가 아닐까 싶다. Redux를 대표적으로 많이 사용하는 만큼 장점도 있지만 단점도 분명 존재한다. 처음 Redux가 나왔을 때는 Prop driling이 해결되는구나! 누가 만들었는지 이제 유지보수도 편하겠네! 라고 무작정 좋아했지만 그 만큼 복잡하고 Flux 패턴의 대한 정확한 이해와 사용하는데 따른 코드의 양도 방대해지고 Action과 Reduce, Store의 관리도 복잡해지기 시작했다. 그런데 최근 Recoil이라는 상태 관리 라이브러리라는 것이 나왔고 관심있게 보다가 사용을 해보니 Redux 보다 코드의 양이 적고 유지관리도 굉장히 쉬워서 러닝커브도 높지 않다고 생각이 들었다. Recoil?🤔 Reco..