🧶 𝗪𝗲𝗯

    [to-do-app] React 할 일 완료 & 삭제 기능
    🧶 𝗪𝗲𝗯/React

    [to-do-app] React 할 일 완료 & 삭제 기능

    https://yeomss.tistory.com/202?category=976597 [to-do-app] React Header 만들기 https://yeomss.tistory.com/201 [to-do-app] React 환경설정 + Redux React 프로젝트를 할 때 필수로 Redux 를 사용하는데, 항상 까먹습니다. 🥹 그래서 간단한 To do App 을 만들어서 블로그에 기록을 하고자.. yeomss.tistory.com 이전 글은 위에 링크로 달아놓겠습니다. 이번에는 List 를 만들어보겠습니다. List에서 투 두 리스트를 완료 체크하고, 요소 하나를 삭제하는 기능을 추가하도록 하겠습니다. ListView import React from "react"; import { useSelector..

    [to-do-app] React Header 만들기
    🧶 𝗪𝗲𝗯/React

    [to-do-app] React Header 만들기

    https://yeomss.tistory.com/201 [to-do-app] React 환경설정 + Redux React 프로젝트를 할 때 필수로 Redux 를 사용하는데, 항상 까먹습니다. 🥹 그래서 간단한 To do App 을 만들어서 블로그에 기록을 하고자 합니다. 해당 글 시리즈를 확인하고 싶으시다면 아래에 있는 yeomss.tistory.com 이전 글은 위에 링크로 달아놓겠습니다. 이번에는 Header 를 만들어보겠습니다. Header에서 user의 닉네임을 state 에서 가져오고 변경도 가능하도록 만들 것입니다. HeaderView import React from "react"; import "../styles/header.css"; import Title from "../component..

    [to-do-app] React 환경설정 + Redux
    🧶 𝗪𝗲𝗯/React

    [to-do-app] React 환경설정 + Redux

    React 프로젝트를 할 때 필수로 Redux 를 사용하는데, 항상 까먹습니다. 🥹 그래서 간단한 To do App 을 만들어서 블로그에 기록을 하고자 합니다. 해당 글 시리즈를 확인하고 싶으시다면 아래에 있는 [react-to-do-app] 태그를 주목해주세요. create-react-app 폴더 생성 mkdir to-do-app cd to-do-app create-react-app . create-react-app 을 이용해서 리액트 프로젝트 폴더를 만들어주세요. 만드시면 오른쪽과 같아 폴더 구조가 구성됩니다. Redux 설치 npm install react-redux npm install @reduxjs/toolkit redux 를 설치해줍니다. 저는 redux-toolkit 을 사용할 예정입니다...

    [Document] Svelte - 1.Introduction
    🧶 𝗪𝗲𝗯/Svelte

    [Document] Svelte - 1.Introduction

    새로운 프론트엔드 프레임워크를 배워보고자 합니다. 최근에 라이징하고 있는 언어인 Svelte.js 입니다. 튜토리얼을 조금 해봤을 때는 React나 Vue 보다 훨씬 쉽고 간편한 느낌입니다. 앞으로 Document를 읽어나가면서 배우는 것을을 기록해보겠습니다. Svelte.js 의 Tutorial 페이지는 다음과 같습니다. 해당 페이지로 가면 웹 상에서 바로 Svelte 튜토리얼을 진행할 수 있습니다. https://svelte.dev/tutorial/basics Introduction / Basics • Svelte Tutorial Introduction / Basics a. Basicsb. Adding datac. Dynamic attributesd. Stylinge. Nested components..

    [to-do-app] Vue Transition
    🧶 𝗪𝗲𝗯/Vue

    [to-do-app] Vue Transition

    transition-group {{ todoItem.item }} Vue 는 UI적으로 간편하게도 트랜지션 컴포넌트가 이미 프레임워크에 내재되어 있습니다. 해당 효과는 transition-group 태그를 통해 사용할 수 있으며, 해당 element 에 애니메이션 효과를 달 수 있습니다. name 속성은 해당 트랜지션의 이름이며, tag 는 해당 트랜지션이 적용될 element 를 이릅니다. 위의 코드는 list 라는 이름을 가진 ul 태그 transition-group 입니다. Vue3 버전 부터는 TransitionGroup 이라는 이름으로 사용할 수 있습니다. Transition CSS /* 리스트 트랜지션 */ .list-enter-active, .list-leave-active { transit..

    [to-do-app] Vue 모달 컴포넌트
    🧶 𝗪𝗲𝗯/Vue

    [to-do-app] Vue 모달 컴포넌트

    웹에서 자주 쓰는 모달 컴포넌트에 대해서 포스팅을 해보고자 합니다. 강의를 들으면서 모달을 띄우는 것에 오류가 있었는데 해결을 해서 기쁘네요. 그럼 글 시작하겠습니다. 모달 컴포넌트 붙여넣기 Document https://kr.vuejs.org/v2/examples/modal.html 모달 컴포넌트 — Vue.js Vue.js - 프로그레시브 자바스크립트 프레임워크 kr.vuejs.org 도큐먼트는 다음 주소창으로 이동하면 나옵니다. 해당 도큐먼트에서 다음 코드들을 가져옵니다. Modal Html 코드 default header default body default footer Modal CSS 코드 .modal-mask { position: fixed; z-index: 9998; top: 0; left..

티스토리툴바