본문 바로가기

Web development131

2020년 회고 코로나로 삭제된 듯한 기분이 들지만 은근 여러가지 일이 있었던 한 해였다. 개인적인 생각이지만 사람은 늘 성장하면서도 망각하는 동물이라 1년 전, 1달 전, 1주 전보다도 지금이 나아져 있지만 기록하지 않으면 무엇이 달라졌는지는 기억하기 힘든 것 같다. 좀 더 자주 회고했어야 하는데...로 시작하는 작년 회고가 되겠다. 2020 목표 달성 현황 (실패)해외여행, 파이프오르간 공연 보기 예약까지 했었으나.. 코로나로 취소되었다. (실패)내 서비스 만들어보기, 깃허브 잔디 심기 갑작스런 이직 준비로 최선을 다하느라... 실패. 대신 이직은 성공적이었다. (성공)블로그 글 24개 이상 쓰기 총 55개를 작성했다! 대성공! 매달 최소 1개는 꾸준히 썼다. 일단 주제가 생각나면 비공개로 메모해두고, 여유가 생기면.. 2020. 12. 28.
[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.
백엔드와 프론트엔드는 뭘까? 요즘 개발자라는 직업이 뜨고 있고, 다른 직군의 사람들도 개발자와 협업해야 하는 경우가 잦다 보니, 자연스럽게 관심을 갖는 분들이 많은 것 같다. 회사에서 비개발직군 사람들과 대화하다 보면 자주 받는 질문이 있다. 프론트랑 백엔드가 뭔가요? 당신은 우리 서비스에서 뭘 만드는 건가요? 질문을 여러 번 받다보니 버전도 여러가지가 존재하는데, 개발을 처음 접한 지 몇 년 되지도 않은 나도, 그땐 어떻게 받아들였지? 어떤 점이 이해가 안됐지? 하는 기억이 안 난다. ㅋㅋㅋㅋ 개구리 올챙이 시절 기억 못한다더니, 난 아직 꼬랑지도 붙어있는데 기억을 못하는 격이다. 아무튼 개발에 대한 이해도가 전혀 없는 사람에게 설명하기가 참 어렵다. 처음엔 "눈에 보이는 화면 그리는게 프론트엔드고, 뒤에 로직 처리하거나 계산하고.. 2020. 7. 25.

티스토리툴바