본문 바로가기

전체 글138

[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.
[Typscript] 유틸리티 타입 - Pick, Omit Pick 일부의 속성만 가질 수 있을 때 사용한다는 점에서 Partial과 비슷하지만, 속성을 직접 선택한다는 점이 다르다. interface Post { title: string; author: string; content: string; isHidden: boolean; } // 게시글을 작성한다. const newPost = { title: 'hello world', author: 'effy', content: 'hello', isHidden: false, } // 제목과 내용만 바꿀 수 있도록 하고 싶다. function updateOnlyTitleAndContent(post: Post, payload: Pick) { return {...post, ...payload} } updateOnlyTit.. 2020. 7. 22.
[LeetCode] 46. Permutations 순열 (Javascript) https://leetcode.com/problems/permutations/ var permute = function(nums) { return nums.reduce( function(list, element) { var newlist = []; list.forEach(function(seq) { for (var i = seq.length; i >= 0; i--) { var newseq = [].concat(seq); newseq.splice(i, 0, element); newlist.push(newseq); } }); return newlist; }, [[]] ); }; 순열 이해하기가 왜이렇게 어려운지.. 요약하면, 반복을 돌며 값을 고정해나가는 방식이다. [1, 2]이 있다고 하면, 배열 길이만큼.. 2020. 7. 22.
[Typscript] 유틸리티 타입 - Partial, Readonly, Record Partial 일부의 속성만 가질 수 있을 때 사용한다. 예를 들어 게시글 인터페이스엔 제목, 글쓴이, 내용 등등이 있을 것이다. 게시글 수정시 항상 모든 필드를 수정하지는 않는다. 게시글에 포함된 프로퍼티 중 일부의 프로퍼티(하위 타입 집합)만 사용하고 싶을 때 사용할 수 있다. interface Post { title: string; author: string; content: string; isHidden: boolean; } // 게시글을 작성한다. const newPost = { title: 'hello world', author: 'effy', content: 'hello', isHidden: false, } // 수정하고 싶어졌다. 제목만 바꿀수도 있고, 내용만 바꿀수도 있고, 다 바꿀수도 .. 2020. 7. 21.
[LeetCode] 11. Container With Most Water (Javascript) https://leetcode.com/problems/container-with-most-water/submissions/ 막대들이 주어지고, 가장 넓은 면적을 찾는 문제다. 이중포문과 완전탐색으로 풀었는데, 문제를 딱 봤을때 직관적으로 떠오르는 풀이방법이긴 하지만... 더 좋은 방법이 있지 않을까? var maxArea = function(height) { // 위치 index, 높이 h인 object 배열을 만든다. const map = height.map((h, index)=> ({index, h})); let answer = 0; // 이중 포문...으로 모든 조합을 찾는다. for (let i = 0 ; i < map.length; i++) { for (let j = i + 1; j < map... 2020. 7. 21.

티스토리툴바