portfolio site / 23.07.09 - 23.07.16

🚨 trouble shooting

1️⃣ tailwind css가 적용되지않음

⭐️ SOLVE?
index.css에 해당 구문 추가

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

🤷‍♀️ WHY?
Tailwind CSS의 기본적인 구성 요소와 유틸리티 클래스를 사용하기 위해 @import 구문을 추가해야한다.

  1. @import "tailwindcss/base";
    이 구문은 Tailwind CSS의 기본 스타일을 가져온다.
    기본 스타일은 요소들에 대한 초기 스타일을 설정하는 데 사용된다.
    ex) h-1, h-2, w-0, w-full

  2. @import "tailwindcss/components";
    이 구문은 Tailwind CSS의 컴포넌트 스타일을 가져온다.
    컴포넌트 스타일은 사전 정의된 컴포넌트 클래스를 제공하여 일반적인 UI 컴포넌트의 스타일을 설정하는 데 사용된다.
    ex) tw.div, tw.button (import tw from "tailwind-styled-components" 적용시)

  3. @import "tailwindcss/utilities";
    이 구문은 Tailwind CSS의 유틸리티 클래스를 가져온다.
    유틸리티 클래스는 특정 스타일을 적용하는 데 사용되는 간편한 클래스로, 여러 가지 유용한 스타일을 적용할 수 있다.
    ex) text-sm, items-center

미작성시 적용이 되지않아 사용을 위해 해당 구문은 가장 상위파일인 index.css에 추가해주었다.

2️⃣ Image src 경로오류로 image가 불러와지지 않음.

상대경로로 불러왔음에도 image src 경로를 제대로 찾아 불러오지 못함.

⭐️ SOLVE?
image 폴더를 public하위로 이동시킨 후 src/assets/images.ts 파일을 만들어 이미지 별로 키값을 부여해 찾아오는 방식으로 수정

export const loadImg = {
  image1: "./image/image1.svg",
  image2: "./image/image2.svg",
  image3: "./image/image3.svg",
};

왼쪽에 지정하고 싶은 이름을 적어주고, 오른쪽에 상대경로 주소를 입력한다.

불러오고자 하는 곳에서는 import { loadImg } from "../assets/images"; 를 임포트 해준 다음 <img src={loadImg.image1} /> 와 같은 방식으로 불러올 수 있다.

🤷‍♀️ WHY?
src 경로를 탐색하지 못하는 이유는 크게 다음과 같은 4가지라고 한다. (feat.ChatGPT)
1. 파일 경로가 정확하지 않을때
2. 이미지 파일이 존재하지 않을때
3. 파일 확장자가 맞지않을때
4. 파일이 올바르게 빌드처리 되지않을때

나의 경우에는 위 4가지 모두 해당되지않았고, src 경로를 불러오는게 처음인 상황도 아니라 정확한 경로탐지 에러의 이유를 아직 찾지 못하였다.
하지만 위와 같은 방식으로 관리할 경우 한 파일에서 이미지의 주소만 변경해서 수정도 가능하고, 각각의 이미지에 대한 src 주소를 따로 따로 관리할 필요가 없어 더 편리하게 관리할 수 있는 방법같다고 생각한다.

회고

1차 배포 완료.
아직 업로드할만한 프로젝트가 적어 우선은 진행완료한 프로젝트 기준으로 만든 사이트.
진행하고자 하는 프로젝트가 있어 해당프로젝트 완성 후 내용을 바꿔서 업데이트, 배포할 예정.
추후 DB도 만들어서 해당 DB를 불러오는 쪽으로 코드를 수정, 업데이트 할 수 있으면 좋을 것 같다 생각.

2차 수정 후 회고

profile
。˚⋆。˚ ☁︎˚。⋆。˚☽˚。⋆˚ ☁︎˚

1개의 댓글

comment-user-thumbnail
2023년 7월 17일

저도 개발자인데 같이 교류 많이 해봐요 ㅎㅎ! 서로 화이팅합시다!

답글 달기

관련 채용 정보

Powered by GraphCDN, the GraphQL CDN