똑똑한개발자 기술 블로그

Django ORM defer 기능

Thu, 26 Aug 2021 14:35:00 +0900

시작하기 전에

안녕하세요 똑똑한 개발자에서 백엔드 개발을 하고 있는 jujun입니다.

django orm 은 디폴트로 해당 모델의 모든 컬럼을 불러옵니다.

only 기능을 사용한다면 필요한 항목만 불러올 수 있게 됩니다.

이번 포스트에서는 only()와 반대(?)인 defer()기능은 명시된 컬럼을 빼고 모든 컬럼을 가져옵니다.

이는 불필요한 데이터를 불러오지 않게하여 컴퓨터 자원을 보다 효율적으로 사용할수 있습니다.

하지만 잘못 사용하면 lazy lading 에 의해 불필요한 쿼리를 발생시킵니다.

자세히 알아보겠습니다.

본론

예제코드

저번 블로그와 같이 아래와 같은 모델이 있습니다.

# api.raw.models

class Party(models.Model):
    country = models.ForeignKey("raw.Country", verbose_name="국가", on_delete=models.SET_NULL ,null=True)
    owner = models.ForeignKey("user.User", verbose_name="소유자", on_delete=models.SET_NULL ,null=True)
    name = models.CharField("정당 이름", max_length=50)
    description = models.TextField("설명", blank = True, null = True)
    image = models.ImageField("사진", upload_to='raw/party/', blank = True, null = True)
    color = models.CharField("정당 색", max_length=50)

    class Meta:
        verbose_name = '정당'
        verbose_name_plural = verbose_name
        ordering = ['country', 'name']

    def __str__(self):
        return self.name

defer() 기능

django orm 은 기본적으로 모델에 있는 모든 항목들을 DB로부터 불러옵니다.

>>> from api.raw.models import Party
>>> p_default = Party.objects.get(id=1)
(0.001) SELECT "raw_party"."id", "raw_party"."country_id", "raw_party"."owner_id", "raw_party"."name", "raw_party"."description", "raw_party"."image", "raw_party"."color" FROM "raw_party" WHERE "raw_party"."id" = 1 LIMIT 21; args=(1,)
>>> p_default.__dict__
{'_state': <django.db.models.base.ModelState object at 0x7fb915203790>, 'id': 1, 'country_id': 1, 'owner_id': 1, 'name': '국민의힘', 'description': '', 'image': '', 'color': '빨강'}

django shell 에서 Party 모델에서 id 값이 1인 인스턴스를 불러왔습니다. 0.001초가 걸렸고 Party 에 있는 id, country_id, 등등 모든 항목들을 가져왔습니다.

defer()기능을 통해 color를 뺴고 모든 컬럼을 가져오겠습니다.

>>> from api.raw.models import Party
>>> p_defer = Party.objects.defer('color','image','description','owner').get(id=2)
(0.001) SELECT "raw_party"."id", "raw_party"."country_id", "raw_party"."name" FROM "raw_party" WHERE "raw_party"."id" = 2 LIMIT 21; args=(2,)
>>> p_defer.__dict__
{'_state': <django.db.models.base.ModelState object at 0x7f2d9d0823d0>, 'id': 2, 'country_id': 1, 'name': '더불어민주당'}

0.001가 걸렸고 ‘color’,’image’,’description’,’owner’ 를 뺀 모든 컬럼을 가져왔습니다.

기능의 시연을 위해 억지 예제를 만들었습니다.

update

해당 인스턴스를 업데이트 하겠습니다.

>>> p_default.name ='국민의힘'
>>> p_default.save()
(0.003) UPDATE "raw_party" SET "country_id" = 1, "owner_id" = 1, "name" = '국민의힘', "description" = '', "image" = '', "color" = 'red' WHERE "raw_party"."id" = 1; args=(1, 1, '국민의힘', '', '', 'red', 1)

기본 orm 으로 불러왔던 모든 데이터가 DB에 반영되었습니다.

>>> p_defer.name = '더불어민주당'
>>> p_defer.save()
(0.003) UPDATE "raw_party" SET "country_id" = 1, "name" = '더불어민주당' WHERE "raw_party"."id" = 2; args=(1, '더불어민주당', 2)

반면 defer()을 통해 불러온 인스턴스는 ‘color’,’image’,’description’,’owner’ 컬럼이 없는 채로 DB에 반영되었습니다.

filter 에서 사용

>>> for party in Party.objects.filter(country_id=1).defer('color','image','description','owner'):
...     party.name
...
(0.001) SELECT "raw_party"."id", "raw_party"."country_id", "raw_party"."name" FROM "raw_party" WHERE "raw_party"."country_id" = 1 ORDER BY "raw_party"."country_id" ASC, "raw_party"."name" ASC; args=(1,)
'국민의힘'
'더불어민주당'
>>>

Select_related 에서 사용

>>> q = Party.objects.defer('color','image','description','owner__email', 'country__name').select_related('owner', 'country').filter(country_id=1)
>>> for party in q:
...     party.name
...     party.country.name
...     party.owner.email
... 
(0.001) SELECT "raw_party"."id", "raw_party"."country_id", "raw_party"."owner_id", "raw_party"."name", "raw_country"."id", "user_user"."id", "user_user"."password", "user_user"."last_login", "user_user"."is_superuser", "user_user"."is_staff", "user_user"."is_active", "user_user"."date_joined", "user_user"."phone", "user_user"."nickname", "user_user"."level", "user_user"."country_id", "user_user"."region_sub_id", "user_user"."engaged_party_id", "user_user"."last_paint_updated_date", "user_user"."paints", "user_user"."acrlic_paints", "user_user"."is_register", "user_user"."occupation_num", "user_user"."used_paint_num", "user_user"."used_cash_item_num" FROM "raw_party" INNER JOIN "raw_country" ON ("raw_party"."country_id" = "raw_country"."id") LEFT OUTER JOIN "user_user" ON ("raw_party"."owner_id" = "user_user"."id") WHERE "raw_party"."country_id" = 1 ORDER BY "raw_party"."country_id" ASC, "raw_party"."name" ASC; args=(1,)
'국민의힘'
(0.000) SELECT "raw_country"."id", "raw_country"."name" FROM "raw_country" WHERE "raw_country"."id" = 1 LIMIT 21; args=(1,)
'Korea'
(0.001) SELECT "user_user"."id", "user_user"."email" FROM "user_user" WHERE "user_user"."id" = 1 LIMIT 21; args=(1,)
'admin@admin.com'
'더불어민주당'
(0.000) SELECT "raw_country"."id", "raw_country"."name" FROM "raw_country" WHERE "raw_country"."id" = 1 LIMIT 21; args=(1,)
'Korea'
(0.000) SELECT "user_user"."id", "user_user"."email" FROM "user_user" WHERE "user_user"."id" = 2 LIMIT 21; args=(2,)
'user1@user.com'
>>> 

select_related로 많은 양의 데이터를 가져왔지만 defer로 제외한 컬럼은 가져오지 못했습니다. 그래서 해당 데이터를 호출할때 새로운 쿼리가 발생하였습니다. 이는 only와 defer를 사용할 때 주의해야할 부분입니다. 불필요한 쿼리를 발생시키지 않습니다.

get_or_create

# get 으로 사용해봄. 
>>> exist_party , created = Party.objects.defer('color','image','description','owner').get_or_create(owner=u)
(0.001) SELECT "raw_party"."id", "raw_party"."country_id", "raw_party"."name" FROM "raw_party" WHERE "raw_party"."owner_id" = 1 LIMIT 21; args=(1,)
>>> created
False
>>> exist_party.name
'국민의힘'
>>> 
# create 로 사용해봄. 
>>> created_party , created = Party.objects.defer('color','image','description','owner').get_or_create(owner=u, name='정의당')
(0.001) SELECT "raw_party"."id", "raw_party"."country_id", "raw_party"."name" FROM "raw_party" WHERE ("raw_party"."name" = '정의당' AND "raw_party"."owner_id" = 1) LIMIT 21; args=('정의당', 1)
(0.003) INSERT INTO "raw_party" ("country_id", "owner_id", "name", "description", "image", "color") VALUES (NULL, 1, '정의당', NULL, '', '') RETURNING "raw_party"."id"; args=(None, 1, '정의당', None, '', '')
>>> created
True
>>> created_party.color
''
>>> created_party.name
'정의당'

get_or_create에서 사용해 보았습니다. get되는 경우는 defer가 잘 작동하지만 create된 경우에는 모든 항목이 불러옵니다.

마치는 말

모델이 커지면 커질 수록 데이터를 불러올 때 불필요한 데이터도 많아집니다. defer()기능을 사용하여 보다 가벼운 쿼리를 만드시길 바랍니다.

[TokTokHan.dev]ES6 문법정리

Sun, 22 Aug 2021 18:00:00 +0900

안녕하세요, 똑똑한개발자에서 프론트엔드 개발을 하고 있는 Luke 입니다. 👋

똑똑한개발자

똑똑한개발자 프론드엔드 팀은 es6를 기반으로 한 타입스크립트 언어를 활용하여 프로젝트를 진행하고 있습니다.

기존에는 ES5 문법으로 JavaScript 코드를 작성하였지만 이제는 최신 트렌드에 맞게 ES6 문법으로 코드를 작성하게 되고, es5와 비교했을때 여러 변경사항이 있습니다. 오늘 글에서는 ES6에서 새로 추가된 기능을 모두 설명하기보다는 코드를 좀 더 간소화하고, 유지보수하기 좋은 코드를 만들기위해서 자주 사용하는 기능위주로 살펴보겠습니다.

ECMAScript란?

ECMA스크립트(ECMAScript, 또는 ES)는 자바스크립트를 표준화 하기위해 만들어진, ECMA-262 기술 규격에 따라 정의하고 있는 표준화된 스크립트 프로그래밍 언어를 말합니다.

const and let

const는 ES6에서 변수를 선언하기 위한 새로운 키워드입니다. const는 객체와 함께 사용할 때를 제외하고는 변경 불가능한 변수 입니다. react에서는 특정 이벤트를 실행하는 버튼이 있거나 특정 요소를 정의하는데에 const를 사용합니다. 변경 불가능한 값을 정의하려면,const를 키워드를 사용하여 상수로 사용하는 것이 좋습니다.

// ES5
var button = document.getElementById("button1");

// ES6
const button = document.getElementById("button2");

let은 새로운 값을 받을 수도 있고 재할당할수도 있습니다. 즉, 변경 가능한 변수가 생성됩니다. 과거 es5이하 문법에서는 var로 선언된 변수가 ‘호이스팅(hoisting)’되는 현상이 있었습니다. es6에서는 이러한 호이스팅 현상이 일어나는 side effect를 최소화 하기위해 변경 가능한 변수에 대해 let 키워드로 정의합니다.

