전체 글66 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, .. CSS 이미지 스프라이트 (Image Sprite) 1. 개념 이미지 스프라이트(Image Sprite)란? background-image로 사용될 여러 개의 이미지들을 한 개의 이미지로 묶은 후, 각 이미지가 필요한 곳에서는 해당 이미지만을 보여주도록 background-position을 조정해주는 기법입니다. 왜 사용해야 하는가? 페이지 접속 시 서버에게 전송하는 요청(Request)의 개수를 최소화하기 위함입니다. 이미지 스프라이트 비교표 스프라이트는 수직 정렬(Vertical) 타입과 바둑판(Tile) 타입 중 필요한 것을 선택하여 사용합니다. 수직 정렬 타입의 스프라이트는 이미지 개수가 늘어남에 따라 공간 또한 늘어나서 용량 이슈가 발생하므로, 모바일 환경에서는 바둑판 타입의 스프라이트를 사용하도록 합니다. (위 비교표 참조) 각 스프라이트 집합.. Jira 쓰는 개발자의 Git 사용방법 Git 사용 원칙 Git은 개발 시 효율적인 협업을 가능하게 만드는 핵심적인 도구입니다. 또한 테스트 환경을 손쉽게 구축할 수 있고 테스트 및 배포를 자동화하고 관리하는 것도 매우 편리하게 할 수 있습니다. 여기서는 Git이 어떤 방식으로 사용하는지 설명합니다. Git의 기본 개념 및 동작 원리는 여기서 설명하지 않습니다. 혹시 Git의 동작 원리가 궁금하신 분은 여기를 참조 바랍니다. 브랜치 종류 master : 실서버 브랜치입니다. stage : 테스트 서버 브랜치입니다. (이슈 발생 시 develop 브랜치로부터 재생성 가능합니다.) develop : 개발 진행을 위해 feature 또는 hotfix 브랜치를 생성할 때의 source 브랜치입니다. feature : 정식(원래 하기로 예정되어 있던).. React 주요 개념 Lifecycle of Component react에서는 생성, 업데이트, 제거될 때 자동으로 트리거 되는 lifecycle API를 가지고 있습니다. 컴포넌트 생성 시 자주 사용하던 render메소도 역시 react 컴포넌트의 lifecycle 메소드중 하나입니다. 컴포넌트가 생성될때 실행되는 메소드 render() 클래스 React.Component의 하위 class에서 반드시 정의해야 하는 메서드, 이 메서드가 호출되면 this.props, this.state의 값을 이용해 아래 목록 중 1가지를 반환해야 합니다. - React 엘리먼트, 일반적으로 JSX를 사용해서 생성됩니다. - Portal, 별도의 DOM 하위 트리에 자식 엘리먼트를 렌더링 합니다. - Boolean 또는 nulll, 아무것도 렌더링 하지 않습니다. - 배열과 Fra.. React 주요 개념 State State는 props와 유사하지만, 비공개이며 컴포넌트에 의해 제어됩니다. class Clock extends React.Component { render() { return ( Hello, world! It is {this.props.date.toLocaleTimeString()}. ); } } ReactDOM.render( , document.getElementById('root') ); 위 코드를 props에서 state로 변경해 보겠습니다. class Clock extends React.Component { constructor(props) { // 초기 this.state를 지정하게 해주는 클래스 super(props); this.state = {date: new Date()}; } rende.. React 주요 개념 Components and props 컴포넌트는 하나의 조각이라고 생각하시면 됩니다. 그리고 각각의 컴포넌트는 개별적으로 컨트롤이 가능합니다. 개념적으로 컴포넌트는 javascript 함수와 유사하고 "props"라는 임의의 값을 입력받은 후 화면에 react 엘리먼트를 반환합니다. 컴포넌트는 함수 컴포넌트와 클래스 컴포넌트가 있습니다. 이 페이지에서는 두 가지 모두 다뤄보겠습니다. function Welcome(props) { // 함수 컴포넌트 return hello, {props,name}; } class Welcome extends React.Component { // 클래스 컴포넌트 render() { return Hello, {this.props.name}; } } react의 관점에서 볼 때 두가지 유형의 컴포넌트는 동일하지만 .. 이전 1 ··· 3 4 5 6 7 8 다음
