개발자 99% 커뮤니티에서 수다 떨어요!
최근 Slack에 올라오는 졸업작품들의 퀄리티가 점점 높아지는 것들을 보고, 많은 자극을 받게 되었습니다.😥 그래서 이번 React 챌린지부터는 졸업작품에 일말의 후회가 남지 않도록.. 열심히 하자! 라고는 했는데 캐럿마켓이나 인스타클론 졸업작품 보다 제걸 다시보니까 좀 비루해보이네요ㅋㅋㅋㅋㅋㅋ큐ㅠㅠㅠ😆 빨리빨리 열심히 공부해서 재밌는거 많이많이 만들고싶습니다!!!
저는 게더가 아닌 Discord 공동 작업방에서 공부를 하는 편인데, 이번 졸업작품은 같은 작업채널에 계시는 아티스트분과 협업을 하기로 했습니다!! 😃
Class를 수강하며 배운 지식들 중, 저의 눈길을 끌었던 것은 BeautifulDND(드래그 앤 드랍 이벤트)였습니다. Trello를 구현하며 정말 큰 흥미를 느꼈고 졸업작품은 Drag And Drop에 포커스를 맞추기로 했습니다.
[ fi-box ] https://pengoosedev.github.io/fi-box/
LP판을 Drag한 뒤, LPPlayer에 Drop하면 LPPlayer에 등록되어있는 LP음이 재생됩니다!
니꼬쌤이 정해준 길이 아닌, 새로운 길을 가보려니 정말 많은 문제점들을 직면했습니다.
BeautifulDND 사용시 position에 굉장히 민감한 Droppable, Draggable 친구들의 img 위치 변경 문제점. (강제로 원래 img 위치 변경)
해결한다 하더라도 img의 위치와 실제 div위치가 달라 Drag이벤트 도중 좌표 차이로 발생하는 WindowScroll 문제 (onDragging일때 windowScroll 이벤트 prevent)
Droppable은 아래로만 확장된다는 문제. (결국 DND default CSS에 맞춰 모든 경우의수 눈속임용 CSSㅠㅠ)
(앞으로 이런 프로젝트에선 Beautiful DND가 아닌 react-dnd 쓰는걸루!)
사용하지는 않았지만 display : flex; 방향으로 사용하고 싶은 경우, direction="horizontal"라는 attrs를 추가하면 방향이 수평방향으로 변합니다 😆
진짜 BeautifulDND 그 자체의 문제점 때문에, 1,2,3번에서 대략적인 UI 잡는데만 8일 넘게 썼습니다😥 하루종일 코드 쓰고 갈아엎고 쓰고 갈아엎고, 무한 CRA로 해당 프로젝트 포기할까도 고민 깊게 했었습니당 ㅋㅋㅋㅋ
loop 형식의 mp3재생에서 audio 태그가 가진 고질적인 레이턴시 문제. (Promise.all사용했다가 그냥 currentTime을 이용한 방법으로 회귀.)
Howler.js와 new Audio의 차이점 및 레이턴시 (Howler.js는 multiple한 audio트랙을 재생할 경우 레이턴시 극대화. new Audio의 경우 레이턴시 이슈는 덜하지만, 곡이 끝나고 처음부터 재생하는 경우 아무소리가 0.15초 들리지 않는 고질적인 gap 문제 존재.)
React에서 setInterval 사용시, State 변경된 것을 전달하지 못한다는 문제점. (state가 변경될 때, localStorage로 값을 넘겨준 뒤, setInterval 내부에서 데이터를 받는 식으로 해결)
첫 협업의 합 맞추는 과정 및 의견조율 과정
문제점이 너무나도 많아져서.. 그렇게 작성된 아이디어 / 이슈 노트
[ 아이디어/이슈 노트 ]
왼쪽의 모든 폴더, 파일들이 이번 졸업프로젝트에서 나온 이슈, 그리고 해결하며 얻은 지식들.
(아침에 일어나서 전날 작성한 ToDoList 이행 - 새로운 문제점 발견 - 새로운 ToDo추가)
링크 : https://pengoosedev.github.io/fi-box/
문득 이렇게 정리된 노트 다시 보니까 열심히 했구나 싶기도 합니다😥
HTML, CSS 배울때만 하더라도 코딩 고수인 것 같은 착각이 들어 여기저기 자랑하고 다녔는데, 공부를 하면 할 수록 허접이 되는 것 같습니다 ㅋㅋㅋㅋㅋㅋㅋㅋ
그래도 그만큼 멋있는 기술들을 많이 접하고 배울 수 있음에 감사합니다!
이번에 배운걸 토대로 더 멋진 기술들을 배우고, 더 재밌는 것들을 많이많이 만들고싶습니당 😊
JS Class, TS, CSS마스터 클래스로 내실 탄탄하게 다지고, React 프로젝트 2~3개 정도 간단한거 만든 뒤에 NextJS 입문하겠습니당 :) 니꼬센세!! 캐럿마켓에서 뵙겠습니당!!
[ Thx to Nomad 코더❤ ]
후기는 잘 안남기는 편인데, 너무 좋은 강의, 챌린지 컨텐츠, 행복한 커뮤니티 운영 등등...
그냥 이렇게 좋은 강의 및 컨텐츠들을 들을 수 있게 해주신 우리 nicoSenpai... 언제나 애정하고 감사합니다. 🥰
항상 수업에서 밝은 모습 보여주시면서 즐겁게 강의해주시지만, 분명 양질의 컨텐츠들을 제공해주시기 위해, 보이지 않는 부분에서의 어려움이 많았을 것이라 생각됩니다.
다시 한 번 수업과 컨텐츠를 위해 고생하시는 Nico쌤, Lynn님, Dori님, jisu님 감사하다는 말씀 드립니다!!! 감사합니당!! 😍❤❤❤
항상 감사히 배워갑니당!!! Love U Nico 😘