개발기록

Redux 이론 강의에 이어 실습 강의에서도 Redux에 대해 배웠다. Recoil에 대해서도 배웠지만 그건 나중에 적어보려고 한다. 오늘은 Redux 공식문서를 번역하면서 그에 대한 정보를 정리해보려고 한다. (Redux 기초 튜토리얼) Redux란 무엇인가? Redux는 애플리케이션의 상태를, action이라는 이벤트를 사용해 업데이트하고 관리하는 라이브러리이며 동시에 패턴이다. 이 action은 전체 애플리케이션에서 사용해야 하는 상태에 대한 중앙 저장소 역할을 하며, 상태를 예측 가능한 방식으로만 업데이트할 수 있도록 규칙을 제공한다. Redux를 사용해야 하는 이유 애플리케이션 내 여러 곳에서 사용되어야 하는 "전역" 변수를 관리하는 것을 도와준다. Redux에 의해 제공되는 패턴과 도구들은, ..

Redux에 대해 배웠다. Redux는 React와 이름이 비슷해, React 애플리케이션에서만 작동할 수 있는 라이브러리라고 생각했는데, 딱히 그건 아니고 자바스크립트 앱을 위한 상태 관리 라이브러리였다. React가 등장하고, 그 이후 Flux 패턴이 등장, 이후에 Vue.js나 Angular.js와 같은 웹 애플리케이션 프레임워크에서도 해당 개념을 도입해 사용할 수 있는 것 같다. (혹시 틀린 정보라면 이후에 삭제할 것이다. 일단 React 애플리케이션에서만 사용 가능한 라이브러리는 아니다.) Redux에 대해 사용하기 이전에, Flux 패턴에 대한 이해가 필요하다고 느껴 정리해보려고 한다. 1. MVC 패턴 Flux 패턴에 대해 배우기 이전에, MVC 패턴에 대해 알아야 한다. MVC는 Model..

오늘은 리액트에서 제공하는 기본 훅(useState, useRef, useContext, useReducer)로 상태 관리를 하는 법에 대해 배웠다. 참고로 리액트에서 말하는 상태(state)는 컴포넌트 내에서 변하는 값이며, 수정 시 state의 값을 직접 바꾸기보단 set함수를 이용해 값을 변경한다. (이유: 리액트는 state가 변경될 때 화면을 리렌더링하는데, 이 state가 변한 것을 객체의 값이 아닌 객체의 주소 값이 변경된 것으로 감지하기 때문이다.) 그 중 useRef에 대해서, 처음엔 HTML dom element에 직접적으로 접근할 때 사용할 수 있다고 배웠었는데, 다른 용도(?)로도 쓸 수 있다고 들어서 그것에 대해 useState와 비교하며 정리해보려고 한다. 1. useState ..

오늘 실습에서 Axios API를 사용해 데이터를 요청했다. (왜 썼는지 이유는 기억나지 않지만...) 예전부터 Fetch와 Axios의 차이가 궁금했었는데 오늘 배운 김에 정리해보고자한다. 우선 공식 문서를 참조하여 각 API의 정의와 함께 차이점을 정리하려한다. Axios Axios는, Node.js와 브라우저를 위한 Promise 기반의 HTTP 클라이언트다. 이것은 동형(Isomorphic)이(=같은 코드를 기반으로 브라우저와 Node.js 둘 다 실행이 가능하다.)라고 불린다. 서버 쪽에서는 네이티브의 Node.js http 모듈을 사용하고, 클라이언트(브라우저)에서는 XMLHttpRequests를 사용한다. 특징 브라우저로부터 XMLHttpRequests를 생성 XMLHttpRequests는 ..

React로 URI 라우팅을 하는 방법을 배웠다. 오늘은 실습으로 나온 코드를 정리하며 배운 정보에 대해 정리해보려고 한다. 1. SPA와 MPA SPA(Single Page Application) 기존에는 링크 태그(a 태그 등)를 사용해 새로운 페이지 요청 시마다 서버에서 정적 리소스를 전송하고, 전체 페이지를 다시 렌더링하는 방식으로 매 페이지 요청 시마다 리로드가 발생했다. 그렇기 때문에 웹 페이지를 사용할 때 매끄럽지 않다는 인상을 받을 수 있다. 이것이 위에 말했던 MPA(Multi Page Application)이다. 또 페이지 요청 시마다 새로운 페이지를 서버에서 빌드하여 주기때문에 페이지 간 데이터의 재활용도 어려웠다. SPA는 기본적으로 CSR 기술을 활용해 페이지 진입 시 리로드 없이..

React에 스타일을 적용하는 법을 배웠다. 처음에 이걸 배운다고 했을 때 그냥 CSS 파일 따로 만들어서 쓰면 되는 거 아냐? 라고만 생각했었는데, 생각보다 여러 방법이 있었고 듣기만 해봤었던 Scss와 styled-components의 사용법에 대해서도 알 수 있었다. 우선 첫 번째로는 흔하게 사용하는 방법이다. 저번에 강의를 보면서 작성했던 투두리스트 프로젝트에 스타일을 적용하는 식으로 배운 것을 정리해보려고 한다. 1. CSS 파일 분리 제일 익숙한 방법이다. 이 외형을 바꾸지 않은 채로 Scss와 styled-components를 적용해볼 것이다. 2. Scss CSS 전처리기 Scss로 작성된 파일은 컴파일을 통해 CSS 파일로 변환 모듈, 믹스인, Nested Style, 변수, 조건문, 반..

오늘은 React에서 props, state가 무엇인지, 이벤트 처리를 props와 state를 통해 하는 방법에 대해서 배울 수 있었다. JSX내에서의 DOM 요소 속성 작성 기본적 DOM Element의 Attribute 는 카멜 케이스로 작성 tabIndex: 키보드 Tab 키를 눌렀을 때 포커스의 이동 순서 className data- 또는 aria-로 시작하는 Attribute는 예외 data-: 태그 내에 별도의 값을 저장할 수 있음 aria-: 장애를 가진 사용자가 웹 콘텐츠와 웹 어플리케이션에 쉽게 접근할 수 있는 방법을 정의 HTML의 Attribute와 다른 이름을 가지는 Attribute가 존재 checked ➡️ defaultChecked value ➡️ defaultValue Re..