본문 바로가기

전체 글71

VS Code에서 Prettier 사용시 자동저장이 동작하지 않을 때 settings.json에서 formatOnSave도 바꿔줬고 editorOnSave도 해줬고 enable도 해줬는데 왜! 저장하면 자동으로 포맷팅이 안되는거야! 라고 헤매는 중이라면? Settings > "default formatter" 검색 > Default Formatter를 esbenp.prettier-vscode로 변경해주면 된다. 2020. 11. 23.
[윈도우 키보드 + mac] Caps Lock을 한영키로 사용하기 karabiner를 설치한다. Big Sur로 업데이트하려는 경우, 반드시 karabiner부터 업데이트하기를 권장한다... 엉망된다. karabiner-elements.pqrs.org/ Karabiner-Elements A powerful and stable keyboard customizer for macOS. karabiner-elements.pqrs.org 내 경우 리얼포스 윈도우 버전을 사용중이며, 아래와 같이 사용하고 있다. 추가로 command + space를 한영변환키로 사용하고 있음. 어떤게 더 편한지 찾는중이라서.. 카라비나 설치후 다음과 같이 설정해준다. caps lock -> f18 왼쪽 command -> 왼쪽 option 왼쪽 option -> 왼쪽 command 시스템 환경설정.. 2020. 11. 15.
[React + Typescript] Typing Tips 리액트 타이핑 팁 백엔드에서 라이트하게만 타입스크립트를 사용해오다가, 리액트에서 사용하려니 너무 어려웠다. 백엔드에서는 거의 내가 직접 만든 것들에 대해서만 타이핑하면 되었는데, 리액트에서는 리액트 컴포넌트까지 타이핑해야 하다보니 어떤 타입인지 제대로 입력하기가 헬이었다. 결국 처음엔 any로 도배하면서 구현했다가, 하나씩 실마리를 잡을 때마다 다른곳들을 채워가는 중... 그래서, 리액트+타입스크립트 쌩초보 입장에서 팁을 공유하고자 작성한다. 유용하다고 생각되는 것을 찾을 때마다 조금씩 보완할 예정이다. 💡 나만 몰랐던 이야기(?) RouteComponentProps은 라우트를 통해 렌더링되는 컴포넌트의 기본 prop이다. history, location, match, staticContext?로 구성되어 있다. Reac.. 2020. 11. 15.
[React] Warning: Component update a component Bar while rendering a different component 발생 조건 특정 컴포넌트 렌더링 시 mobx 스토어의 값을 변경하도록 함 내 경우 /bar/edit 라우트로 접속 -> bar edit 화면 렌더링 -> 스토어의 menu 값을 'edit'으로 변경하는 상황이었음 해당 스토어 값을 통해 다른 UI를 보여줘야 해서 이렇게 구현하게 됨 발생 원인 렌더링 중 state가 변경되면 안됨. state 변경시 다시 렌더링이 일어나므로 당연한거였다... 해결 방법 컴포넌트 렌더링 시 store 또는 state 값 변경이 필요한 경우, useEffect 안에서 값을 변경한다. useEffect(() => { menu.changeMenu(Menu.Edit); // 스토어의 값을 변경하는 코드(setState) }, []); 2020. 11. 15.
[React, Material UI] Warning: MaxListenersExceededWarning 발생 조건 Material UI에서 Grid 컴포넌트를 사용해 리스트 구현 리스트 테이블의 컬럼 수가 10개 이상일 때 발생 원인 Event listener는 10개가 default 컬럼을 resizing해주는 이벤트리스너(colResizer)가 컬럼수만큼 생성된다. colResizing 이벤트를 막을 수 있는 XGrid컴포넌트를 사용해도 되지만, 상업적 사용시 유료이다. 따라서 컬럼이 10개 이상이 되면 워닝이 발생함. 해결 방법 아래 코드 추가 require('events').EventEmitter.prototype._maxListeners = {컬럼 수}; 나는 12를 넣었다. 참고로 0을 넣으면 무제한이 되는데 권장하지 않는다. 2020. 11. 15.
[React + Material UI Modal] Warning: Failed prop type: Invalid prop children ... 해결하기 Warning: Failed prop type: Invalid prop children ... 발생조건 React + Material UI 환경에서 Modal 사용시 발생원인 Material UI의 Modal은 ref와 함께 자식 컴포넌트로 전달되어야 한다. 더 찾아보면 함수형 컴포넌트에서는 사용할 수 없거나 복잡한 방법을 사용해야 한다는 내용들이 나오는데, 클래스 컴포넌트는 권장사항이 아니기도 하지만, Mobx나 useStyle등을 사용하는 방법도 달라서 찝찝하고 복잡해질 수 있다. 결국 수정할수록 더 많은 에러를 뿜는바람에 클래스 컴포넌트를 사용하는 방법으로는 해결하는것은 포기했다.. 해결방법 // 모달을 사용할 함수형 컴포넌트 return( { setOpen(false); }} aria-labell.. 2020. 11. 15.
React.js 둘러보기 약간의 기초지식이 있는 백엔드 개발자 입장에서, React.js를 처음 접하면서 느낀 점들을 정리해보고자 한다. React를 바라보는 지식수준(현재 내 상태) Javascript의 기본적인 문법 지식이 있음 node.js, express를 사용한 개발 경험이 있음 html, css를 사용한 간단한 프론트 구현 경험이 있음 React가 어떤 원리로 구동되는지, 어떤 컨셉인지는 전혀 모름 매우 유용했던 자료들 이고잉님의 생활코딩 React강의 리액트 공식 Docs velopert님의 누구든지 하는 리액트 이 글은 위 자료들을 보면서 인상깊었거나 중요하다고 생각되는 부분들을 정리한 글이니 참고해주세요. 제 경우 이고잉님의 강의 위주로 진행하면서, 중간중간 좀 더 알고 싶은 부분은 다른 자료를 참고해가며 공부했.. 2020. 10. 12.
Azure Pipeline node.js 람다 배포 템플릿 만들기 구축하려는 Pipeline 과정은 다음과 같다. 1. Azure Repo의 특정 branch에 변경사항이 반영되면 Pipeline이 트리거된다. 2. ubuntu vm환경에서 작동하도록 한다. 3. Node와 Npm을 설치한다. (npm install을 위해) 4. 모듈 설치를 위해 npm install 한다. 5. 배포에 필요없는 파일들을 삭제한다. (azure-pipelines.yml 등) 6. 배포 패키지를 만들기 위해 압축한다. 7. S3에 업로드한다. 8. S3에 업로드된 파일을 사용해 람다에 배포한다. 리포지토리의 구조는 아래와 같다. test-repo ㄴindex.js ㄴazure-pipelines.yml ㄴpackage.json ㄴ.gitignore 아직 파이프라인을 구축한 적이 없다면 a.. 2020. 9. 11.
[Typescript] 유틸리티 타입 - Parameters, ReturnType, Required Parameters 함수 타입 T의 매개변수 타입을 튜플 타입으로 정의한다. declare function createCat(cat: {color: string, legs: number}): void type catParams = Parameters; // [{color: string, legs: number}] ReturnType 함수 T의 반환 타입으로 정의한다. Parameters와 대칭되는 형태라고 볼 수 있겠다. declare function createCat(): Cat type catResult = ReturnType; // Cat Required T의 모든 속성이 필수인 타입을 만든다. optional로 설정한 속성도 반드시 가지고 있어야 한다. interface User { name: s.. 2020. 8. 1.