그럼에도 불구하고

오늘은 useReducer를 이용한 todoList를 만들어보겠습니다. 목차 [ useReducer ] useReducer 훅을 사용하는 방법은 다음과 같습니다. // state : 상태 // dispatch : 상태를 변경하는 메서드 // reducer : 새로운 상태를 리턴하는 리듀서 함수 /// initialState : 초기 상태로 지정할 객체 const [state, dispatch] = useReducer(reducer, initialState); useReducer 훅에 리듀서 함수와 초기 상태를 인자로 전달하여 호출하면 상태와 상태 변경을 위해 메시지를 전달할 수 있는 dispatch 함수가 리턴됩니다. dispatch 함수가 미리 정의한 형식의 메시지를 전달하면 상태를 변경하도록 리듀서 ..

오늘은 git commit과 commit message를 수정하는 법에 대해 알아보겠습니다. 목차 [ commit 수정 ] git으로 작업할 때, 새 커밋을 실행한 다음 그 커밋에 관련 파일을 포함시키는 것을 잊었거나, 커밋 메시지를 읽었을 때 오타가 있는 것을 뒤늦게 깨달을 때가 있습니다. 이를 해결하는 방법에 대해 알아보겠습니다. 💡 전제 조건: local에서 commit을 하고 push를 하지 않아 remote에 올라가지 않은 상태여야 한다. 📌 1. git commit --amend $ git status ---- modify: **/js 등등 ---- $ git add. $ git commit -m "Upload filename" $ git commit --amend 위와 같이 amend를 이용..

오늘은 Git commit message에 대한 이런저런 얘기를 나눠보겠습니다. :) [ commit은 원자적으로 유지하자 ] 원자적? 작다? 네 Git 공식 문서에 따르면 commit은 가능하다면 단일 기능이나, 단일 변화, 수정을 포함해야 하며 각각의 커밋은 한 가지에만 집중하는 게 좋다고 합니다. ⭐️ GitHub에 올려진 내 프로젝트 혹은 공부하던 작업물을 올리려고 할 때, 수도 없이 commit을 하고는 하는데요. 혹시, commit은 어떤 기준으로 하는 것이 좋은지 생각해보신적 있으신가요? 한 가지 예시를 들어보도록 하겠습니다. 📌 예시 어떤 쇼핑몰을 만드는 프로젝트를 작성하고 있다고 할 때, 쇼핑몰 안에 있는 물건들의 목록이 있는 파일이 있습니다. 그 파일에는 50가지의 물품이 저장되어 있는..

시작! 목차 📌 webpack.config.js HTML 삽입 미리보기할 수 없는 소스 ⭐️ 1. 모드 설정 mode 매개 변수는 다음 3가지 값 중 하나를 사용할 수 있다. mode: "production", mode 값 설명 development 개발 모드 production 배포 모드 (기본 값) none 기본 최적화 옵션 설정 해제 "production" 모드는 Webpack 모듈 번들링 과정에서 자체적으로 코드를 최적화하여 용량을 줄일 수 있다. ⭐️ 2. 엔트리 설정 entry : 애플리케이션의 진입점 (entry point)를 설정한다. 나는 "main", "additional", "myClothes" 세 가지 엔트리 포인트를 정의하였다. 이는 각각에 해당하는 JavaScript 파일이 엔트..

SyntheticEvent를 통한 React 이벤트 적용에 대해 알아보겠습니다. 목차 [ Event Argument ] 리액트 이벤트 핸들러 함수에서의 이벤트 아규먼트는 브라우저의 종류와 관계없이 이벤트를 처리할 수 있도록 SyntheticEvent 타입으로 추상화합니다. SyntheticEvent를 기반으로 확장된 다양한 Event 타입은 다음과 같습니다. 각 Event Argument 타입에서 사용할 수 있는 속성은 다음 문서의 타입 정보를 확인하세요. https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react/v17/index.d.ts GitHub - DefinitelyTyped/DefinitelyTyped: The repo..

PropTypes를 이용하여 리액트 컴포넌트의 유효성을 검증하는 방법에 대해 알아보겠습니다. 목차 [ 속성의 유효성 검증 방법 ] 리액트 컴포넌트의 유효성을 검증하는 방법은 여러 가지가 있습니다만 타입스크립트를 사용한다면 타입스크립트의 정적 타입 지원 기능을 이용할 수 있습니다. 이 방법은 컴파일(빌드) 시에 타입을 검사하며, IDE를 통해서 코드 자동완성 기능을 지원받을 수 있습니다. 또 다른 유효성 검증 기능으로는 PropTypes가 있습니다. PropTypes는 리액트가 지원하는 기능이며, 컴파일할 때가 아닌 실행 중에 속성에 대한 유효성 검증을 수행합니다. 따라서 속성으로 전달하는 값과 타입에 따라 경고를 발생시킵니다. 일반적으로는 타입스크립트의 정적 타입을 이용한 유효성 검증만으로도 충분하지만,..

