냥냠

Custom Hook 이란?반복되는 로직을 분리하여 재사용할 수 있게 만든 것 *2가지 조건*- 이름이 use로 시작되어야 한다. - react hook을 포함해야 한다. (useState, useEffect .. ) react의 특별한 기능이 아니라 훅 디자인을 따르는 관습이다.    -공식문서- *적절한 추상화레벨을 가져야 재사용하기 쉬우니 너무 구체적이거나 추상적인 로직은 지양하며 커스텀 훅을 사용해보자[요구사항]나는 관리자 페이지를 만들면서 목록을 만들 때가 많은데 이때 항상 필요한 기능이 체크박스이다.상품이나 회원 목록 앞에 체크박스를 두어 가장 상단의 체크박스를 클릭했을 때는 전체선택이 되고, 개별선택, 다시 클릭했을 때는 선택된 항목 삭제 등의 기능이 있어야 하고 마지막으로 선택된 항목들은..

이렇게 달력모양에 원하는 날짜를 선택할 수 있는 datepicker 기능이 필요해서 라이브러리를 찾던 중 react에서는 편리하고 가장 많이 쓰이는 라이브러리인 react-datepicker를 사용하기로 했습니다.  *현재 관리자페이지 템플릿을 coreui를 사용하고 있는데 datepicker은 유료서비스라서 다른 라이브러리를 찾음https://reactdatepicker.com/ React Datepicker crafted by HackerOne reactdatepicker.com 공식문서가 엄청 쉽게 나와있고 이 라이브러리를 쓰는 사람도 많아서 처음 접해도 아주 쉽게 사용할 수 있을 것 같습니다!예시에도 많은 기능이 있어서 필요한 기능을 바로 복붙해서 쓰면 좋을 것 같아요. 저는 그냥 달력 아이콘, ..

1 ) react-quill을 이용해서 텍스트 에디터 넣기 (+리사이징까지)1. 라이브러리 설치  2. 필요한 모듈, 포맷, 테마 추가* 모듈은 useMemo로 감싸줘야 한다.  3.  여기까지 하면 기본 에디터가 완성이 되고 나는 이미지 크기를 조절해주고 싶어서 라이브러리를 찾아봤다. 여러가지를 사용해본 결과 https://www.npmjs.com/package/quill-image-resize-> https://velog.io/@jsy7517/React-Quill%EC%97%90%EC%84%9C-Image-Resize-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0이거나https://www.npmjs.com/package/@xeger/quill-image-actionshttps://..

쇼핑몰을 구현하면서 에디터랑 이미지 업로드하는 부분이 필요해서 에디터는 react-quill을 사용하고 이미지 업로드는 태그로 구현했다.  이미지를 업로드하고 처리하는 과정에서 에디터와 파일 업로더 둘 다 base24 코드로 저장하기 때문에 길이가 엄청 길다. 그래서 다들 서버를 통해서 url로 바꿔서 저장한다.  url로 바꿔주기 위해서 AWS S3을 사용하기로 했다. 그럴려면 버킷을 먼서 만들어주고 권한, 역할, 정책 관련으로 정해줘야 할 게 많은데 나는  아래의 블로그를 참고했다 지금이랑 조금 달라진 부분도 있어서https://jforj.tistory.com/351https://make-somthing.tistory.com/67https://make-somthing.tistory.com/68중간에..

쇼핑몰 프로젝트를 하면서 회원가입 구현 내용을 기록하고자 한다.  *스타일은 mui로 해줌 📍stepper  참고하는 사이트의 회원가입에서는 약관동의 -> 정보입력 -> 가입완료 순서로 stepper로 회원가입을 보여준다. 그래서 mui의 stepper을 사용하기로 했다.  이건 그냥 가져와서 필요없는 부분만 삭제했다.step 개념과 Next, Back 버튼을 놔두고 나머지는 버렸다 . 그리고 각 스텝 별로 각각의 컴포넌트를 만들어서 넣어주었다. 이 과정에서 다음 스텝으로 넘어가려면 어떠한 조건을 충족해야 한다. (약관동의에서 필수 약관을 모두 체크해야 next 버튼을 활성화)(정보입력에서 각 유효성 검사를 만족한 텍스트필드를 입력했을 때 next 버튼 활성화) import React, { useSta..

drawer을 구현하려고 구글링을 하던 중 react-portal을 이용한 drawer/modal 을 구현한다는 글을 보게 되었다. react-portal이라는 것을 처음 들어보기도 했고 이를 보던 중 알고 있어야 할 개념이 DOM 개념이었다.  React는 사용자 인터페이스(UI)를 효율적으로 구축하기 위한 자바스크립트 라이브러리이다.react의 기본원리는 크게 1. 컴포넌트 기반 구조 2.Virtual DOM을 사용 이렇게 나눌 수 있다.  컴포넌트 기반 구조인 것(+재사용)은 알고 있었고, 가상돔을 사용한다는 내용은 잘 모르는 것 같아 기록하고자 한다.  DOM (Document Object Model) : 브라우저에서 실제 화면을 구성함 이를 변경할 때는 렌더링 비용이 크기 때문에 react에서는..

쇼핑몰 프로젝트를 진행 중에 관리자 페이지 - 상품 - 카테고리 관리 페이지를 구현하는 내용을 기록하고자 한다. 아직 db랑 연결되어 있지 않은 상태이기 때문에 이렇게 해놓고 추가 수정 삭제 기능 틀 먼저 잡기const initialCategories = [ { categoryId: 1, categoryParent: null, categoryName: '대분류1', categoryDepth: 1 }, { categoryId: 2, categoryParent: 1, categoryName: '중분류1', categoryDepth: 2 }, { categoryId: 3, categoryParent: null, categoryName: '대분류2', categoryDepth: 1 }, { categor..

이전에 완성했던 넷플릭스 웹 사이트를 모바일 사이즈로도 볼 수 있도록 반응형으로 구현하였다.https://sy22-netf-prj.netlify.app/ React App sy22-netf-prj.netlify.app 모바일 크기가 평균 300중후반,데스크탑 크기가 1024 이상 1500-1900까지 보여지기 때문에 엘리먼트들의 크기를 조절하는 것에는 한계가 있었고구성을 바꿔줘야 하는 부분도 있었다.  우선 기존에 구현해놨던 영화카드 크기는 css 파일에서 정해놨었고 이를 미디어쿼리로 조정해서 썼다. @media (max-width: 1024px) { .card2 { width: 175px; height: 280px; }} react-responsive를 써서 전역적으로 사용할 수 있게 하..