Frontend 100

combineReducers

combineReducers Redux에서 제공하는 유틸리티 함수 중 하나로, 여러 개의 리듀서를 하나로 합치는 역할을 합니다. 이를 사용하면 Redux 스토어에 여러 개의 리듀서를 등록할 수 있으며, 각 리듀서는 서로 다른 부분 상태를 관리하게 됩니다. combineReducers를 사용하면 리덕스 애플리케이션의 상태를 모듈화하고 유지보수를 쉽게 할 수 있습니다. combineReducers를 사용하지 않는 경우 // reducers.js const initialStateA = { dataA: [], }; const initialStateB = { dataB: {}, }; const reducerA = (state = initialStateA, action) => { // ... }; const red..

Frontend/react 2023.09.27

react-router-dom 버전6 변경 사항

기본 설정 방법 https://sumni.tistory.com/229 React Router Dom 설정(버전 5.x, 6링크) react-router-dom은 React 애플리케이션에서 라우팅 및 네비게이션을 처리하기 위한 JavaScript 라이브러리입니다. 1. React 앱에 react-router-dom 설치하기 먼저, React 앱에 react-router-dom을 설치합니다. 프로젝 sumni.tistory.com 버전 6 변경 사항 1. 라우트 설정 방법 이전 버전에서는 컴포넌트를 사용하여 경로와 컴포넌트를 매핑했습니다. 버전 6에서는 대신 를 사용하여 라우트를 정의합니다. 이제 각 경로에 대한 element 속성을 사용하여 해당 경로에 렌더링할 컴포넌트를 지정합니다. 예전 버전 (버전 5..

Frontend/react 2023.09.25

React Router Dom 설정(버전 5.x, 6링크)

react-router-dom은 React 애플리케이션에서 라우팅 및 네비게이션을 처리하기 위한 JavaScript 라이브러리입니다. 1. React 앱에 react-router-dom 설치하기 먼저, React 앱에 react-router-dom을 설치합니다. 프로젝트 루트 디렉토리에서 다음 명령을 실행합니다 npm install react-router-dom 2. 라우터 설정하기 React 앱의 라우팅을 위해 BrowserRouter 컴포넌트를 사용합니다. 주로 앱의 최상위 컴포넌트인 App.js에서 설정합니다. import React from 'react'; import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'; impo..

Frontend/react 2023.09.25

[axios] defaults 설정 방법 및 옵션

Axios의 defaults 설정은 Axios를 전역으로 구성하기 위한 설정이며, 일반적으로 애플리케이션의 진입점 파일이나 Axios 인스턴스를 생성하기 전에 설정되어야 합니다. 주로 프로젝트의 초기화 코드 또는 설정 파일에서 이 설정을 구성합니다. - 설정 위치 애플리케이션 진입점 파일 (Main Entry Point) (예: main.js) 만약 Vue.js, React, Angular 등의 프레임워크 또는 라이브러리를 사용하는 경우, 애플리케이션의 진입점 파일에서 Axios의 defaults 설정을 수행하는 것이 일반적입니다. // main.js import { createApp } from 'vue'; import App from './App.vue'; import axios from 'axios..

RESTful API란? (+예시)

RESTful API는 Representational State Transfer의 약자로, 웹 서비스를 위한 아키텍처 스타일 중 하나입니다. REST는 HTTP(Hypertext Transfer Protocol)를 기반으로 하며, 자원을 표현하고 상태를 전달하기 위한 간단한 방법을 제공합니다. - REST (Representational State Transfer) 자원을 이름(자원의 표현)으로 구분하여 해당 자원의 상태(정보)를 주고 받는 모든 것을 의미한다. 자원(resource)의 표현(representation) 에 의한 상태 전달 - 자원: 해당 소프트웨어가 관리하는 모든 것 Ex) 문서, 그림, 데이터, 해당 소프트웨어 자체 등 - 자원의 표현: 그 자원을 표현하기 위한 이름 Ex) DB의 학..

SCSS, CSS 차이, 장단점(비교 코드)

