daisylee

1. 라이브러리 설치 yarn add react-router-dom 또는 npm install react-router-dom (최신 버전보다 다운그레이드된 버전을 사용하고 싶은 경우: react-router-dom@5(5버전)과 같이 입력합니다. 2. import하기 3. App 감싸기 import와 App 감싸기는 index.js 파일에서 한 번에 하면 됩니다. react-router-dom이라는 라이브러리를 설치하고 거쳐야 할 단계를 정리하고, 나중에 다른 프로젝트에 적용할 때 더우 쉽게 찾을 수 있도록 썼습니다.😊 happy hacking 하세요!

프로젝트에 폰트를 적용하는 방법은 크게 2가지로, 1. 웹폰트를 적용하거나 2. ttf 형식의 파일을 다운로드 받아 프로젝트에 저장해서 사용하는 방법이 있습니다. 저도 처음에는 웹폰트를 적용했었는데요! 구글링을 하다보니 웹폰트 적용 방식으로 폰트를 서버-클라이언트 방식으로 폰트 파일을 받아오는데, 용량이 크고 사용자의 환경에 따라 로딩 속도가 느려지는 단점이 있다고 합니다. 따라서 ttf 형식의 폰트 파일을 다운로드 받아 저장해 사용해보려고 합니다. 1. 폰트 사이트에서 폰트를 고릅니다. 가장 유명하고 사용하기 쉬운 사이트는 구글 웹폰트와 눈누가 있습니다. 구글은 영어와 한국어 이외에도 다양한 국가의 언어를 지원하고, 눈누는 한글 폰트를 지원합니다. 언어별로 적용할 때 영어는 구글 웹폰트, 한국어는 눈누..

리액트 라우팅을 적용하면서 다음과 같은 에러를 발견했는데요. 리액트 라우터 버전이 v5에서 v6로 업데이트되면서 변경된 사항과 관련된 에러입니다. (역시 프론트엔드의 기술 업데이트는 빨라도 너무 빨라..) 바로 대신에 로 적용하면 됩니다. Switch와 관련된 업데이트 내용은 다음과 같습니다. 1. 대신에 이제는 쓰세요! 2. component={컴포넌트명} 대신에 이제는 element={} 쓰세요! (개인적으로 1번은 Routes, Route라는 동일한 단어에서 통일성이 있어서 좋은데, component대신에 element를 쓰는건 익숙하지 않은 것 같습니다😢) 제가 작업중인 프로젝트에도 아래와 같이 적용했더니 정상적으로 동작합니다. 마지막으로, 벨로퍼트님이 리액트 라우터 업데이트에 관해 업로드한 영상..

Module not found: Can't resolve 파일 경로 먼저 결론부터 말하자면, 파일 상단에 import 상대 경로를 잘못 정해준 경우가 많습니다. 따라서 해당 파일 경로의 모듈을 찾지 못했다는 에러가 발생할 때, 상대경로를 올바르게 정해줬는지 확인해볼 필요가 있겠습니다. 저는 개인 프로젝트 파일의 폴더 구조를 변경하고 코드들을 옮기는 작업 중에 위와 같은 에러를 발견했는데요! 아래에 저의 문제 상황과 해결 과정, 팁을 적어두었습니다.😊 그리고 아래 상대경로와 절대경로에 대해 정리된 글을 첨부했습니다! https://blog.naver.com/tipsware/221275416466 [용어] 절대 경로, 상대 경로, 작업 경로에 대하여 : C 언어 관련 전체 목차 http://blog.nave..

https://www.youtube.com/watch?v=gPH7sCyXFb4&t=1430s 😎무엇이 왜 필요했나? 개인 프로젝트를 진행하면서,카테고리 필터 기능을 구현할 필요가 있었습니다. '상의', '하의' 처럼 카테고리 별로 버튼을 만들어서 버튼을 클릭하면 해당하는 상품만 보여주는 컴포넌트를 만드는 것이 목표였습니다. 😎어떻게 찾았나? 우선 '리액트 필터링 버튼 구현' 같은 키워드로 구글링을 했습니다. 아쉽지만 국내 무료 자료 중에서는 딱 제게 필요한 자료를 찾기 힘들었습니다. 그래서 'react filtering by category'라는 키워드로 Youtube로 검색하니, 다행히 원하는 영상이 꽤 많이 나왔습니다. 그 중에서 가장 최근에 업로드된 영상을 보면서 개념을 익혔습니다. 😎무엇을 알게 ..

이미지를 렌더링할 때 위와 같은 에러가 발생했습니다. 찾아보니 img 태그에 alt 속성을 추가하지 않으면 발생하는 warning이라고 합니다. (출처: stackoverflow) What does this warning message mean? 'img elements must have an alt prop, either with meaningful text, or an empty string for de Why am I getting this warning? warning: img elements must have an alt prop, either with meaningful text, or an empty string for decorative images jsx-a11y/img-has-alt I..