lodash란 유용한 기능을 여럿 제공해 주는 훌륭한 라이브러리다.

그 중에서 자주 쓰게 될 _.debounce와 _.throttle에 대해 알아보고자 한다.

_.debounce(func, [wait=0], [options={}])

wait 초 뒤에 func를 실행한다. 같은 함수를 지나치게 자주 부르고 싶지 않을 때 (ex: 화면 크기 조정 등) 사용한다.

_.throttle(func, [wait=0], [options={}])

wait초 뒤에 func를 실행한다. 같은 함수를 지나치게 자주 부르고 싶지 않을 때 (ex: 화면 크기 조정 등) 사용한다.

Q. 똑같은 거 아닌가요?

우선 debounce의 작동 원리부터 살펴보자.

이렇게, 여러 개의 이벤트를 묶어 하나의 이벤트로 처리한다. 만약 이벤트가 종료된 이후 debounce 이벤트가 발생하는 게 마음에 들지 않는다면, leading 옵션을 사용할 수 있다.

var drawDebouncedEvent = _.debounce(function(div){
   debounceColor = globalColor;
  }, frequency*4, {leading:true, trailing:false});

throttle의 경우 이와 조금 다르다. throttle은 일정 주기마다 무조건 실행된다.

예를 들어 사용자가 30초 동안 화면 크기를 조정할 경우, debounce는 화면 크기 조정이 모두 끝났을 때(leading을 사용할 경우 시작할 때) 1회만 실행될 가능성이 높다. 그러나 throttle은 일정 주기마다 무조건적으로 함수를 실행시켜, 즉각 반응할 수 있다.

$(document).on('scroll', _.throttle(function(){
    check_if_needs_more_content();
  }, 300));

오늘도 개발자가 안 된다고 (생략)

왜 안 될까?

Vuetify는 (Bootstrap처럼) 화면을 12개로 나누어 생각한다.

그 12칸 중 몇 칸을 차지할지를 지정해주는 게 Grid System의 전부.

즉, 화면의 7/13을 차지하는 박스를 만들어주고 싶다면 약간의 마법을 부려야 한다. (마진을 주어 눈속임을 하는 등...)

반응형 웹페이지를 위해, 각 크기(=Breakpoints)마다 몇 칸을 차지할지를 지정해 준다.

예컨대, md=4라면 md 사이즈와 그 이상에서는 4/12칸을 차지하고, 그 이하에서는 12/12칸을 차지하게 된다.

모든 사이즈에 대해서 지정해 줄 수도 있다.

<template>
  <v-container class="grey lighten-5">
    <v-row>
      <v-col>
        <v-card
          class="pa-2"
          outlined
          tile
        >
          .col
        </v-card>
      </v-col>

      <v-spacer></v-spacer>

      <v-col>
        <v-card
          class="pa-2"
          outlined
          tile
        >
          .col
        </v-card>
      </v-col>
    </v-row>

    <v-row>
      <v-col
        cols="auto"
        lg="3"
      >
        <v-card
          class="pa-2"
          outlined
          tile
        >
          .col-auto
        </v-card>
      </v-col>

      <v-spacer></v-spacer>

      <v-col>
        <v-card
          class="pa-2"
          outlined
          tile
        >
          .col
        </v-card>
      </v-col>

      <v-spacer></v-spacer>

      <v-col md="5">
        <v-card
          class="pa-2"
          cols="auto"
          outlined
          tile
        >
          .col-md-5
        </v-card>
      </v-col>
    </v-row>
  </v-container>
</template>

p: padding

m: margin

a: all

pa-2는 padding을 all 전 방향으로 2씩 준단 의미다.

잠깐. 2는 뭘까? 2px?

1이 4px이다.

2는 8px이다.

개발자가 3px 패딩을 안 된다고 말했다

1. App bar

 (1) 스크롤 시 보라색 부분은 사라지고 메뉴만이 위에 표시된다: shrink-on-scroll, scroll-threshold=" "

 (2) 메뉴 구현

<template v-slot:extension>
    <v-tabs align-with-title>
      <v-tab>블로그 Blog</v-tab>
      <v-tab>분야 Category</v-tab>

      (...)

      <v-tab>소개 About</v-tab>
    </v-tabs>
</template>

2. Navigation Drawer

  <v-navigation-drawer permanent>
    <v-list
    dense
    nav
    >
        <v-list-item
        v-for="item in items"
        :key="item.title"
        link
        >
            <v-list-item-content>
            <v-list-item-title>{{ item.title }}</v-list-item-title>
            </v-list-item-content>
        </v-list-item>
    </v-list>
