1. Redux ToolKit Redux 를 좀 더 쉽게 사용할 수 있도록 만들어진 라이브러리로 공식문서에서도 RTK 를 사용할 것을 권장 2. 설치npm install @reduxjs/toolkit react-redux 3. 왜 Redux Toolkit 인가? 기존 Redux 에서는 Action Type 작성 Action 생성자 작성 Reducer 작성 을 했지만 RTK 에서는 CreateSlice 함수 하나로 가능 그리고 Combine Reducers 후 createStore 작성 하는 것도 configureStore 함수 하나로 가능 하다. 4. 사용방법 1) createSlice ..

1. Redux 란 Redux 는 react 에서 많이 사용하는 전역 상태관리 라이브러리 상태를 한 곳에서 통합 관리할 수 있어서 예측가능한 방식으로 상태 관리 가능 Redux 에서 공식적으로 추천하는 방법은 Redux Toolkit 을 사용하는 것이지만 Toolkit 사용 시에 Flux 패턴을 확인하기가 힘들기 때문에 Redux를 활용하였다. "Redux Toolkit은 Redux 로직을 작성하기 위한 표준 방식이 되도록 만들어졌고, 사용하기를 강력히 추천드립니다." https://ko.redux.js.org/redux-toolkit/overview/ Redux Toolkit: 개요 | ReduxRedux Toolkit은 Redux 로직 작성을 위해 권장하는 방법입니다ko.redux...

var 키워드 1. 변수 중복 선언 허용 2. 함수의 코드 블록만을 지역 스코프로 인정 함수 내부가 아니면 for 문 if 문 등 에서도 전역 변수로 인정됨 3. 변수 호이스팅에 의해 변수 선언문이 선두로 끌어올려진 것처럼 동작한다. 즉 변수 선언 이전에 참조 할 수 있지만 할당문 이전에 참조하면 undefined 를 반환 -> 변수 선언문 이전에 변수를 참조하는 것은 에러를 발생 시키지 않지만 가독성도 떨어지고 오류 발생 여지가 있다. 1 - 선언단계 + 초기화 단계 선언단계에서 식별자를 등록해 자바스크립트 엔진에 변수의 존재를 알림 초기화 단계에서 undefined 로 변수 초기화 초기화 단계부터는 참조 에러가 발생 하지 않고 undefined 출력..

1. Tailwind CSS 란 ? Tailwind CSS 는 가장 대표적인 Utility-First CSS 프레임워크이다. Utility-First 란 미리정의된 CSS 클래스들을 필요할 때마다 가져다 쓰는 방식 예를 들어 p-4 , text-blue-600, flex 등의 클래스를 HTML 에 추가하는 것만으로 스타일을 바로 적용할 수 있다. CSS 코드를 직접 작성 하지 않고, Class 이름도 안지어도 되기때문에 속도와 생산성 에서 장점이 있다. 2. Tailwin CSS 설치 ( React + Vite 기준) 1) Tailwin CSS 설치npm install tailwindcss @tailwindcss/vite 2) vite.config.js 파일의 plugin 에 tailwi..

이번 포스팅에서 다룰 내용styled-components가 무엇인지기본적인 사용법과 실습 예시컴포넌트 스타일 재사용 방법자동완성 VSCode 확장 소개styled-components의 고급 사용법props를 이용한 동적 스타일링 1. 웹프론트엔드의 기본 구성 1) HTML 2) JavaScript 3) CSS 앞에서 SCSS라는 기술을 알아 보았는데 Mixin 과 변수 및 중첩을 사용하여 문법을 좀더 단축 시킬 수는 있었지만 아직도 CSS 파일은 따로 작성해야 한다. 만약 CSS 까지도 JavaScript 파일 안에서 작성 할 수 있다면 진정한 컴포넌트 단위 개발(*CCD)이 가능 → 이렇게 해서 탄생한 기술이 Styled Componet 다 *CCD : Component Driven..

1. 프론트 엔드에서 사용하는 세 가지 언어HTMLCSSJavascript React 에서는 HTML 과 Javascript 를 JSX라는 문법으로 한파일에 작성이 가능하지만, CSS 는 여전히 별도의 파일에 작성. 하지만 React 에서 CSS 외에도 다양한 스타일링 방법이 존재 2. CSS 의 단점과 SCSS 이 등장 CSS 장점배우기 쉽고 간단하다.별도의 설정이나 설치 없이 브라우저가 바로 인식로딩속도가 빠르다 CSS 단점코드의 중복이 많다.재사용성이 낮다.구조화가 어려워 유지보수가 힘들다. 3. SASS 와 SCSS 의 차이점 1) SASS : Syntactically Awesome Style Sheets (문법적으로 짱멋진 ..