이번에 서비스를 새로 리뉴얼하면서 Jquery에서 Next.js 기반으로 서비스를 새로 구성했다. 서비스 특성상 사용자가 작성하는 Form과 데이터를 보여주는게 핵심적인 기능인데, 안정적인 서비스와 관리를 위해 필수적으로 사용해야하는 오픈소스중 하나가 React Hook Form 이였는데, 어떤식으로 사용했는지, 사용하는데 불편한점이나 처음부터 알았으면 좋았을 것 같은 부분들을 중심으로 이야기를 풀어가려한다. React Hook Form 이란? React에서 전반적인 Form Input 관리를 위해 DX, UX, 퍼포먼스 중심으로 설계된 오픈소스. 여러개의 input을 복합적으로 사용하거나 복잡한 Input validation을 처리할 때 특히 유용하게 사용할 수 있다. 어떤식으로 사용하나요? React..

typescript-kr을 보고 공부하고 정리한 글 입니다. 유틸리티 타입 1. Partial 제네릭으로 받은 T 의 모든 타입을 선택적으로 만든다. type Test = { name: string; desc: string; } const obj: Partial = { name: 'test', desc: 'test desc' } 2.Readonly 읽기 전용으로 만듬 type Test = { name: string; desc: string; } const obj: Readonly = { name: 'test', desc: 'test desc' } // Error readonly property obj.name = 'asdf'; 3. Record K → object name T → object value ..

Immer : 독일어로 Always(항상)이라는 뜻. immer는 항상 불변성(immutable)을 유지할 수 있도록 관리해주는 오픈소스 라이브러리 입니다. React에 국한되지않고 Javascript의 **변경할 수 없는 데이터 구조**를 사용해야하는 모든 곳에서 사용할 수 있습니다. 불변성(Immutable) 저기 변경할 수 없는 데이터 구조 가 무엇인가를 먼저 살펴봅시다. Javascript는 변경할 수 없는 원시값 이라는게 존재합니다. 예를들어 let을 사용해서 데이터를 저장하고 변경한다는걸 생각해봅시다. let data = "DATA 입니다." // 1 data = "변경된 DATA 입니다." // 2 console.log(data) // 변경된 DATA 입니다. 첫번째 data에 값이 할당되는..

블로그를 고를때 많은 고민을 했다. `velog`로 갈지, 아니면 브런치로 갈지. 그것도 아니면 github.io페이지를 만들어서 운영할지. 실제로 gatsby의 테마를 사용해서 어느정도 꾸며두긴 했다. (dding-g.github.io) 결론적으로는 티스토리를 선택했는데, velog와 티스토리를 사이에 두고 많이 고민했다 velog는 피드 기능이 있어서 사람들에게 내 글을 즉각적으로 보여줄 수 있다는 장점이 있지만 광고를 붙일 수 없었고, 내가 작성한 글의 통계를 볼 수 있는 기능이 없었다. 하지만 티스토리는 광고는 붙일 수 있지만 다른 사람들에게 내 글이 전달되는 속도는 velog보다 훨씬 느렸다. 결론적으로 티스토리를 선택했는데, velog를 조금 사용할 때 몇 가지 글을 쓰는 중 티스토리에는 지원..

사랑합니다. 선생님 (출처) 개요 TOC. Table Of Content의 약자로 콘텐츠 제목들을 테이블 리스트 형식으로 주욱 나열한 걸 말한다. 티스토리 보다는 회사 Notion 이나 개인 Notion에 글을 쓸 일이 많았다. 이전에는 몰랐는데, 노션에 회의록을 작성하거나 위키를 작성할 때 어김없이 필요했던 것이 목차이다. velog에서는 사이드 목차 기능이 있는데 티스토리에는 따로 없기 때문에 tocbot이라는 오픈소스를 이용해서 목차를 만들었다. 2020년 8월 이후 업데이트가 없지만 망가지면 고쳐 쓰지 모 ㅎㅎ 과정 1. html 테마 편집 테마 편집 화면으로 접속한다. 블로그 관리 → 꾸미기 → 스킨 편집 → html 편집 2. tocbot 불러오기 먼저 안에서 tocbot을 불러온다. css와..

라이브러리 knockout MVVM(model, view, view Model) 패턴과 템플릿을 통해 간단하게 동적 UI를 구성할 수 있게 해주는 라이브러리 backbone client side에 간단하게 MVC패턴을 적용 시킬 수 있는 경량 프레임워크 자바스크립트의 핵심 개념 객체 JS의 거의 모든 것은 객체이다. boolean, number, string, null, undefined 은 객체가 아니기 때문에 "거의" 라고 표현함. 제외한 나머지는 모두 객체임. 하지만 null, undefined를 제외한 나머지는 객체로 다룰 수 있음. 함수 JS에서 함수도 객체로 취급한다. 일반 객체보다 조금 더 많은 기능이 있는 객체 라고 이해하면 될 듯. 프로토타입 모든 객체는 숨겨진 link인 prototyp..