</v-navigation-drawer>

3. Content

4. Footer

<template>
  <v-footer padless>
    <v-col>
      The Book Society
    </v-col>
  </v-footer>
</template>

다시 여길 보며 진행한다.

문제1: System.Xml도 System.Xml.Linq도 있는데 using System.Linq.Mapping; 이 없는 경우

해결: System.Data.Linq를 추가하고 using System.Data.Linq.Mapping; 구문으로 수정.

문제2:

다른 걸 XML로 익스포트 할 때에는 문제가 없었는데, PLAY에서만 생겼다. (1) 혹시 null값이 있기 때문인가 하고 채워 넣어 봤는데 그것도 아니다. 저 누락된 표현식이라는 오류는 보통 쿼리문을 쓰다가 생긴다는데, 대체 XML로 익스포트 할 때 생길 이유는 뭘까? (2) 해당 PLAY 릴레이션이 THEATER_NAME을 외래키로 갖고 있기에 혹시 오타라도 난 건가 싶었는데, 그것도 아니다.

(3) 그 과정에서 Constraint 이름이 이상한 걸 발견해서 바꿔 줬다. 역시 문제 해결에는 도움이 되지 않았다.

생기는 오류는

java.lang.NullPointerException

 at oracle.dbtools.raptor.dialogs.export.ColumnPanel.addColumnsToTree(ColumnPanel.java:102) 이하생략.

이게 내게 도움이 될 것 같은데 열리질 않는다. 저장된 페이지로 들어가 봤는데, 해결되지 않았던 것 같다.

답은 이곳에서 찾았다.

해결2: SQL문에서 3번째로 많이 쓰는 게 WHERE 절인데 column 명으로 where을 넣은 사람이 있다.

WHERE을 LOC으로 바꾸고 해결. 부끄럽다.

문제3: DataContext가 없다.

해결3: System.Data.Linq 도 using 구문으로 포함시켜 준다.

문제4: 그런데 저 예시는 .mdf 파일을 사용한다. .mdf 파일을 아무리 찾아 봐도 보이질 않는다. 대부분의 예시는 Oracle SQL Developer 가 아닌 MS-SQL을 기준으로 쓰고 있다. 테이블 익스포트도 .xml로 가능하다.

해결4-1: .mdf로 바꿔 보기

해결4-2: .xml로 진행하기

해결 4-1

"Or simply use linq to xml"

이 이외에도 다양한 문서를 읽어 보았으나, 어차피 LINQ to SQL이든 LINQ to XML이든 모르는 건 마찬가지이므로 시도해 보기로 했다. 

해결 4-2. 

읽어 본 결과, LINQ to SQL 보다 훨씬 쉽다.

오늘의 교훈: 모든 게 엉망이 되었다는 생각이 들 때에는 운동하고 산책하며 잠깐 생각을 정리하고 다시 와서 보자. 큰 문제가 아니거나 오히려 돌파구였을 수도 있다.

참고1 참고2 참고3

오늘의 목표는 일단 C# 파일을 생성은 하고 데이터베이스를 만들기까지. 

참고 링크는 1일차와 동일. 1

2

Windows Forms 파일을 만들었다. 빠르게 데이터베이스를 만들어 본다.

데이터베이스는 우선 SQL을 사용해서 제작할 예정이다. 

테이블을 만들고, 예시 데이터를 몇 개 넣었다. 

이번 텀 프로젝트는 데이터베이스를 만드는 게 중심인 것 같아 오늘 안으로 할 수 있는 한 데이터를 넣고,

LINQ to SQL로 연결하는 것까지가 세부 목표.

이틀이 꼬박 걸렸다. 나는 승리했다. 가볍게 20개의 뮤지컬/연극과 100명의 배우, 13명의 제작자, 11개의 회사와 그 관계 테이블을 모두 채워넣었다. LINQ to SQL은 다음 글로. (글이 짧지만 이 글 하나에 일주일이 걸렸다.)

1. 개요

데이터베이스 수업을 듣던 중 SQL을 사용한 최종 프로젝트(일주일)를 하게 됐다. 교수님께서 관계형 데이터베이스 모델이라면 프로젝트에 적합하다 하셨으므로, C# LINQ to SQL로 내부를 구현하고 Windows Forms로 UI를 만들어 보기로 했다. 저번 학기 자료구조 수업에서는 Windows Forms를 C++과 연결해 보려다 실패했었다.

참고한 링크 1: <C# LINQ to SQL 연습으로 학습>

