Frontend(19)
-
yarn 2+(yarn3) production install 방법
$ yarn workspaces ls $ yarn workspaces focus [workspace] --production yarn plugin import workspace-tools devdependencies 말고 production dependencies만 설치하고 싶었는데 yarn2 부터는 `yarn install --production`이 먹지 않는다. yarn1에서 제공하던 아래 명령어를 치면 아래처럼 `yarn workspaces focus`를 대신 쓰라고 나온다. (참고) $ yarn install --production YN0050: The --production option is deprecated on 'install'; use 'yarn workspaces focus' inst..
2023.06.01 -
[Node.js] node-sass 에러 - npm ERR! path /node_modules/node-sass
기존에 작업 중이던 프로젝트 코드를 로컬에서 구동하던 중 모듈 install 단계에서부터 에러가 발생되어 트러블 슈팅했던 내용을 정리해본다. 늘 그렇듯이 결론부터 말하자면 node-sass 버전이 설치된 node 버전과 상이한 버전이 설치되어 발생되는 이슈다. 해당 프로젝트의 경우 yarn도 사용했었으니 참고! 원인 내 PC에 설치된 node와 node-sass 모듈의 버전은 아래와 같았다. # 현재 노드 버전 - stable version은 현재 기준 16.13.1이다. node -v ✔ 09:27:05 v16.13.0 # 구버전 설치됨 npm list | grep node-sass 1 ✘ 27s 09:24:23 ├── node-sass@4.14.1 아래 공식문서 내용 처럼..
2022.01.10 -
[React/Code Splitting] 컴포넌트 Dynamic import하여 lazy loading 적용하기
라우팅 구현 중에, 경로에 따라 유동적으로 컴포넌트를 호출하여 보여줄 방법을 고민하다가 대표적인 성능 개선 기법인 코드분할(code splitting)방식을 응용하여 적용한 내용입니다. 코드 분할이란? 코드 분할은 여러분의 앱을 “지연 로딩” 하게 도와주고 앱 사용자에게 획기적인 성능 향상을 하게 합니다. 앱의 코드 양을 줄이지 않고도 사용자가 필요하지 않은 코드를 불러오지 않게 하며 앱의 초기화 로딩에 필요한 비용을 줄여줍니다. 목표 1. 목록에서 선택한 값(=ID)에 따라 path 설정하여 라우팅 2. 전달받은 route param(=ID) 기준으로 필요한 컴포넌트 lazy loading하여 렌더링 구현 우선 프로젝트 구조는 아래와 같습니다. path 경로에 따라 projects 폴더 하위의 경로에 ..
2021.12.19 -
[React / Bugfix] Unknown Prop Warning
버그 내용 Warning: React does not recognize the `computedMatch` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `computedmatch` instead. If you accidentally passed it from a parent component, remove it from the DOM element. 원인 react warning computedMatch regarding some case issues? I have props named as isAuthenticated and it also..
2021.10.04 -
[Vue-router] 데이터 전달
1. query를 통한 전달 uri에 데이터가 다 노출된다. 2. params를 통한 전달 uri에 데이터가 노출되지 않는다. `props: true`로 설정 시 props 항목에 데이터를 전달 받을 수 있다. 프로그래밍 방식으로 네비게이션 설정 시 name으로 설정하여야 한다. (path 지정 X) 분명히 params 전달하였으나 빈 object로 오는 경우 path -> name 으로 변경하면 잘 온다.
2021.06.21 -
[스크랩] CKEditor5 Base64 이미지 업로드 구현
이미지 업로딩 방식을 고민하다가 대부분 직접 서버로 호스팅해서 구현하고 있었는데, 우리 서비스에서는 텍스트 작성 위주로 이루어질 예정이었고 첨부파일은 따로 제공하는 형태여서 그냥 base64를 쓰기로 결정하였다. 해결법 아래 내용에서 제공하는 Base64Upload.js를 직접 작성한 후 import하여 문제를 해결하였다. github.com/ckeditor/ckeditor5-angular/issues/88 How to define a Base64 file upload? · Issue #88 · ckeditor/ckeditor5-angular Hello, I'm using the ckeditor5 with Angular 7 for the first time. I have seen this topic ab..
2021.02.16