UX·UI - FrontEnd Dev. Story

리액트 4

React에서 모듈화된 className 조건2가지 만들기 with module.scss

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 프로젝트 시작 셋팅 yarn 이용해서 작업 순서 알아보기

리액트 프로젝트를 시작할때 첫 셋팅과 진행방법을 정리해서 포스팅하려고 한다. 우선 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 <a>태그 사용시 나타나는 오류 해결하기

" 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..

반응형