참고한 링크 2: <C# 강의 LINQ>

참고한 링크 3: <LINQ to SQL 개체 모델>

우선 오늘은 개념적 데이터베이스 설계(ER 다이어그램) / 데이터베이스 모습을 정리 요약 후 링크 3을 참고해 모델까지 작성하고, GUI와 응용 프로그램 설계를 간단하게 하는 게 목표. 작성할 프로그램은 아래와 같다.

2. 데이터베이스

데이터 수집에는 아래와 같은 사이트를 참고했다.

플레이DB

인터파크 티켓

YES24 티켓

기존 DB 사이트 (플레이DB) 의 경우 특정 한 배우의 출연작, 특정 한 각본가의 작품만을 정렬해 보여 주는 데에 그쳤으므로 이를 개선하는 데에 초점을 맞추기로 했다.

이 다이어그램은 draw.io 에서 작성했다. 

3. UI

UI 디자인은 dribbble 을 참고했다.

디자인 툴은 oven 을 사용했다. 

검색한 배우/공연/장소 등에 관한 숫자가 빡 키워드가 빡 나오고 각 숫자/이미지를 클릭하면 상세 정보로 이동했으면 좋겠다.

구글에서 이미지를 불러와 검색 결과에 넣을 수 있다면 더 좋지 않을까? 하는 생각으로 검색만 해 뒀다. (이것까지 하기엔 시간이 부족할 것 같으므로 한다면 종강 이후가 될듯함.)

https://developers.google.com/api-client-library/dotnet/get_started

oven 사용 후기: 다루기 쉽다. 선 색은 바꾸지 못한다. 그라데이션 기능은 없다.

이렇게 틀이 잡혔다.

내일부터는 실제로 구현해 보며 Windows Forms로 어디까지 할 수 있는지 보고, (검색 결과 페이지의 저 글씨에 애니메이션을 넣고 싶다) 실패할 경우 Unity로 GUI를 만들어 본다.

상황설명: Oracle Database 11g 를 깔고 SQL Developer를 실행시키고 싶음

요약: 이는 64bit 환경에서 돌아가지 않으므로 x86버전을 사용하시고 JAVAHOME 의 위치를 다시 지정해 주세요.

JDK 다시 깔기: 실패

https://m.blog.naver.com/m1nk1/120208915711 JDK 32bit 깔아 보기

없음

(이 과정에서 알게 되었는데 내가 깐 데이터베이스가 11g이므로 JDK 11이 아닌 8 이하를 깔았어야 했다)

다시 JDK 8 64bit 깔아 보기

문제를 다시 깨달음

내가 Java를 이상한 위치에 깔고 있었다

해결!

또다른 퀘스트

https://stackoverflow.com/questions/16581065/j2se-sdk-configuration-in-oracle-sql-developer

요약: 아까 JDK 32bit를 깔아야 하는 게 맞았다

Java 내의 폴더에 깔아 봄

안 됨

이쯤 되니까 PATH 문제인가? 싶음

그래도 아까 다시 깔 때 제대로 삭제하고 제대로 깐 게 아닌 것 같아서 무의미한 도전을 다시 해 보기로

무의미한 도전이 아니라 나를 더 힘들게 하는 도전이었음 (JRE)

JDK로 다시 도전

복붙 아님

갑자기 그런 이야기가 떠오른다

아이가 온 힘을 다해 바위를 들어 올리려 노력하는 것을 본 아버지가 아이에게 "너는 정말 너의 모든 힘을 다 쓴 거니?" 하고 묻고 아이는 "저는 정말 제 모든 힘을 다해 들어 올리려고 했는데 실패했어요" 하고 답한다. 그러자 아버지는 "아니다. 근처의 사람에게 도움을 요청할 수 있는 것도 너의 힘이야." 라고 대답했다는

다시 32bit 문제를 들여다 본다

https://learningintheopen.org/2011/06/24/oracle-11g-client-sql-developer-64-bit-error-warning-could-not-find-jvm-cfg/

해결이 안 되긴 하는데

다시 고민해 보기로 함

일단 Java를 Program files 에 다시 깔아야 할 것 같다

안 됨!

깔아 본다

담배 말린다

기동되길래 나가서 춤추고 왔는데

그냥 하다간 나중에 갑자기 문제가 생기겠지 싶어 다시 지우고 다시 깔고 다시 conf 파일 수정하고 다시 실행시켜 보기로 함

너무 신난다

장장 1시간 30분 걸림

19/01/25

Aotea Square, Auckland