Dorong Dorong 💻😴

Allini는 Create React App(CRA)을 사용하지 않고, 직접 Webpack과 Babel을 설정해보기로 했습니다.
회사에서 Webpack을 설정해본 경험이 있어, 처음에는 그 기억에 의존해 작업을 시작했어요.

그런데 프로젝트 진행 도중 Pretendard-Black.subset.woff2 및 Pretendard-ExtraBold.subset.woff2 폰트 파일을 찾을 수 없다는 에러가 발생했습니다.

이 에러를 해결하기 위해 파일 위치, font.css의 경로, 파일명, 빌드 캐시 삭제 등 다양한 방법을 시도했지만,

문제는 여전히 해결되지 않았고..😢

제가 작성한 Webpack 설정 자체에 문제가 있는 것이 아닌가 의심하게 됐습니다.

Webpack 설정 점검: file-loader는 잘 등록했는데...

에러가 발생한 이유를 찾기 위해 webpack.config.js 파일에서 파일 로더 설정을 확인했습니다.

file-loader를 아래와 같이 설정해두었기에, 문제가 없을 것이라고 생각했었죠..! 

{
  test: /\.(png|jpe?g|gif|webp)$/i,
  use: [
    {
      loader: "file-loader",
      options: {
        name: "[path][name].[ext]",
      },
    },
  ],
}

그렇기에 이 설정에는 아무런 문제가 없다고 판단했고, 왜 이런 문제가 발생하는지 도저히 이해가 되지 않았습니다.

엉뚱한 고민: MSW가 문제인가?

이쯤 되니 MSW(Mocking Service Worker)가 폰트 파일조차 가로채는 것이 아닌가 하는 엉뚱한 생각까지 하게 되었어요..!

MSW는 백엔드가 구축되기 전에 프론트엔드 UI 개발을 위해 사용 중이었습니다.

하지만 공식 문서를 읽어본 결과, MSW는 정적 리소스(예: 폰트 파일)에는 영향을 주지 않는다는 것을 확인했습니다.

MSW가 폰트 파일 요청을 가로채지 않는 한, 이 문제는 MSW와 관련이 없을 가능성이 높았습니다.

진짜 문제: Webpack 버전 차이

고민을 거듭하던 중, 혹시 내가 알고 있던 Webpack 설정과 현재 사용하는 버전 간에 차이가 있는 것은 아닐까 하는 생각이 들었습니다.

이 생각이 바로 정답이었죠!!!  ᕦ( ᐛ )ᕡ

Webpack 5에서는 파일 로더 설정이 간소화되었고, 더 이상 file-loader를 사용할 필요가 없었습니다.

Webpack 5에서는 다음과 같이 설정합니다:

{
  test: /\.(jpg|jpeg|gif|png|svg|eot|woff|ttf)$/i,
  type: "asset/resource",
}

Webpack 5에서는 file-loader와 url-loader등을 더 이상 사용하지 않고, asset/resource, asset/inline, 그리고 asset을 통해 파일을 처리합니다.

• asset/resource: 별도의 파일을 내보내고 URL을 반환합니다. (file-loader 대체)
• asset/inline: 데이터 URL로 내보내기 (url-loader 대체)
• asset: 자동으로 데이터 URL과 파일 내보내기 중 선택하며, 기존의 크기 제한 설정도 포함됩니다.

더 자세한 내용은 참고했던 Webpack 공식 문서 링크를 남겨둘게요!!

학습 방식에 대한 반성, 그리고 앞으로의 계획

이전에 TOAST Editor가 React 17 버전까지만 지원된다는 이슈를 겪었던 적이 있습니다.

부끄럽지만 그때도 이전 지식에만 의존했던 탓에, 사용된 기술 스택에 대해 충분히 검토하지 않았던 경험이 있었습니다.

이번 Webpack 설정 문제를 겪으면서, 다시 한 번 저의 학습 방식에 대해 돌아보게 되었습니다..!

Webpack 버전을 올린 후에도 다른 작업에 급급해 중요한 변화를 미처 확인하지 않았던 것이 원인이었으니까요.

Allini 프로젝트는 팀원들의 회사 업무로 인해 잠시 중단되었었지만, 다시 시작하게 되었습니다!

현재는 디자이너님이 요청한 수정된 UI를 빠르게 적용하는 것이 우선순위가 높다고 판단하여, 이 부분부터 작업을 진행하고 있습니다. 

