072DATA

개발을 하다 보면 이미지 업로드 기능이 필요한 경우가 많은데,특히 여러 장의 이미지를 한 번에 처리해야 하는 경우가 있습니다.오늘은 제가 구현했던 다중 이미지 업로드 기능을 기록해보려고 합니다. 구현 목표최대 5장까지 이미지 업로드 가능이미지 형식 및 크기 제한 (JPG, PNG, GIF, WEBP / 5MB 이하)이미지 미리보기 기능개별 이미지 삭제 기능 1. 이미지 업로드 컴포넌트 만들기먼저 이미지 업로드를 위한 기본적인 UI를 구성했고이 코드에서 ImageUpload 컴포넌트는 다섯 개의 이미지 미리보기 자리를 제공하는 간단한 레이아웃을 만들어유const ImageUpload = () => { // 파일 input 참조를 위한 ref const fileInputRef = useRef(null);..

Throttling을 알아보다가 렉시컬 환경과 클로저에 대한 이야기가 나와서꼭 이 부분을 학습해야 편할 것 같아 이래저래 찾아보고 열심히 학습해보았다 렉시컬 환경(Lexical Environment) -> 어휘적 환경?코드가 작성된 그 문맥의 환경을 의미 -> 약간 범위를 나타내는 말로 유추가 됨변수나 함수가 선언된 위치에 따라 해당 변수나 함수가 접근할 수 있는 범위가 결정됨 -> 참 말이 어려움ㅋㅋㅋㅋfunction outer() { let x = 10; // 렉시컬 환경의 일부 function inner() { console.log(x); // inner 함수는 outer의 렉시컬 환경에 접근 가능 }} 코드로 보면 조금이나마 이해가 되는데 그렇다면 함수안에 있는내부 함수들은 자신..

Throttling은 성능 최적화를 위한 프로그래밍 기법이며이벤트나 함수 호출의 횟수를 제어하는데 사용됨 비슷한 기법으로 debouncing이 있음(내일 써야지 ㅎㅋ) Throttling (쓰로틀링)일정 시간 동안 함수가 한 번만 실행되도록 제한하는 기법특징마지막 함수가 호출된 후 일정 시간이 지나기 전에 다시 호출되지 않도록 함정해진 시간 간격으로 함수를 실행사용 예시: 스크롤 이벤트, 무한 스크롤, 실시간 데이터 갱신, API 요청 제한export function throttle any>( func: T, delay: number): (...args: Parameters) => void { let isThrottled = false; return (...args: Parameters) => {..

오늘은 내일 있을 기능 분배에 대해서 더 활기찬 참여를 위하여 어떤식으로 기능 분배를 하면좋을지에 대해서 생각해 보기 위해 기능 분배 방식과 생각을 정리해보려고 한다 이제 곧 프로젝트 개발이 시작될 듯 한데 이런 끄적끄적 적는 포스팅도 이제 마지막이겠지... 컴포넌트 단위로 기능 분배  컴포넌트 단위로 기능을 분배하는 경우에팀원들이 UI 요소나 특정 기능을 담당하는 작은 컴포넌트를 맡아서 개발함 예로 들어서팀원1: 버튼, 모달 같은 UI 컴포넌트 개발팀원2: 로그인 폼, 검색 바 같은 기능성 컴포넌트 개발팀원3: 카드 리스트, 그리드 레이아웃 컴포넌트 개발이런 방식으로 재사용 가능한 단위의 기능을 개발할 때 초점을 맞추고컴포넌트 단위로 분배하여 독립적으로 작업하고 이 컴포넌트 들을 페이지에 모아서 더큰 ..

- 1분 이내의 자기 소개안녕하세요 저는 노용철입니다 내일배움 캠프에서 프론트엔드 과정을 수료(예정)하여 5번의 팀 프로젝트를 통해 협업 능력을 키웠고, React와 Next.js에 대한 전문성을 쌓았습니다. 저는 학습 과정을 즐기며 늘 새로운 것을 배우고자 하는 열정이 있습니다. 이러한 노력을 바탕으로 사용자 경험을 향상시키는 인터랙티브한 프론트엔드 개발자로 성장하고 싶습니다.- 어떻게 개발을 시작을 하게 되었나요?제가 개발을 시작하게 된 계기는 군 복무 중 한 동기의 영향이 컸습니다 사실 어릴 적부터 저는 플래시 8 같은 도구로 새로운 것을 만드는 것을 즐겼습니다. 하지만 시간이 지나며 이런 창작에 대한 열정이 잊혀졌었죠. 동기의 성과를 보면서 제 안에 잊혀져 있던 이 열정이 다시 깨어났으며이 경험은..