김코드의 웹디자인 세상

이번에 홈페이지 제작을 하면서 게시판 부분에 태그를 사용해야 하는 부분이 있었는데 이동하는 링크가 따로 없어서 href를 공란으로 두었더리 오류파티가 났었다...! 오류의 내용은 태그 사용 시 href 속성의 유효한 값이 필요하다라고 한다... 이런 태그는 에서 걸리게 되는데 href 속성이 없어도 안되고 유효하지 않아도 문제가 된다. 그래서 보통은 이런 식으로 많이 사용한다고 구글링을 통해 알 수 있었는데... ✏ 오류를 막기위한 여러 가지 방법들 방법1 방법2 방법3 그러나 이러한 방법들도... 또 뜬다... 그래서 알게 된 방법 아래와 같다...! ✏ 해결할 수 있는 여러가지 방법들 방법1 방법2 그래서 사용해보았더니...! 문제없이 잘 사용되는 것을 볼 수 있었다! 특히 방법1은 또한 무반응처리가..

안녕하세요! 오늘은 React에서의 FontAwesome 사용방법에 대해서 알아보겠습니다! 이모저모 많이 사용하는 FontAwesome이니 활용해 보시면 좋을 것 같네요! d=(´▽｀) ✎ React에서 FontAwesome 설치법! 먼저 터미널에 하나씩 아래와 같이 작성해주세요! 설치 후 Package.json 파일에서 설치가 잘 되었는지 확인해 주세요! //FontAwesome 설치방법! npm i --save @fortawesome/fontawesome-svg-core npm install --save @fortawesome/free-solid-svg-icons // 솔리드 스타일 npm install --save @fortawesome/free-regular-svg-icons // 레귤러 스타일 ..

ctrl + f 를 사용하면 더 쉽게 찾을 수 있습니다! ˙ᵕ˙ 1. 리액트 앱 기본 세팅 (폴더 및 파일 생성) npm init react-app /*폴더명*/ 👉 /*폴더명*/으로 폴더 만들어주고 기본 세팅 해줌. 2. 리액트 앱 화면 보기 npm start 👉 바로반영되는 미리 보기 화면 보여줌 3. 리액트 확장 프로그램 설치 npm install /*프로그램 이름 @ 버전*/ ex) npm install react-router-dom@6 👉 리액트 앱 확장프로그램 설치해 줌 버전도 선택가능함. 설치 후 package-lock.json 확인 3. 배포를 위한 빌드 npm run bulid 👉 배포를 위한 빌드 폴더를 만들어주고 주소를 알려줌. ✏ 오류 안내 👉 어디가 오류 났는지도 친절하게 알려줌...

안녕하세요! 오늘은 리액트 사용 중 css가 겹치거나 적용이 되지 않는 경우에 해결하는 방법에 대해서 알아보겠습니다. 때는 어젯밤... 컴포넌트를 수정 중 계속해서 css가 중첩돼서 적용이 되는 것을 발견했습니다ㅠ 저렇게 다른 컴포넌트의 css를 겹처서 화면에 출력이 되더라고요ㅠ 그래서 작업하는데 불편함을 느끼고 있었습니다ㅠ 그래서 왜 그런지 이유를 알고자... 구글에다가 써치를 하고 진실을 알게 되었습니다. 저는 이렇게 조건부 렌더링을 사용하여 조건에 맞는 컴포넌트를 작성하는 중 같은 class명으로 이름을 부여하고 scss를 입혀주고 있었습니다. 바로 컴포넌트 끼리 동일한 class명으로 부여시 이름 충돌이 일어나서 그렇다는 걸 알게 되었습니다... 이를 해결하는 방법은 css-module을 사용해야..