Frontend 개발자 - hyo.loui

❤️‍🔥TIL : Today I Learned Redux / Recoil Redux 와 Recoil을 비교하여 설명합니다. Redux 상태 관리 개념 구조 flux패턴을 사용하여, action이 발생하면 dispatcher에 의해 store에 변경된 사항이 저장되고, 그 상태에 의해 view가 변경되는, 데이터가 한 방향으로 흐르는 구조를 갖는다. + ESLint Store: 애플리케이션의 상태를 보유하는 객체입니다. 모든 상태는 하나의 스토어에 저장됩니다. Action: 상태를 변경하기 위해 발생시키는 이벤트입니다. 액션은 객체 형태로 정의되며, 액션에는 타입과 데이터가 포함됩니다. Reducer: 액션을 처리하고 새로운 상태를 반환하는 순수 함수입니다. 액션의 타입에 따라 reducer가 처리되고, ..

❤️‍🔥TIL : Today I Learned props, state 리액트(React)에서 props와 state는 둘 다 컴포넌트(Component)에서 데이터를 다루는 데 사용되는 중요한 요소입니다. 그러나 이 둘은 약간의 차이점이 있습니다. Props 란? - props는 컴포넌트에서 데이터를 전달하는 데 사용됩니다. 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 때 사용됩니다. props는 읽기 전용(Read-only)이며, 부모 컴포넌트에서 전달한 데이터를 자식 컴포넌트에서 변경할 수 없습니다. + ESLint State 란? - state는 컴포넌트 내부에서 관리되는 데이터입니다. 컴포넌트가 렌더링될 때 생성되며, 컴포넌트의 생명주기(Lifecycle) 동안 변경될 수 있습니다. sta..

❤️‍🔥TIL : Today I Learned useRef React에서 DOM 노드, react 엘리먼트에 접근하는 방법인 useRef를 설명합니다. useRef 란? - Ref는 render 메서드에서 생성된 DOM 노드나 React 엘리먼트에 접근하는 방법을 제공합니다. useRef는 컴포넌트의 라이프사이클 동안 유지되는 가변 변수를 생성하는 React Hook입니다. 이는 일반적으로 DOM 요소나 컴포넌트 내부 또는 자식 요소에서 엑세스 또는 업데이트해야하는 값을 저장하는 데 사용됩니다. 이를 통해 다시 렌더링을 트리거하지 않고도 해당 값에 접근하거나 업데이트 할 수 있습니다. Ref를 사용해야 할 때 포커스, 텍스트 선택영역, 혹은 미디어의 재생을 관리할 때 애니메이션을 직접적으로 실행시킬 때...

❤️‍🔥TIL : Today I Learned React v18.0 원티드 프리온보딩 프론트엔드 챌린지 질문에 대한 답변입니다. 1. React Lifecycle에 대해 간단히 설명해주세요 React Lifecycle은 컴포넌트 생성, 업데이트, 소멸할 때 일어나는 과정입니다. ( Mount - Update - Unmount ) Mount componentDidMount : 컴포넌트가 마운트 된 후에 호출됩니다. DOM 노드에 접근하거나 외부 데이터를 가져오는 등의 초기화 작업에 사용됩니다 Upadate componentDidUpdate: 컴포넌트가 업데이트 된 후에 호출됩니다. 이전과 현재의 props나 state를 비교하여 필요한 업데이트를 수행합니다. Unmount componentWillUnmo..

❤️‍🔥TIL : Today I Learned 🤢 문제 내용 : 게시글 작성, 수정 중 유효성검사를 통과하지 못했을 때 (작성자, 비밀번호 미입력 등) 해당하는 input 박스를 auto focus 하는 기능 추가 과정중 document 가져오기 🔨 시도한 방법 1. useFocus라는 Custom hook 생성 후, dom요소 직접 조작 문제점 - React 에서 document를 직접 조작하는 것은 추후 원인이 불분명한 오류를 유발할 수 있다! 위 오류를 해결하면서 알게된 점은, custom hook 을 일반 컴포넌트와 같은 개념으로 props 를 넘겨줘야 된다고 생각해서 {props} 와 같은 방식으로 넘겨줬다.. 하지만 내가 사용하려고 하는 custom hook 은 jsx 문법을 반환하는 comp..

❤️‍🔥TIL : Today I Learned 🤢 문제 내용 : 선발대 과제로 redux 만을 사용하여 흔히 아는 '투두리스트' 앱을 만들고 있던 와중에 생긴 문제였다. 스스로 하드코딩을 연습 겸 해서 코드 작성중 state로 넣은 데이터를 module에 있는 initialState로 업데이트 시켜주려고 했으나, 전달하는 데이터가 한박자 느리고 에러가 발생했다.. (28 line) setTodoForm 으로 업데이트 한 state를 (36 line) 에서 payload 로 넘겼으나 Uncaught TypeError: Cannot read properties of null (reding 'id') 아직 state가 null 이라고 한다... 에러 메세지가 해석이 가능해서 스스로 여러 시도를 해봤지만 대표적..

❤️‍🔥TIL : Today I Learned JSON-server 아주 간단한 DB와 API 서버를 생성해주는 패키지 이다. 우리가 json-server를 사용하는 이유는 backend(이하 BE)에서 실제 DB와 API Server가 구축될 때까지 Frontend(이하 FE) 개발에 임시적으로 사용할 mock data를 생성하기 위함이다. json-server 를 통해서 FE에서는 BE가 하고있는 작업을 기다리지 않고, FE의 로직과 화면을 구현 할 수 있어 효율적으로 협업이 가능하다. json-server 설치하기 CRA로 프로젝트를 새로 생성하고, yarn 또는 npm을 이용해서 설치 합니다. 예시에서는 기존에 사용하던 yarn을 사용해서 설치하겠습니다. npm install json-server..

❤️‍🔥TIL : Today I Learned axios (서버통신 라이브러리) 공식문서에 따르면 axios 란 node.js와 브라우저를 위한 Promise 기반 http 클라이언트 라고 소개하고 있다. 즉 http를 이용해서 서버와 통신하기 위해 사용하는 패키지다. 설치 명령어와, 실행 명령어 CRA를 통해서 새로운 프로젝트를 생성하고, 터미널에 아래의 명령어를 입력해서 axios를 설치. npm install axios npm의 경우 yarn add axios yarn의 경우 우리가 사용하는 json-server API 명세서 확인하기 우리가 Axios를 사용해서 GET 요청 코드를 작성하기에 앞서, 어떤 방식으로 요청 해야할지는 우리가 사용하는 json-server의 방식을 알아보아야 한다. 다시..