Code Monkey home page Code Monkey logo

dev-fe's Introduction

React + TypeScript + Vite

dev-fe's People

Contributors

h0onnn avatar jjineu avatar

Forkers

h0onnn

dev-fe's Issues

public assets 경로 중첩에 대한 고민 및 절대경로 설정

현재 static assets 을 관리하는 폴더가 src>public>images 에 있습니다.
컴포넌트를 분리하거나 컴포넌트 위치를 변경하는 경우 상대경로를 업데이트해야 하는 번거로움이 있고,
경로 중첩이 많아지는 경우 코드가 깔끔하지 못합니다.

import RecommendIcon from '../../../public/images/favorite.png';
import ReplyIcon from '../../../public/images/reply.png';
import ViewIcon from '../../../public/images/view.png';

현재는 vite.config.ts 와 tsconfig.json를 수정하여, '@' 태그 절대경로를 사용하도록 했습니다.

import RecommendIcon from '@/public/images/favorite.png';
import ReplyIcon from '@/public/images/reply.png';
import ViewIcon from '@/public/images/view.png';

수정한 내용은 아래와 같습니다.

// vite.config.ts
  resolve: {
    alias: [{ find: '@', replacement: '/src' }],
  },

// tsconfig.json
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  },
  "include": ["src"],

참고: https://ko.vitejs.dev/config/shared-options.html#resolve-alias

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.