Frontend (19) 썸네일형 리스트형 [스토리북] 리액트 컴포넌트 UI 테스트 설치 yarn add --dev @storybook/react @storybook/addons @storybook/addon-actions storybook-addon-jsx yarn add --dev sass-loader node-sass 실행 명령어 "storybook": "start-storybook -p 9001 -c .storybook" 파일 세팅 설정 1 스토리북 설정파일을 모아놓는 .storybook 폴더를 생성 하단 탭에서 action메뉴와 jsx를 활성화하기 위한 addons.js // .storybook/addons.js import '@storybook/addon-actions/register'; import 'storybook-addon-jsx/register&.. [Custom Hooks] useInput(유효성검사 추가) - 추가중 useInput 예전에 노마드코더 강의 보고 만든 커스텀 훅에 유효성검사 함수들을 추가 적용할 수 있게 기능 개선 두번째 파라미터는 배열이고 필수는 아니나 배열에 함수가 아닌 다른 값을 넣으면 에러를 발생 사용자에게 뭘 잘못한건지 알려주기위해 잘못된 점을 로그로 출력함 /** * 입력하는 값 반영하고 유효성검사를 추가 할수 있는 커스텀 훅 * @param {string} initialValue - input의 초기값. * @param {string} validators - useInput에 적용될 유효성검사 함수를 담은 배열 */ export const useInput = (initialValue, validators) => { const [value, setValue] = useState(initial.. [code snippet] 단축키로 자주 쓰는 리액트 코드 만들기 code snippet 직접 제작 리액트의 컴포넌트 그리고 리덕스에서 반복되는 소스 매번 작성하기 손 아프다. Extenstions에서 snippet 다운받아 써봤는데 단축키 다 외우기 힘들뿐더러 내가 원하는 스타일이 조금씩 다르거나 존재하지 않는다. 고로 만들어서 쓰자!! 컴포넌트 단축키 만들기 컴포넌트 생성하고 컴포넌트 이름을 ${TM_FILENAME_BASE}로 변경 import React from 'react'; const ${TM_FILENAME_BASE} = () => { return ( ); }; export default ${TM_FILENAME_BASE}; https://snippet-generator.app/ 로 접속해서 컴포넌트 소스 복붙후 설명과 단축키 부분 작성하고 .. [next.js] redux devtools 세팅법 redux devtools npm i redux-devtools-extension 예전이랑 세팅법이 약간 달라졌는데, 요즘 세팅법이 더 간결해졌다. react에서 redux devtools 사용하기 next.js 와 미들웨어 없이 오직 react.js만 사용할 때 세팅하는 순서이다. store를 생성할때 reducer와 composeWithDevTools()를 같이 넣어준다. Provider에 바로 store를 주입하면 끝이라 되게 간단하다. import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; import { Provider } from 'react-re.. [Styled Components]syntex Styled Components npm i styled-components 단점 작성할때 css를 줄 태그는 다 컴포넌트로 만들어야 한다는 점이 가독성을 떨어뜨린다고 생각 css 수정할때마다 해당하는 컴포넌트 파일 위치 찾아야 하는 번거로움 존재 장점 className을 사용하지 않아 외부에 css파일로 빼서 작업했을때 className 중복되서 생기는 문제를 해결함 scss 설치 없이 scss 문법을 사용 가능 자바스크립트식 CSS 문법이 아닌 기존 CSS 문법(단축, 가운데 - 사용) 모두 사용 가능 자바스크립트로 처리하기 때문에 상태처리 하는 css 역할로 매우 우수 react-native에서도 적용되기에 웹과 앱을 둘다 만들어야 한다면 css를 거의 그대로 사용 가능 결론 레이아웃과 scss로 만.. [react-router-dom]BrowserRouter, HashRouter 설치 npm i react-router react-router-dom 라우터 적용 라우터를 사용하기 위해선 최상위 컴포넌트를 묶고 시작해야 한다 import React from 'react'; import App from './App'; import { BrowserRouter } from 'react-router-dom'; const Root = () => { return ( ); }; export default Root;라우터1. BrowserRouter Link 컴포넌트 to속성에 이동할 경로 기술 Route 컴포넌트 path속성을 Link의 to속성과 매핑 component에 컴포넌트 경로 기술 새로고침 하면 경로 못찾아서 에러남 라우터2. HashRou.. [styled-components] syntax Styled Components npm i styled-components 외부 css파일로 빼서 작업하지 않기에 className 중복 문제 해결 scss 설치 없이 scss 문법 사용 가능 기존방식 컴포넌트에 props로 상태값을 전달하고 상태값에 따라 className을 다르게 붙이는 방식 class App extends Component { render() { return ( ); } } const Button = ({ danger }) => ( Hello ); Styled Components 기본문법 const 컴포넌트명 = styled.태그명`...css ` 전역에 스타일 줄때는 createGlobalStyle 모듈 사용 기존 전역 모듈 injectGlobal 없어짐 https://www.st.. [Custom Hooks] useInput, useFetch 커스텀 훅으로 자주 사용하는 것들 모듈화(Util 파일로 만들어서 사용하기) useInput, useFetch 만들어 쓰기 const App = () => { const nameHook = useInput(""); const { payload, loading, error } = useFetch("http://aws.random.cat/meow"); // console.log(nameHook) return ( use Hooks {loading && loading your cat} {!loading && error && {error}} {!loading && payload && } ); }; value와 onChange 바인딩된 input을 Hook으로 만들기 export function useInput(d.. 이전 1 2 3 다음
