우주먼지 개발 log

1. CRA boilerplate로 프로젝트 생성 npm ,yarn 등 입맛대로 yarn create react-app projectName 2. 지울 거 지우기 App.css App.test.js logo.svg reposrtWebVital.js setupTests.js 2-2 App.js / index.js 내부 안쓰는 코드 정리 (방금지운것들, return문 안쪽 등) 2-3 App.js / index.js는 jsx문법이 들어가므로 jsx로 확장자 변경해주는 편 3. 폴더 구성 (마음대로) assets/ components/ pages/ shared/ 4. 절대 경로 설정 (해도되고) 루트폴더 아래에 jsconfig.json 파일 생성 { "compileOptions": { "baseUrl": "s..

shadcn/ui component library UI component library 로 기존에 사용해 본것 들 중에는 ant, mui 같은 것 인 줄만 알았는데 차이점이 조금 있다. 바로바로.. 설치형이 아닌 component 자체를 내 코드에 복사 붙여넣기 되는 방식이기 때문에 커스텀하기 용이하고 무엇보다 가볍다. (전체 라이브러리를 설치하지 않아도 되니깐) ANT, MUI가 좀 킹받는 이유 (단점) 지난 프로젝트에서 ant로 아바타 수정하기 만들다가 포기한게 props로 수정할 수 있도록 제공하는 색상이나 간단한것들 제외하면, 커스텀 너무 불가... 또 지난 프로젝트에서 MUI로 페이지네이션 구현했다가 걷어낸게 라이브러리가 묵직하게 기능이 많은데, 딱 페이지네이션만 사용하고 있어서 였다. (그때는..

ES7+ React/Redux/React-Native snippets : rfce / rafce 등 사용 Auto Rename Tag: 시작 태그 또는 닫는 태그 중 하나를 수정하면 동시에 다른 한쪽 태그도 자동으로 수정됩니다. Color Highlight: 색상 코드가 있다면 코드에 색상을 배경으로 입혀서 보여줍니다. Error Lens: 에러에 마우스를 올리지 않아도 바로 옆에 에러를 표시해줍니다. indent-rainbow: 텍스트 앞의 들여쓰기에 색상을 지정해서 쉽게 구분할 수 있습니다. Material Icon Theme: 파일과 폴더에 아이콘이 생겨요! tabout: 탭을 눌러서 따옴표(이제 이 말이 어색함), 괄호들에서 빠져나갈 수 있습니다. 탭탭탭 Tailwind CSS IntelliSen..

React 숙련주차 개인과제 해설 참고 https://www.youtube.com/watch?v=i0kLshFoaeM 1. GlobalStyle 만들기 with styled-components GlobalStyle.js import {createGlobalStyle } from "styled-components"; const GlobalStyle = createGlobalStyle` `; export defualt GlobalStyle; 2. reset Styles 을 복사해 넣어요 구글에 reset Styles 검색해보면 나오는 걸 사용하면 된다. import { createGlobalStyle } from "styled-components"; const GlobalStyle = createGlobal..

redux Toolkit redux를 개량하여 코드를 더 적게, 편하게 사용할 수 있게 해주는 툴킷이다. ducks 패턴의 자동화! (ducks 패턴, 나중 정리) 일반 리덕스 사용하는 법 다시보기 폴더 구조와, Provider 주입해주는 부분은 동일하기 때문에 이번엔 Pass ! [TIL] 23/11/09 React 숙련: Redux 란? 한 일 - redux 강의 다 듣기 - 알고리즘 스터디 : 프로그래머스 4문제 풀기 TIL Redux ? 전역 상태(Global state) 관리 라이브러리 기존 useState 불편 해소 - 컴포넌트 간에 상태(state)를 공유 하려면 부모자식 developer.happymunzi.com redux Toolkit설치 프로젝트 생성 후 yarn 을 이용해 패키지 설..