본문 바로가기

[npm] Gitlab Package Registry에 npm 모듈 배포하기 (1. js 모듈) 1. 깃랩 가입하고 레포지토리를 준비 2. npm 패키지 작성 npm init package name Package Registry로 들어간다 아래와 같이 등록 되어 있으면 성공 6. 패키지 받아보기 npm i
[Digging, npm, React] 로컬 빌드, 배포 빌드 환경 : windows 10 node : 6.3.0 에러 : 일부 페이지의 체크 박스 기능 비활성 화 대응 후 사용자 아이템 페이지에서 검색기능이 작동하지 않음 원인 : encoding-japanese 패키지 미설치 작업시간 10분 원인 파악 시간 1시간 30분 소요... > 과정 0. 인코딩 관련 함수가 정의되어 있지 않다는 에러. 1. 업데이트 전의 배포 파일로 변경해서 적용결과 검색에 이상 없음. 2. 프로젝트에서 알파 빌드 시도, 이상 없이 빌드 완료, 재배포 해본 결과 같은 상황 3. 프로젝트에서 로컬 실행 한 결과 에러 출력. npm ERR! registry error parsing json 4. iconv-lite 내부 파일에서 인코딩 관련 json을 파싱하는 과정에서 에러 라서 iconv-..
React) React-player https://www.npmjs.com/package/react-player react-player A React component for playing a variety of URLs, including file paths, YouTube, Facebook, Twitch, SoundCloud, Streamable, Vimeo, Wistia and DailyMotion. Latest version: 2.11.0, last published: 2 days ago. Start using react-player in your project by running www.npmjs.com 동영상 재생에 필요한 다양한 상태값을 제공해줌, 재생, 뮤트, 등등등 손쉽게 적용 가능.
CSS LineArrow body { background-color: #282828; } div.arrow { width: 6vmin; height: 6vmin; box-sizing: border-box; position: absolute; left: 50%; top: 50%; transform: rotate(45deg); &::before { content: ''; width: 100%; height: 100%; border-width: .8vmin .8vmin 0 0; border-style: solid; border-color: #fafafa; transition: .2s ease; display: block; transform-origin: 100% 0; } &:after { content: ''; float: left;..
[React] Next.js + Typescript + Redux Toolkit || UI 디자인 관련 Svgr svg 이미지를 자동으로 component화 시켜주는 툴 //install npm i @svgr/webpack Svgr 웹팩 설정 //next.config.js module.exports = { webpack: (config) => { console.log('[next.config.js] webpack') config.module.rules.push({ test: /\.svg$/, issuer: /\.[jt]sx?$/, use: ['@svgr/webpack'], }) return config }, } postcss
[React] Next.js + Typescript + Redux Toolkit ESLint, prettier 기본설정 1) vs코드 익스텐션 설치 2) lint 패키지 추가 설치 @typescript-eslint/eslint-plugin @typescript-eslint/parser //추가설치 eslint-plugin-prettier eslint-plugin-react //추가설치 eslint eslint-config-next //추가설치 eslint-config-prettier //추가설치 prettier //추가설치 eslint 설정 파일 //.eslintrc.json { "extends": [ "next", "next/core-web-vitals", "eslint:recommended", "plugin:@typescript-eslint/eslint-recommended", "plugin:@typescript-es..
[React] Next.js + Typescript + Redux Toolkit 프로젝트 셋업 1) 넥스트 + ts npx create-next-app --ts npx create-next-app --ts 2) 리덕스 인스톨할 패키지 redux react-redux redux-logger @reduxjs/toolkit @types/react-redux @types/redux-logger // npm npm install redux react-redux @reduxjs/toolkit redux-logger --save npm install @types/react-redux @types/redux-logger --save-dev // yarn yarn add redux react-redux @reduxjs/toolkit redux-logger yarn add @types/react-redux @typ..
[React - mui] Pagination / 리액트 페이징 UI 컴포넌트 https://mui.com/components/pagination/#pagination-ranges