본문 바로가기

전체 글

 (121)
22.12.05: redux-saga 실습 해보기 오늘의 목표는 Redux saga 어떨 때 써야하는지, 어떻게 쓰는지 알아보기. About Redux-Saga redux-saga is a library that aims to make application side effects (i.e. asynchronous things like data fetching and impure things like accessing the browser cache) easier to manage, more efficient to execute, easy to test, and better at handling failures. The mental model is that a saga is like a separate thread in your application th..
22.11.30: Redux + thunk, saga 발췌 from 벨로퍼트와 함께하는 모던 리액트 오늘은 리덕스에 대해서 정리해보고자 한다. 처음에 리덕스에 대한 개념 정리가 제대로 되지 않은 상태로 리덕스툴킷으로 넘어가버려서 리덕스를 제대로 이해하고있지 못하고 있다. 특히 미들웨어에 대해서... Redux 리덕스는 현재까지 가장 사용률이 높은 상태관리 라이브러리임. 우리가 만드는 컴포넌트들의 상태관리를 따로 분리시켜서 효율적으로 관리가 가능하고, 전역 상태 관리도 쉽다. Redux vs Context API *Context API: 리액트 내장 API로 컴포넌트와 상관없이 값을 전역으로 관리 가능함 (useReducer와 함께 상태관리도구 역할 가능) 1. 미들웨어의 존재 리덕스에는 Middleware라는 것이 있다. 이것을 사용하면 액션 객체가 리듀서..
22.11.29: 리액트의 렌더링 최적화 (useCallback, React.memo, useMemo) 내용 발췌 : 우아한Tech [10분 테코톡] 엘버의 리액트 렌더링 최적화 브라우저의 렌더링은 무엇인지 먼저 알아보기 1. HTML을 파싱해서 DOM을 만들고 CSS을 파싱해서 CSSOM을 만든다. 2. DOM과 CSSOM으로 Render Tree를 만들어준다. 3. Layout과 4. Paint 과정을 거쳐서 5. 사용자가 화면을 보게 된다 그렇다면 리엑트에서의 렌더링이란? 리액트가 함수를 호출하는 것이다. 예를 들면, function App() { const handleClick = () => { // 로직생략 }; return rendering is just calling function; } 위의 App 컴포넌트가 실행되면서 내부 로직들이 실행이 되고 리턴문을 통해서 리액트 엘리먼트들을 반환하는 ..
22.11.28: git commit message 잘못 쓰고 있었던 커밋 라벨: style 코드 수정없이 code formatting 스타일 변경이 있을 때 써야하는 것. 나는 컴포넌트 styling 할 때 그 스타일으로 이해하고 썼다. 그리고 예전에도 fix, refactor 라벨을 잘못 붙여서 사용했던 경험이 있다. 다시 한번 정리해보며 반성하는 시간을 가져야겠다....* . * feat: 새로운 기능에 대한 커밋 fix: 버그 수정에 대한 커밋 build: 빌드 관련 파일 수정에 대한 커밋 chore : 그 외 자잘한 수정에 대한 커밋 ci : CI 관련 설정 수정에 대한 커밋 docs : 문서 수정에 대한 커밋 style : 코드 스타일 혹은 포맷 등에 관한 커밋 refactor : 코드 리팩토링에 대한 커밋 test : 테스트 코드 수정에 대한..
22.11.27 : CRA없이 프로젝트 생성하기-5 (webpack dev server, webpack.config.js 살펴보기) Reference : 캡틴판교님 강의, 웹팩 핸드북 Webpack Dev Server 웹팩 데브 서버는 웹 애플리케이션을 개발하는 과정에서 유용하게 쓰임. 웹팩 빌드 대상 파일이 변경되었을 때 매번 웹팩 명령어를 실행하지 않아도 코드 변경 후 저장하면 웹팩으로 빌드 후 브라우저를 새로고침 해준다. 매번 명령어 치지 않아도 되고 새로고침과, 웹팩 빌드하는 시간을 줄여줘서 웹팩 기반의 웹 애플리케이션 개발에 필수로 사용된다. 웹팩 데브 서버의 특징 일반 웹팩 빌드와 다른 특징이 있음. // package.json "scripts": { "dev": "webpack-dev-server", "build": "webpack" } 빌드한 결과물이 파일 탐색기나 프로젝트 폴더에서 보이지 않는다. 웹팩 데브 서버로 빌..
22.11.26 : CRA없이 프로젝트 생성하기-4 (code splitting 연습) Reference : 캡틴판교님 강의, 웹팩 핸드북 실습 package.json { "name": "code-splitting", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build": "webpack" }, "keywords": [], "author": "", "license": "ISC", "devDependencies": { "css-loader": "^3.4.2", "mini-css-extract-plugin": "^0.9.0", "style-loader": "^1.1.3", "webpack": "^4.42.0"..
22.11.26 : CRA없이 프로젝트 생성하기-3 (웹팩 설정, 주요 속성) Reference : 캡틴판교님 강의, 웹팩 핸드북 "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build": "webpack --mode=none --entry=src/index.js --output=public/output.js" }, 이렇게 package.json에서 직접 웹팩을 설정하게 되면 추가해야 할 것이 너무 많다. 프로젝트폴더 루트 레벨에 webpack 설정파일을 만들어주자. webpack.config.js // node.js의 모듈문법 // path라는 node.js 라이브러리를 가져옴 var path = require("path"); module.exports = { mode: "none", entry: "...
22.11.25: URI, URL URI Uniform Resource Identifier, 통합 자원 식별자의 줄임말. 브라우저의 검색창을 클릭하면 나타나는 주소가 URI이다. (URI는 인터넷 자원을 식별할 수 있는 문자열을 의미) URI의 하위개념으로 URL, URN이 있다. URL Uniform Resource Locator 웹 주소라고도 하며, 컴퓨터 네트워크 상에서 리소스가 어디 있는지 알려주기 위한 규약. URI의 서브셋이다. 차이점 URI는 식별, URL은 위치를 가리킨다. URI의 구조 scheme:[//[user[:password]@]host[:port]][/path][?query][#fragment] 1. scheme: 사용할 프로토콜을 뜻함. 웹에서는 http or https 2. user와 password: 서버의..
반응형

티스토리툴바