개발기록

이때까지 개발을 공부하며 의도적으로 피했던 단어가 있다. 프로그램 개발 과정에서 자주 들을 수 있는 '빌드 및 배포' 라는 단어였다. 단어 자체로 어떤 느낌인지 대충 감은 왔다. 빌드는 내 코드를 하나의 실행 가능한 어떤 프로그램으로 만들어주는 일인 것 같은데, 그럼 컴파일이랑은 뭐가 다른 거지? 배포는 웹 서버에 프로젝트를 올려서 다른 사람들도 내가 만든 프로그램을 쓸 수 있게 하는 것 같은데, 어떻게 배포가 되는 거지? 감이 오면서도 오지 않았기 때문에 이 두 단어에 대해선 보면서도 못 본 척을 했었다. 오늘은 빌드가 무엇인지에 대해 알아보고, React에서 사용하는 빌드 도구인 Webpack에 대해 간단하게 작성해 볼 것 같다. 빌드 빌드는 소스 코드 파일을 실행 가능한 소프트웨어 산출물로 변환하는..

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 기술을 활용해 페이지 진입 시 리로드 없이..

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