오늘도 조으네💜

토이 프로젝트

Cloudinary와 React-Dropzone을 연동하여 만들어본 이미지 업로드 기능을 모멘텀 프로젝트에 추가해 보았다! 현재 모멘텀에 배경으로 깔리는 이미지는 기본으로 세팅해 놓은 기본 샘플 이미지들을 랜덤으로 가져와서 적용되는 방식이다. // background.bg export const bg = ["bg1.jpg", "bg2.jpg", "bg3.jpg", "bg4.jpg", "bg5.jpg", "bg6.jpg", "bg7.jpg", "bg8.jpg", "bg9.jpg", "bg10.jpg"]; // Main.jsx import { bg } from "../../api/background"; const randomBg = () => { return bg[Math.floor(Math.random()..

2023. 3. 6.

토이 프로젝트

최근에 작업한 리액트 크롬 모멘텀(Momentum)에 이미지 업로드 기능을 추가해보고 싶어서 공부해 볼 겸 Cloudinary와 React-Dropzone을 연동하여 간단한 이미지 업로더 기능을 구현해 보았다! 혼자서 구글링하며 이것저것 만지작거리면서 겨우겨우 구현했는데.. 잘 구현한 건지는 모르겠다..😅 일단 오류 없이 동작되는 거에 만족하는 걸로... (부족하거나 보완이 필요한 부분이 있다면 언제든 피드백 주세요) 내가 구현하고자 했던 사항은... 👉 이미지를 드래그 앤 드롭하여 단일 혹은 여러 개의 이미지를 한 번에 업로드하기 👉 업로드한 이미지를 저장해 두고, 해당 이미지들을 프론트단에 노출하기 이미지를 업로드하고 관리할 수 있는 기능을 제공하는 서비스는 많다. 처음에는 파이어베이스를 이용해보려고..

2023. 3. 2.

토이 프로젝트

이번 주말은 강의 듣는 건 스탑하고, 뭔가를 직접 만들어보고자 고민하다가... 크롬 모멘텀이라는 확장 프로그램을 클론 코딩해보고 싶다는 생각이 들었다. 거창한건 아직 실력이 안될 거 같고, 크롬 모멘텀은 전에 노마드코더 강의(https://nomadcoders.co/javascript-for-beginners)를 들으며 바닐라 JS로 클론 코딩해본적은 있는데, 이 정도 수준이면 내가 소화해낼 수 있는 수준일거라 생각되었다. 그래서 이번 클론 코딩은 바닐라 JS로 만든 모멘텀을 리액트로 동일하게 구현해보는 것이 목적이다. 그리고 이번에는 TODO LIST에서 할일 목록을 체크하는 것 뿐만 아니라 수정도 하고 드래그 앤 드롭 기능을 추가하여 드래그까지 되게끔 구현할 예정이다. [기능 구현 요구사항] 실시간으..

2023. 1. 29.