개발기록

오늘은 리액트에서 제공하는 기본 훅(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, 변수, 조건문, 반..

오늘은 Hook에 대해 자세히 배울 수 있었다. 그 중 강의에서 나온 다섯 가지의 함수에 대해 간단하게 정리해보려고 한다. 우선, Hook은 무엇일까? Hook은 React v16.8.0 부터 사용할 수 있게 된 기능이며, 클래스형 컴포넌트의 사용 없이 함수형 컴포넌트에서 상태와 라이프사이클을 관리할 수 있게 해준다. 이전에는 상태와 라이프사이클을 이용해야 할 때는 클래스형 컴포넌트를 사용해야 했다. 참고로 상태는 React 컴포넌트 내에서 변경 가능한 데이터를 위해 사용하는 객체이며, 라이프사이클은 컴포넌트의 수명 주기를 말한다. constructor 컴포넌트가 처음 생성될 때 호출. getDerivedStateFromProps props로 받아온 값을 클래스 내의 상태와 동기화 시킬 때, 컴포넌트가 ..

오늘은 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..

행위 패턴은 클래스나 객체들이 서로 상호작용하는 방법, 책임 분배 방법을 정의하는 패턴이다. 구분 패턴 설명 행위 Mediator - 객체의 수가 너무 많아지면 서로 간 통신이 복잡해져 중재자가 필요 - 중재자에게 모든 것을 요구해 통신 빈도수를 줄여 객체 지향의 목표를 달성하게 해 줌 - 상호 작용의 유연한 변경을 지원 Interpreter - 언어의 다양한 해석, 구체적으로 구문을 나누고 분리된 구문의 해석을 맡는 클래스를 각각 작성해 여러 형태의 언어 구문을 해석할 수 있게 만듦 - 문법 자체를 캡슐화해 사용 Iterator - 컬렉션 구현 방법을 노출시키지 않으면서 집합체 내 모든 항목에 접근할 방법을 제공 - 내부 구조의 노출이 없음 - 복잡한 객체의 원소를 순차적으로 접근 가능하게 함 Temp..

구조 패턴은 구조를 유연하고 효율적으로 유지하며 객체들과 클래스들을 더 큰 구조로 조립하는 방법을 설명한다. 구분 패턴 설명 구조 Bridge - 기능 클래스 계층과 구현 클래스 계층을 연결 - 구현부에서 추상 계층을 분리해 추상화 부분과 실제 구현 부분을 독립적으로 확장 가능 - 구현뿐만 아니라, 추상화된 부분까지 변경하는 경우 활용 Decorator - 기존에 구현된 클래스에 필요한 기능을 추가해 나가는 패턴 - 기능 확장이 필요할 때 객체 간 결합으로 기능을 동적으로 유연하게 확장할 수 있게 해주어 상속의 대안으로 사용하는 패턴 - 객체 결합으로 기능을 동적으로 유연하게 확장 Facade - 복잡한 시스템에 대해 단순한 인터페이스를 제공 - 사용자~시스템 또는 여타 시스템과의 결합도를 낮춰 시스템 ..

구분 패턴 설명 생성 패턴 Builder - 복잡한 인스턴스를 조립하여 만드는 구조 - 객체 생성 방법과 구현 방법을 분리해 동일한 생성 절차에서 서로 다른 표현 결과를 만들 수 있는 디자인 패턴 - 생성과 표기를 분리해 복잡한 객체를 생성 - 생성 객체가 optional한 속성을 많이 가질 때 좋음 Prototype - 일반적 원형을 만들고 복사해 필요한 부분만 수정해서 사용하는 패턴 - 객체 생성 시 갖춰야 할 기본 형태가 있을 때 사용되는 디자인 패턴 - 기존 객체를 복제해 객체 생성 - 객체 생성 시 시간과 노력이 많이 들 시 사용 Factory Method - 상위 클래스: 객체를 생성하는 인터페이스 정의, 인스턴스 생성 방법 정의 - 하위 클래스: 인스턴스 생성, 함수 오버라이딩으로 인터페이스..