본문 바로가기

전체 글71

nextjs 프로젝트 정리 보호되어 있는 글 입니다.
Django Database Functions - Date functions Django ORM은 데이터베이스 기능을 지원하기 위해 functions를 제공하고 있습니다. 이번 글에서는 날짜 functions들에 대해 알아보도록 하겠습니다. Extract Extract는 날짜를 숫자로 변경합니다. DateField, DateTimeField, TimeField 또는 DurationField의 값에 lookup_name을 사용하여 날짜의 일부를 숫자로 추출할 수 있습니다. lookup_name으로는 아래 목록들이 사용 가능합니다. datetime 2015-06-15 23:30:01.000321+00:00 “year”: 2015 “iso_year”: 2015 “quarter”: 2 “month”: 6 “day”: 15 “week”: 25 “week_day”: 2 “iso_week_..
Django Database Functions - Comparison and conversion Django ORM은 데이터베이스 기능을 지원하기 위해 functions를 제공하고 있습니다. 이번 글에서는 비교 및 변환 functions들에 대해 알아보도록 하겠습니다. Cast Cast는 값의 필드 타입을 output_field의 필트 타입이 되도록 변경시키는 역할을 합니다. 이를 사용하려면 expression, output_field 2개의 인자를 Cast function에 넣어줘야 하고 두가지 모두 유효한 값이여야 합니다. from django.db.models.functions import Cast, FloatField Sample.objects.annotate( float_num=Cast('number', output_field=FloatField()) ) 위 코드가 실행되면 float_nu..
react 클래스 컴포넌트의 super 소개 super(props)는 클래스 컴포넌트를 사용하게 된다면 항상 constructor안에 사용되게 됩니다. 그래서 이번에는 왜 super(props)를 사용하는지 알아 보고 사용하지 않았을때 어떤 이슈가 발생하는지 알아보도록 합시다. class ClassApp extends React.Component { constructor(props) { super(props); } } super()는 자식 클래스가 생성될 때 부모 클래스의 생성자를 참조하는 방법으로 react 클래스 컴포넌트의 부모 클래스는 React.Component가 됩니다. 그리고 주의할 점으로 super를 사용하기 전에는 constructor에서 this를 사용할 수 없습니다. 자바스크립트가 이런 제약사항을 강제하는 데에는 사실 합리적..
react 클래스 컴포넌트의 this 리엑트에는 클래스 컴포넌트를 사용할 때는 this를 어떻게 사용하는지가 컴포넌트의 퀄리티를 바꾸게 됩니다. 튜토리얼이나 도큐먼트 문서를 보면 props나 state를 관리할 때 this를 사용하는 것을 많이 볼 수 있습니다. 그렇다면 this가 어떻게 사용되는지 알아보도록 하겠습니다. import React from "react"; class App extends React.Component { // 상태값 num 선언 state = { num: 0 }; // 버튼을 누르면 this.state.num을 1만큼 증가시킴 increase() { this.setState(current => ({ num: current.num + 1 })); console.log("increase메서드의 this는", this..
javascript에서 Class 사용하기 - 2 Class 정의 JavaScript에서 Class는 사실 함수입니다. 함수를 함수 선언과 함수 표현식으로 정의할 수 있듯이 class 문법도 class 선언과 class 표현식 두가지 방법으로 정의가 가능합니다. JavaScript 엔진은 function 키워드를 만나면 Function 오브젝트를 생성하듯, class 키워드를 만나면 Class 오브젝트를 생성합니다. class는 클래스를 선언하는 키워드이고 Class 오브젝트는 엔진이 class 키워드로 생성한 오브젝트입니다. Class 선언 함수 선언과 달리 클래스 선언은 호이스팅이 일어나지 않기 때문에, 클래스를 사용하기 위해서는 먼저 선언을 해야합니다. 그렇지 않으면 ReferenceError 가 발생합니다. Class 표현식 Class 표현식은 ..
javascript에서 Class 사용하기 - 1 소개 javascript는 ES6에서부터 Class 지원을 시작했습니다. 단 javascript의 class는 다른 객체지향 언어에서 사용되는 Class 문법과는 다르게 사용됩니다. javascript에는 Class라는 개념이 없기 때문에 javascript는 prototype을 이용해 상속을 구현합니다. prototype javascript의 Class를 이해하기 위해서는 prototype에 대한 이해가 선행되어야 하기 때문에 prototype에 대해서 알아보도록 합시다. 자바스크립트는 원시 값(primitive, 또는 원시 자료형)을 제외하고는 모두 객체입니다. Object와 Function은 function(즉, 생성자)입니다. object는 객체를 의미합니다. function Card() { } ..
React Recoil 사용하기 소개 Recoil은 component의 state를 더 쉽게 관리하기 위해 페이스북에서 제작한 react state 관리 라이브러리다. react 자체에 이미 state 관리 기능이 내장되어 있지만 보완해야할 점이 있어 Recoil이 만들어 졌다. react의 한계 https://recoiljs.org/ko/docs/introduction/motivation - component의 state는 공통된 element까지 끌어올림으로써 공유될 수 있지만, 이 과정에서 거대한 트리가 다시 렌더링되는 효과를 야기하기도 한다. - Context는 단일 값만 저장할 수 있으며, 자체 소비자(consumer)를 가지는 여러 값들의 집합을 담을 수는 없다. - 이 두가지 특성이 트리의 최상단(state가 존재하는 곳)..
React에서 Axios 사용하기 소개 Axios, Ajax, Fetch 같은 http client들은 비동기 http 통신을 위한 방법 중 하나입니다. 특히 이번에 소개할 Axios는 Fetch와 유사한 점이 많고 promise 객체를 기반으로 사용됩니다. async와 await을 사용하여 함수의 실행 순서를 제어할 수 있고 HTTP 요청 취소 및 요청과 응답을 JSON 형태로 자동 변경해 Fetch처럼 stringify를 사용하지 않아도 됩니다. 또한 interceptors를 사용해 requests가 then이나 catch로 처리되기 전에 cancle하거나 interceptor 할 수 있고 자체적으로 요청 위조에 대한 보안 기능을 가지고 있어 보안면에서 훌륭합니다. Promise javascript 비동기를 간편하게 처리할 수 있도록..