전체 글71 React 컴포넌트 라이브러리 Top 11 React는 가장 많이 사용되는 기술 중 하나입니다. React를 사용하는 사람은 처음 페이스북으로부터 만들어진 2013년부터 상승 곡선을 그리며 꾸준히 늘어왔고 최근에 이르러서는 그 수가 엄청나게 늘었습니다. 이로 인해 사람들은 직접 코딩한 컴포넌트들을 공유하기 시작하였고 이 글은 공유된 컴포넌트들 중에 인기 있는 11가지를 소개하는 글입니다. Material-UI Material-UI는 Github에서 가장 인기있는 React 컴포넌트 라이브러리입니다. 간단하고 가벼우며 Google의 Material Design 사양에 따라 제작되었습니다. 레이아웃, 양식, 탐색, 데이터 표시 및 기타 여러 위젯에 대한 컴포넌트가 존재합니다. @material-ui/style로 컴포넌트를 스타일링 할 수 있고 CSS.. 맥 TouchEn nxKey 문제 해결 pc에서 원하는 물건을 구매하고 싶어서 결제할 때 TouchEn 보안 프로그램을 설치하라는 안내 문구가 나오게 된다. 윈도우 사용자의 경우에는 설치만 잘해주면 결제하는데 문제가 없지만 맥 사용자의 경우에는 확장 프로그램 또는 수동 설치까지 완료하였음에도 계속 프로그램을 설치하라는 안내 문구가 반복되어 스트레스를 받은 경험이 있을 것이다. 해결방법 인터넷에서 찾아보면 이거해라 저거 해라 말들이 많은데 삽질하면서 찾은 가장 간단한 방법은 개발자 도구를 켜고 toogle device toolbar 모드를 활성화시킨 다음 브라우저의 디바이스 타입을 mobile로 변경하는 방법이다. 따라 하기 1. 결제하려는 페이지에서 F12키를 누른다. 2. 왼쪽 상단에 전체 화면 버튼(초록색 동그라미) 하단에 있는 아이콘을 .. React Fragments React를 이용해 컴포넌트를 만들고 JSX로 엘리먼트를 return해줄때 하나의 부모 엘리먼트로 감싸어지지 않으면 에러가 발생하는 경험을 겪은적이 있었다. function FuncName(props) { ... return ; } 이를 해결하기 위해서 원래 구조 계획에 있지 않던 엘리먼트를 생성하여 씌워주었지만 이 문제를 해결해주는 좋은 방법이 React에는 이미 있었다. 바로 이번 글에서 소개할 Fragments라는 문법이다. Fragments Fragments는 DOM에 별도의 노드를 추가하지 않고 여러 자식을 그룹화할 수 있다. class Table extends React.Component { render() { return ( ); } } 위와 같은 코드가 있을때 Columns 컴포넌트에는 만.. Jira 도입 리뷰 회사 업무에 Jira를 도입한 지 반년이 돼가고 있어 도입하기 전과 도입 후를 비교하고자 합니다. 도입 전 기획을 누가 하는지에 대해서는 3가지로 나뉘었습니다. 타 팀 관리자 혹은 디자이너 개발자 기획자 타 팀에서 기획을 하는 경우 어떤 팀에서 하느냐에 따라 포맷이 제각각이고 같은 팀에서 유사한 페이지를 기획하더라도 누가 하느냐에 따라 기획서 퀄리티가 나뉩니다. 여기서 말하는 퀄리티는 소프트웨어 아키텍처 관점에서 봣을때 기능 명세나 프로세스가 명확한 수준을 말합니다. 꼭 그렇다는 건 아니지만 타 팀의 기획으로 업무를 할 경우 기획한 사람과 소통할 일이 잦습니다. 왜냐하면 그들은 개발에 대한 지식이 없고 디테일하게 명세해 주는 경우가 드물기 때문입니다. 팀에 PM이나 기획에 대한 전반적인 지식이 있는 사람.. IT팀과 협업하기, 업무 발의 소프트웨어를 개발하는 IT기업에 다니는 경우 IT팀에 업무에 필요한 기능이나 잘 동작하던 기능이 갑자기 안된다거나 다른 업체와의 제휴로 인해 급하게 개발을 요청해야 하는 경우가 있었거나 생길 것입니다. 이럴 경우 다양한 채널을 통해서 IT팀에게 업무 발의를 할 수 있겠지요. 예를 들면 자리로 가서 말로 한다던지, 메일을 보낸다던지, 친한 개발자 한태 DM을 보내기 등 정말 여러 가지 방법이 있습니다. 근데 이렇게 다양한 채널이 있는 게 과연 좋은걸 가요? 다르게 생각해봅시다. 나는 IT팀을 이끌고 있는 관리자입니다. 나의 업무 중 하나는 타 팀에서 들어오는 업무 발의를 바탕으로 기획과 업무 분배를 하는 것입니다. 오늘도 전화, 메일, dm을 통해 다양한 팀의 사람들이 업무 발의를 하고 발의자와 무슨 의도.. JavaScript 바인드 bind()는 javascript function prototye에 내장된 함수중 하나로 사용자가 고정시키고자 하는 인자를 bind() 함수를 호출할 때 인자로 넘겨주고 반환받은 함수를 호출하면서 나머지 가변 인자를 넣어줄 수 있다. // 내장된 bind 함수의 기본적인 polyfill Function .prototype.mybind = function (context) { let fn = this; return function () { fn.call (context) } }; bind()함수의 기본 구현은 아래와 같습니다. let basic = { 'name': 'shyam', 'age': 24 }; function callMe(city) { console.log('Hi! my name is ' + t.. JavaScript 화살표 함수 화살표 함수 표현(arrow function expression)은 기본적인 함수(function) 표현에 비해 구문이 짧고 자신의 this, arguments, super 또는 new.target을 바인딩하지 않습니다. 화살표 함수의 이름은 항상 anonymous(익명)이며 화살표 함수는 메소드 함수가 아닌 곳에 가장 적합합니다. const allItem = ['new', 'use', 'new', 'use']; // ES5 Style var usingItem = allItem.filter(function(use) {return use == 'use'}); usingItem // ['use','use'] // ES6 Style var usingItem = allItem.filter(use => use =.. React 주요 개념 Event 처리 react 엘리먼트에서 이벤트를 처리하는 방법은 DOM 엘리먼트에서 이벤트를 처리하는 방식과 유사하지만 몇 가지 차이점이 있습니다. convention react의 이벤트는 소문자 대신 캐멀 케이스를 사용합니다. JSX를 사용하기 때문에 함수로 이벤트 핸들러를 전달합니다. click preventDefault react에서는 false를 반환해도 기본 동작을 방지할 수 없습니다. 반드시 preventDefault 를 명시적으로 호출해야 합니다. // HTML Style click // React JSX Style function ClickButton () { function handler(e) { e.preventdefault(); alert('click'); } return ( click }; } ES.. Django 모델 컨벤션 현재 근무 중인 회사에서 사용 중인 Django model의 컨벤션입니다. django 공식문서에 작성되어 있는 컨벤션과는 다른 형태를 가지고 있다는 점이 조금 안타깝긴 하지만 프로젝트 내에 이미 통일된 컨벤션으로 이용되고 있기 때문에 수정하지 않았습니다. 모델 클래스 내 코드 순서 상수 (EX. choices 인자로 설정할 값) : 대문자 이미지 필드의 upload_to 인자로 설정할 메소드 필드 프로퍼티 : get_ 이름 사용 불가능 메소드 : get_ 이름 사용 가능 save() 메소드 delete() 메소드 __str__() 메소드 : 필수 (모델 자체의 verbose_name 역할) Meta 클래스 class SampleModel(models.model): TYPE_CHOICES = ( (0, .. 이전 1 ··· 3 4 5 6 7 8 다음
