# DND

yedol1

👨‍💻 사건 Beautiful-dnd 를 통해, 드래그 앤 드랍을 구현하였다. Starting Memeber 의 공간을 각 포지션 별로 드랍 공간과 드래그 공간을 만들고, Sub Member 의 공간을 드랍 공간과 드래그 공간을 만들었다. 각 공간에 위치한 선수는 UID 를 통해 구별을 하도록 하였다. Drag N Drop 컴포넌트 > 🌎 DragDropContext : Provider 와 같은 dnd 상태를 제공해주는 역할, onDragEnd 를 통해 이벤트 등록가능 ( 빨간색 ) 🤏 Droppable : Drop 가능한 영역 표시 ( 검은색 ) 👌 Draggable : Drag 가능하도록 만들어줌 ( 초록색 ) 위 사진에서 좌측이

yeopju_5

Fcm 푸시 알림을 구현하는 과정 중 기본 세팅과 Config 파일 작성 과정은 생략하려고 한다. 세팅 과정 중 일반적인 블로그들과 다른점이 있다면 FirebaseMessaging 객체를 사용할 때마다 getInstance로 불러와 사용하지 않고 빈으로 등록 후 주입받아 사용했다는 점이 전부이다. sendAsync Firebase 라이브러리에는 sendAsync라는 비동기 처리를 해주는 메서드가 존재한다. 하지만 이 메서드는 DB에 저장해주는 작업까지 비동기로 처리해주지는 않으며, 일반적인 서비스에서는 알림을 전송한 후 DB에 저장하는 경우가 대부분이다. 해당 작업까지 비동기로 처리해줘야만 데이터 정합성 문제를 해결할 수 있다. @Async 처음으로 생각한 비동기 처리 방법은 단순히 푸시 알림 로직과 DB 저장 로직에 포함된 메서드를 생성해 Async Annotation을 붙이는 방법을 생각했다. 하지만 이렇게 할 경우 알림 기능이 추가된 메서드

yeopju_5

문제 상황 이전 DORO 플랫폼 구축 프로젝트에서 서버를 운영하다보니, 생각보다 많은 부분에서 예외가 발생했다. 예외가 발생했음에도 이 사실을 모른채 방치하게 되는 일이 생기기 시작했고 예외가 발생할 때마다 EC2 인스턴스에 접근해 직접 로그를 확인해야한다는 번거러움이 있었다. 이번 프로젝트에서 이를 방지하기 위해 서버에 슬랙을 연동하게 되었고 그 과정을 이 글에 써보고자 한다. 해결 과정 Incomming Webhook 슬랙 알림은 Incoming Webhook을 사용했다. Webhook URL을 만드는 방법에는 과 , 두 가지 방법이 있다. 이 중 앱 추가 방식은 URL을 만든 사용자가 이용을 중단할 경우 URL이 비활성화 된다는 단점이 있기 때문에 앱 생성 방식을 선택했다. Slack Appender 처음으로 고려한 방법은 Slack Appender라는 오픈소스를 사용하는 방법이었다. 이는 Logback에 의존하여

seondal

