Frontend/React&RN (14) 썸네일형 리스트형 React + TS + Styled Component + Material UI + Dark Theme 이번에 회사에서 프로젝트를 하면서 Material UI를 사용하였는데, Material UI에서 제공하는 기본 스타일링 문법이 마음에 들지 않았다. 아예 scss도 아니고 Styled Component도 아닌 좀 애매한 문법이라는 생각이 들어서 Styled Component에서 Material UI의 기본 기능들을 사용할 수 있게 세팅해보았다. 원하는 컬러를 @material-ui/core/colors에서 꺼내서 palette 생성 다크모드시 컬러 팔레트의 속성을 반전시킬 수 있도록 설정 // colors.ts import { createMuiTheme } from "@material-ui/core/styles"; import green from "@material-ui/core/colors/green".. useRef()와 createRef()의 차이 useRef Hooks에서만 실행 가능 ref를 만들고 ref의 초기값을 할당함 빈값으로 시작하지 않으므로 빈값 체크할 필요가 없음 createRef 함수 컴포넌트, 클래스 컴포넌트 둘다 사용 ref만 만듬 값을 가져다가 쓸 때 빈값 체크가 필요함 https://stackoverflow.com/questions/54620698/whats-the-difference-between-useref-and-createref [Android] zsh에서 에뮬레이터 바로 실행하기 zsh에서 설정파일 열기 vi ~/.zshrc 세팅 내용 넣기 # ANDROID HOME export ANDROID_HOME=/Users/user/Library/Android/sdk export ANDROID_SDK_ROOT=$ANDROID_HOME export PATH=${PATH}:${ANDROID_HOME}/emulator export PATH=${PATH}:${ANDROID_HOME}/tools export PATH=${PATH}:${ANDROID_HOME}/tools/bin export PATH=${PATH}:${ANDROID_HOME}/platform-tools설치된 에뮬레이터 명단 보기 emulator -list-avds 에뮬레이터 실행하기 emulator @에뮬레이터명 https://dev.. [mobx] 세팅과 간단한 설명 Mobx 반응형 프로그래밍 Reactivity Programming의 일종 가장 간단하고 단순한 형태로 데이터의 상태 state를 observable과 observer 형태로 관리 mobx 단독으로도 사용할 수 있고 리액트를 위한 mobx-react를 사용하면 더욱 편리 설치 npm i mobx mobx-react npm i @babel/plugin-proposal-class-properties @babel/plugin-proposal-decorators decorators 경고 없애기 위한 jsonfig 생성 { "compilerOptions": { "experimentalDecorators": true, } } decorator @observable : 변경되면 화면을 렌더링 하는 state 역할의 .. setState와 불변성 React Native 하면 class 컴포넌트를 많이 사용하게 되므로 클래스의 setState에 대해서 정리 setState 상태값중 일부 값만 변경 가능 class App extends React.Component { state = { name: "david", score: 90 } updateScore = () => { this.setState({ score: 95 }); } } setState 문제점 상태값이 참조값일때 참조값 내부의 일부 값만 변경 불가 불변성 유지때문에 값을 덮어쓰기 때문 class App extends React.Component { state = { name: "david", subject: { name: "math", score: 90, } } updateScore = (.. [스토리북] 리액트 컴포넌트 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/ 로 접속해서 컴포넌트 소스 복붙후 설명과 단축키 부분 작성하고 .. 이전 1 2 다음
