본문 바로가기

분류 전체보기62

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 도입 전과 후의 변화: 우리의 성장 이야기도입 전: 혼란 속에서 기획을 고민하다회사가 성장하고 다양한 프로젝트를 진행하면서, 기획의 책임이 명확하지 않았던 시절이 있었습니다. 기획은 상황에 따라 타 팀의 관리자, 디자이너, 개발자, 그리고 기획자가 나눠 맡았지만, 각자의 방식과 관점이 다르다 보니 통일성은 부족했고, 때로는 퀄리티에도 큰 차이가 있었습니다.특히 타 팀에서 기획이 진행될 경우, 개발 지식이 부족한 기획서는 디테일이 부족하고, 기능 명세가 모호해 개발자와의 소통이 반복적으로 필요했습니다. 이는 개발자의 시간을 크게 소모하게 만들었고, 결과적으로 프로젝트 진행 속도에 영향을 미쳤습니다.개발자가 직접 기획을 하는 경우에는 더 꼼꼼하고 구조적인 기획이 가능했지만, 다른 팀과의 소통 부족으..
IT팀과 협업하기, 업무 발의 통합된 업무 발의 채널의 필요성과 제안복잡한 발의 채널의 문제: 누구에게 요청해야 할까?IT 기업에서 일하다 보면 업무 중 필요한 기능 추가나 갑작스러운 장애, 혹은 제휴 요청 등으로 인해 IT팀에 개발을 의뢰해야 하는 상황이 종종 발생합니다. 이런 경우 발의 방법은 다양합니다.자리로 가서 구두로 요청하기메일을 보내기친한 개발자에게 DM을 보내기이처럼 여러 채널을 통해 요청할 수 있는 것이 언뜻 보기엔 편리해 보일지 모르지만, 과연 이런 방식이 최선일까요?다르게 생각해 봅시다.관리자의 입장에서 상상해보면 혼란이 쉽게 그려집니다. IT팀의 관리자는 다양한 팀에서 들어오는 업무 발의를 정리하고, 이를 기반으로 팀 내 업무를 조율합니다. 그런데 발의자들이 각자 편한 방식으로 업무를 요청하면, 관리자는 여러 채..
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, ..

티스토리툴바