react

프로젝트를 하다가 설정 파일을 헤맨 후에 정리를 위해 작성해본다. 경로 별칭(Path Alias)은 파일이나 컴포넌트 import 시현재 파일을 기준으로 상대경로 대신, 절대경로를 지정해주는 기능이다.// 기존import { errorMessage } from "../../../utils/validation";// 경로 별칭 지정 후import { errorMessage } from "@/utils/validation"; 경로에 별칭을 지정해주게 되면 코드의 가독성이 높아지고, 유지보수가 쉬워진다는 장점이 있다. 리액트 글만 찾아보고 설정을 적용했더니 코드에서 자꾸 경로를 제대로 못 찾는 에러가 발생했다.. 😔현재 프로젝트에서는 타입스크립트를 같이 사용하기 때문에 타입스크립트 설정도 해줘야 한다. 그..

업무에서 첨부파일 업로드 솔루션을 적용하는 도중 드래그앤드롭을 구현하게 됐다.라이브러리를 써야할 정도로 다양한 기능이 필요한 것은 아니여서 html5에서 제공하는 드래그앤드롭 API를 사용했다. 아주 간단하게 기능만 동작하는 코드를 가져왔다. State 및 상태 관리const [files, setFiles] = useState([]);useEffect(() => { console.log(files);}, [files]);files가 변경될 때마다 로깅한다. 드래그 앤 드롭 이벤트 핸들링// 드래그 중일 때 이벤트 발생const handleDragOver = (e) => { e.preventDefault(); e.stopPropagation();};// 파일을 드래그 영역 위에 떨어트렸을 ..

리액트 강의를 보며 공부한 내용을 정리 및 작성한 글입니다. 1편: https://youngdev57.tistory.com/102 React 기초 그리고 입문리액트 강의를 보며 공부한 내용을 정리 및 작성한 글입니다.      리액트의 기술적인 특징리액트의 기술적인 특징은 세 가지가 있다. 1. 컴포넌트 기반으로 UI를 표현한다.컴포넌트(Component)youngdev57.tistory.com    React Hooks리액트 훅이란 클래스 컴포넌트의 기능을 함수 컴포넌트에서도 이용할 수 있도록 하는 메소드이다.(위의 useState(), useRef()도 리액트 훅이다.)훅들의 특징은 use 라는 접두사가 붙는다. (예를 들어 useEffect(), useReducer() 등)조건문과 반복문 내부에서..

리액트 강의를 보며 공부한 내용을 정리 및 작성한 글입니다.      리액트의 기술적인 특징리액트의 기술적인 특징은 세 가지가 있다. 1. 컴포넌트 기반으로 UI를 표현한다.컴포넌트(Component)란 말 그대로 화면을 이루는 "구성 요소"를 뜻한다. 아래에 자세한 설명을 포함한다.프로젝트의 사이즈가 점점 커지고 페이지가 많아질수록 코드를 수정하기 어려워지는데이렇게 중복되는 코드들을 컴포넌트화하여 제거하면 유지보수 차원에 용이하다는 이점이 있다. 2. 화면 업데이트에 대한 구현이 쉽다.화면 업데이트란 쉽게 말해 사용자의 행동에 따라 웹 페이지가 스스로 모습을 바꿔 상호작용하는 것이다.리액트는 과정을 생략하고 목적만 간결히 명시하는 방법인 선언형 프로그래밍 방식으로 동작하고,자바스크립트는 목적을 이루기..