SCSS(또는 Sassy CSS)와 CSS는 웹 개발에서 스타일을 정의하고 관리하는 데 사용되는 두 가지 다른 언어입니다. SCSS는 CSS의 확장으로, CSS를 더 효율적으로 작성하고 관리하기 위해 개발된 언어입니다. SCSS 장단점 장점: 스타일 시트를 더 가독성 있고 유지 보수하기 쉽게 만들 수 있습니다. 단점: 전처리기를 위한 도구 필요, 컴파일 시간 소요 SCSS, CSS 차이점 문법 차이 CSS는 중괄호({})와 세미콜론(;)을 사용하여 스타일을 정의하고 구분합니다. SCSS는 중괄호와 세미콜론을 사용하는 CSS와 유사한 문법을 가지고 있지만, 중첩된 규칙 및 변수, 함수, 믹스인(Mixin)과 같은 고급 기능을 제공합니다. 컴파일러 필요성 CSS 파일은 별도의 컴파일 과정 없이 웹 브라우저에..

Frontend/css 2023.09.12

router 설정 및 사용

Vue Router를 사용하여 여러 페이지를 다루고 각 페이지에 주소를 지정하는 방법입니다. router 설정1. Vue Router 설치- Vue 프로젝트에 Vue Router를 설치합니다.npm install vue-router - 버전 확인#Vue 2.x와 vue-router 3.xnpm install vue-router@3#Vue 3.x와 vue-router 4.xnpm install vue-router@4 2. Vue Router 설정- index.js (2024.11 수정함)Vue Router를 설정하려면 src 폴더에 router 폴더를 생성하고 그 안에 index.js 파일을 만듭니다.  import { createRouter, createWebHistory } from 'vue-route..

Frontend/vue3 2023.09.11

[HTML5] 드래그 앤 드롭(Drag and Drop) - 리스트 순서 변경

drag and drop 이벤트 - dragStart dragStart 이벤트는 드래그 작업이 시작될 때 발생합니다. 요소가 드래그되고 있는 동안 한 번만 발생합니다. 주로 이 이벤트를 사용하여 드래그 데이터를 설정하고, 드래그 중인 요소의 스타일을 변경하거나 사용자 지정 드래그 피드백을 제공하는 데 사용됩니다. - dragEnter dragEnter 이벤트는 드래그된 요소가 들어갈 수 있는 다른 요소 위로 이동할 때 발생합니다. 주로 이 이벤트를 사용하여 드롭 대상 요소에 대한 피드백을 제공하거나 드래그된 요소가 들어갈 수 있는 영역을 하이라이트하는 데 사용됩니다. - dragLeave dragLeave 이벤트는 드래그된 요소가 들어갈 수 있는 영역에서 떠날 때 발생합니다. 주로 이 이벤트를 사용하여 ..

Frontend/html 2023.09.05

v-if v-show 차이

v-if와 v-show는 둘 다 Vue.js에서 조건부 렌더링을 구현하는 데 사용되는 디렉티브입니다. 둘의 차이점에 대해 알아보았습니다. - v-if, v-show 차이점 1. 렌더링 방식 v-if: 조건이 true일 때만 해당 엘리먼트가 렌더링됩니다. 조건이 false인 경우 해당 엘리먼트는 DOM에서 제거됩니다. v-show: 조건이 true일 때 해당 엘리먼트는 CSS의 display: none을 이용하여 숨깁니다. 조건이 false인 경우에도 해당 엘리먼트는 DOM에 그대로 유지됩니다. 2. 비용 v-if: 초기 조건이 거짓인 경우 렌더링하지 않습니다. 하지만 엘리먼트가 추가/제거될 때 마다 렌더링과 패치 과정이 발생하기 때문에 토글 비용이 높습니다. v-show: CSS 기반 토글으로 초기 조건..

Frontend/vue3 2023.08.24

mounted, beforeUnmount, unmounted

emitter 중복 등록 해결 mounted() { this.emitter.on('event', function (param) { that.receiveEvent(param); }); }, beforeUnmount() { this.emitter.off('event'); }, unmounted() { // } 만약 아래와 같이 하나는 v-show고 하나는 v-if일 때 두 컴포넌트에서 같은 이벤트 리스너를 사용하고 v-if컴포넌트에 위와 같이 작성하면 v-show인 컴포넌트에서는 다시 마운트 되지 않아서 이벤트 리스너 등록이 안된다. 둘다 v-if/v-show 통일하여 사용해야함. v-if를 사용하는 이유 Bcomponent의 mount함수 내부에 Acomponent에서의 선택에 따라 변하는 데이터에 따른..

Frontend/vue3 2023.08.24