Frontend (19) 썸네일형 리스트형 vite + typescript 절대경로 설정 아래 이미지처럼 상대경로로 찾던 것을 절대경로로 바꾸고 싶을때 vscode 설정 Setting 옆 아이콘 누르면 json으로 입력 가능 // setting.json "javascript.preferences.importModuleSpecifier": "non-relative", "typescript.preferences.importModuleSpecifier": "non-relative", --- src 별칭을 ~로 할 것인데 @로 하고 싶으면 ~ 대신 @ 작성 vite.config.ts import { defineConfig } from "vite"; import react from "@vitejs/plugin-react"; // https://vitejs.dev/config/ export defaul.. 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".. Error: Cannot find module 'webpack-cli/bin/config-yargs' 이게 안맞는 버전으로 할때 나는 에러.5버전대로 올렸더니 발생했는데 꼭 5버전대가 아니여도 웹팩 관련 패키지끼리 버전 안맞으면 나더라.이상 없이 돌아가는 버전 확인 해 본 것{ "webpack": "^4.44.2", "webpack-cli": "^3.3.0", "webpack-dev-server": "^3.11.0" } 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 = (.. 전역 경로 관리 https://webpack.js.org/plugins/define-plugin/#root webpack.config.js resolve: { modules: [ path.join(__dirname, "src"), "node_modules" ] } https://blog.andrewray.me/autocomplete-es-modules-webpack-vscode/ 이전 1 2 3 다음
