클로리셔 작은 공간

yarn 커맨드로 작동시킬 때 계속 에러가 났다.. 대체 왜..!! 뭐가 문젠데..!!! 하고 차분히 찾아봄... Error 메세지는 error: Command failed with exit code 1. 이번에 해결하면서 yarn이 업데이트가 적용이 안돼서 동기화가 안먹힌거같은데... 여튼 방법은 2가지가 있다고한다. 1. yarn 관련 모든것 지우기 1-1. yarn 으로 생성된 node_modules & yarn.lock 지우기 rm -rf node_modules rm -rf yarn.lock 1-2. yarn 공유 캐시 파일 지우기 yarn cache clean 1-3. yarn 재설치 yarn install 1-4. yarn으로 시작해보기 yarn start 2. yarn 업데이트 후, 다시 시..

REACT에서 module화 된 className 적용방법 그냥 기본적인 scss를 작성할때는 className 적용할 때 별 문제없었는데, module화 된 scss를 작업하다보면 갑자기 문법이 헷갈리면서 scss파일이랑 연동이 안돼서 오류가 뜬다. 1. scss 모듈일 때, 조건을 걸어서 class에 2개의 module.scss를 적용시킬 때, - isOpen일때의 조건이 걸릴 때, .hamburger와 .isOpen의 클래스를 같이 넣고싶을 때 적용 방식이다. 2. 컴포넌트 파라미터 값을 모듈 scss로 class 적용할 때, const test = ({type}) => { return ( ) }; - 파라미터로 받은 { type } 값을 className 내에 모듈화로 삽입하고 싶을 땐 style..

React에서 Font Awesome가 필요할 때 있는데.. 항상 뭐 설치해야할것이 많고.. import 할것도 많고.. 하다보면 무슨 에러가 나길래 짜증나서 그냥 내가 내 블로그에 정리함. 폰트어썸(Font Awesome) 공식페이지가면 잘 설명되어있긴하나.. 공식 홈페이지에서 차분히 영어공부하면서 해보고 싶은 분들은 아래 링크를 클릭해주세요. Set Up with React The internet's icon library + toolkit. Used by millions of designers, devs, & content creators. Open-source. Always free. Always awesome. fontawesome.com [ 폰트어썸 설치.. 파해쳐버리기 ] 1. 터미널에 ya..

Router란? 결국 페이지 이동을 의미한다. React에서 메뉴의 URL같은 링크 버튼을 클릭했을 때, 그 링크 경로에 맞는 컴포넌트 페이지들을 보여주고싶다. 보통 레거시 스타일로 작업할 땐, 경로 클릭시 새로운 페이지가 로딩이 된다. 그것은 너무나도 데이터 자원낭비! 그럴때는 사용하는것이 Router (리액트 라우터)이다. 라우터를 사용하면 새로운 페이지 로드?? No No!! 업데이트 되는 새로운 페이지만 path와 element로 연결하여 컴포넌트를 불러오는 신박한 기능이다. 아래 예시들은 이해를 돕기위해 개인 홈페이지를 만들면서 필요한 내용을 Router로 만들어보았다. 우선 내가 만들려는 페이지의.. 스케치(?) ---------------------------------------------..

리액트 프로젝트를 시작할때 첫 셋팅과 진행방법을 정리해서 포스팅하려고 한다. 우선 git / Node JS / npm / yarn 설치가 되어있어야한다. * git 설치 확인 git --version * Node JS 설치확인 node -v * npm 설치 확인 npm -v * yarn 설치 확인 yarn -v 1. React 프로젝트 만들기 yarn create react-app 프로젝트명 - VScode를 열어서 터미널에 이 명령어를 넣는다. BUT!! 제대로 했는데 혹시나 이런 오류가 뜬다?! ( 뭐하나 한방에 되는게 엄숴.. ) Error Couldn't find a package.json 영어에 당황하지 말자, 이제 영어에 더 이상 쫄면 안된다.. 익숙해져야한다...... 해석해보면 packag..

" React The href attribute requires a valid value to be accessible. " What....t..h.. 프론트앤드 공부하다보면 영어의 소중함을 알게된다.. 하아.. 어쨌든, 여기 찾아온 사람들은 아마 이 경고문을 보고 찾아왔겠지? 그럼 왜 이런 상태가 나타나고있는지 알아보자! 프론트앤드 개발자가 HTML을 짜다보면 하이퍼링크를 적용시킬 때 태그를 많이 사용한다. 이런식이라던지 이런식이라던지 이런식이라던지 이렇게 적용했을 때 React에서 터미널에서 나타나는 Warring을 발견했을 것이다. 왜냐, 나도 발견하고나서 공부를 했기 땜시롱이지. The href attribute requires a valid value to be accessible. Provid..

* fontawesome 폰트 어우썸 yarn add @fortawesome/fontawesome-free [ awesome 추가 후 ] index.js에 추가해야 하는 코드: import '@fortawesome/fontawesome-free/js/all.js';