dangerouslySetInnerHTML에 대해 알아보겠습니다. 다음과 같이 msg에 "Hello World"를 넣고 react를 실행시켰습니다. HTML 삽입 미리보기할 수 없는 소스 출력되는 화면 실행한 서버에서 웹 브라우저의 개발자 도구를 열고 콘솔 화면에서 다음과 같이 스크립트를 실행해 보겠습니다. 브라우저 화면에서 태그의 문자열이 그대로 출력됐습니다. 그 이유는 웹 애플리케이션에서 흔히 발생하는 XSS(Corss Site Scripting) 같은 공격에 대비하기 위해서 가 로 HTML 인코딩 됐기 때문입니다. 만일 HTML 마크업 형태의 값을 보간하려고 한다면 두 가지 방법을 사용할 수 있습니다. 첫 번째 방법은 dangerouslySetInnerHTML 특성을 사용하는 것입니다. [ d..

오늘은 Vite에 대해 알아보겠습니다. [ Vite란? ] Vite(비트)는 프랑스어로 '빠르다'라는 뜻을 가진 단어로, 차세대 프런트엔드 개발 도구입니다. 이름처럼 빌드와 개발 서버 구동 시간이 매우 빠릅니다. 기존에 자주 사용하던 webpack, rollup 등의 빌드 도구는 자바스크립트 언어로 만들어졌지만, Vite가 내부적으로 사용하는 ESBuild는 Go라는 네이티브 언어로 만들어진 도구를 이용해 빌드하기 때문에 빌드 속도가 아주 빠릅니다. Webpack, Parcel등과 비교하면 10배 이상의 빠른 속도를 자랑합니다. ( 안쓸 이유가? ) 또한 개발 서버를 이용할 때도 아주 빠릅니다. 기존 webpack과 같은 모듈 번들러를 이용할 때는 모듈 번들링을 끝낸 후 개발 서버를 구동하므로 시간이 오..

npm 패키지 매니저와 설치모드에 대해 알아보겠습니다. npm install, yarn add 명령어는 Node.js 패키지(라이브러리)를 설치할 수 있는 명령어입니다. 설치 모드는 크게 네 가지입니다. 📌 npm install [패키지명1] [패키지명 2] npm install [패키지명1] [패키지명2] 이 명령어는 '로컬 모드'로 설치합니다. 로컬 모드는 현재 디렉터리의 node_module 디렉터리에 패키지를 설치하는 것입니다. 📌 npm install -g [패키지명 1] [패키지명 2] npm install -g [패키지명1] [패키지명2] -g 옵션은 패키지를 전역(global)에 설치합니다. 전역으로 설치한 패키지는 현재 컴퓨터 내의 모든 프로젝트에서 이용할 수 있습니다. 📌 npm in..

Git과 GitHub의 차이점에 대해 알아보겠습니다. [ GIt vs GitHub ] Git과 GitHub는 밀접한 관련이 있지만 같은 것은 아닙니다. 📌 Git Git은 버전관리 소프트웨어이고 누군가의 컴퓨터에서 실행됩니다. 제 컴퓨터에서 실행될 수도 있고, 여러분의 데스크톱에서 실행될 수도 있습니다. 하지만, 인터넷은 필요하지 않습니다. 프로그램이 없으면 다운로드해서 컴퓨터에서 사용하면 됩니다. 인터넷이 없어도 깃을 사용할 수 있는데, 마치 텍스트 에디터나 MS Word, Excel과 같은 문서 프로그램을 사용하는 것과 마찬가지입니다. 인터넷도 필요없고, 회원가입을 할 필요도 없습니다. 즉, 아무 때나 문서를 작성할 수 있습니다. 📌 GitHub GitHub는 웹서비스 입니다. 그리고 GitHub는 ..

Git에 대해 알아보겠습니다. [ Git이란 무엇인가? ] Git을 버전관리 시스템으로 알려져 있고, VCS로 줄여서 말하기도 합니다. 유일한 VCS는 아니지만, 전 세계에서 가장 인기 있는 버전관리 시스템입니다. 버전관리는 파일의 변화를 시간에 따라 추적하고 관리하는데 도움을 주는 소프트 웨어입니다. 어마어마한 소스 코드와 수천 개의 파일 그리고 엄청난 수의 개발자들이 있는 페이스북이나 구글 같은 회사를 생각해 보면, 그들은 모두 병행해서 작업을 하고 있고 매일매일 변화를 만들어내고 있습니다. 그런 변화들을 추적하고 조합하며 때론 되돌리기도 하는데, 그것이 바로 깃같은 버전관리프로그램의 역할입니다. 대부분의 버전관리시스템은 이전 버전의 파일을 다시 볼 수 있게 해주고 버전들 간의 또는 파일들 간의 변화..

오늘은 Server Side Rendering에 대해 알아보겠습니다. [ Server Side Rendering (SSR) ] 서버사이드 렌더링은 클라이언트(브라우저)가 서버에 매번 데이터를 요청하여 서버에서 처리하는 방식으로 UI를 서버에서 렌더링 하는 것을 의미합니다. 즉, 클라이언트에서 요청이 들어올 때마다 매번 서버에서 새로운 화면(View)을 만들어 제공하는 것입니다. 📌 서버 사이드 렌더링의 장점 서버 사이드 렌더링에는 어떤 장점이 있을까요? 일단 구글, 네이버, 다음 등의 검색 엔진이 우리가 만든 웹 애플리케이션의 페이지를 원활하게 수집할 수 있습니다. 리액트로 만든 SPA는 검색 엔진 크롤러 봇처럼 자바스크립트가 실행되지 않는 환경에서는 페이지가 제대로 나타나지 않습니다. 따라서 서버에서 ..