let name = "toktokhan";

name = "dev";

console.log(name); //dev

// name 변수를 let이 아닌 const로 정의한다면, 당연히 'name'변수에 'dev'는 출력되지 않고, 오류가 발생합니다.

화살표함수

화살표 함수는 javascript에서 함수를 정의하는 function 키워드 없이 함수를 만들 수 있으며, return 키워드 없이, 식을 계산한 값이 자동으로 반환됩니다. () 안에 함수의 인자가 들어가고, => 오른쪽에는 결과를 반환하는 식입니다. es5와 es6의 방식의 코드를 비교하며 살펴보겠습니다.

// ---------------- ES5
function myFunc(name) {
  return "TokTokHan" + name;
}

console.log(myFunc(".dev"));

// ---------------- ES6 화살표 함수
// 함수 myFunc는 화살표(=>) 우측의 표현식(expression)을 평가하고, 평가 결과를 반환합니다.
const myFunc = (name) => {
  return `TokTokHan ${name}`;
};
console.log(myFunc(".dev"));

// 'return' 키워드를 사용하지 않아도 됩니다
const myFunc = (name) => `TokTokHan ${name}`;
console.log(myFunc(".dev")); // 출력 => 안녕 영희

//인수가 하나밖에 없다면 인수를 감싸는 괄호를 생략할 수 있습니다.
// 괄호를 생략하면 코드 길이를 더 줄일 수 있습니다.
let double = (n) => n * 2;

비구조화 할당

비구조화 할당은 객체와 배열로부터 프로퍼티를 쉽게 꺼낼 수 있는 문법입니다. 이번에도 역시, es5와 es6의 방식의 코드를 비교하며 살펴보겠습니다.

// ES5 문법
const toktokhanCompany = {
  company: "TokTokHan",
  name: ".dev",
  age: 1,
};

let company = contacts.company;
let name = contacts.name;
let age = contacts.age;

console.log(company);
console.log(name);
console.log(age);

const ToktokhanCompany = {
  company: "TokTokHan",
  name: ".dev",
  age: 1,
};

let { company, name, age } = ToktokhanCompany;

console.log(company);
console.log(name);
console.log(age);

비구조화 할당을 사용하면 객체를 나타내는 중괄호를 열고 그 안에 있는 프로퍼티들을 언급함으로써 간단하게 내부의 속성들을 외부로 인출하여 사용할 수 있습니다. ES5에서 같은 작업을 해야하는 경우, 사용해야하는 속성이 많을수록, 새로운 변수를 생성하고 대입하는 식의 반복작업이 계속됩니다.

ES5에서는 각 변수에 각각의 값을 할당하여 그 값을 정의했습니다. 그런데 ES6에서는 객체의 속성을 얻기 위해 값을 중괄호 안에 넣어 좀 더 간결하게 정의 할 수 있습니다. React에서 Props를 내려주거나 특정 상태를 정의할때 비구조화 할당 문법을 활용할 수 있습니다.

for…of 문

특정 행위를 반복시켜 결과값을 얻어야할때 반복문을 사용합니다. 반복 가능한 객체(iterable)를 for문 안에서 반복시켜 연속된 결과값을 얻습니다.

const iterable = [10, 20, 30];

//es5
for (let i = 0; i < iterable.length; i++) {
  console.log(value);
}

//es6
for (const value of iterable) {
  console.log(value);
}

Spread Operator

spread 연산자는 특정 객체 또는 배열의 값을 다른객체나 배열로 복제하거나 옮길때 사용합니다. React에서는 state의 특정부분만 변화시키거나, 최초의 상태를 유지하며 데이터를 추가하는 등의 경우에 사용됩니다.

const obj = {
  a: 10,
  b: 20,
};
const newObj = { ...obj };
console.log(newObj); // { a: 10, b: 20 }

const arr = [1, 2, 3];
const newArr = [...arr]; // [1, 2, 3]
console.log(newArr);

Default Parameter(기본 매개변수)

//es5
var foo = (a, b, c) => {
  console.log(a, b, c);
};

foo("a");
//a undefined undefined

기존의 es5문법을 활용하여 작성할 경우, 파라미터 a 의 값은 들어왔지만 b 와 c 는 값을 할당받지 못해 undefined가 출력됩니다. 기본값을 설정하기 위해 파라미터가 undefined 인지 일일히 체크하고, 값을 할당해줘야 했습니다.

//es6
const foo = (a, b = "b", c = "c") => {
  console.log(a, b, c);
};

foo("a");
//a b c

es6문법을 사용할 경우, default parameter를 설정할 수 있게 변경되었습니다. 따라서 함수 실행 시 parameter b와 c에 대해 별도로 지정하지않을 경우, default로 설정된 “b”, “c”가 출력됩니다.

후기

ES6 문법으로 생각보다 더 많은 코드들을 간소화할 수 있고, 가독성있게 나타 낼 수 있습니다. ECMAScript는 계속 개선되고 업데이트 되기 때문에, 변경점에 대하여 공식문서를 활용하고, ECMAScript 변경점 중 특이사항이 있거나, 프로젝트에 적용하며 나누고 싶은 부분들은 해당 게시글에 추가적으로 업데이트 하겠습니다.

Django ORM only 기능

Tue, 27 Jul 2021 10:35:00 +0900

시작하기 전에

안녕하세요 똑똑한 개발자에서 백엔드 개발을 하고 있는 jujun입니다.

django orm 은 디폴트로 해당 모델의 모든 컬럼을 불러옵니다.

하지만 only 기능을 사용한다면 필요한 항목만 불러올 수 있게 됩니다.

이는 불필요한 데이터를 불러오지 않게하여 컴퓨터 자원을 보다 효율적으로 사용할수 있습니다.

하지만 잘못 사용하면 lazy lading 에 의해 불필요한 쿼리를 발생시킵니다.

자세히 알아보겠습니다.

본론

예제코드

아래와 같은 모델이 있습니다.

# api.raw.models

class Party(models.Model):
    country = models.ForeignKey("raw.Country", verbose_name="국가", on_delete=models.SET_NULL ,null=True)
    owner = models.ForeignKey("user.User", verbose_name="소유자", on_delete=models.SET_NULL ,null=True)
    name = models.CharField("정당 이름", max_length=50)
    description = models.TextField("설명", blank = True, null = True)
    image = models.ImageField("사진", upload_to='raw/party/', blank = True, null = True)
    color = models.CharField("정당 색", max_length=50)

    class Meta:
        verbose_name = '정당'
        verbose_name_plural = verbose_name
        ordering = ['country', 'name']

    def __str__(self):
        return self.name

only() 기능

django orm 은 기본적으로 모델에 있는 모든 항목들을 DB로부터 불러옵니다.

>>> from api.raw.models import Party
>>> p_default = Party.objects.get(id=1)
(0.001) SELECT "raw_party"."id", "raw_party"."country_id", "raw_party"."owner_id", "raw_party"."name", "raw_party"."description", "raw_party"."image", "raw_party"."color" FROM "raw_party" WHERE "raw_party"."id" = 1 LIMIT 21; args=(1,)
>>> p_default.name
'국민'

django shell 에서 Party 모델에서 id 값이 1인 인스턴스를 불러왔습니다. 0.001초가 걸렸고 Party 에 있는 id, country_id, 등등 모든 항목들을 가져왔습니다.

only를 통해 name 만 가져오겠습니다.

>>> from api.raw.models import Party
>>> p_only = Party.objects.only('name').get(id=2)
(0.001) SELECT "raw_party"."id", "raw_party"."name" FROM "raw_party" WHERE "raw_party"."id" = 2 LIMIT 21; args=(2,)
>>> p_only.name
'더불어'

0.001가 걸렸고 모든 컬럼이 아닌 id와 name 항목만 가져왔습니다.

update

해당 인스턴스를 업데이트 하겠습니다.

>>> p_default.name ='국민의힘'
>>> p_default.save()
(0.009) UPDATE "raw_party" SET "country_id" = 1, "owner_id" = 1, "name" = '국민의힘', "description" = '', "image" = '', "color" = 'red' WHERE "raw_party"."id" = 1; args=(1, 1, '국민의힘', '', '', 'red', 1)

기본 orm 으로 불러왔던 모든 데이터가 DB에 반영되었습니다. 실행 시간은 0.009초입니다.

>>> p_only.name = '더불어민주당'
>>> p_only.save()
(0.003) UPDATE "raw_party" SET "name" = '더불어민주당' WHERE "raw_party"."id" = 2; args=('더불어민주당', 2)
>>> 

반면 only를 통해 불러온 인스턴스는 name 만 반영하였습니다. 실행시간은 0.003 초입니다.

Filter 에서 사용

>>> for party in Party.objects.filter(country_id=1).only('name'):
...     party.name
... 
(0.001) SELECT "raw_party"."id", "raw_party"."name" FROM "raw_party" WHERE "raw_party"."country_id" = 1 ORDER BY "raw_party"."country_id" ASC, "raw_party"."name" ASC; args=(1,)
'국민의힘'
'더불어민주당'

Select_related 에서 사용

>>> q = Party.objects.only('name','owner__email', 'country__name').select_related('owner', 'country').filter(country_id=1)
>>> for party in q:
...     party.name
...     party.country.name
...     party.owner.email
... 
(0.001) SELECT "raw_party"."id", "raw_party"."country_id", "raw_party"."owner_id", "raw_party"."name", "raw_country"."id", "raw_country"."name", "user_user"."id", "user_user"."email" FROM "raw_party" INNER JOIN "raw_country" ON ("raw_party"."country_id" = "raw_country"."id") LEFT OUTER JOIN "user_user" ON ("raw_party"."owner_id" = "user_user"."id") WHERE "raw_party"."country_id" = 1 ORDER BY "raw_party"."country_id" ASC, "raw_party"."name" ASC; args=(1,)
'국민의힘'
'Korea'
'admin@admin.com'
'더불어민주당'
'Korea'
'user1@user.com'
>>> 

Object로 검색하기

>>> u = User.objects.only('nickname', 'email').get(id=1)
(0.021) SELECT "user_user"."id", "user_user"."email", "user_user"."nickname" FROM "user_user" WHERE "user_user"."id" = 1 LIMIT 21; args=(1,)
>>> Party.objects.get(owner=u)
(0.005) SELECT "raw_party"."id", "raw_party"."country_id", "raw_party"."owner_id", "raw_party"."name", "raw_party"."description", "raw_party"."image", "raw_party"."color" FROM "raw_party" WHERE "raw_party"."owner_id" = 1 LIMIT 21; args=(1,)
<Party: 국민의힘>
>>> 

해당 모델 인스턴스는 생기지만 DB에서 데이터를 가져오지 않는 것으로 보입니다.

get_or_create

