flatwhite01 님의 블로그

Gulp는 자바스크립트를 포함해서 HTML, CSS(SCSS), 이미지 등 다양한 웹 자산을 자동으로 처리해주는 개발 자동화 도구야.하지만 Gulp 자체가 자바스크립트 “컴파일러”는 아니야.정확히 말하면 Gulp는 **“자동화 도구(Automation Toolkit)”**로서, 우리가 원하는 작업들을 정의해두면 그걸 자동으로 실행해주는 역할을 해. ✅ Gulp가 하는 일 (예시)Gulp는 다음과 같은 "작업(Task)"들을 자동화할 수 있어:작업 종류설명SCSS → CSS 컴파일gulp-sass 같은 플러그인으로 Sass를 CSS로 변환JS 파일 합치기/압축여러 JS 파일을 하나로 합치고(minify), 용량 줄이기HTML include여러 HTML 파일을 조립하는 템플릿 처리이미지 sprite이미지 ..

1. Vue.js 시작하기Vue.js는 사용자 인터페이스를 구축하기 위한 프로그레시브 프레임워크입니다.2. Vue.js 프로젝트 구조public: 정적 파일들이 위치합니다 (favicon.ico, index.html 등)src: 소스 코드가 위치합니다assets: 이미지, 폰트 등 에셋 파일components: 재사용 가능한 Vue 컴포넌트들App.vue: 메인 애플리케이션 컴포넌트main.js: Vue 애플리케이션을 초기화하는 파일3. Vue 컴포넌트 구조Vue 컴포넌트는 보통 세 부분으로 구성됩니다: Vue.js에서 이 코드에서 일어나는 과정은:컴포넌트 가져오기(Import): 우선 import 문을 사용해 HelloWorld 컴포넌트를 파일에서 가져옵니다.컴포넌트 등록하기: components..

상품 리스트에서 상품을 클릭했을 때 해당하는 상품 정보 페이지로 이동 하기 위해서콜론(:)은 React Router에게 해당 위치에 동적인 값이 들어올 수 있음 productID는 해당 동적 값의 이름을 나타냅니다.  이 이름은 useParams 훅을 사용하여 해당 값을 추출할 때 사용됩니다. useParams는 "동적 파라미터를 가져오는" 훅이며, 이 동적 파라미터는 URL 경로에서 변하는 값들을 의미

리덕스(Redux)의 동작 순서도는 상태 관리의 흐름을 단계별로 나타냅니다.이를 통해 dispatch, action, reducer, 그리고 store 간의 상호작용을 명확하게 이해할 수 있습니다. 아래에 Redux의 기본 흐름을 순서도 형태로 설명할게요.Redux의 동작 순서도사용자 이벤트 발생예를 들어, 버튼 클릭, 텍스트 입력 등과 같은 이벤트가 발생합니다. 이 이벤트는 리덕스 상태를 변경할 필요가 있는 동작을 유발합니다.컴포넌트에서 dispatch 호출사용자가 상호작용을 하면, React 컴포넌트 내에서 dispatch를 호출합니다.dispatch는 액션 객체를 리덕스 스토어로 전달합니다.버튼을 눌렀을때 액션이 발생되기 때문에  그 액션을 전달해주는 함수 dispatch를 사용한다{dispatch..

**Pull Request(Pull Request, PR)**는 협업 프로젝트에서 코드 변경 사항을 리뷰 받고 병합하는 중요한 절차입니다. GitHub을 기준으로 풀 리퀘스트를 만드는 방법을 아래 단계별로 설명할게요.1. GitHub에서 Fork (선택 사항)먼저 협업하는 프로젝트를 자신의 계정으로 Fork 해야 할 수 있습니다. 이는 다른 사람의 리포지토리에서 작업할 때 필요합니다.Fork: 프로젝트 페이지에서 Fork 버튼을 클릭하여 자신의 GitHub 계정에 리포지토리를 복사합니다.2. 로컬에서 리포지토리 클론 (Clone)리포지토리를 로컬 환경에 가져옵니다.bash복사git clone https://github.com/yourusername/repository-name.git cd reposito..

import { createSlice } from '@reduxjs/toolkit';//자바스크립트 영역 toolkit 내부에 지원해준다const initialState = {    count: 0,};export const counterSlice = createSlice({    name: 'counter',    initialState,    reducers: {        increment: (state, action) => {            // action.payload => UI 디자인에서 값을 넘긴것을 받기            //state.키 =>initialState 에 초기변수 연결            state.count += 1;        },        decremen..