더 알아보기/기능84 [StoryBook] Vue 3 + Typescript + StoryBook 프로젝트에 fontAwesome 설정하기 [StoryBook] Vue 3 + Typescript 프로젝트에 StoryBook 적용하기Vue 3와 TypeScript를 사용한 프로젝트에서 폴더 구조를 고민하던 중, 컴포넌트를 테스트하고 문서화할 수 있는 방법으로 Storybook을 도입하기로 결정했다. StoryBook에 대해 알아보니, Vue에서 적용하는eundol1113.tistory.com이번 포스팅은 앞서 정리했던 [StoryBook] Vue 3 + Typescript 프로젝트에 StoryBook 적용하기에서 fontAwesome을 적용하는 방법을 다루고 있습니다. React를 사용하다가 Vue를 사용하다 보니 느끼는 거지만.. Vue에 부가적은 라이브러리를 사용할 때마다 구글링을 해보면 정보가 많이 없고, ChatGPT를 사용하더라도 정.. 2024. 9. 30. [StoryBook] Vue 3 + Typescript 프로젝트에 StoryBook 적용하기 Vue 3와 TypeScript를 사용한 프로젝트에서 폴더 구조를 고민하던 중, 컴포넌트를 테스트하고 문서화할 수 있는 방법으로 Storybook을 도입하기로 결정했다. StoryBook에 대해 알아보니, Vue에서 적용하는 방법에 대한 자료가 React보다 적기도 하고, 현재 진행 중인 프로젝트는 서브모듈을 사용하고 있어서 이번 기회에 정리해 두면 좋을 것 같았다. 사용 후기부터 얘기하자면, 처음에 적용할 때는 좀 낯설기도 하고 자동으로 문서화가 된다고 해도 설정을 해줘야 하니까 시간이 꽤 걸릴 것 같아서 비효율적이지 않을까? 하는 의문이 들었는데, 막상 해보니 예상보다 쉽게 설정할 수 있었고, 문서화가 잘 돼서 일일이 코드를 파악하지 않아도 된다는 점이 정말 좋았다. 설치 및 설정 방법※ node .. 2024. 9. 27. [Mockoon] Route에 paramer 설정하기 새로운 프로젝트에서 UI를 개발하던 중, API 개발이 지연되어 Mockoon을 활용해 mock 데이터를 사용하여 기능을 구현하게 되었습니다. 이 과정에서 Mockoon에 파라미터를 설정하는 방법에 대한 자료가 부족한 것 같아 짧게 정리해 보았습니다. Mockoon에 대한 설명이나 설치 방법은 아래 블로그를 참고하시면 좋을 것 같습니다. Mockoon을 활용한 프론트엔드 개발 효율성 향상: 가상서버 및 Proxy 설정1. Mockoon이란? Mockoon은 로컬 환경에서 REST API 모킹을 설계하고 실행할 수 있는 가장 간편하고 빠른 방법을 제공한다. 또한 시간을 절약할 수 있고, OpenAPI 사양과 호환이 되는 완벽한 도구이다. (출baekspace.tistory.com Parameter 설정하는.. 2024. 9. 25. [Next.js] Drag&Drop 기능 구현하기 이번에는 관리자 페이지에서 이미지를 업로드할 때 파일 선택 버튼 외에도 드래그 앤 드롭으로 이미지를 삽입할 수 있는 기능을 구현해보았다. 코드 아래 링크에 블로그와 기존에 구현했던 이미지 파일 변환 기능을 활용하여 구현하였다. Test 페이지 (/pages/test.js) import Head from "next/head" import FileBox from "@/elements/library/fileBox/Test" import { useEffect, useState } from "react" import styled from "styled-components" const Test = () => { const [imageFile, setImageFile] = useState(null) // AWS에 이.. 2024. 1. 9. [Next.js] Grouping Pagination 만들기 (라이브러리 X) 이전에 구현했던 페이지네이션에서...(그룹화) 기능을 추가한 버전으로 업그레이드하게 되면서 해당 내용을 정리해 보았습니다. Pagination 만들기 (라이브러리 X) 오늘은 Pagination(페이지 네이션) 기능을 만들어 보았다. 라이브러리 대신 부트스트랩으로 CSS 입혔고, 기능은 JS 사용해서 만들었다. (라이브러리를 사용하지 않은 이유 : 블로그를 찾아보던 중 reac eundol1113.tistory.com [React-query] Pagination에 Prefetching 사용하기 현재 진행 중인 프로젝트에 페이지네이션 기능을 구현했는 데 페이지를 넘길 때마다 데이터를 불러오는 속도보다 화면 전환 속도가 더 빨라서(데이터 불러오는 속도 < 화면 전환 속도) 페이지가 eundol1113.tis.. 2023. 12. 11. [Next.js] 드롭다운 영역 외 클릭 시 메뉴 닫기 드롭다운은 프로젝트에서 자주 구현하게 되는 기능인만큼 만들다 보면 이것저것 기능이나 디자인을 넣고 싶어지는 데 이번에는 드롭다운 영역 외 클릭 시 드롭다운 메뉴가 닫히는 기능을 만들어 보았다 기능 구현 과정에서 useRef를 사용하였고 이 과정에서 ref.current.contains(e.target)이라는 개념도 새롭게 알게 되었다. 🤔 ref.current.contains(e.target)란? ref : React의 'useRef' 훅을 통해 생성된 ref 객체 (ex. const ref = useRef(null) ref.current : Ref 객체의 'current' 속성을 나타내며, 해당 Ref가 현재 참조하는 DOM 요소 ref.current.contains(e.target) : 현재 Ref가.. 2023. 11. 27. [Next.js] 드래그 상태에서 css 조작하기 관련 글 목차 1️⃣ react-beautiful-dnd를 사용하여 드래그로 순서 변경하기 [React, Next.js] react-beautiful-dnd를 사용하여 드래그로 순서 변경하기 라이브러리는 react-beautiful-dnd npm 사이트에서 가져와서 사용했다. react-beautiful-dnd Beautiful and accessible drag and drop for lists with React. Latest version: 13.1.0, last published: a year ago. Start using react-beautiful-dnd in yo eundol1113.tistory.com 2️⃣ 다중 이미지 업로드 및 미리 보기 + 드래그로 순서 변경 [Next.js] 다중 .. 2023. 11. 23. [React + Typescript] Canvas 태그와 useRef를 사용하여 그림판 만들기 아직 블로그에 올리진 않았지만 지금 개인적으로 만들고 있는 프로젝트에 그림판 기능을 넣어보고 싶어서 canvas 태그와 useRef를 사용하여서 그림판 기능을 만들었습니다. 기능에 관한 코드와 설명은 추후 프로젝트가 완성되면 추가적으로 기재하도록 하겠습니다. 2023. 10. 20. [React + Typescript] 부모 자식 간에 useRef 사용하는 방법 React와 Typescript를 사용한 프로젝트에서 input에 useRef를 사용하던 중 새롭게 알게된 내용을 정리했습니다. 동일한 컴포넌트에서 useRef를 사용하는 경우 이 내용이 큰 도움이 되지 않을 수 있지만, 부모 컴포넌트에서 자식 컴포넌트에 prosp로 ref를 넘기고, 해당 ref에 접근하여 DOM을 조작하거나 값을 얻어야 하는 경우에 도움이 될 듯 합니다. 실행 화면 코드 useRef() : DOM 취득 용도로 HTMLInputElement 타입을 설정하고, 초깃값으로 null을 설정한다. // Parent.tsx import { useState, useEffect, useRef } from "react"; import Input from "./Input"; import Button f.. 2023. 10. 19. 이전 1 2 3 4 ··· 10 다음 728x90
