![]()
기술 스택 : React, TS, MUI, styled-componentsimport { useState, useRef } from "react";import { IconButton } from "@mui/material";import { Fullscreen, FullscreenExit } from "@mui/icons-material";import styled from "styled-components";const Container = styled.div` position: relative; width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; background-color: #1a1a..
배경react-dnd는 drag 시작 시에 item의 최신 상태는 잘 추적하지만, drop시에는 최신 상태를 추적하지 못한다.이로 인해, 다음과 같은 코드를 작동하면 버그가 발생한다.1. 상태 초기화2. 상태 업데이트3. 드랍 시 업데이트된 상태를 바탕으로 상태 업데이트 코드 실행4. 버그 발생즉, 드랍 전 상태를 업데이트 한 후 드랍했을 때 최신 상태를 바탕으로 다시 상태를 업데이트 하는 코드가 있다면 버그를 발생시킨다.(필자는 업데이트했던 상태가 이전 상태로 초기화되는 버그를 경험했다.) 따라서, drop 내 콜백 함수 에서는 직접 최신 상태를 추적해야 한다. 예시 코드 // hooks const [{ isOver }, drop] = useDrop(() => ({ accept: "BOX", ..
![]()
들어가며바야흐로, 한 기업의 '칸반보드 구현과제'를 수행하던 중이었습니다.해당 과제는 여러 개의 작업 카드를 DnD(드래그앤드랍) 기능을 통해 컬럼(작업 단위)별로 관리할 수 있는 칸반보드를 구현하는 과제였습니다.기본적인 기능 구현을 완료한 후, 기능 테스트 도중 DnD를 통한 작업 카드의 컬럼(작업 단위) 변경 시 칸반보드의 카드가 랜덤하게 뒤섞이는 버그를 발견하였습니다. (ex : 할 일 -> 진행 중으로 변경 시 카드가 뒤죽박죽됨)결론부터 말씀드리자면 배열 렌더링 시 항상 일정하게 고유하지 않은 값을 카드 컴포넌트의 key값으로 전달하여 발생한 것이었습니다.이 글에서는 리액트에서 key가 무엇인지, 왜 해당 버그가 발생했는 지에 대해 살펴봅니다. 기본 개념리액트는 배열렌더링 시 컴포넌트에 전달하는 ..
![]()
const Container = styled(Select)` width: 100%; padding: 10px 12px; font-size: 16px; border-radius: 6px; transition: border-color 0.3s ease, box-shadow 0.3s ease; background-color: white; & .MuiSelect-select { padding: 0px; } & input { border: 0px; } & fieldset { border: 1px solid #ccc; } &:hover fieldset { border-color: #ccc !important; } /* Select가 선택(포커스) 되었을 때 */ &..
https://youtu.be/vD01F8LM6oY 안녕하세요 순코딩입니다오늘은 1인 창업의 장단점에 대해 각각 3가지씩 말씀드리겠습니다.장점1. 선택과 결정을 단독으로 할 수 있다.1인 창업은 자신이 모든 것을 결정하고 실행에 옮길 수 있습니다.상부에 보고 절차를 거치지 않고 자신이 총 책임자가 되어 모든 업무를 단독으로 결정하고 수행할 수 있습니다.즉, 원하는 일로 돈을 벌 수 있습니다.장점2. 한 번 시스템을 구축해놓는다면 소득 상방이 무한하다시스템이 구축되어 소득이 일정하게 들어온다면 직장인 대비 여유시간이 생기게 되며 다른 사업을 새롭게 창업하거나 기존의 사업을 확장하여 소득을 높일 수 있습니다.장점3. 퇴직 걱정이 비교적 적다사업가이기 때문에 퇴직 압박이 없으며 요구하는 나이나 스펙이 없어 퇴..
https://youtu.be/qXytCy9S43s?si=pmP0gqzOlKzdzBdx 안녕하세요 순코딩입니다.오늘은 제가 생각하는 1인 창업이 무엇인지에 대해 말씀드리겠습니다.1인 창업에 대해 알아보기 전,창업과 사업의 사전적 정의에 대해 알아보았습니다.창업의 사전적 정의는 ‘사업 따위를 처음으로 이루어 시작함’입니다.사업의 사전적 정의는 ‘어떤 일을 일정한 목적과 계획을 가지고 짜임새 있게 지속적으로 경영함’입니다.창업이 사업을 시작하는 것을 의미한다는 것은 알겠으나 사업의 정의는 사전적 정의만으로는 감이 잘 오지 않네요그래서 저는 저만의 기준을 통해 사업을 정의합니다.제가 생각하는 사업이란 시스템을 구축하여 수익을 발생시키는 소득활동입니다.이 때 ‘시스템’이란 본인이 일하지 않는 시간에도 수익을 발..
https://youtu.be/aW3lgblKk6o?si=3OTsFHazKmmCW7GG 안녕하세요 순코딩입니다.저는 현재 대학을 졸업하고 웹개발을 통한 1인 창업에 도전하고 있습니다.1인 창업을 도전하며 동시에 ‘1인 창업 도전기’ 시리즈를 기획하고 있는데요, 이 영상에서 ‘1인 창업 도전기’ 콘텐츠에 대해 소개하려고 합니다.‘1인 창업 도전기’ 콘텐츠에서는 다음과 같은 내용을 다룰 예정입니다.첫째, 1인 창업의 정의1인 창업을 하기 위해서는 1인 창업이 무엇인지 알아야겠죠?제가 생각하는 1인 창업의 정의에 대해 소개하고 저는 어떤 방법으로 1인 창업을 시작할 것인지에 대해 말씀드리겠습니다.둘째, 1인 창업 경험담많은 분들이 1인 창업의 장단점과 수익에 대해 궁금해 하실 것 같습니다.제가 1인 창업을 시..
![]()
버킷 생성1) Storage > New bucket 클릭2) 버킷 이름 입력 후 공개 버킷 설정(주의 : 공개 버킷 설정 시 익명의 사용자가 아무런 승인 없이 버킷 내 객체(이미지 파일)을 읽을 수 있으므로 보안 수준이 낮아지는 것을 유의해야합니다.) 버킷 정책 설정1) Policies > 생성된 버킷명 우측 New policy 클릭2) For full customization 클릭3) Policy name 입력, Allowed operation 설정 후 Review 클릭4) 생성될 정책을 미리본 후 Save policy 클릭 실습import React, { useState } from 'react';const FileInputForm = () => { const [file, setFile] = us..