네컷사진 찍을 때면 늘 포즈가 고민되지 않나요? 포즈피커가 포즈 고민을 해결해 드릴게요! 미리 포즈 고민할 필요 없이, 찍기 직전에 빠르고 재밌게 포즈를 추천해 주는 포즈피커를 이용해 보세요! > - 👀 포즈피커 바로가기 💌 피드백 및 문의 남기기 📸 인스타그램으로 소식받기 📹 데모영상 🐈 깃허브 레포 [DND 9기](https://velog.io/@seondal/%EC%97

seondal

🤷🏻‍♀️ DND가 뭔데? Designer & Developer 라는 단어의 줄임말로 아주 직관적이다. 말 그대로 디자이너와 개발자가 사이드 프로젝트를 진행할 수 있게 해주는 전국연합 IT 동아리다. > https://www.dnd.ac/ 공식 사이트에 프로젝트나 운영진 탭의 내용들이 최신 내용들까지 잘 반영되어 있어서 관리가 잘 되는 동아리라는 인상을 받았다. ❓ 지원 동기 저 공식사이트의 프로젝트 탭에 내 프로젝트를 넣고 싶었다. 사실 정말 많은 개발 동아리들이 존재하지만 내가 DND를 선택한 이유는 다음과 같다 1. 이론보다는 경험을 하고싶다 SOPT, GDSC, CEOS, 교내개발동아리.. 등등 다양한 개발 동아리에서 활동하며 개발을 공부하고 프로젝트를 진행했기 때문에 노베이스를 위한 교육 목적의 세미나나 세션은 더이상 필요하지 않다고 느꼈다 (차라리 혼자 강의랑 책으로 공부하면 공부했지). 이제는 이론적으로 배우고 클론

hwsa1004

이전 포스팅 ➡️ DND 9기 활동 시작 > DND에 궁금하다면? ⬇️ DND 8기 합격 후기 DND 8기 회고 저번에 작성했던 DND 9기 시작 포스팅을 올린지 얼마나 됐다고 벌써 마무리 회고 글을 작성하고 있네요,, 작성 글 마지막 문단 쯤에 커리어적으로 한층 더 발전할 수 있는 시간이 되었으면 좋겠다고 작성했는데, 진짜 그렇게 된 것 같아서 뜻 깊은 것 같습니다. DND 활동이 얼마나 유익한지는 이전 포스팅에서 많이 설명했기에 이번에는 프로젝트 중심의 포스팅을 진행해보려 합니다. 포스팅에서 사용된 이미지들은 전부 저희 디자인팀에서 제작했습니다,, 대단하죠!? 😆

jeongmin1625

받아온 데이터 예시 javascript function compareDates(a, b) { const dateA = new Date(${a.date} ${a.time.split(" - ")[0]}); const dateB = new Date(${b.date} ${b.time.split(" - ")[0]}); return dateA - dateB; } const sortedAppointments = appointment.sort(compareDates); const [tasks, setTasks] = useState({ 대기중: sortedAppointments, 진료중: [], 완료: [], }); > 드래그가 시작될때 일어나는 함수 이 함수는 (e, appointment, status) 세 개의 매개변수를 받는다. 첫 번째 매개변수인 e는 드래그 앤 드롭 이벤트, 두 번째 매개변수인 appointment는 드래그하는 항

1000_yj

✨ Drag-and-Drop 현재 개발중인 프로젝트에서 드래그 앤 드롭으로 아이템의 순서를 바꾸거나 삭제하기 위해 기능을 직접 js(ts)로 구현하려다가 시간이 오래 걸릴 듯 하여 외부 라이브러리를 사용하기로 했다. React-beautiful-dnd라는 이름의 라이브러리를 설치해주었다. 구조 : 드래그 앤 드롭을 가능하게 허용할 부분을 감싸주는 태그 : 드래그를 끝낸 시점에 호출되는 함수 (필수 속성) : 드롭이 가능한 부분을 감싸주는 태그 : 구분자 (필수 속성) children은 반드시 함수여야 함 (JSX 태그X) -> 따라서 함수로 JSX 태그를 리턴하는 형식을 자식에 넣어주어야 한다 Droppable이 내부 함수에 전달해주는 인자 : 내부 JSX 태그에 속성을 부여해줘야 한다 : 드래그가 가능한 부분을 감싸주는 태그 : 구분자 (필수 속성)

hwsa1004

🤩 즐거웠던 DND 8기 : 회고 DND 8기 이후로, 우아한테크 코스를 준비하게 되면서 확실히 프로젝트나 활동에 집중했던 것이 아닌 공부에 전념을 해왔었다. 그렇게 쭉 지내다보니 프로젝트나 활동이 이번년도에 많이 줄어들어버린게 된 것 같아 시간을 좀 더 할애하더라도 프로젝트나 대외활동을 같이 진행하는 것이 좋다고 생각했다. 마침 DND 9기가 시작되려하고 있었고 저번 기수에 참여했던 나는 운좋게 다음 기수에 또 합류할 수 있게 되었다. 공부에 집중하느라 서버 개발에 감각이 약간 떨어진 것 같아서 복습도 하고 새로운 프로젝트를 시작할 준비를 하고 있다. 아마, DND 외에도 다른 프로젝트를 하나 더 진행하게 될 것 같은데 이는 나중에 포스팅에서 다시 설명하도록 하겠다 👀 🤔 다시 한번 DND는 ![](https://velog.velcd

ginie

DND란? > "프로젝트에 즐거움을, 모두에게 기회를" 8주 동안 개발자와 디자이너가 협업하는 사이드 프로젝트를 진행할 수 있는 IT 동아리이다. 위의 슬로건을 바탕으로 힘께 성장하는 것을 목표로 한다고 한다. 🧐 DND 지원 동기 나는 올해 대학교 3학년을 거치고 있는 소프트웨어전공 대학생이다. 1학기 종강이 다가오면서 방학 중 무엇을 할 지에 대한 고민이 있었는데, 당시에는 DND의 존재 자체를 몰랐기 때문에 그냥 열심히 공부하고 개인적으로 프로젝트를 진행해봐야겠다는 마음뿐이었다. 그러던 중 친구가 방학 중에 DND를 지원할 것이라며 함께 지원해보자는 말을 해주었고, 이를 통해 DND를 알게 되었다. 이후 DND를 찾아보았더니 방학 중에 하기 좋은 동아리 같았다. 방학 중에 진행되

thsamajiki

**프로젝트에 즐거움을 모두에게 기회를** DND 9기 지원 및 합격 후기에 대해 남겨보려고 합니다. DND란? DND는 개발자와 디자이너가 모여 8주간 하나의 프로덕트를 만들어낼 수 있도록 팀을 구성해주는 연합 동아리입니다. 이전부터 다양한 IT 연합 동아리에 대해 많이 알아보고 있었고, DND는 특히 교육 기회의 평등함을 위해 지식 나눔 세미나를 적극적으로 운영하고 있어서 인상적이었고 팀 프로젝트 개발뿐만 아니라 해커톤 운영이나 세미나 등도 하고 있었기에 좋은 기회가 될거라고 생각하여 지원하게 되었습니다. DND 9기 모집일정 DND 9기 모집 시 공개되었던 일정은 아래와 같습니다. 6월 7일 ~ 6월 23일 : 서류접수 6월 30일 : 합격자 발표 7월 2일 : 오리엔테이션 7월

eeeasy-code

드디어 DND 9기 합격했다!!! 내가 지원한 파트는 서버 개발 파트이고, 이번에 지원자는 500명 정도 지원했다..!! 지원서 작성에 정말 진심을 담았더니 좋은 결과가 있는 것 같다. 벌써 사람들과 프로젝트 진행할 생각에 신난다고앞으로 진행하게 될 프로젝트를 성실하게 진행해보려고 한다. 가보자잇~!

sumi-0011

문제 상황 기존에 framer motion의 Reorder 컴포넌트를 이용해서 DND를 구현하고, 동작되는 것을 확인해보았었다. 그런데 어느 순간 개발 모드에서 동작하지 않는 것을 발견하였다. 우리는 스토리북 또한 쓰고 있어서 스토리북을 확인해 보았는데 스토리북에서는 정상적으로 동작했다. 그럼 뭐가 문제지..? 문제 발견 내가 크롬 환경에서 mobile 화면으로 테스트하기 위해 모바일 모드로 개발을 하고있었다. 모바일 모드일 때는 PC에만 있는 pointer 이벤트가 없어지고, touch 이벤트만 동작한다는 것을 간과했던 것이다. 실제로 PC화면을 확인해보니 정상적으로 돌아가고 있었다. ![](https://velog.velcdn.com/images/sumi-0011/

soplay

react를 다루면서 react-dnd와 같은 다양한 드래그-앤-드랍 라이브러리들이 존재하지만 아주 간단하게 핵심 로직만 직접 React + typesciprt로 구현해 보겠습니다! 1. 데이터 타입 정하기 > DnD만들 구현하더라도 이를 구현하기 위한 데이터가 필요하기 때문에 데이터의 타입을 지정하겠습니다 이를 기반으로 IDragData[]의 형태를 가지는 데이터를 만들어서 조작하면 될 거 같습니다.! 2. useDragData() hooks 구현 > 이름을 어떻게 정할까 고민히다가 useDragData()라고 정했지만 다른 이름으로 사용하셔도 문제가 없습니다..! 구현을 하면서 필요한 {filteredData,changeType, addItem}를 구현하겠습니다. 3. 화면에 보여주기 위한 ItemList, ItemCard 컴포넌트 구현 >ItemList.tsx > ItemCard.tsx 해당 요소는 드래그가 가능해

sumi-0011

drag and drop을 구현할 때, 드래그 하는 아이템을 직관적으로 보여주기 위해 box-shadow, background-color를 조작해보자 시작 코드 > 참고 링크 List.tsx DNDItem.tsx 드래그하는 아이템의 스타일 변경하기 step 1 : 드래그 감지하기 드래그하고있는 아이템의 스타일을 변경하기 위해, 가장 먼저 드래그 상태인지를 추적해야한다. onDragStart, onDragEnd 이벤트를 통해 이벤트 동작 시작, 끝을 감지한다. 2. motion value를 생성한다. framer-motion 라이브러리는 motionValue를 제공한다. > motionValue가 : motion의 value 즉 움직임에 대한 database > 사용 이유 > 1. motionValue가 변수처럼 작용한다

hihijin

리액트에서 드래그앤드롭은 react-beautiful-dnd 라는 편한 라이브러리가 있지만 없이도 충분히 구현하기 쉽다고 해서 없이 해보았다! 참고문서

sumi-0011

drag and drop 기능를 framer motion 라이브러리의 Reorder 컴포넌트를 이용하여 간편하게 구현할 수 있다. Reorder를 이용해서 Drag and Drop 구현하기 기본적인 사용법 Reorder.Item : 드래그 될 컴포넌트 Reorder.Group : 드래그 될 컴포넌트를 감싸는 Container Reorder.Item 컴포넌트들을 Reorder.Group 컴포넌트로 감싸고, Reorder.Group 컴포넌트에 드래그 리스트를 제어하는 setItems메소드를 넘겨주면 알아서 드래그에 따라 컴포넌트의 순서를 재배치해준다. > 참고 : https://www.framer.com/motion/reorder/ y축으로만 드래그 가능하도록 하기 Reorder.Item 컴포넌트에 drag="y"을 주면 컴포넌트를 y축으로만 드래그 가능하도록 할 수 있다. 반대로, `drag="x

nine9

📌오류 React-beautiful-dnd 패키지 설치 후에 간단한 샘플을 작업하고 있었는데 오류를 만났다. 오류 내용 provided.innerRef has not been provided with a HTMLElement. > 오류는 HTMLElement 형태로 제공되지 않았다는 의미. ✅해결 버전이 잘못 됐는가 의심되어 찾아보니 현재 내가 작업 중인 React 버전에서도 정상적으로 사용이 가능하다는 내용이 많았다. 패키지의 문서와 깃헙을 확인해보니 해결책은 아주 잘 정리되어 있었지만 비교해봐도 필요한 부분은 모두 적용된 상태였다. import된 컴포넌트나 연관된 요소들 중 HTML로 반환되지 않는 값이 있는지 확인이 필요하다. 이런 식으로 내부의 것을 반환할 수 있게 작성

jeongye01

상황에 따라 적절한 키보드를 띄워서 사용자 UX를 향상시켜 줄 필요가 있다. _요구사항에 맞는 적절한 키보드를 띄워주기 위해 input 태그의 type 특성 값을 적절하게 넣어줘야 한다. _ type="number" type="tel" type="search" 추가로, 완료키가 표시되게 하기! ![](htt

jeongye01

이 귀여운 애니메이션은 로그인페이지에서 만날 수 있다. > Lottie 파일은 애니메이션 파일 형식 중 하나이다. Lottie 파일은 크기가 작고(로딩 속도가 빨라서 UX측면에서 좋다), 벡터 기반으로 되어 있어 다양한 디바이스에서 크기를 자유롭게 조절할 수 있다. 디자인툴에서 이를 제작하고 json형식으로 내려받아 개발시 사용하도록 한다. 서비스 url-> https://www.wise24life.site/login lottie 파일 적용하기 nextjs 환경에서 public 폴더에 위 애니메이션(해당 포스팅 섬네일)이 작성된 json 파일을 넣어두었다. lottie-web 라이브러리를 설치했다. 애니메이션 컴포넌트 만들기 로그인 페이지 파일에 배치하기! 참고 https://lottiefiles.com/kr/blog/about-lottie/kr-lottie-vs-gif