WEB Dev/Javascript | REACT | Node.js(29)
-
[React] react-beautiful-dnd 으로 요소 드래그 되도록 만들기
요소를 드래그 해 순서를 바꾸는 기능을 구현하고 있다. 드래그 앤 드랍은 HTML5에서 기본적으로 API를 제공하고 있다. 하지만 해당 기능을 일일이 적용해서 드래그 기능을 만들게 된다면 시간도 오래걸리고 어렵기 때문에 라이브러리를 사용한다. 엄청 다양한 라이브러리가 있고 여러 라이브러리를 테스트해봤는데 atlassian 의 react-beautiful-dnd 라이브러리가 가장 단순해서 적용하기 쉬웠었다. 하지만 실제로 내 프로젝트에 적용하기가 너무 어려워서 고전을 겪고 있다. 일단 순서를 바꿔야 하는 정보들을 map으로 돌려서 렌더링 하고 있고, 중첩을 지원하지 않는 다양한 제약이 있긴 하다. 그래서 다시 한 번 차근차근 개념에 대해 생각해보면서 글을 적으면서 만들어보고 성공이냐 실패냐를 정해야 할 거..
2022.04.03 -
[Node.js] sharp 로 이미지 리사이징 해서 multer로 업로드 하기
회사에서 만든 커뮤니티의 이미지 업로드 스펙을 계속해서 변경해왔다. 최초 개발은 외주로 진행했는데 대부분의 스펙을 기존 리뷰 페이지의 스펙을 가지고 와서 개발을 했다. 그런데 사용자 경험 상 이슈가 다양하게 발생하여 현재 커뮤니티 이미지 업로드 문제에 오래 매달리고 있는데, 현재 진행하는 이미지 리사이징 프로젝트에 대해서 기록하려고 한다. 최초 개발 1MB 제한으로 4개까지 업로드 할 수 있도록 제한 / 1개씩 개별 선택 ▶ 최초 개발 시 서버 용량과 로딩 속도에 대한 이슈로 1MB 제한을 걸어두었다. ▶ 모바일에서 바로 업로드 할 경우 이미지 업로드 시 하단의 크기 선택을 이용해 사용자가 직접 크기를 줄이지 않는 이상 1MB 이내로 커뮤니티 이미지 업로드 불가 ▶ 이미지 용량이 생각보다 커서 1MB 제..
2022.02.24 -
[Javascript] 배열 내 객체 정렬하기 (sort 콜백 함수)
리스트를 드래그 해서 인덱스 순서를 바꿔주는 작업을 하고 있는데 드래그 해서 내려 놓으면 배열 내의 특정 값들을 바꿔주는 작업은 완료했다. 여기에서 자동으로 인덱스를 sorting 해주기 위해서 useEffect에 객체의 key 값으로 오름차순 sorting을 해주려고 한다. 내가 만든 배열 내 객체는 다음과 같다. [ { "goal_id": 0, "next_goal_id": 1, "title": "첫 번째 목표", "privacy": "PUB", "box_color": "", "title_color": "#3CB371" }, { "goal_id": 1, "next_goal_id": 2, "title": "두 번째 목표", "privacy": "PRI", "box_color": "", "title_col..
2022.02.13 -
[React] 클릭한 부분의 e.target 값 알아내기 (e.currentTarget)
투두리스트를 만들면서 목표 > 할일 구조를 만들어야 한다. 클론하고 있는 투두메이트에서는 목표를 '클릭'했을 때 하단에 input이 나오도록 되어 있다. 해당 목표 구조를 만들기 위해서 MUI UI 라이브러리를 이용해 아래와 같이 HTML DOM 구조를 생성했다. 내가 원하는 것은 에 onClick을 넣고 e.target.id 값을 얻어서 input hidden에 전달하는 것이었는데 실제로 클릭 이벤트를 넣어보니 누르는 위치값에 따라서 Button의 e.target 값, ListItem의 e.target 값, span의 e.target 값 이 나타났다. //목표 클릭 시 이벤트 핸들러 function clickTodoHandler(e){ console.log(e.target) } 내가 원하는 것은 But..
2022.02.03 -
[React] MUI Datepicker로 달력 구현 시 한글로 변환
MUI Datepicker language 설정 바꾸는 방법 (한글화) MUI는 Date-fns 에 의존하고 있는데 여기에서 제공하는 지역 설정을 적용하면 된다. Date-fns 설치는 아래 명령어를 사용한다. yarn add date-fns npm i date-fns 그리고 아래 패키지를 import 해주고 import DateFnsUtils from "@date-io/date-fns"; // or import AdapterDateFns from "@mui/lab/AdapterDateFns"; import { ko } from "date-fns/locale"; return 되는 부분에 locale props를 전달해주면 된다. 영어가 디폴트이고 locale={ko}는 한국어다. 나머지 언어는 공식 문서..
2022.01.22 -
[React] 카카오 계정 로그인 연결하기 테스트
투두메이트 클론 토이프로젝트를 진행하고 있는데 로그인으로 SNS 로그인 붙여보자고 주장한 사람 나야나... 우선 카페24가 제공하는 카카오 로그인이 너무 쉬워서 뚝딱 할 줄 알았는데 자체적으로 프론트 개발하고 서버 개발하고 데이터베이스 연결하는 것은 또 다른 문제였다. 실제 우리 서비스에 붙여보기 전에 테스트 해보려고 한다. 연결 내용은 아래 블로그를 참조하여 연습한 내용이고, 기본 앱은 내가 만들어 둔 앱을 사용한다. React.js 카카오 로그인, 사용자 프로필 가져오기 - Vlee's Tale 개요 이번 포스트에서는 React에서 카카오의 REST API와 Javascript SDK를 이용해 카카오 로그인을 구현해보겠습니다. 동작 순서는 다음과 같습니다. 카카오 로그인 링크 클릭 -> 인가 코드 발..
2022.01.19