개발/FRONT (27) 썸네일형 리스트형 React와 Redux로 데이터 관리하기: 기초 예제 Redux는 React 애플리케이션에서 전역 상태 관리를 쉽게 해주는 라이브러리입니다. 이번 포스팅에서는 Redux를 React 프로젝트에 통합하고, 간단한 상태 관리를 구현하는 방법을 단계별로 설명하겠습니다. 1. 프로젝트 설정먼저, Redux와 관련된 패키지를 설치합니다. npx create-react-app redux-examplecd redux-examplenpm install redux react-redux @reduxjs/toolkit 2. Redux 설정Redux의 상태를 관리하기 위해, @reduxjs/toolkit을 사용하여 간단한 스토어를 설정합니다. import { configureStore, createSlice } from '@reduxjs/toolkit';// 상태를 관리할.. 재미있는 리액트 NPM 라이브러리 5가지 리액트 생태계에는 다양한 라이브러리가 존재하지만, 그 중에서도 흥미롭고 독특한 기능을 제공하는 라이브러리들이 있습니다. 이번 포스팅에서는 리액트 개발자들이 즐겁게 사용할 수 있는 재미있는 라이브러리 5가지를 소개합니다. 1. React Spring애니메이션은 사용자 경험을 더욱 풍부하게 만듭니다. React Spring은 물리 기반 애니메이션 라이브러리로, 자연스럽고 부드러운 애니메이션을 구현할 수 있게 해줍니다.특징:애니메이션을 물리 기반으로 처리하여 자연스러움 극대화간단한 API로 복잡한 애니메이션 구현 가능React Hooks와 완벽 호환 import React from 'react';import { useSpring, animated } from 'react-spring';const Spr.. 리액트와 린큐(Linq): 효율적인 데이터 처리를 위한 조합 리액트(React)는 그 자체로도 강력하지만, 다양한 라이브러리와 도구들과 결합했을 때 더욱 강력해집니다. 그 중 하나가 바로 C#의 인기 라이브러리인 링큐(Linq)를 자바스크립트로 구현한 Linq.js입니다. Linq.js는 배열과 컬렉션 데이터를 효율적으로 처리하는 데 유용한 다양한 기능을 제공합니다. 이번 포스팅에서는 Linq.js를 리액트와 함께 사용하는 방법을 예제를 통해 살펴보겠습니다.Linq.js 설치 및 설정먼저 Linq.js를 프로젝트에 설치해야 합니다. NPM 또는 Yarn을 사용하여 Linq.js를 설치할 수 있습니다. npm install linq# 또는yarn add linq 설치가 완료되면 Linq.js를 프로젝트에 임포트합니다. import { from } from 'lin.. 2024년 웹 개발 트렌드: 가장 인기 있는 프론트엔드 프레임워크 TOP 5 웹 개발의 세계는 빠르게 변화하고 있습니다. 매년 새로운 기술과 프레임워크가 등장하고, 기존의 프레임워크들도 꾸준히 업데이트되며 발전하고 있습니다. 그 중에서도 가장 많은 개발자들의 사랑을 받고 있는 프레임워크는 무엇일까요? 지금부터 2024년 현재 가장 인기 있는 프론트엔드 프레임워크 TOP 5를 소개합니다. React, Vue.js, Angular, Svelte, Next.js는 각각의 장점과 특징을 가지고 있으며, 다양한 프로젝트와 요구사항에 맞춰 선택할 수 있는 다양한 옵션을 제공합니다. 이 프레임워크들의 최신 동향과 주요 기능을 살펴보고, 어떤 프레임워크가 여러분의 프로젝트에 가장 적합할지 고민해보세요. 1. React React는 페이스북에서 개발한 자바스크립트 라이브러리로, 컴포넌트 .. [Vue3] Composition API 환경 컴포넌트 간 이벤트 전달하기 Vue3 환경에서 서로 다른 컴포넌트 간의 이벤트를 전달하기 위해 사용했던 방법이다. 사용 이유 나의 경우에는 상단의 알림 다이얼로그에서 보여지는 알람들 중, 읽지 않은 것은 별도의 표시를 해주고 있다. 또한 알림 리스트 페이지를 따로 구현해서 전체 알림을 조회할 수 있는 페이지가 별도로 구현되어있었는데, 다이얼로그에서 알림을 클릭해 상세 페이지로 이동할 때에는 문제가 없었지만, 리스트 페이지에서 상세페이지로 이동했을 때, 알림 다이얼로그 페이지는 별도의 페이지로 구현되어 있기 때문에, 해당 이벤트를 인지할 수 없어서 reactive하게 알림 다이얼로그 데이터를 최신화할 수없었다. 요약 주체가 알림 다이얼로그 페이지일 때, 알림 다이얼로그 -> 상세 페이지 인지 가능 알림 리스트 페이지 -> 상세 페이지.. [Vue] 페이지 이동 시 Router state로 객체 전달하기 Vue3 이후, this 및 $router 등에 접근할 수 없음에 따라 useRouter를 사용해서 페이지 전환을 한다. https://router.vuejs.kr/guide/advanced/composition-api.html Vue Router | Vue.js의 공식 라우터 Vue 3에 필요한 최신 공식 라우터 router.vuejs.kr 보통 페이지 전환 시, URL을 통해 넘길 파라미터를 주고 받는다. 하지만 URL에 노출하고 싶지 않은 파라미터나 데이터타입이 객체인 데이터를 주고 받을 때, useRouter 내부 state 에 접근하여 객체를 주고 받으면 된다. params 또는 query로 데이터를 주고 받을 때는 다음과 같이 데이터가 URL에 남는다. 메인.vue 메인 페이지 상세페이지 객체.. [Vue] [Vue warn]: Component inside <Transition> renders non-element root node that cannot be animated. 에러 해결 방법 Vue 프레임워크로 프론트엔드 및 퍼블리싱 작업을 진행할 때, 많이 볼 수 있는 경고 메세지다. Vue의 template 안에는 하나의 root 엘리먼트만 존재해야 한다. root element 밖에 어떠한 엘리먼트가 존재하면 발생하는 경고 메세지로, 간단하게 수정할 수 있다. 다음과 같이 소스를 수정해주면 된다. ▼ warning warning 메세지 보고싶다..... good life ... ... ... ▼ 처리 warning 메세지가 안보인다..... good life ... ... ... [Vue] 라디오 버튼 형식의 체크박스 기능 개발하기 체크박스를 라디오버튼처럼 여러 체크박스 중 한가지를 선택할 수 있는 기능을 만들어보려고 한다. 필요해서 만들긴 했지만, Vue를 공부한지 얼마 되지 않아서 이렇게 만드는게 맞는지 싶다. ▶소스코드 const option1 = ref(1); const option2 = ref(2); const option3 = ref(3); const option4 = ref(4); const settings = (type) => { console.log(type + "번 클릭 "); } const emit = defineEmits(['update:selectedCheckbox']) watch(chooseOption, () => { emit('update:selectedCheckbox', chooseOption.value.. 이전 1 2 3 4 다음
