React

애플리케이션을 만들다보면 정말 자주 쓰이는 모달...😂 그래서 재사용 가능하도록 modal 컴포넌트를 만들어 놓고 필요한 곳에서 가져다 쓰고 있는데, 문득 '내가 잘 사용하고 있나?' 라는 생각이 들었다. 기존에 쓰던 방식은 여전히 모달을 켜고 끄는 props를 전

우선 모달이란, 모달이 띄어지면 포커스와 제어권을 독점하여 기존 화면을 제어할 수 없는 기능을 뜻한다. 따라서 모달은 항상 최상위권에 위치해야 하고, 모달이 열려있을때는 기존 화면을 움직이거나(스크롤) 제어가 불가능해야 한다.여기서 핵심은 최상위권에 위치한다는 것이다.

유튜브 영상을 보다가 아래 문제를 마주하게 되었다. 유튜버인 개발자는 신입 면접을 볼 때 아래 문제로 기본기를 파악한다고 해서 내가 맞출 수 있는지 풀어보았는데, 아래 문제에서 틀리고 말았다. 근데 틀린것도 틀린거지만 아무리 보고 설명을 들어도 이해가 가지 않았다😱

사진으로는 잘 안보이지만, 아이콘에 커서를 갖다대면 '예약 확인 중 입니다' 라는 문구가 나온다. 생각해보니 이 기능이 앞으로 여러군데 쓰일 것 같아서 이참에 hook 으로 만들어야겠다는 생각이 들었다. 내가 직접 고민해서 hook 을 만들어 보는게 제일 좋지만, 어떻

React wysiwyg 사용하기 어드민 페이지를 만드는데 텍스트 에디터가 필요해서 몇가지를 찾아봤다. quill Toast UI React-draft-wysiwyg

어드민 페이지를 만드는데 antd 라이브러리를 사용해 UI 를 구현하고 있다. 그러다 문득 antd 에서 제공해주는 button, modal, input, table 을 사용하다보니 어떻게 만들었는지 궁금해지기 시작했다. 그 중 Table 컴포넌트를 사용하면서 내 프로

합성 컴포넌트 패턴은 하나의 컴포넌트를 여러 가지 집합체로 분리한 뒤, 분리된 각 컴포넌트를 사용하는 쪽에서 조합해 사용하는 컴포넌트 패턴을 의미한다.간단한 예시로 html의 select를 볼 수 있는데, select는 <select> 와 <option> 태

재사용 가능한 컴포넌트 만들기(1) - map 에 이어서 생각보다 컴포넌트 내에 자바스크립트 코드를 혼재해서 쓰는 경우가 많다는 걸 느꼈다. 전에 구현한 DynamicRender 로 map 메서드로 수정하는 과정에서 조건문에 따른 다른 컴포넌트를 렌더링 해야 할때 삼항

만들고자 하는 것 프로젝트에서 FAQ 페이지를 만들면서 이메일로 문의를 보낼 수 있도록 하기 위해 찾아보다 EmailJs 라는 라이브러리를 알게됐다. EmailJs 는 서버없이 이메일을 보낼 수 있는 매우 간편한 라이브러리이다. > https://www.email

제출하기 버튼을 누르면 이메일로 내용이 전송 되는데, 더블클릭 시 메일이 두번 전송되는 문제가 발생메일함을 확인해보니 동일한 메일이 두번 연속으로 들어온 것을 확인따라서 API 요청도 연속으로 두번 발생한다ㅠㅠ EmailJs 는 한달에 200번만 무료이고 그 이상은 돈