>>> party = Party.objects.get(id = 1) # 필요한 데이터를 불러오는 중
(0.001) SELECT "raw_party"."id", "raw_party"."country_id", "raw_party"."owner_id", "raw_party"."name", "raw_party"."description", "raw_party"."image", "raw_party"."color" FROM "raw_party" WHERE "raw_party"."id" = 1 LIMIT 21; args=(1,)
>>> upp = RegionUpp.objects.get(id = 1)
(0.005) SELECT "raw_regionupp"."id", "raw_regionupp"."name", "raw_regionupp"."country_id" FROM "raw_regionupp" WHERE "raw_regionupp"."id" = 1 LIMIT 21; args=(1,)
>>> party_usa = Party.objects.get(id=3)
(0.001) SELECT "raw_party"."id", "raw_party"."country_id", "raw_party"."owner_id", "raw_party"."name", "raw_party"."description", "raw_party"."image", "raw_party"."color" FROM "raw_party" WHERE "raw_party"."id" = 3 LIMIT 21; args=(3,)
>>> 
>>> upp
<RegionUpp: 텍사스>
>>> party
<Party: 국민의힘>
>>> party_usa
<Party: Republican>
>>> 
# get 으로 사용해봄. 
>>> result_get , created = ResultRegionUpp.objects.only('total').get_or_create(region_upp = upp, party=party_usa) 
(0.005) SELECT "result_resultregionupp"."id", "result_resultregionupp"."total" FROM "result_resultregionupp" WHERE ("result_resultregionupp"."party_id" = 3 AND "result_resultregionupp"."region_upp_id" = 1) LIMIT 21; args=(3, 1)
>>> created
False
>>> 
>>> result_get.total
0
# only 외의 데이터를 호출하면 쿼리 발생
>>> result_get.party
(0.001) SELECT "result_resultregionupp"."id", "result_resultregionupp"."party_id" FROM "result_resultregionupp" WHERE "result_resultregionupp"."id" = 7 LIMIT 21; args=(7,)
(0.001) SELECT "raw_party"."id", "raw_party"."country_id", "raw_party"."owner_id", "raw_party"."name", "raw_party"."description", "raw_party"."image", "raw_party"."color" FROM "raw_party" WHERE "raw_party"."id" = 3 LIMIT 21; args=(3,)
<Party: Republican>
>>> 
# create 로 사용해봄. 
>>> result_create, created = ResultRegionUpp.objects.only('total').get_or_create(region_upp=upp, party=party)
(0.003) SELECT "result_resultregionupp"."id", "result_resultregionupp"."total" FROM "result_resultregionupp" WHERE ("result_resultregionupp"."party_id" = 1 AND "result_resultregionupp"."region_upp_id" = 1) LIMIT 21; args=(1, 1)
(0.002) INSERT INTO "result_resultregionupp" ("region_upp_id", "party_id", "total") VALUES (1, 1, 0) RETURNING "result_resultregionupp"."id"; args=(1, 1, 0)
>>> created
True
>>> result_create.total
0
>>> result_create.party
<Party: 국민의힘>

get_or_create에서 사용해 보았습니다. get되는 경우는 only 가 잘 작동하지만 create된 경우에는 모든 항목이 불러옵니다. 아래는 ResultRegionUpp모델입니다. 혹시나 궁금할실까봐 가져왔습니다.

class ResultRegionUpp(models.Model):
    
    region_upp = models.ForeignKey("raw.RegionUpp", verbose_name="상위지역", on_delete=models.SET_NULL,null=True, blank=True)
    party = models.ForeignKey("raw.party", verbose_name="정당", on_delete=models.SET_NULL,null=True, blank=True)
    total = models.PositiveIntegerField("물감수", default= 0)
    

    class Meta:
        verbose_name = "상위 지역별 물감 현황"
        verbose_name_plural = verbose_name
        ordering= ['region_upp', '-total']

    def __str__(self):
        return f'{self.region_upp}__{self.party}'

단점

>>> p_default = Party.objects.get(id=1)
(0.001) SELECT "raw_party"."id", "raw_party"."country_id", "raw_party"."owner_id", "raw_party"."name", "raw_party"."description", "raw_party"."image", "raw_party"."color" FROM "raw_party" WHERE "raw_party"."id" = 1 LIMIT 21; args=(1,)
>>> p_default.color
'red'
>>> 
>>> p_only = Party.objects.only('name').get(id=2)
(0.001) SELECT "raw_party"."id", "raw_party"."name" FROM "raw_party" WHERE "raw_party"."id" = 2 LIMIT 21; args=(2,)
>>> p_only.color
(0.001) SELECT "raw_party"."id", "raw_party"."color" FROM "raw_party" WHERE "raw_party"."id" = 2 LIMIT 21; args=(2,)
'blue'

미리 불러오지 않은 데이터를 호출하면 그제서야 DB에 가서 필요한 데이터를 가져옵니다. 이것은 불필요한 작업입니다.

마치는 말

모델이 커지면 커질 수록 데이터를 불러올 때 불필요한 데이터도 많아집니다. 그렇다고 여러 모델을 만들어 FK 연결하는 것은 어떤 데이터가 어디에 있는지 등 여러모로 머리를 복잡하게 만듭니다. only를 사용하여 보다 간단한 데이터 구조를 만드시길 바랍니다.

cypress를 이용하여 components test 작성하기

Sun, 25 Jul 2021 16:30:00 +0900

Component Test를 작성하여 훨씬 더 간단하고 유지 관리하기 쉽고 다른 구성 요소와 함께 사용하고 재사용하기 쉬운 UI 구성 요소를 만들 수 있습니다.

이 과정에서 테스트를 작성하고, 테스트를 통과하는 코드를 작성하고, 작성한 코드를 리팩토링하는 과정을 반복하게 됩니다.

이번 글에서는 todo list 코드를 일부 작성해보겠습니다.

1. Setup

Next.js 11.0.1을 사용하고 있습니다.

npm install --save-dev cypress @cypress/webpack-dev-server @cypress/react html-webpack-plugin@4 webpack@4 webpack-dev-server@3

2. Opening Cypress

npx cypress open

해당 명령을 이용하여 cypress test runner를 동작시키면 cypress.json 등을 생성합니다.

3. Configuration

cypress/plugins/index.js

next.js plugin을 추가합니다.

const injectDevServer = require('@cypress/react/plugins/next');

module.exports = (on, config) => {
  injectDevServer(on, config);

  return config;
};

cypress.json

component tests는 components 폴더에 작성하겠습니다.

{
  "component": {
    "componentFolder": "components",
    "testFiles": "**/*spec.{js,jsx,ts,tsx}"
  }
}

next.config.js

next.js의 weback 버전을 4버전으로 낮춥니다. 현재 5버전 사용시 cypress component testing이 정상작동하지 않는 부분이 일부 있습니다.

module.exports = {
  webpack5: false,
};

4. Writing Component Test

위의 설정을 모두 끝냈다면 이제 테스트를 작성할 차례입니다.

/index 페이지에 “Welcome to Next.js” 텍스트가 존재하는지 테스트하는 코드를 작성해보겠습니다.

// components/index.spec.jsx
import React from "react";
import { mount } from "@cypress/react";
import IndexPage from "../pages/index";

it("should work", () => {
  mount(<IndexPage />);
  cy.contains("Welcome to Next.js");
});

component testing mode 실행

npx cypress open-ct

4. How to write

테스트를 진행하려면 테스트 가능한 코드를 작성해야합니다. 테스트 가능한 코드를 작성하기 위해서는 관심사를 분리해야합니다. 다음과 같이 세가지 항목으로 나누어 볼 수 있습니다.

Display/UI Components
Side effects (I/O, network, disk, etc.)
Program logic/business rules

각각을 presenter, container, reducer라고 하겠습니다.

5. Example: Todo List

테스트를 작성하고, 테스트를 통과하는 코드를 작성하고, 작성한 코드를 리팩토링하는 과정을 반복해보겠습니다.

우선 어떤 식으로든 테스트를 통과하는 코드를 작성합니다.

// todo-list.spec.jsx
import React from 'react';
import { mount } from '@cypress/react';
import { TodoList } from './toto-list';

