> 개발/React14 [React] '"vite-plugin-next-react-router"' 모듈에 내보낸 멤버 'reactRouterPlugin'이(가) 없습니다. 오류 해결하기 강의에서 Next.js 처럼 react에서도 편하게 라우팅을 해주는 게 있다고 해서 설치했다. Next.js처럼 페이지 폴더명을 라우팅 경로로 사용한다고 한다. 내가 설치한 버전이 강의에서 설치한 버전과 다른지 npmjs에 써져있는 설명도 내가 검색했을 땐 너무 짧았고 설치 후 어려움을 겪어서 나같이 헤매는 사람들을 위해 글을 쓴다! vite-plugin-next-react-router  을 활용하고,.. 2023. 4. 16. [React] Font 파일 적용하기 프로젝트를 할 때 구글 포트와 같은 웹 폰트는 적용해본 적은 있지만, 직접 폰트 파일을 사용해본 적은 없다. 구글 폰트는 종류가 제한적인 반면 폰트를 직접 다운 받으면 더 예쁜 폰트를 많이 사용할 수 있어서 이번에는 폰트 파일로 폰트를 설정해보았다. 폰트 다운 사이트 추천 무료폰트(목록) | 공유 마당 gongu.copyright.or.kr 여기에서 다양한 정부 기관의 무료 폰트를 다운 받을 수 있다! 상업적 이용만 아니면 사용이 자유롭다. 예쁘고 가독성 좋은 폰트가 많아서 강추한다. 나는 광양시 서체가 마음에 들어서 광양시 서체를 다운 받았다. 폰트 파일 변환하기 폰트를 다운 받았으면 제일 먼저 할 일은 파일을 변환하는 것이다. .otf 파일로 다운을 받았는데, react에 적용하기 위해서는 .woff.. 2023. 4. 8. [Tailwind CSS] px 값 부여하기 & 반응형 레이아웃 만들기 px값 부여하는법 tailwind CSS 의 장점 중 하나는 이미 설정되어 있는 값을 손쉽게 쓸 수 있다는 점이다. 이미지처럼 width에 값들이 설정되어 있기 때문에 width-72, width-sreen 등으로 편하게 너비를 설정할 수 있다. 하지만 테일윈드 CSS 속성값에 없는 사이즈를 주고 싶다면? 나는 384px보다 더 큰 600px를 주고 싶다면 어떻게 해야 할까? [대괄호] 안에 원하는 픽셀 값을 넣으면 된다. 그러면 이렇게 원하는 값으로 width를 설정할 수 있다. 하나만 하면 재미 없으니깐 이번엔 반응형 레이아웃도 알아보자! 반응형 레이아웃 공식문서를 보면 sm, md, lg, xl, 2xl 로 최대 너비를 설정할 수 있다. 이렇게 해서는 안된다. 이 코드의 결과물은 다음과 같다. w.. 2023. 3. 22. [Tailwind CSS] background-image 경로 설정 이번에 프로젝트로 tailwind css를 활용하기로 해서 tailwind css를 연습하는 중이다. tailwind css는 클래스네임에 css 속성을 입력하기 때문에 클래스네임이 매우 지저분해진다는 단점이 있긴 하지만, 약어로 코드를 빠르게 칠 수 있고, reset CSS가 필요 없다는 장점이 있다. 아직은 미숙해서 tailwind css 사이트에서 속성을 찾아보면서 코드를 치고 있지만 손에 익으면 빠르게 레이아웃을 구현할 것으로 기대된다! 오늘은 배경 이미지의 경로를 설정하는 데 어려움을 겪어서 경로 설정을 어떻게 했는지 공유해보려고 한다. 폴더 구조 활용할 사진은 [src] 폴더 - [assets] 폴더 - [images] 폴더 안에 sky.jpg를 넣어두었다. [public] 폴더에 이미지를 넣.. 2023. 3. 20. [React] 통신 결과 메세지에 따라 에러메세지 보여주기 2023년 1월 13일 작성 프로젝트를 하면서 통신할 일이 많았다. 통신을 하면서 많이 한 일은 백엔드에서 보내주는 통신 결과 메세지에 따라 에러메세지를 보여주는 것이었다. 대표적인 예가 회원가입이다. 회원가입 시 백엔드에서 정해놓은 유효성 검사 규칙에 어긋날 경우 백엔드에서 에러 메세지를 보내주고, 나는 그 값에 따라 에러메세지를 alert 창으로 띄웠다. 따로 프론트엔드에서 input창에 입력된 value를 평가해서 에러메세지를 띄우지 않고, 백엔드에서 보내주는 결과에 따라 에러메세지를 띄우면 되니 편했다. if (result.message === 'KEY_ERROR') { setErrorMsg('빈 칸을 채워주세요'); } else if (result.message === '이메일 양식이 맞지않습니.. 2023. 3. 4. 이전 1 2 3 다음