그렇기에 Webpack 5 버전에 맞춘 전체적인 설정 수정은 프로젝트가 완성된 후에 진행하기로 결정했습니다.

우선은 프로젝트의 완성도를 높이는 데 집중하고, 작업 중 발생하는 문제들은 하나씩 해결해 나갈 계획입니다.

프로젝트가 마무리되면, CSS 파일을 개별적으로 추출하기 위한 MiniCssExtractPlugin 등의 리팩토링도 진행할 예정입니다.

이 과정에서 작성된 최종 코드도 나중에 블로그에 공유할 예정이니, 기대해 주세요! 💪

로고의 디자인은 프로젝트명인 Allini의 A와 강아지의 코 모양을 섞어 디자인됐어요!

안녕하세요, 오늘은 제가 최근에 시작한 프로젝트에 대해 소개하려고 합니다.

이 프로젝트는 제 반려견의 건강을 관리하고 알레르기 증상을 줄이기 위해 시작됐어요!

우리 강아지들이 먹은 음식들을 기록하고, 그 정보를 기반으로 통계를 내고, 심지어는 간식을 추천해주기도 합니다.

뿐만 아니라, 우리 강아지가 알레르기 반응을 보인 음식들도 기록할 수 있어요.

하지만 왜 Allini 프로젝트를 만들게 됐을까요?!

저희 가족의 소중한 멤버이자 마스코트인 반려견의 이름은 "뽀글이" 입니다. 이름 귀엽죠?!

"화이트 슈나우저"라는 견종이에요.

슈나우저는 유전적으로 피부질환이 있는 편입니다.

뽀글이의 경우엔 알레르기성 피부염이나 식이 알레르기로 인한 피부 두드러기, 간지러움 등 환경과 식이의 문제가 가장 심했어요.

식이 알레르기 같은 경우는 사료와 간식을 제한하고 동물 병원에서 처방받은 처방 사료를 급여하고 간식을 제한하고 어떤 재료에 알레르기가 있는지 검사를 해서 그 재료를 피하면 식이 알레르기는 해결할 수 있습니다.

물론 피부 질환이 거의 없는 개체도 있어요! 

하지만 사람도 강아지도, 살아가며 본인에게 있는 알레르기가 계속 바뀐다는 사실 알고 계셨나요?!

자주 먹는 음식이 알레르기가 생길 수 있어 당장은 괜찮아도 언제든지 다른 음식에 알레르기가 생길 수 있다는 거예요!

저는 새우 알레르기가 심했지만 이제는 다 사라졌고, 뽀글이는 당근 알레르기가 심했지만 지금은 전혀 다른 음식에 알레르기가 생겼습니다.

그래서 피부문제로 병원에 방문 시, 항상 아래와같은 질문들을 받았어요.

오늘은 뭘 먹였나요? 어제는? 이번 주는 무엇을 가장 많이 먹였죠? 이번 달에는 어떤 음식을 가장 많이 먹였죠? 뭐를 먹였을때 어떤 증상이 심해졌죠? 이전에 알레르기가 있던 음식들은 요즘 괜찮나요? (영양을 위해 소량 급여하는 경우가 있어요!)

이런 식으로 저에게 질문이 올때마다 헷갈리더라고요..!

딱 정해진 게 아니라 계속 바뀌는 거니까요! 그래서 이 모든 걸 최대한 편하게 기록하고 관리할 수 있는 프로젝트를 만들고자 결심했습니다!

프로젝트의 1차 목표!!

이 프로젝트는 우리 반려견뿐만 아니라, 다른 반려견 주인들에게도 도움이 될 수 있도록 만들고자 해요.
디자이너님과 협업하여 간편하고 효과적인 방법으로 반려견의 음식 섭취를 기록하고 관리할 수 있는 UI / UX를 제공합니다.
이를 통해 음식 알레르기의 원인을 파악하고, 반려견의 건강을 지속적으로 관리할 수 있어요.

개발 블로그인만큼 저의 코드와 경험을 공유할 예정이에요! 

프로젝트 자체의 취지도 잊지 않고 다른 반려견 주인들과 소통하며, 함께 건강한 반려견 생활을 지향할 생각입니다! 

그러니 이 프로젝트에 많은 관심과 참여를 부탁드립니다!

애정이 담긴 코드로 꾸준히 프로젝트를 발전시켜, 함께 반려견들의 건강을 지키고 행복한 시간을 보내는 것이 목표입니다.

함께해요! 🐾