DH의 개발 공부로그

Redux store state 접근 React-Redux의 Hooks인 useSelector와 useDispatch를 이용하여 리덕스 스토어 state에 접근할 수 있습니다. 1. useSelector useSelector를 사용하여 스토어에 저장 되어 있는 데이터, state를 읽을 수 있도록 도와줍니다. 한마디로 useSelector의 결과물은 store.getState()했을 때의 결과물과 동일합니다. import { useSelector } from 'react-redux'; const toDoList = useSelector((state) => state.toDoList) 2. useDispatch useDispatch는 리덕스 스토어의 dispatch 를 함수에서 사용 할 수 있게 해주는 H..

IntrinsicAttributes 오류 IntrinsicAttributes 의 사전적 의미: 내장 속성, 고유 속성 타입스크립트와 리액트를 이용해서 간단한 투두리스트 예제를 만드는 연습을 하고 있는데, 하위 컴포넌트에 props를 전달하는 과정에서 해당 오류가 발생하였고, 해결한 방법을 정리 해보겠습니다. Type '{ toDo: ToDoItem; }' is not assignable to type 'IntrinsicAttributes'. Property 'toDo' does not exist on type 'IntrinsicAttributes'. // 해당 유형은 IntrinsicAttributes에 할당할 수 없습니다. 라는 형태의 오류 // 하위 컴포넌트의 전달하는 props의 타입을 지정을 해주..

원시 값과 참조 값 알아보기 자바스크립트에는 원시 값과 참조 값 두가지의 값이 있습니다. 원시 값과 참조 값에 대해서 알고 싶으신 분들은 [JavaScript] 자바스크립트 원시 값과 참조 값!을 확인해주시면 되겠습니다. 원시 값과 참조 값의 복사 원시 값을 복사할 때에 그 값은 또 다른 독립적인 메모리 공간에 할당하고 있기 때문에, 원시 값을 복사 한 후 그 값 수정을 하여도 기존 원시값을 저장한 변수에는 영향을 끼치지 않습니다. 하지만 참조 값은 원시 값과는 다르게 변수가 객체의 주소를 가리키는 값이기 때문에 복사를 하면 복사된 값(주소)이 같은 값을 가리키고 있어서 수정시에는 서로에게 영향을 줄 수 밖에 없는 것 입니다. 한마디로 하나의 주소를 참조해서 원본과 복사한 변수에서 가르키고 있다는 것 입..

서론 이번에는 원티드 프리온보딩을 통해서 지금까지 프로젝트에 사용했던 라우터 방식말고 새로운 방식이 있다는 것을 알게 되어서 이 글을 작성하면서 정리하게 되었습니다. 이번에 정리하면서 작업해 볼 방식은 React Router v6.4에 추가된 방식입니다. 기존 방식 import { BrowserRouter } from 'react-router-dom' const root = ReactDOM.createRoot(document.getElementById('root')) root.render( // 최상단 root에서 BrowserRouter로 감싸기 ) import { Route, Routes } from 'react-router-dom' const App = (..

프로젝트 설명 리덕스를 공부하는 이유가 리덕스를 이용해서 리액트에서의 상태관리를 보다 편하게 작업을 하기 위해서였는데, 공부를 해보니 꼭 리덕스가 리액트와 함께 사용이 안되어도 가능하다는 것을 알게 되었습니다. 그래서 우선 자바스크립트에서 사용하는 법을 먼저 연습해보고 리액트에서 사용법을 공부해야겠다 생각을 하여 자바스크립트 투두리스트를 만들어 보았습니다. 폴더구조 yarn과 vite로 작업을 하였고 폴더 구조는 다음과 같이 간단하게 작업을 했습니다. index.html - body부분 To Dos Add index.js 1. 변수 선언 및 form 이벤트 추가 우선 변수들을 선언하고 onSubmit함수를 만들어 주었습니다. const $form = document.querySelector('form')..

Redux 란? 리덕스란 공식문서에서는 자바스크립트 앱을 위한 예측 가능한 상태 컨테이너입니다.라고 설명을 합니다. 조금 쉽게 설명을 덧붙여 보자면 리덕스는 복잡한 state 관리를 중앙집권화하여 단순하게 처리할 수 있게 도와주는 자바스크립트 라이브러리입니다. Redux를 구성하는 키워드 스토어 (Store) 액션 (Action) 디스패치 (dispatch) 리듀서 (Reducer) 구독 (subscribe) 1. 스토어 (Store) 리덕스에서는 하나의 스토어를 만들게 되고, 그 스토어 안에 현재의 state와, 리듀서를 주입해줍니다. 그리고 스토어에는 추가적으로 몇가지 내장 함수들이 있기도 합니다. 스토어의 상태를 바꾸는 것이 리덕스의 핵심입니다. 2. 액션 (Action) state에 어떠한 변화가..

Vite란? Vite는 공식문서에 따르면 프랑스어로 "빠르다"를 의미하며, 빠르고 간결한 모던 웹 프로젝트 개발 경험에 초점을 맞추어서 탄생한 빌드 개발 시 네이티브 ES Module을 넘어 더욱 다양한 기능을 제공합니다.(e.g. Hot Module Replacement) 번들링 시, Rollup 기반의 다양한 빌드 커맨드를 사용할 수 있습니다. 이는 높은 수준으로 최적화된 정적(Static) 리소스들을 배포할 수 있게끔 하며, 미리 정의된 설정(Pre-configured)을 제공합니다. Create React App대신 Vite를 사용하는 이유? 우선 CRA는 자바스크립트 코드로 구성된 툴인 Webpack을 사용합니다. 자바스크립트는 기본적으로 interpreted 언어이기 때문에 느립니다. 코드의 ..

FormData FormData는 form필드와 그 값을 쉽게 보내고 생성할 수 있도록 도와주는 객체입니다. 이름을 보고 유추하셨듯이 FormData 객체는 HTML 폼 데이터를 나타냅니다. 생성자는 다음과 같습니다. let formData = new FormData(폼); FormData 메서드 1. formData.append() append 메서드는 두가지 방식의 버전이 있습니다. 매개변수를 2가지를 가지고 있는 버전과 3가지를 갖는 버전이 있습니다. 하나하나 알아보자면 다음과 같습니다. 매개변수가 2개인 버전 formData.append(name, value) // name과 value를 가진 폼 필드를 추가 매개변수가 3개인 버전 formData.append(name, blob, fileName..