개발

들어가며 이 포스팅에서는 React를 주로 사용하는 프론트엔드 개발자 대상으로 작성했으며 tailwind의 주요 컨셉과 장점, 설치방법, 다른 css 프레임워크와 비교된 사용 방법에 대해 다룹니다. Tailwind: 만족도 1위 Css 프레임 워크 tailwind는 2017년 11월에 출시한 css 프레임워크다. 사용량은 부트스트랩이 현저하게 높지만 몇 년 사이에 바로 치고 올라온 모습을 볼 수 있다. 특히 다른 프레임워크보다 만족도가 현저하게 높다. 사진에는 짤려서 나오지 않지만 부트스트랩은 만족도 9위이다. 과연 대체 다른 프레임 워크랑 얼마나 다르길래 만족도가 높은 것일까? Tailwind 주요 컨셉: Utility Class tailwind는 유틸리티 지향하여 유틸리티 클래스를 사용한다. tail..

이 포스팅은 자바스크립트 내장 객체 Date를 다루는 방법과 문제점, 문제점을 해결하기 위한 다른 라이브러리에 대해서 다룹니다. 💡 요약 자바스크립트 내장 날짜 API는 일관적이지 못해서 시간 관련 라이브러리를 사용하는 것이 좋다. 가장 유명한 moment.js 라이브러리는 사망선고가 내려졌다. 웬만해선 사용하지 말자. 대체 라이브러리는 dayjs, date-fns, luxon 등이 있다. 이중에서 마음에 드는 라이브러리 고르면 된다. 오늘 날짜를 생성하는 방법 자바스트립트에서 날짜를 생성하는 방법은 두가지다. 첫 번째는 Date() 함수만 호출하는 방법, 두 번째는 new Date() 로 호출하는 방법이다. const 함수로호출 = Date(); console.log(함수로호출) // Fri Jun 2..

들어가며 이 포스팅은 React TDD를 진행하기 위해 Mock 서비스를 만들고 싶어하는 사람을 대상으로 작성했습니다. MSW(Mock Service Worker)의 작동 방식과 설정 방법에 대해 다룹니다. 💡 요약 Mocking이란 실제 서비스 작성하기 정에 클라이언트에서 테스트를 하기 위해 가짜 서버를 만드는 것이다. MSW는 monkey patch 방식을 사용해서 Mocking 라이브러리 중에서 실제 서버와 가장 비슷하게 모킹해준다. MSW은 코드 작성하는 방법이 Rest, Graphql API 사용법과 비슷해서 편하다. Mocking의 정의와 장단점 일단 Mocking이란 말 그대로 모조품이다. 실제 서비스처럼 작동하는 가짜 서버를 만드는 것이다. 굳이 가짜 서버를 만드는 이유는 아래 장점을 확인..

해당 포스팅은 로그인 회원가입시 유효성 검사하는 방법에 대해 다룹니다. 💡 요약 React에서 유효성 검사하는 방법은 3가지가 있다. input 태그 고유 속성 사용, 라이브러리 없이 직접 script작성, 라이브러리 사용. 간단한 유효성 검사는 직접 작성해도 된다. 유효성 검사할 내용이 복잡해진다면 라이브러리를 사용하자. 라이브러리는 react hook form을 권장한다. 유효성 검사란 유효성 검사는 입력받은 데이터 값이 맞는지(유효한지) 확인하는 것을 의미합니다. 예를들면 비밀번호에 “8자리 이상 두 종류 이상의 문자 구성”라는 유효성 조건이 있다면 “1111”이라는 비밀번호를 입력할 경우 통과되지 않습니다. React에서 유효성 검사를 구현하는 방법은 크게 3가지가 있습니다. 첫 번째는 html요..

이 포스팅에서는 React 폴더 구조 형식에서 대표적인 방법 두 가지, 자주 사용하는 폴더명, 실제 서비스 폴더 구조 예시 등을 대해 다룹니다. 💡 요약 리액트 공식문서에서는 정확한 가이드를 제시하지 않는다. 권장 사항은 딱 두개이다. 3번 혹은 4번 이상의 중첩을 피하기. 너무 깊게 생각하지 않기. 사용되는 폴더 구조 중 인기있는 방법은 두 가지가 존재한다. 기능이나 라우트에 의한 분류와 유형에 의한 분류이다. 인기는 후자가 더 많다. 기능이나 라우트(페이지)에 따른 분류 라우트로 구분된 페이지 폴더 안에 같이 두는 방법이다. 페이지에 필요한 테스트 파일과 UI를 제작하여 한 폴더에 넣는다. 역할에 따른 분류 페이지가 아닌 역할에 따라 컴포넌트를 분리하는 것이다. 이 경우에는 컴포넌트 자체는 로직이 들..

들어가며 이 글은 텍스트 복사 붙여넣기 기능 구현을 위해 execCommand(), execCommand()를 사용하지 말아야하는 이유, Clipboard API사용법에 대해 다룹니다. 💡 결론 document.execCommand()는 브라우저마다 일관적이지 않은 엘리먼트를 생성해서 사용을 지양해야한다. 대신 Clipboard API의 readText()와 writeText() 메서드를 사용한다. Clipboard API는 브라우저에서 완벽하게 지원하지 않으니 확인하고 사용하기 👎 기능 구현 방법1 document.execCommand() 문서의 편집 가능한 영역을 변경할 수 있습니다. 대부분의 명령어는 문서의 선택 영역에 영향(볼드, 이탤릭 등)을 미치고 나머지는 새 요소를 추가(링크 추가)하거나 전..