describe('TodoList Component', () => {
  const todos = [
    { id: 1, title: '돈코츠 라멘 주문하기', isDone: false },
    { id: 2, title: '교자 주문하기', isDone: false },
    { id: 3, title: '생맥주 주문하기', isDone: false },
  ];

  it('contains correct number of todos', () => {
    mount(<TodoList todos={todos} />);

    cy.get('[data-cy=todo-list]').children().should('have.length', todos.length);
  });

  it('contains correct titles', () => {
    mount(<TodoList todos={todos} />);

    cy.get('[data-cy=todo-list]')
      .children()
      .each(($el, index) => {
        cy.wrap($el).should('contain.text', todos[index].title);
      });
  });

// todo-list.tsx
import React from "react";

export interface TodoListProps {
  todos: any[];
}

export const TodoList = ({ todos }: TodoListProps) => {
  return (
    <ul data-cy="todo-list">
      {todos.map((todo) => (
        <li key={todo.id}>{todo.title}</li>
      ))}
    </ul>
  );
};

테스트를 통과했습니다. 이번에는 todo를 분리하여 별도의 컴포넌트로 만들고 type을 명확하게 수정합니다.

// todo.tsx
import React from "react";

export interface TodoProps {
  id: number;
  title: string;
  isDone: boolean;
}

export const Todo = ({ title, isDone }: TodoProps) => {
  const className = isDone ? "done" : "";
  const style = isDone
    ? { color: "lightgray", textDecoration: "line-through" }
    : undefined;

  return (
    <li className={className} style={style} data-cy="todo">
      {title}
    </li>
  );
};

변경된 내용에 맞춰 todo-list 컴포넌트도 수정합니다.

// todo-list.tsx
import React from "react";
import { Todo, TodoProps } from "components/todo";

export interface TodoListProps {
  todos: TodoProps[];
}

export const TodoList = ({ todos }: TodoListProps) => {
  return (
    <ul data-cy="todo-list">
      {todos.map((todo) => (
        <Todo key={todo.id} {...todo} />
      ))}
    </ul>
  );
};

테스트를 진행하면서 계속 사용하게될 정적 데이터는 cypress/fixtures 폴더에서 관리하면 여러 테스트에서 편리하게 이용할 수 있습니다.

// cypress/fixtures/todos.json
[
  { "id": 1, "title": "돈코츠 라멘 주문하기" },
  { "id": 2, "title": "교자 주문하기" },
  { "id": 3, "title": "생맥주 주문하기" }
]

이번에는 todo-list의 로직을 처리할 reducer를 추가하겠습니다.

import { TodoListProps } from "components/todo-list";

export type State = {
  todos: TodoListProps["todos"];
};

export type Action = {
  type: "READ" | "CREATE" | "UPDATE" | "DELETE";
  payload: any;
};

export default function reducer(state: State, action: Action) {
  switch (action.type) {
    case "READ":
      return { ...state, todos: action.payload };
    case "CREATE":
      return { ...state, todos: [action.payload, ...state.todos] };
    case "UPDATE":
      return {
        ...state,
        todos: state.todos.map((todo) =>
          todo.id === action.payload.id ? action.payload : todo
        ),
      };
    case "DELETE":
      return {
        ...state,
        todos: state.todos.filter((todo) => todo.id !== action.payload),
      };
    default:
      return state;
  }
}

이번에는 reducer를 빠르게 작성하고 테스트를 작성했습니다. 테스트 코드 작성하고 테스트를 통과할 수 있는 코드 작성한다라는 순서를 무조건 적으로 지키는 것은 비효율적이라고 생각합니다. 상황에 맞춰 작성하고 과정을 반복하는 것이 더 효과적이라는 생각입니다.

import React from "react";
import { mount } from "@cypress/react";
import { TodoList } from "./todo-list";

describe("TodoList Component", () => {
  beforeEach(function () {
    cy.fixture("todos.json").as("todos");

    this.deleteTodo = cy.stub();
    this.addTodo = cy.stub();
  });

  it("contains correct number of todos", function () {
    mount(
      <TodoList
        todos={this.todos}
        addTodo={this.addTodo}
        deleteTodo={this.deleteTodo}
      />
    );

    cy.get("[data-cy=todo-list]")
      .children()
      .should("have.length", this.todos.length);
  });

  it('renders "완료" button', function () {
    mount(
      <TodoList
        todos={this.todos}
        addTodo={this.addTodo}
        deleteTodo={this.deleteTodo}
      />
    );

    cy.get("[data-cy=todo-list]")
      .children()
      .each(($el) => {
        cy.wrap($el).find("button").should("contain.text", "완료");
      });
  });
});

변경 내용에 맞춰서 다시 todo, todo-list를 수정하고 테스트하는 과정을 반복합니다. 코드는 링크에서 확인할 수 있습니다.

Reference

필이 짜르르 왔어. 다시는 이런 폰트 내게 없어

Fri, 23 Jul 2021 14:20:00 +0900

한정된 상업적 사용가능 폰트 사이에서 갈팡질팡 하던 저는 2021년 7월 20일 신세계를 만났습니다. ~~나만 사용할수 없지…~~아는 분들은 다들 알아서 잘 활용하고 있었겠지만 모르고 있었을 분들을 위해 제가 만난 신세계를 공유해볼까 합니다!

Adobe Fonts

다짜고짜 링크부터 투척…이 링크를 알리고자 이 글을 씁니다. 다들 제발 들어가주세요.

모두 어도비 정기결제해서 사용하고 계시겠죠?!

Adobe Creative Cloud App

그럼 혹시 저처럼 포토샵, 일러스트 등등 프로그램만 사용하고 계셨던 분들 있으셨나요? 저는 Creative Cloud를 단순히 Adobe 앱을 추가하고 삭제하거나 내 작업을 클라우드 문서로 저장해둘 때 쓰는 정도의 용도로만 사용하고 있었습니다.

그런데말입니다, 제가 이것저것 구경하다 왼쪽 하단의 글꼴 카테고리를 발견하게 됩니다.

눌러보면 이런 구성으로 된 화면이 보입니다. 지금은 제가 몇가지 글꼴을 활성화 해서 가득가득 차있지만 그전에는 잘못 눌러서 해당 페이지로 이동해도 잘못눌렀네~ 하고 뒤로가기를 눌렀던 빈화면이었습니다.

그런데 여기 오른쪽 상단에 추가 글꼴 검색이 보이시나요? 바로 이 버튼이 핵심입니다. 누르면 이래 링크로 이동됩니다.

Adobe Fonts

이 링크는 Adobe에서 제공하는 글꼴 라이브러리 서비스입니다.

어도비에서 설명하고 있는 해당 사이트는 디자이너들의 마음의 평화를 위한 글꼴 라이브러리라고 합니다.

Creative Cloud의 앱을 구독(정기결제하여 이용)하면 사용할 수 있으며 중요한것은 이곳의 모든 글꼴은 개인 및 상업적 용도로 자유롭게 사용할 수 있습니다. 현재 해당 라이브러리에는 1,000여 가지의 옵션 글꼴이 존재하며

글꼴의 전체 라이브러리는 다음에 포함되어 있습니다.

월간 또는 연간 Creative Cloud 모든 앱 구독
모든 단일 애플리케이션 Creative Cloud 구독
Creative Cloud 팀 구독의 각 시트
포토그래피 플랜

위의 내용처럼 구독을 이용하고 있다면 결제하고 있는 결제금액에 모두 포함된 서비스로 추가요금없이 글꼴 라이브러리를 사용할 수 있습니다.

제가 감동한 부분은 바로 ‘개인 및 상업적 용도로 자유롭게 사용할 수 있습니다’ 라는 부분이었습니다. 믿기지가 않아 라이선스 관련 설명을 열심히 정독했습니다.

간단하게 글꼴은 이미지 또는 벡터 아트워크를 만든 다음 윤곽선을 수정하여 장식하는 범위까지 포함하여 상업적으로 사용할 수 있으며 이는 개인적 또는 클라이언트의 프로젝트를 모두 포함합니다. 로고는 상표등록도 가능하구요! 대신 전달한 디자인을 제 3자가 이를 편집하기 위해서는 Creative Cloud를 구독하거나 별도의 자체 라이선스가 필요합니다. 이 외에도 자세한 라이선스 관련 내용은 아래 링크에서 확인하실 수 있습니다.

글꼴 라이선싱

사용가능한 범위는 로고, 웹사이트, PDF, 비디오 등 까지 사용가능합니다!

사용법도 간단합니다. 1,000여 가지의 글꼴을 모두 컴퓨터에 다운받지 않아도 되며 앱 자체에서 활성화시키면 일러스트, 포토샵 어디든 즉시 사용가능합니다. 폰트를 로컬로 다운받아 사용하는 형식이 아닌 클라우드에 활성화를 시켜서 사용되는 방식이라는 점 확인해주세요!

자체적으로 선별한 글꼴팩도 제공하고 있으니 자유롭게 활용할 수 있습니다!

똑똑한개발자에서는 FIGMA를 메인 툴로 사용중이라 Adobe와 호환은 되지 않지만 일러스트에서 폰트를 윤곽선으로 바꿔 SVG로 FIGMA로 불러올 수 있으니 이전보다 다양한 폰트를 디자인 요소에 활용할 수 있을것 같습니다!

정말 이런 다시는 이런 라이브러리 내게 없어… 알려드린 라이브러리를 모르고 계셨던 분들이 계시다면(저처럼..) Adobe가 말한것 처럼 폰트 선택에 있어서 마음의 평화를 찾을 수 있길 바랍니다!

감사합니다!

데이터베이스 관계

Thu, 22 Jul 2021 18:00:00 +0900

안녕하세요, 똑똑한개발자에서 백엔드 개발을 하고 있는 권창식입니다.
벌써 3번째 데이터베이스 이야기입니다.😃
오늘은 데이터베이스 관계의 개념에 대해 소개해드리고 자 합니다.

관계의 정의

관계는 개체와 개체 사이의 논리적인 연결을 의미합니다.

관계에는 개체 간의 관계와 속성 간의 관계가 있습니다.

관계의 형태

1:1(One To One) : 개체 집합 A의 각 원소가 개체 집합 B의 원소 한 개와 대응하는 관계입니다.
1:N(One To Many) : 개체 집합 A의 각 원소는 개체 집합 B의 원소 여러 개와 대응하고 있지만, 개체 집합 B의 각 원소는 개체 집합 A의 원소 한 개와 대응하는 관계입니다.
N:M(Many To Many) : 개체 집합 A의 각 원소는 개체 집합 B의 원소 여러 개와 대응하고, 개체 집합 B의 각 원소도 개체 집합 A의 원소 여러 개와 대응하는 관계입니다.

관계의 종류

종속관계 : 두 개체 사이의 주, 종 관계를 표현한 것으로 식별 관계와 비식별 관계가 있습니다.
중복 관계 : 두 개체 사이에 2번 이상의 종속 관계가 발생하는 관계입니다.
재귀 관계 : 개체가 자기 자신과 관계를 갖는 것으로, 순환 관계라고도 합니다.
배타 관계 :
- 개체의 속성이나 구분자를 기준으로 개체의 특성을 분할하는 관계로, 배타 AND 관계와 OR 관계로 구분합니다.
- 배타 AND 관게는 하위 개체들 중 속성이나 구분자 조건에 따라 하나의 개체만을 선택할 수 있고, 배타 OR 관계는 하나 이상의 개체를 선택할 수 있습니다.

관계형 데이터베이스의 개요

1970년 IBM에 근무하던 코드(E. F. Codd)에 의해 처음 제안되었습니다.
관계형 데이터베이스를 구성하는 개체나 관계를 모두 Relation이라는 표(Table)로 포현합니다.
Relation은 개체를 표현하는 개체 Relation, 관계를 나타내는 관계 Relation으로 구분할 수 있습니다.
장점 : 간결하고 보기 편리하며, 다른 데이터베이스로의 변환이 용이합니다.
단점 : 성능이 다소 떨어집니다.

관계형 데이터베이스의 Relation 구조

Relation은 데이터들을 표(Table)의 형태로 표현한 것으로 구조를 나타내는 Relation 스키마와 실제 값들인 Relation 인스턴스로 구성됩니다.

튜플(Tuple)

튜플은 Relation을 구성하는 각각의 행을 말합니다.
튜플은 속성의 모임으로 구성됩니다.
파일 구조에서 레코드와 같은 의미입니다.
튜플의 수를 카디널리티(Cardinality) 또는 기수, 대응수라고 합니다.

속성(Attribute)

속성은 데이터베이스를 구성하는 가장 작은 논리적 단위입니다.
파일 구조상의 데이터 항목 또는 데이터 필드에 해당됩니다.
속성은 개체의 특성을 기술합니다.
속성의 수를 디그리(Degree) 또는 차수라고 합니다.

도메인(Domain)

도메인은 하나의 속성이 취할 수 있는 같은 타입의 원자값들의 집합입니다.
도메인은 실제 속성 값이 나타날 때 그 값의 합법 여부를 시스템이 검사하는데에도 이용됩니다.

Relation의 특징

한 Relation에는 똑같은 튜플이 포함될 수 없으므로 Relation에 포함된 튜플들은 모두 상이합니다.
한 Relation에 포함된 튜플 사이에는 순서가 없습니다.
튜플들의 삽입, 삭제 등의 작업으로 인해 Relation은 시간에 따라 변합니다.
Relation 스키마를 구성하는 속성들 간의 순서는 중요하지 않습니다.
속성의 유일한 식별을 위해 속성의 명칭은 유일해야 하지만, 속성을 구성하는 값은 동일한 값이 있을 수 있습니다.
Relation을 구성하는 튜플을 유일하게 식별하기 위해 속성들의 부분집합을 키(Key)로 설정합니다.
속성의 값은 논리적으로 더 이상 쪼갤수 없는 원자값만을 저장합니다.

NoSQL

비관계형 타입의 데이터를 저장할때 주로 사용되는 데이터베이스 시스템입니다.
관계형 데이터베이스와 다르게 비관계형 이기 때문에 데이터들을 저장하기 전에 정의 할 필요가 없습니다.
MongoDB, Redis, Cassandra 등이 가장 대표적인 NoSQL 데이터 베이스입니다.

SQL(RDBMS) VS NoSQL

SQL

장점
- 관계형 데이터베이스는 데이터를 더 효율적으로 그리고 체계적으로 저장할 수 있고 관리 할 수 있습니다.
- 미리 저장하는 데이터들의 구조(테이블 스키마)를 정의 함으로 데이터의 완전성이 보장됩니다.
- 트랜잭션(transaction)
단점
- 테이블을 미리 정의해야 함으로 테이블 구조 변화 등에 덜 유연합니다.
- 테이블 구조가 미리 정의 되어 있다보니 단순히 서버를 늘리는것 만으로 확장 하기가 쉽지 않고 서버의 성능 자체도 높여야 합니다.
- 정형화 된 데이터들 그리고 데이터의 완전성이 중요한 데이터들을 저장하는데 유리합니다.

NoSQL

장점
- 데이터 구조를 미리 정의하지 않아도 됨으로 저장하는 데이터의 구조 변화에 유연합니다.
- 확장하기가 비교적 쉽습니다.. 그냥 서버 수를 늘리면 됩니다.(scale out)
- 확장 하기가 쉽고 데이터의 구조도 유연하다 보니 방대한 양의 데이터를 저장하는데 유리합니다.
단점
- 데이터의 완전성이 덜 보장됩니다.
- 트랜잭션이 안되거나 비교적 불안정합니다.

이거도 모달, 저거도 모달, 이게 모람

Wed, 21 Jul 2021 13:00:00 +0900

“혹시 이 부분 모달말고 논모달로 처리해주실 수 있나요?”

어느날 이런 수정요청이 왔고
… 신입 디자이너는 구글링을 하기 시작했습니다.
부끄럽지만, 이 계기로 한 단계 더 발전하고 나아가고자 모달 관련 글을 남겨봅니다 :/

모달(Modal) VS 팝업(Pop-up)

“여기 이렇게 팝업 띄울까요?”
“이 부분은 모달로 처리하면 될 것 같은데요”

~~모달 == 팝업 이라고 생각하고 아무렇게나 혼용하며 소통하곤 했던 나 ㅎㅎ..ㅋㅋ..!~~

팝업과 모달은 사용자들의 시선을 사로잡으려는 같은 목적이 있음에도 불구하고, 매커니즘과 사용방식이 완전히 달랐다.

[팝업]

기존에 열려있는 브라우저 페이지 위에 또 다른 브라우저 페이지를 띄우는
원래 브라우저와 독립적인 관계
브라우저의 옵션을 통해 열리지 않도록 강제할 수 있음

[모달]

기존에 열려있는 브라우저 위에, 새로운 창이 아닌 레이어를 까는 것
원래 브라우저와 종속적인 관계, 부모 - 자식의 형태를 가지고 있음.
브라우저 옵션과 관계없이 띄울 수 있음

결론을 말하자면, 팝업의 3번 사항 때문에라도, 대부분은 모달을 사용하는 추세라고 한다. 개인적으로, 팝업은 이 문장으로 정리된다.

“오늘 하루 이 창을 열지 않음”

팝업하면 이벤트, 사과문, 안내문 등, 처음 페이지에 진입했을 때 바로 노출되는 모습이 상상되며, 페이지 내의 메인서비스와 관계없이 뜨는 독립적인 창(닫고싶은 창) 들이 팝업에 해당된다고 할 수 있겠다. (상황마다 다를 순 있을 것 같다.)

반면, 모달은 서비스와 관련해 다음 단계로 나아가기 위해 필요한 창이다.

모달에는 시작(모달을 진입하게 하는 컴포넌트)과 끝(Cancel, Send, Save, OK, X etc.)이 존재한다. 따라서, 모달(자식)에 진입한 사용자는 서비스 흐름에서 벗어나, 모달 내 컨텐츠에 집중한 후, 모달을 벗어나는 순간 다시 원래 컨텐츠(부모)의 위치로 돌아갈 수 있어야 한다.

모달(Modal) VS 페이지(Page)

사내 이슈 중, Product list 페이지에서 Product detail 페이지로 넘어갈 때, 몇 몇 유지되어야하는 항목 때문에 모달로 띄울지, 페이지를 이동할 지 고민했던 적이 있었다.

물론 이 사항은 여러 문제들이 복잡하게 얽혔었지만, 상품상세(Product detail) 페이지는 기본적으로 모달이 아닌 페이지로 구성되어야 한다고 생각한다.

만약 상품상세페이지가, 리뷰나, 구매같은 다른 작업이 없는 엔드포인트 였다면, 모달로 사용해도 아무런 문제가 없을지도 모른다. 하지만 상품 상세 페이지는 사용자가 더욱 깊이 탐색할 수 있으며, 위에 말했듯 다양한 추가 작업등을 수행할 수 있기 때문에, 명확한 엔드포인트가 없고, 서비스 흐름에서 벗어나는 것이 아니며, 주요 서비스 흐름의 일부분이다. 따라서 Modal이 아닌 Page 단위로 처리하는 것이 올바른 것 같다.

(또한 상세페이지를 공유하는 경우, Modal로 처리한 경우에는 상세페이지가 아닌 부모 화면이 띄워지는 이슈도 존재했다.)

Non-modal은 또 뭐야..

말 그대로, 모달이지만 모달이 아니다.

보통 모달은 부모 화면을 사용자가 컨트롤할 수 없고, 모달 내 컨텐츠를 완료하거나 닫아야 다시 부모 화면에 접근할 수 있는 반면에, 논모달은 부모화면을 사용자가 컨트롤 할 수 있다!

모든 걸 컨트롤할 수 있다는 점에서 논모달이 매력적일 수 있겠으나, 각각의 장단점이 존재한다.

모달의 역할은 기본적으로 “사용자들의 시선을 사로잡는 것” 이다. 하지만 논모달은 그 역할을 제대로 수행하지 못하며, 오히려 컨텐츠 과다로 사용자의 시선을 흐릴 수 있다.

그렇다면 언제, 어떻게 사용할까?

위 사진과 같이, 사실 상 모달은 웹앱서비스 내에서 엄청나게 많은 부분을 차지하는 구성요소다.

다만, 디자이너마다, 회사마다, 개발자마다 조금씩 다른 규칙을 가지고 가지고 있고, 실제로도 명확한 규칙이 정해져 있지 않기 때문에 상황에 따라 유동적으로 바뀔 수 있는 요소가 맞는 것 같다!

그럼, 결국 그때그때 다르게 적용하라는 건가? 라고 물어본다면 그건 아니고, UXPlanet에서 정말 잘 정리한 의사결정 Framwork가 있어서, 파파고의 힘을 빌려 번역해보았다.

물론 이 다이어그램이 무조건적인 정답은 아니겠지만, 컨텐츠를 어떻게 구성해야할지 모를 때 참고하면 정말 좋은 자료가 될 것 같다.

장황하게 글을 써냈지만 아직도 헷갈리는 게 모달이고, 또 디자인 하다보면 까먹고 디자인하겠지.. 싶습니다. 아무튼, 이론보단 실전이라고, 신입디자이너는 다시 현실에서 부딪히며 배우고 돌아오겠습니다 :)

참고자료

Chart.js 시작하기

Tue, 20 Jul 2021 17:00:00 +0900

안녕하세요, 똑똑한개발자에서 프론트엔드 개발을 하고 있는 Anne입니다.

이번에 프로젝트를 하면서 차트를 그리기 위한 용도로 Chart.js를 사용하게 되었습니다. 워낙에 기능도 많고 괜히 복잡해보여서(구현하려는 기능에 따라 뒤에 복잡한 부분이 분명 있기도 합니다만…😌) 선뜻 시작하기가 어려웠습니다. 뭐든 시작이 제일 어려운 법인데, 이번 시간에는 저처럼 차트를 ‘구현해야만’ 하는 상황에서 Chart.js를 “덜 어렵게” 시작할 수 있도록 Chart.js의 기본 사용 방법 및 커스텀을 위해 제공되는 옵션들에 대해 간단히 소개해드리고자 합니다.😺

설치하기

리액트에서 Chart.js를 사용하려면 chart.js 뿐만 아니라 리액트에서 Chart.js를 렌더링하기 위해 필요한 react-chartjs-2도 설치를 해야 합니다. 사용하시는 패키지 매니저에 따라 아래와 같이 설치를 해주세요.
```
<yarn을 사용하는 경우>
yarn add react-chartjs-2 chart.js

<npm을 사용하는 경우>
npm install react-chartjs-2 chart.js
```

컴포넌트로 불러오기

설치를 완료하셨으면, 사용하시려는 컴포넌트에 바로 차트 컴포넌트를 불러와주시면 됩니다. data와 options는 밑에서 마저 설정해보도록 하겠습니다.

import styled from 'styled-components';
import { Line } from 'react-chartjs-2';

const Chart = () => {
  return (
    <Container>
      <Line type="line" data={data} options={options} />
    </Container>
  );
};

export default Chart;

const Container = styled.div`
  width: 90vw;
  max-width: 900px;
`;

div로 감싸지 않아도 작동은 되지만, 저는 뷰포트의 가로 길이에 따라 차트 가로 길이도 같은 비율로 늘어났다가 줄어드는 반응형으로 구현하기 위해 위와 같이 작성했습니다. (관련 내용은 여기를 참고해주세요!)

위 스크린샷에서 보시는 것과 같이 저는 막대형(Bar 타입) 그래프와 꺾은선(Line 타입) 그래프를 함께 사용했는데요, 이처럼 여러 타입의 그래프를 함께 사용하는 걸 Chart.js에선 multi type chart 또는 mixed chart type이라고 하더라구요. react-chartjs-2의 데모 페이지 소스 코드에도 나와있듯이, Line만 불러와주셔도 mixed chart를 구현할 수 있습니다! 소스 코드의 해당 부분은 아래와 같습니다. datasets를 전달할 때 각각의 data에 각각의 차트 타입을 지정해주시면 됩니다.

datasets: [
  {
    type: 'line', // 💗
    label: 'Dataset 1',
    borderColor: 'rgb(54, 162, 235)',
    borderWidth: 2,
    fill: false,
    data: [rand(), rand(), rand(), rand(), rand(), rand()],
  },
  {
    type: 'bar', // 💗
    label: 'Dataset 2',
    backgroundColor: 'rgb(255, 99, 132)',
    data: [rand(), rand(), rand(), rand(), rand(), rand(), rand()],
    borderColor: 'white',
    borderWidth: 2,
  },
  {
    type: 'bar', // 💗
    label: 'Dataset 3',
    backgroundColor: 'rgb(75, 192, 192)',
    data: [rand(), rand(), rand(), rand(), rand(), rand(), rand()],
  },
],

데이터 전달하기

이렇게 불러온 컴포넌트에 우선은 데이터(data)를 전달해보도록 하겠습니다!
데이터는 말 그대로 차트에 그릴 데이터, 자료들인데요, 자료를 전달하는 것뿐만 아니라 각 데이터가 어떤 식으로 그려질지, 예를 들어 어떤 색깔로 보여질지 등을 정하는 각 데이터의 개별 옵션도 함께 전달할 수 있습니다. 위 소스 코드를 살짝 수정해서 적용해보도록 하겠습니다.

import styled from 'styled-components';
import { Line } from 'react-chartjs-2';

const data = {
  labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
  datasets: [
    {
      type: 'line',
      label: 'Dataset 1',
      borderColor: 'rgb(54, 162, 235)',
      borderWidth: 2,
      data: [1, 2, 3, 4, 5],
    },
    {
      type: 'bar',
      label: 'Dataset 2',
      backgroundColor: 'rgb(255, 99, 132)',
      data: [1, 2, 3, 4, 5, 6],
      borderColor: 'red',
      borderWidth: 2,
    },
    {
      type: 'bar',
      label: 'Dataset 3',
      backgroundColor: 'rgb(75, 192, 192)',
      data: [1, 2, 3, 4, 5, 6],
    },
  ],
};

const Chart = () => {
  return (
    <Container>
      <Line type="line" data={data} />
    </Container>
  );
};

export default Chart;

const Container = styled.div`
  width: 90vw;
  max-width: 900px;
`;

options는 뒤에서 전달해주기로 하고, 우선 data만 전달을 해보면 차트가 아래와 같이 그려지게 됩니다.

위와 같이 가로축에 표시되는 값이 일정하고 미리 정해져있는 경우에는 위 예시 코드에 나와있듯이 가로축 값들을 나열한 labels 배열을 전달하는 방법이 가능합니다. 이 경우 labels 배열과 datasets 배열의 각 자료들의 data 배열에서 서로 인덱스가 동일한 것들이 각각 (x, y)쌍이 되어 그래프에 그려지게 됩니다.
하지만 저희 프로젝트와 같이 가로축이 시간, 날짜를 나타내며 어떤 데이터는 월 단위로 존재하는데 어떤 데이터는 연 단위로 존재하는 그런 경우에는 위 방법을 사용할 수 없겠죠!? 이처럼 가로축이 시간, 날짜을 나타내는 Time Cartesian Axis의 경우에는 아래와 같은 방식으로 데이터를 정의하는 방법이 편리합니다.

const data = {
  // labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
  // labels 대신 아래와 같이 각각의 데이터의 x값을 개별적으로 전달해줍니다.
  datasets: [
    {
      type: 'line',
      label: 'Dataset 1',
      borderColor: 'rgb(54, 162, 235)',
      borderWidth: 2,
      data: [
        { x: 'January', y: 1 },
        { x: 'February', y: 2 },
        { x: 'March', y: 3 },
        { x: 'April', y: 4 },
        { x: 'May', y: 5 }
      ],
    },
    {
      type: 'bar',
      label: 'Dataset 2',
      backgroundColor: 'rgb(255, 99, 132)',
      data: [
        { x: 'January', y: 1 },
        { x: 'February', y: 2 },
        { x: 'March', y: 3 },
        { x: 'April', y: 4 },
        { x: 'May', y: 5 },
        { x: 'June', y: 6 }
      ],
      borderColor: 'red',
      borderWidth: 2,
    },
    {
      type: 'bar',
      label: 'Dataset 3',
      backgroundColor: 'rgb(75, 192, 192)',
      data: [
        { x: 'January', y: 1 },
        { x: 'February', y: 2 },
        { x: 'March', y: 3 },
        { x: 'April', y: 4 },
        { x: 'May', y: 5 },
        { x: 'June', y: 6 }
      ],
    },
  ],
};

예제 코드는 가로축이 Time Cartesian Axis도 아니고 값들이 일정하므로 이 방법이 오히려 더 비효율적이긴 하지만, (x, y)쌍을 각각 전달한다는 점에서 좀 더 직관적인 것 같긴 하네요! (Time Cartesian Axis를 구현하기 위해선 추가적인 설정이 필요합니다. 설정 방법 등 관련 내용은 공식 문서를 참고해주세요!)
차트 자체의 옵션(options)을 전달하기 전, 데이터 개별 옵션으로 어떤 것들을 지정할 수 있는지 살펴보겠습니다. 우선 예시 코드에 나와있듯이 각 데이터의 차트 타입은 type으로, 범례는 label로 지정할 수 있습니다. 색상도 당연히 개별적으로 지정할 수 있습니다! 이 외에도 가로축과 세로축이 둘 이상 존재하는 경우 xAxisID와 yAxisID를 통해 축을 지정해줄 수도 있습니다. (이 경우 각 축들의 id 등의 설정이 미리 존재하는 상태여야겠죠!?) 개별 속성 목록과 자세한 설명은 아래 링크에서 확인해보실 수 있습니다!
- Line 타입
- Bar 타입

옵션 전달하기

이제 옵션(options)을 전달해볼까요? 옵션에는 굉장히 많은 설정이 들어갈 수 있는데요, 제가 사용한 옵션들 몇 가지만 주석을 통해 간단히 소개해드리도록 하겠습니다! 네임스페이스에 신경써주세요~! 네임스페이스에 따라 적용되는 범위 및 작동 여부가 달라질 수 있습니다. 네임스페이스가 맞지 않으면 “어… 왜 안되지?”하는 상황이 생길 수 있어요~(는 제 경험담입니다. ㅎㅎ)

const options = {
  spanGaps: true,
  // line 타입의 경우 중간에 누락된 데이터가 있을 경우 이어그릴지 여부를 정합니다!
  maxBarThickness: 10,
  // bar 타입의 경우 막대의 최대 굵기를 정합니다!
  grouped: true,
  // x축 값이 같은 애들끼리 그룹화할지를 정하는데요,
  // true 설정 시 해당 x축 값내에서 서로 공간을 나누면서 나란히 보여지게 되고,
  // false 설정 시 각 포인트가 해당 x축 정중앙에 그려지게 되어서 x축 값이 같은 애들끼리 서로 겹쳐지게 됩니다.
  interaction: {
    mode: 'index',
  },
  // 호버 동작과 관련된 설정인데요, 호버를 하게 되면 툴팁이 뜨게 되는데
  // 그 툴팁이 뜨는 기준을 설정할 수 있습니다.
  // 위와 같이 index를 기준으로 설정하게 되면 동일한 index에 놓인 값들이 모두 떠요!
  plugins: {
    legend: { // 범례 스타일링
      labels: {
        usePointStyle: true,
        // 범례 도형 모양과 관련된 속성으로, false일 경우엔 기본 직사각형 도형으로 표시됩니다.
        padding: 10,
        // 범례 간 가로 간격을 조정할 수 있습니다. 범례의 상하 padding을 지정하는 기능은 따로 지원되지 않아요. ㅠㅠ
        font: { // 범례의 폰트 스타일도 지정할 수 있습니다.
          family: "'Noto Sans KR', 'serif'",
          lineHeight: 1,
        },
      }
    },
    tooltip: { // 툴팁 스타일링
      backgroundColor: 'rgba(124, 35, 35, 0.4)',
      // 툴팁 색상을 지정할 수 있습니다.
      padding: 10,
      // 툴팁 패딩을 지정할 수 있습니다.
      bodySpacing: 5,
      // 툴팁 내부의 항목들 간 간격을 조정할 수 있습니다.
      bodyFont: {
        font: { // 툴팁 내용의 폰트 스타일을 지정할 수 있습니다.
          family: "'Noto Sans KR', sans-serif",
        }
      },
      usePointStyle: true,
      // 범례 도형 모양과 마찬가지로 툴팁 내부에서도 도형의 모양을 지정할 수 있어요.
      filter: (item) => item.parsed.y !== null,
      // 툴팁에 표시될 항목을 필터링할 수 있는데요,
      // 예를 들어 값이 null인 항목은 툴팁에 나타나지 않게 하려면
      // 위와 같이 설정해주시면 됩니다.
      callbacks: {
        // 툴팁에 표시되는 내용은 이와 같이 콜백 함수를 통해
        // 조건에 맞게 수정할 수 있습니다!
        title: (context) => { // 툴팁에서 x축 값이 어떻게 표시될지 설정할 수 있어요.
          let title = '';

          // (context를 콘솔에 찍어보시면 차트에 전달되는 dataset과
          // 그 값들을 확인할 수 있는데요, 이를 바탕으로 조건을 구성하고
          // 그 조건에 따라 title을 재설정해주시면 됩니다.)

          return title; // 재설정한 title은 꼭 반환해주세요!
        },
        label: (context) => { // 툴팁에서 y축 값이 어떻게 표시될지 설정할 수 있어요.
          let label = context.dataset.label + '' || '';

          const isPrice = label === '주가';
          const isEV = label === 'EV';

          if (label) {
            label = isPrice
              ? ' 주가 : '
              : (' ' + label + ' : ');
          }
          if (context.parsed.y !== null) { // y축 값이 null이 아니라면,
            // 조건에 따라 label 재할당
          } else { // y축 값이 null이라면
            return null; // null 반환
          }

          return label; // 마찬가지로 재설정한 label도 꼭 반환해주세요!
        },
      },
    },
  },
  scales: { // x축과 y축에 대한 설정을 할 수 있습니다.
    x: { // 여기서 x는 이 축의 id인데요, 이 안에서 axis 속성만 x로 지정해놓으시면 id를 x가 아니라 다른 이름으로 설정해도 무관합니다.

      // afterTickToLabelConversion을 이용하여
      // x축 값이 어떻게 표시될지 설정할 수 있어요!
      afterTickToLabelConversion: function (scaleInstance) {
        const ticks = scaleInstance.ticks;

        const newTicks = ticks.map((tick) => {
          return {
            // 원본 x축 값을 이용하여 각 x축 값들이 어떻게 표시될지 수정할 수 있습니다.
          };
        });

        scaleInstance.ticks = newTicks;
        // scaleInstance.ticks에 새로운 ticks를 재할당해줘야 적용이 됩니다!
      },
      grid: { // x축을 기준으로 그려지는 선(세로선)에 대한 설정입니다.
        display: false, // 선이 아예 안 그려지게 됩니다.
        drawTicks: true, // 눈금 표시 여부를 지정합니다.
        tickLength: 4, // 눈금 길이를 지정합니다.
        color: '#E2E2E230' // 눈금 및 선의 색상을 지정합니다.
      },
      axis: 'x', // x축(가로축)인지 y축(세로축)인지 표시합니다.
      max: Date.parse(xMax) + 1296000000, // 축의 최대값을 강제합니다.
      min: Date.parse(xMin), // 축의 최소값을 강제합니다.
      position: 'bottom',
      // top으로 설정하면 가로축이 차트 상단에 그려지게 됩니다!
      ticks: {
        minRotation: 45, // x축 값의 회전 각도를 설정할 수 있어요.
        padding: 5, // x축 값의 상하 패딩을 설정할 수 있어요.
      },
    },
    y: { // 'y'라는 id를 가진 y축에 대한 설정
      type: isLinear ? 'linear' : 'logarithmic',
      // 리니어 스케일뿐만 아니라 로그 스케일로도 표시할 수 있습니다.
      grid: { // 가로선 설정
        color: '#E2E2E230',
      },
      afterDataLimits: (scale) => {
        // y축의 최대값은 데이터의 최대값에 딱 맞춰져서 그려지므로
        // y축 위쪽 여유공간이 없어 좀 답답한 느낌이 들 수 있는데요,
        // 이와 같이 afterDataLimits 콜백을 사용하여 y축의 최대값을 좀 더 여유있게 지정할 수 있습니다!
        scale.max = scale.max * 1.2;
      },
      axis: 'y', // 이 축이 y축임을 명시해줍니다.
      display: true, // 축의 가시성 여부도 설정할 수 있습니다.
      position: 'left', // 축이 왼쪽에 표시될지, 오른쪽에 표시될지 정할 수 있습니다.
      title: { // 이 축의 단위 또는 이름도 title 속성을 이용하여 표시할 수 있습니다.
        display: true,
        align: 'end',
        color: '#808080',
        font: {
          size: 12,
          family: "'Noto Sans KR', sans-serif",
          weight: 300,
        },
        text: '단위: 배'
      }
    },
    // y축을 여러 개 두고 싶다면 아래와 같이 또 만들어 주세요.
    y_sub: {
      position: 'right',
      title: {
        display: true,
        align: 'end',
        color: '#808080',
        font: {
          size: 12,
          family: "'Noto Sans KR', sans-serif",
          weight: 300,
        },
        text: '단위: 배'
      }
    },
  }
};

이제 이러한 속성들을 적용한 옵션을 만들어보고 Line 컴포넌트에 전달해보도록 하겠습니다!

import styled from 'styled-components';
import { Line } from 'react-chartjs-2';

const data = {
  datasets: [
    {
      type: 'line',
      label: 'Dataset 1',
      borderColor: 'rgb(54, 162, 235)',
      borderWidth: 2,
      data: [
        { x: 'January', y: 1 },
        { x: 'February', y: 2 },
        { x: 'March', y: 3 },
        { x: 'April', y: null },
        { x: 'May', y: 5 }
      ],
      yAxisID: 'y_sub',
    },
    {
      type: 'bar',
      label: 'Dataset 2',
      backgroundColor: 'rgb(255, 99, 132)',
      data: [
        { x: 'January', y: 14 },
        { x: 'February', y: 20 },
        { x: 'March', y: 32 },
        { x: 'April', y: 41 },
        { x: 'May', y: 15 },
        { x: 'June', y: 26 }
      ],
      borderColor: 'red',
      borderWidth: 2,
    },
    {
      type: 'bar',
      label: 'Dataset 3',
      backgroundColor: 'rgb(75, 192, 192)',
      data: [
        { x: 'January', y: 1 },
        { x: 'February', y: 2 },
        { x: 'March', y: 3 },
        { x: 'April', y: 4 },
        { x: 'May', y: 5 },
        { x: 'June', y: 6 }
      ],
      yAxisID: 'y_sub',
    },
  ],
};

const options = {
  spanGaps: true,
  maxBarThickness: 30,
  grouped: true,
  interaction: {
    mode: 'index',
  },
  plugins: {
    legend: {
      labels: {
        usePointStyle: true,
        padding: 10,
        font: {
          family: "'Noto Sans KR', 'serif'",
          lineHeight: 1,
        },
      }
    },
    tooltip: {
      backgroundColor: 'rgba(124, 35, 35, 0.4)',
      padding: 10,
      bodySpacing: 5,
      bodyFont: {
        font: {
          family: "'Noto Sans KR', sans-serif",
        }
      },
      usePointStyle: true,
      filter: (item) => item.parsed.y !== null,
      callbacks: {
        title: (context) => context[0].label + '💙',
        label: (context) => {
          let label = context.dataset.label + '' || '';

          return context.parsed.y !== null
            ? label + ': ' + context.parsed.y + '배'
            : null;
        },
      },
    },
  },
  scales: {
    x: {
      afterTickToLabelConversion: function (scaleInstance) {
        const ticks = scaleInstance.ticks;

        const newTicks = ticks.map((tick) => {
          return {
            ...tick,
            label: tick.label + '🎵'
          };
        });

        scaleInstance.ticks = newTicks;
      },
      grid: {
        display: false,
        drawTicks: true,
        tickLength: 4,
        color: '#E2E2E230'
      },
      axis: 'x',
      position: 'bottom',
      ticks: {
        minRotation: 45,
        padding: 5,
      },
    },
    y: {
      type: 'linear',
      grid: {
        color: '#E2E2E230',
      },
      afterDataLimits: (scale) => {
        scale.max = scale.max * 1.2;
      },
      axis: 'y',
      display: true,
      position: 'left',
      title: {
        display: true,
        align: 'end',
        color: '#808080',
        font: {
          size: 12,
          family: "'Noto Sans KR', sans-serif",
          weight: 300,
        },
        text: '단위: 배'
      }
    },
    y_sub: {
      position: 'right',
      title: {
        display: true,
        align: 'end',
        color: '#808080',
        font: {
          size: 12,
          family: "'Noto Sans KR', sans-serif",
          weight: 300,
        },
        text: '단위: 배'
      },
      afterDataLimits: (scale) => {
        scale.max = scale.max * 1.2;
      },
    },
  }
};

const Chart = () => {
  return (
    <Container>
      <Line type="line" data={data} options={options} />
    </Container>
  );
};

export default Chart;

const Container = styled.div`
  width: 90vw;
  max-width: 900px;
`;

마치며

본문에서 소개해드린 내용들 외에도 Chart.js에는 다양한 커스텀 기능들이 있습니다. 기본적인 커스텀 속성 외에도, 복잡하긴 하지만 위 예제에서 사용한 것과 같이 콜백을 사용하여 커스텀을 할 수도 있습니다. 저의 경우 Chart.js 공식 문서를 주로 참고하면서, 기본적으로 지원이 되지 않는 부분들은 구글링을 통해 Stack Overflow 등에서 구현 방법을 모색하고 아이디어를 얻곤 했습니다. Chart.js를 써보기 전엔 차트 라이브러리라는 단어만 들어도 살짝 무서웠었는데(?) 차트 라이브러리는 크게 두 부분으로 나누어 시작하면 그나마 덜 복잡해지는 것 같습니다.

데이터셋
그래프 설정(옵션)

참고 사이트

[TokTokHan.dev]Execution Context(실행 컨텍스트)

Thu, 15 Jul 2021 18:00:00 +0900

안녕하세요, 똑똑한개발자에서 프론트엔드 개발을 하고 있습니다.👋

똑똑한개발자

똑똑한개발자 프론드엔드 팀은 매주 월요일 오후에 javascript 기초에 대한 스터디를 진행하고 있습니다.

자바스크립트의 핵심적인 기본개념과 동작원리에 대해 스터디 구성원 한 사람이 파트 1개씩을 맡아

간단하게 발표하고 그에 대한 의견들을 공유하고 나누는 형태로 진행합니다.

첫 시간에는 자바스크립트의 ‘데이터’와 ‘불변성’에 대해 간략하게 알아보는 시간을 가졌고

이번에는 자바스크립트의 ‘실행 컨텍스트’에 대해 이야기를 나눠보는 시간을 가졌습니다.

이번 블로그 포스팅은 ‘코어 자바스크립트’를 참고하여 작성했습니다.

코어 자바스크립트

똑똑한개발자 프론트엔드 팀에서는 기본적으로 typescript기반의 리액트(Next.js)를 활용하여 프로젝트를 진행합니다.

typescript는 점점 그 점유율이 높아져가는 프로그래밍 언어이나, 기본적으로 javascript를 베이스로 한 js의 슈퍼셋 언어로 널리 알려져있습니다. 당연히 자바스크립트의 기본적인 개념이나 동작원리를 모두 상속하고 있으니 자바스크립트에서 중요한 개념인 실행 컨텍스트에 대해 알아보겠습니다.

실행 컨텍스트. 말이 참 어렵습니다. 구글에서 실행컨텍스트에 대해 검색해보면,

‘실행컨텍스트 execution context는 실행할 코드에 제공할 환경 정보들을 모아놓은 객체’ 라고 정의하고 있습니다.

실행컨텍스트에 대해 자세하게 알아보기 전에 간단한 자료구조에 대해 학습을 해야합니다.

주니어, 시니어 개발자를 막론하고 개발을 하다보면 누구나 한번쯤은 들어봤을만한 자료구조인 ‘스택’과 ‘큐’가 바로 그것입니다.

스택과 큐

스택과 큐는 자료를 저장하고 호출하는 것을 나타내는 자료구조인데, 비슷해보이지만 조금 다릅니다.

스택

스택은 무언가를 차곡차곡 쌓아올리는 것을 의미합니다. 스택의 가장 큰 특징은 ‘LIFO(Last In First Out)’을 들 수 있는데, 이는 Ctrl(Cmd) + Z의 작동방식과 유사합니다. 스택으로 데이터를 저장할 경우 push()로 데이터를 차곡차곡 쌓아올리고, pop()메서드로 데이터를 뺄 수 있습니다. 이 때, 가장 나중에 들어갔던 데이터가 가장 먼저 호출되어 스택의 밖으로 인출됩니다.

큐

큐는 정해진 한 곳(top)을 통해서 push(), pop()이 이루어지는 스택과는 달리 한쪽 끝에서 삽입, 반대쪽 끝에서 삭제작업이 이루어집니다. 큐의 가장 큰 특징은 ‘FIFO(Last In First Out)’에 대해 자주 언급되는데, 이는 일상생활에서 줄을 서서 기다리는것, 또는 은행에서 번호표를 뽑고 자신의 순서를 기다리는 방식과 유사합니다. 큐로 데이터를 저장할 경우 가장 먼저 저장했던 데이터가 가장 먼저 호출되어 큐의 밖으로 인출됩니다.

실행컨텍스트는 실행할 코드에 제공할 환경에 대한 정보들을 모아 컨텍스트를 구성하고, 이를 콜 스택 Call Stack에 쌓아올렸다가 스택의 자료구조 방식과 동일하게 콜스택의 가장 위에있는 코드를 순차적으로 실행합니다.

// ----------------(1) 전역컨텍스트
var a = 1;
function outer() {
  function inner() {
    console.log("1:", a); //undefined
    var a = 3;
  }
  inner(); // ----------(2) inner() 함수 실행
  console.log("2:", a); //1
}
outer(); // -----------(3) outer() 함수 실행
console.log("3:", a); // 1

간단한 예제 코드입니다(출처: 코어 자바스크립트) 자바스크립트는 특정 실행 컨텍스트가 활성화 될 때 해당 컨텍스트에 관련된 코드를 실행하는 환경정보를 수집하여 실행 컨텍스트 객체(활성 객체)에 저장합니다. 이 객체에 앞으로 사용하게 될 매개변수, 사용자가 정의한 변수 및 객체를 저장하고 새로 만들어진 컨텍스트로 접근 가능하게 되어있습니다. 이 객체에 저장되는 정보는 다음과 같습니다. (이는 엔진 내부에서 접근할 수 있고, 사용자가 직접적으로 접근하는 객체가 아닙니다.)

Variable Environment: 현재 컨텍스트 내의 식별자들에 대한 정보 + 외부 환경 정보, 선언시점의 Lexical Environment의 스냅샷, 변경사항이 반영되지 않습니다.
Lexical Environment: 최초에는 VariableEnvironment와 같지만, 변경사항이 실시간으로 반영됩니다.
This Binding: { this } 식별자가 바라봐야 할 대상 객체 (this 식별자는 ‘코어 자바스크립트’ 3장 ‘this’와 연관지어 함께보면 좋습니다.)

다시 예제코드로 돌아가서, 저 코드를 콘솔에 찍어보면 어떤 결과가 출력될까요?

(스크롤을 잠시 멈추고, 생각해봅시다.)

(jsfiddle 사이트로 연결됩니다. ‘Run’버튼으로 실행시켜주세요) 정답

이 예제코드에 대해 알아보려면 실행 컨텍스트 내의 개념 한가지를 더 알고 보면 쉽습니다.

스코프체인 : 현재 컨텍스트의 유효범위를 나타내는 스코프 정보를 생성합니다. 여러 스코프에서 동일한 식별자를 선언한 경우, 무조건 스코프 체인상에서 가장 먼저 발견된 식별자에만 접근이 가능합니다.

inner() 함수에서 등장하는 console.log(a)의 결과는 왜 ‘undefined’일까요? ==> inner() 스코프의 Lexical Environment에 ‘a’라는 식별자가 이미 존재합니다(var a = 3). 따라서 스코프 체인 검색을 더 이상 진행하지 않고, inner()함수 내부의 ‘a’는 3으로 선언되어 함수가 종료됩니다. 따라서, 전역에서 선언한 동일한 변수 ‘a’에 접근할 수 없습니다. 이러한 형태의 코드를 변수 은닉화 variable shadowing라고 합니다.

후기

‘실행 컨텍스트’를 중점적으로 알아보기 위해 비동기처리 및 이벤트 루프와 같은 내용은 함께 기록하지 않았습니다. 실행컨텍스트의 개념을 이해하고 좀 더 풍부하고 확장된 학습을 하고싶으신 분이 있으실것같아 참고가 될만한 좋은 영상을 남깁니다.

어쨌든 이벤트 루프는 무엇입니까? | Philip Roberts | JSConf EU

신입 디자이너는 아무것도 몰라요

Wed, 30 Jun 2021 15:00:00 +0900

안녕하세요. 똑똑한개발자의 1개월 차 신입 디자이너 찬호입니다.

먼저, 저는 개발과 관련된 전공으로 대학교를 졸업했습니다. 디자인 전공이 아니기에 독학으로 UI/UX 디자인을 공부했고, XD, Figma 등 여러가지 툴을 되는대로 무작정 만져보면서 취업을 준비했던 것 같습니다.

그래서 그런걸까요. 제가 1년 넘게 독학하며 배운 것보다 똑똑한개발자에서 한 달간 배운게 더 많은 것 같은데… 그 중 피그마에서의 ‘컨스트레인트’와 ‘오토 레이아웃’에 관해서 공유해보려고 합니다.

(아직도 완벽하게 이해하려면 멀었지만..)

컨스트레인트

피그마에서는 기본적으로 프레임 안에 오브젝트를 배치하는 형태로 디자인을 진행하는데, 컨스트레인트는 프레임의 크기가 바뀔 때, 프레임의 경계에 맞게 오브젝트가 배치되도록 합니다.

쉽게 말하자면, 잘 조정해두고 나면 반응형 디자인을 할 때 편리하게 대응할 수 있다는 말입니다.

컨스트레인트의 속성인 Left, Right, Center, Top, Bottom, Center로 9가지의 위치를 만들 수 있습니다. 만든다기 보단, 의도한대로 오브젝트와 프레임 경계까지의 거리를 고정시킬 수 있습니다.

또한 Left & Right, Top & Bottom, Scale을 사용하면 위치만 고정될 뿐 아니라 오브젝트의 크기까지도 같이 변경됩니다.

이런식으로 컨스트레인트를 제대로 설정하면, 전체 프레임의 크기가 바뀌어도 오브젝트와 프레임까지의 거리가 설정값을 기준으로 유지되기 때문에, 디자인 수정을 훨씬 편하게 할 수 있습니다.

…

제가 써놓고도 무슨 소리인지 이해가 안 될 것 같아서 카드 UI로 예제를 만들어 봤습니다.

위에 두 디자인은 전혀 다른 게 없어보입니다.

하지만 카드 UI 프레임의 크기를 줄여보면.

왼쪽 디자인은 컨텐츠가 짤린 반면, 오른쪽 디자인은 프레임에 맞게 유지됐습니다.

왼쪽 디자인은 컨스트레인트를 디폴트 값으로 두었고,

오른쪽 디자인은 크기에 따라 알맞게 오브젝트들이 변경되도록 설정했습니다.

다시 두 디자인을 설정값과 함께 봅시다.

이런 간단한 설정만으로도 같은 디자인이지만 다른 결과를 도출할 수 있었습니다.

저는 이런 디테일 하나하나가 디자인의 완성도와 재사용성을 높일 수 있음을 온몸으로 깨닫고 있습니다…

근데, 이 카드 UI는 오토 레이아웃이 전혀 적용되지 않았는데 오토 레이아웃과 같은 기능을 합니다.

그럼..?

네, 오토 레이아웃을 이용해서도 동일하게 만들 수 있습니다.

완벽히 같은 기능으로 대응되진 않지만, 오토레이아웃 기능으로도 프레임 변화에 동일하게 대응하는 카드 UI를 만들 수 있었습니다.

그럼 두 개가 뭐가 다르고, 어떻게 구분해서 사용해야 하나?

결론부터 말하자면, 오토레이아웃이 컨스트레인트를 포함한다고 볼 수 있었습니다.

Constraints : 프레임과 프레임 안의 콘텐츠의 관계를 정함.

Auto layout : 프레임 안의 컨텐츠들끼리의 관계를 정함.

정의는 이러하지만, 오토 레이아웃은 컨텐츠들끼리의 관계를 정함은 물론, 프레임과 컨텐츠 사이의 패딩까지 정할 수 있어 컨스트레인트의 장점을 포함하는 것 같아 보입니다.

또한, 컨스트레인트로 레이아웃을 잡을 경우, 패딩같은 간격을 재조정할 때 하나하나 직접 맞춰줘야하는 번거로움이 존재하며,

컨텐츠들끼리의 간격이 중요한 경우에는 중복되게 사용되지 않더라도 그룹이 아닌 오토레이아웃으로 묶어주는 게 맞아 보입니다.

결론적으로, 디자인 시스템을 구축하면서 컴포넌트들을 제작할 때는 기본적으로 Auto Layout으로 묶으면서 반응형 작업을 하되, 컴포넌트를 실제 페이지 프레임 위에 씌워 사용할 때는 Constraints를 활용해 위치를 잡아줄 수 있을 것 같습니다.

당연히 그렇게 해야되는거 아니야? 라고 생각할수도 있을 것 같지만, 좀 더 세부적으로 알게되면 (프론트엔드 개발자 분들이 덜 힘쓸 수 있는) 구조적인 디자인을 더 쉽게 할 수 있겠다고 생각하고 좋아하는 저란 사람은 신입 디자이너입니다.

똑똑한개발자 기술 블로그

Django ORM defer 기능

시작하기 전에

본론

예제코드

defer() 기능

update

filter 에서 사용

Select_related 에서 사용

get_or_create

마치는 말

[TokTokHan.dev]ES6 문법정리

ECMAScript란?

const and let

화살표함수

비구조화 할당

for…of 문

Spread Operator

Default Parameter(기본 매개변수)

후기

Django ORM only 기능

시작하기 전에

본론

예제코드

only() 기능

update

Filter 에서 사용

Select_related 에서 사용

Object로 검색하기

get_or_create

단점

마치는 말

cypress를 이용하여 components test 작성하기

1. Setup

2. Opening Cypress

3. Configuration

4. Writing Component Test

4. How to write

5. Example: Todo List

Reference

필이 짜르르 왔어. 다시는 이런 폰트 내게 없어

데이터베이스 관계

관계의 정의

관계의 형태

관계의 종류

관계형 데이터베이스의 개요

관계형 데이터베이스의 Relation 구조

튜플(Tuple)

속성(Attribute)

도메인(Domain)

Relation의 특징

NoSQL

SQL(RDBMS) VS NoSQL

SQL

NoSQL

이거도 모달, 저거도 모달, 이게 모람

“혹시 이 부분 모달말고 논모달로 처리해주실 수 있나요?”

모달(Modal) VS 팝업(Pop-up)

“오늘 하루 이 창을 열지 않음”

모달(Modal) VS 페이지(Page)

모달(Modal) VS 논모달(Non-modal)

참고자료

Chart.js 시작하기

설치하기

컴포넌트로 불러오기

데이터 전달하기

옵션 전달하기

마치며

참고 사이트

[TokTokHan.dev]Execution Context(실행 컨텍스트)

스택과 큐

스택

큐

후기

신입 디자이너는 아무것도 몰라요