_uchanlee.log

네 만들어 드렸습니다~

Tue, 06 Apr 2021 06:27:47 GMT

해당 게시글은 간단한 사이트를 만들었는데 친구들 반응이 너무 웃겨서 그 과정을 기록해봅니다. 😆

TL;DR

깃허브 README에 폴더 구조를 종종 써놓는데, 손수 노가다 작업이었다.
- 웹으로 만듦
- 친구들 반응이 웃김
사용해보기
- woochanleee.github.io/project-tree-generator
- GitHub Repository
개발 일기

사건의 발단

때는 바야흐로 2일전, 그룹 채팅방에 친구 한명이 메시지를 보냈습니다.

"음? 저거 이미 만들어주는 거 있지 않을까? 🤔"

있다면 댓글로 알려주세요...😢

구글링 👨‍💻

다음과 같은 키워드로 검색해봤는데 썩 원하는 사이트를 찾지 못했습니다.

readme project structure, folder structure generator, folder tree generator 등

그 중 대안이 될 만한 내용을 작성한 글 하나를 발견했습니다.

velog-@minsgy
- 대안 -> vs-code extension
$ tree -I “$(shell cat .gitignore | tr -s ‘\n’ ‘|’ )”
- 박진우님

무려 좋아요 수가 75개로 많은 관심을 받은 글이네요. ~~나도 좋아요🤪~~

"잘 찾았으면 그걸 쓰면 되지 왜 만듦?"

슬슬 이런 의문이 들 수 있는데, 제가 만들게 된 이유는 다음과 같습니다.

서비스의 확장성(웹으로 배포하여 누구나 이용 가능)
불필요한 파일 생성 제거(e.g., node_modules, 모든 파일)

vs-code extension 해당 서비스에서 ignore 기능은 없는걸로 판단하여 손수 Project Tree Generator를 개발하게 되었습니다.

전개

글쓴이가 디자인과는 거리가 멀고 프론트엔드 개발을 공부하는 학생이여서 UI는 최대한 간결하게 구성하여 개발하였습니다.

프로젝트 세팅

가장 익숙한 기술 스택인 React.js + TypeScript를 사용하기로 결정했고, 보일러 플레이트 코드는 facebook-CRA로 프로젝트를 세팅했습니다.

1년 전 쯤에는 CRA가 무겁고 확장에 복잡성 등 단점이 있어 webpack-react 이런 글도 썼던 기억이 있다. 그런데 요즘은 CRA도 가볍고 지원되는게 많아지고 회사에서도 종종 쓰인다는 이야기를 들어서 사용하기로 결정했다.

+) 스타일은 scss를 사용했다.

React 17

CRA 명령어로 생성중인 프로젝트가 생성되고 안 쓰는 파일들을 정리하다 package.json에 들어가 보니 리액트 버전이 17이였다.

"오? 17에 재미난것들 업데이트 된다고 들었는데"

얼마 전에 페이스북에서 React 관련 글을 하나 읽었습니다. 그 내용은 다음과 같습니다.

Concurrent Mode (Experimental)에서 import React from 'react';를 추가하지 않고도 리액트 컴포넌트를 사용 가능하다는 내용이었다.

평소에도 React도 Next.js처럼 해당 구문 없이 사용하고 싶은 욕구가 있어 되게 인상깊게 읽었습니다.

내가 들었던 내용을 토대로 import 구문을 지우고 에러가 나는지 확인해 보았습니다.

"와우! 이게 되네?"

16에서는 에러가 나던것이

17에서는 "React import 해놓고 안썼다!" 라고 알려주네요.

공식 문서를 읽지 않고선 믿지 못하는 사람(저)을 위해 링크랑 사진 첨부합니다.

From React Docs

위기

뚝딱뚝딱 🛠 UI 마크업을 끝내고 보니 이제 핵심 기능을 구현해야 할 때가 왔습니다.

근데 이거 어케해..?

로직 어떻게 하지...?

Project Tree Generator 해당 사이트의 핵심 기능인 tree의 depth를 구현하는데 긴 시간을 보냈습니다.

처음에는 재귀적으로 해결하려고 했습니다. 그렇게 View를 구현하기 까진 성공 했는데 삭제, 새 파일, depth 증가 감소 등 기능을 구현하려다 보니까 도저히 방법이 생각나지 않았습니다.(댓글로 아이디어 공유해주시면 참고하겠습니다!)

그래서 각 라인별로 아이템을 두었고 해당 아이템의 depth(깊이)를 저장해두는 방식으로 구현했습니다. 코드가 궁금하신 분은 GitHub-Editor.tsx에 들어가면 ~~제 더러운 코드들💩~~ 을 확인할 수 있습니다.

절정

우여곡절 개발을 다 마치고 배포를 해야할 때가 왔습니다. 정적 파일을 쉽게 배포할 수 있는 Github Page를 이용하기로 결정했습니다.

npm gh-page

Github Page를 배포하는데 쉽게 도와주는 라이브러리를 갖다 사용했습니다.

바로 gh-page 인데요. 커맨드 단 한 줄으로 자동으로 gh-pages 브랜치를 만들고 그 안에 정적파일을 올려 배포까지 성공하였습니다.

앞으로도 Github Page를 애용하게 될것 같습니다.

결말

배포를 다 마쳤으니 맨 처음 이 사이트를 필요로 했던, 이 사이트를 만들도록 한 장본인, 그 친구한테 사이트 주소를 전달하러 가봅시다.

"네 만들어 드렸습니다~"

실제 대화방의 스크린샷입니다.

버그?

친구3 이 공유하자마자 버그를 제보했네요!(이런) 해당 이슈는 onKeyDown KeyboardEvent에 한글을 입력했을 때 Enter 키를 클릭시 특정 상황에서 이벤트가 2번 발생하는 이슈였습니다. 이전에 한번 겪었던 이슈라 금방 해결했네요.

event.KeyCode를 조건문에 사용하여 해결했는데 deprecated네요.
- 혹시 다른 해결방안을 아시는 분 있으면 댓글로 공유해주시면 감사하겠습니다!

뜨거운 반응 🕺🕺🕺

나는 단순히 친구 한명의 메시지를 보고 "없으면 만들어볼까?" 하는 생각에 하루 동안 뚝딱 만든 사이트였는데, 친구들의 반응이 심상치 않았다. ~~(왜 이래 ㅋㅋㅋㅋㅋ)~~

그래도 내가 만든 사이트가 아무 관심도 없이 잊혀져 가는 것 보다는 이렇게 관심을 갖고 반응해준 다는건 개발자로써 언제나 뿌듯한 것 같다.

글을 마치며

단순히 사이트 하나를 만들고 토이 프로젝트로 끝이날 해프닝이였지만 친구들의 반응이 너무 웃기고 귀여워서 오랜만에 이렇게 글을 쓰네요. (고맙다!)

아무말 대잔치였던 이 글을 여기까지 읽어주신 분이 계실지 모르겠지만 있다면 진심으로 감사 인사 드립니다. 🙇‍♂️

제가 만든 사이트에 버그 제보나 추가 기능 제안 등은 이슈로 남겨주시면 언제든 환영이고, 버그 수정 및 기능 추가 등은 Pull Request를 날려주시면 확인하도록 하겠습니다!

감사합니다. 😊

문(Statement)과 표현식(Expression)

Wed, 28 Oct 2020 13:27:12 GMT

문(Statement)과 표현식(Expression)

문과 표현식을 대충 같은 의미라고 넘겨버리는 개발자가 많다.
그러나 자바스크립트에서 두 용어는 아주 중요한 차이가 있으므로 명확하게 구분해야 한다.

문(Statement)

실행 가능한 최소의 독립적인 코드 조각
statement는 흔히 한 개 이상의 expression이나 프로그래밍 키워드를 포함하는 경우가 많다.

for (let i = 0; i < 10; i++) {} // for statment

while (true) {} // while statment

if (true) {} // if statment

let a; // declaration statment

function b() {} // function declaration statement

표현식(Expression)

특정한 결괏값으로 계산되는 것

let a = 3 * 6; // 1.
let b = a; // 2.
b; // 3.

- 3 * 6은(18이라는 값으로 평가되는) 표현식이다.
- let a = 3 * 6; 문은 변수를 선언(그리고 선택적으로 동시에 어떤 값을 할당)하므로 '선언문(Declaration Statement)'이라 한다.
- (앞에 let이 빠진) a = 3 * 6;는 '할당 표현식(Assignment Expression)'이라고 한다.
- let b = a; 문도 변수를 선언(그리고 선택적으로 동시에 어떤 값을 할당)하므로 '선언문(Declaration Statement)'이라 한다.
- a라는 표현식은 당시 변수들에 저장된 값으로 평가되므로 18이라는 값으로 평가되고 역시 b는 18이 된다.
- b가 표현식의 전부지만 이것 만으로도 완전한 문이다.
- 일반적으로 이런 문은 '표현식 문(Expression Statement)'이라고 부른다.

문의 완료 값

모든 문은 (그 값이 undefined라고 해도) 완료 값(Completion Value)을 가진다는 사실을 의외로 모르는 사람들이 많다. ~~나 또한 이번에 처음 알았다.~~

공식 문서중 일부

📑 출처

문의 완료 값을 확인하는 방법은 없을까?

가장 확실하고 빠른 방법은 브라우저 개발자 콘솔 창에서 문을 타이핑해보는 것이다.
콘솔 창은 가장 최근에 실행된 문의 완료 값을 기본적으로 출력하게 되어 있다.

let c = 10; 같은 문은 완료 값이 뭘까?

할당 표현식 c = 10;은 할당 이후의 값(여기서는 10)이 완료 값이지만, let 문 자체의 완료 값은 undefined다.

콘솔 창이 반환해준 완료 값은 개발자가 내부 프로그램에서 사용할 수 있는 값은 아니다. 그럼 완료 값을 사용할 방법은 없을까?

방법은 있지만 꽤 복잡하다.
다른 종류의 문 완료 값을 보자.
예를 들어, 보통의 { } 블록은 내부의 가장 마지막 문/표현식의 완료 값을 자신의 완료 값으로 반환한다.

let b;

if (true) {
   b = 5 + 10;
}

콘솔 창에서 실행하면 15가 나온다.
블록 내의 마지막 문 b = 5 + 10;의 완료 값이 15이므로 if 블록의 완료 값도 15를 반환한 것이다.
즉, 블록의 완료 값은 내부에 있는 마지막 문의 값을 암시적으로 반환한 값이다.

하지만 다음과 같은 코드가 작동하지 않는 건 분명히 문제가 있다.

let a, b;

a = if (true) {
   b = 5 + 10;
}

문의 완료 값을 캐치하여 다른 변수에 할당한다는 건 쉬운 구문/문법으로는 불가능하다.
뭔가 방법이 없을까? 🤔
완료 값을 캐치하려면 어쩔 수 없이 유해함의 대명사 eval()함수를 사용할 수 밖에 없다.

let a, b;

a = eval('if (true) { b = 5 + 10; }');

a; // 15

꼴 보기 싫은 코드지만 일단 잘 돌아간다!
콘솔 창 외에 자바스크립트 프로그램에서도 문 완료 값을 확인할 방법이 있음을 알 수 있다.

ES7 명세에는 'do 표현식'이 제안된 상태다.

let a, b;

a = do {
   if (true) {
      b = 5 + 15;
   }
};

a; // 15

do { } 표현식은 (하나 이상의 문을 포함한) 블록 실행 후 블록 내 마지막 문의 완료 값을 do 표현식 전체의 완료 값으로 반환하며 결국 이 값이 변수 a 에 할당된다.
인라인 함수 표현식 안에 감싸서 명시적으로 반환할 필요 없이 문을 (다른 문 안에 들어갈 수 있는) 표현식처럼 다루자는게 기본적인 아이디어다.
아직까지는 문 완료 값을 대수롭지 않게 여기고 있지만 자바스크립트 언어가 진화할수록 그 중요성은 점점 더 부각될 것 같다.
어서 do { } 표현식이 도입되어 eval() 같은 나쁜 것들을 사용하고픈 욕구를 영원히 잠재울 수 있길 고대한다.

표현식의 부수 효과

대부분의 표현식에는 부수 효과가 없다. 예를 들면,

let a = 2;
let b = a + 3;

표현식 a + 3 자체는 가령 a 값을 바꾸는 등의 부수 효과가 전혀 없다.
단지 b = a + 3 문에서 결괏값 5가 b에 할당될 뿐이다.

다음의 함수 호출 표현식은 부수 효과를 가진(가졌을지 모를) 표현식의 전형적인 예이다.

let a = 1;

function foo() {
   a += 1;
}

foo(); // 결괏값: 'undefined', 부수 효과: 'a'가 변경됨.

다른 부수 효과를 지닌 표현식을 보자.

let a = 7;
let b = a++;

a; // 8
b; // 7

표현식 a++이 하는 일은 두 가지다.
a의 현재 값 7를 반환(그리고 b에 할당하는 것까지)하고 a 값을 1만큼 증가시킨다.

++a++은 문법에 맞는 구문일까?

실행하면 ReferenceError 에러가 난다.
부수 효과를 유발하는 연산자는 부수 효과를 일으킬 변수 레퍼런스가 꼭 필요하기 때문이다.
++a++에서는 a++시 ++ 연산자는 42 같은 원시 값에 직접 부수 효과를 일으킬 수는 없으므로 ReferenceError를 던진다.

delete 역시 부수 효과를 일으키는 연산자다.

delete는 객체의 프로퍼티를 없애거나 배열에서 슬롯을 제거할 때 쓴다.
하지만 단독 문(Standalone Statement)으로 더 많이 쓴다.

const obj = {
   a: 30,
};

obj.a; // 30
delete obj.a; // true
obj.a; // undefined

delete 연산자의 결괏값은 유효한/허용된 연산일 경우 true, 그 외에는 false다.
이 연산자의 부수 효과는 바로 프로퍼티(또는 배열 슬롯)를 제거하는 것이다.
'유효한/허용된'이란 무슨 의미일까?
- 존재하지 않는 프로퍼티 또는 존재하면서 설정 가능한(Configurable)한 프로퍼티일 경우 delete 연산자는 true를 반환한다. 그 외의 경우는 false를 반환하거나 에러를 낸다.

마지막으로 예시할 부수 효과 유발 연산자는 언뜻 보기에 분명한 것 같으면서도 분명하지 않은 = 할당 연산자다.

let a;

a = 42; // 42
a; // 42

a = 42에서 = 연산자는 아무리 봐도 부수 효과와는 무관해 보인다.
하지만 a = 42 문의 실행 결과는 이제 막 할당된 값(42)이므로 42를 a에 할당하는 자체가 본질적으로 부수 효과다.

이렇게 할당 표현식문 실행 시 할당된 값이 완료 값이 되는 작동 원리는 다음과 같은 연쇄 할당문(Chained Assignment)에서 특히 유용하다.

let a, b, c;

a = b = c = 20;

c = 20 평가 결과는 (20을 c에 할당하는 부수 효과를 일으키며) 20이 되고, b = 20 평가 결과는 (20을 b에 할당하는 부수 효과를 일으키며) 20이 된다. 결국, a = 20으로 (20을 a에 할당하는 부수 효과를 일으키며) 평가된다.

또 다른 예를 보자.

function vowels(str) {
   let matches;

   if (str) {
      // 모든 모음을 추출한다.
      matches = str.match(/[aeiou]/g);

      if (matches) {
         return matches;
      }
   }
}

vowels("Hello World"); // ["e", "o", "o"]

잘 작동하는 코드다.
할당 연산자의 부수 효과를 잘 활용하면 다음과 같이 2개의 if 문을 하나로 간단히 합칠 수 있다.

function vowels(str) {
   let matches;

   // 모든 모음을 추출한다.
   if (str && (matches = str.match(/[aeiou]/g))) {
      return matches;
   }
}

vowels("Hello World"); // ["e", "o", "o"]

matches = str.match를 감싸는 ( )를 빠뜨리면 안 된다.
두 조건이 서로 분명히 연관되어 있음을 잘 보여주기 때문에 나는 후자를 더 선호하는 편이다. 물론 어떤 스타일을 선호할지는 개인 취향 차이다.

출처

You Don’t Know JS : 타입과 문법, 스코프와 클로저

리액트 네이티브 react-native start 에러

Thu, 08 Oct 2020 10:06:38 GMT

난 분명히

react-native init test yarn android

를 순서대로 했지만 iOS는 잘된 반면 안드로이드는 아래와 같은 에러가 발생했다.

iuchan@MacBook-Pro sdf % yarn android
yarn run v1.22.4
$ react-native run-android
info Running jetifier to migrate libraries to AndroidX. You can disable it using "--no-jetifier" flag.
Jetifier found 967 file(s) to forward-jetify. Using 12 workers...
info Starting JS server...
info Installing the app...

FAILURE: Build failed with an exception.

* What went wrong:
Could not initialize class org.codehaus.groovy.runtime.InvokerHelper

* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.

* Get more help at https://help.gradle.org

BUILD FAILED in 613ms

error Failed to install the app. Make sure you have the Android development environment set up: https://reactnative.dev/docs/environment-setup. Run CLI with --verbose flag for more details.
Error: Command failed: ./gradlew app:installDebug -PreactNativeDevServerPort=8081

error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

다행히 구글링을 통해 미리 해결한 사람이 있었다. 이유는 jdk버전이 14로 올라가면서 gradle version이 14를 지원하지 않는 상황에 발생한것이다. 해결 방법은 gradle/wrapper/gradle-wrapper.properties의 gradle 버젼을 올려주는 것이다. 나의 파일은 다음과 같다.

gradle-wrapper.properties

distributionBase=GRADLE_USER_HOME
distributionPath=wrapper/dists
distributionUrl=https\://services.gradle.org/distributions/gradle-6.3-all.zip
zipStoreBase=GRADLE_USER_HOME
zipStorePath=wrapper/dists

https://coding-start.tistory.com/378

Github 프로필에 나의 Daliy 코딩 시간을 적용해보자!

Fri, 26 Jun 2020 04:10:45 GMT

FERNANDO 기술 블로그 를 보고 따라했지만 적용이 안돼서 이를 해결하는 방법을 약간 추가하여 글을 작성해 봅니다.

Github 프로필에 Daliy 코딩시간 적용하기

위의 사진처럼 내가 어느 시간대에 커밋을 했는지 한 눈에 볼수 있는 방법이 있습니다. 이를 적용하는데 어려움을 겪을 분들을 위하여 적용하는 방법을 소개하겠습니다. ~~저 같은 경우 엄청난 삽질을 통해 깨달았습니다.ㅋㅋ~~

적용해보자!✅

techinpark/productive-box 레포지토리를 자신의 레포에 포크합니다.

원작자의 Repository 에서 Fork 받아 국내 실정에 맞게 설정을 약간 변경하였다고 합니다.
(https://gist.github.com) 에 들어가서 새로운 Public Gist를 생성합니다.

저는 이렇게 작성해 주었습니다.
Github 토큰을 repo와 gist 두 가지를 선택한 채로 생성합니다. (https://github.com/settings/tokens/new)

저는 이렇게 생성해주겠습니다. 생성하면 이렇게 토큰값을 다시는 보여주지 않는다고 하는데요? b5c762d615b37c24da933969782759b24a59df48 이 값을 복사해서 다시 찾을수 있게 저장해둡시다. ~~저 토큰은 삭제했으니 걱정마세용😆~~
아까전에 포크한 자신의 레포지스토리에 가서 Settings -> Secrets를 눌러 New Secret을 눌러 환경변수를 생성해줍시다.

GH_TOKEN 에는 아까 만든 토큰 생성할때 얻은 값을 사용하고 GIST_ID 에는 사진과 같이 https://gist.github.com/woochanleee/이부분을복사해서붙이면됩니다.
이제 모든 설정이 끝났습니다. 하지만 포크했던 레포지스터리에서 action 탭에서 understand my workflows, 를 클릭해서 활성화 시켜줍시다.
이러면 이제 매 정각 업데이트가 될텐데요. 저는 지금 당장 결과가 보이게 하고 싶으니 포크한 프로젝트에 푸쉬를 하나 해서 업데이트를 해주도록 하겠습니다.

저같은 경우엔 REAMD.md 에 공백 하나를 입력하고 update 해줬습니다. 그러면 이렇게 actions 탭에서 workflows가 정상 작동한것을 볼 수 있습니다. 그리고 gist에 들어가보면 정상 업데이트 된것을 볼수 있습니다.
이제 마지막으로 깃헙 프로필에 pinned를 해서 다른 사용자들이 볼수 있게 설정해보겠습니다.

사진과 같이 정상으로 보입니다.

+) Weekly development breakdown은 자신이 wakatime 과 연동해서 무슨 언어를 많이 했는지 파악 할수 있습니다. 이거 같은 경우에도 본 포스트에서 소개한 방법과 마찬가지로 (https://github.com/maxam2017/waka-box)(저는 이걸로 포크해서 사용중입니다.) 또는 (https://github.com/matchai/waka-box)를 포크하고 설정해주면 됩니다.

Vue.js(ts) + webpack으로 Hello, world! 찍기

Mon, 01 Jun 2020 11:28:04 GMT

지금까지는 리액트를 사용하면서 웹사이트를 개발을 했다. 그런데 이번에는 새로운걸 도전해보고 싶어서 vue.js를 ts와 webpack으로 사용해보고 그 과정을 기록해보겠다. 처음 도전하는데 어려움이 있는 경우 이 글을 읽으면 Hello, world를 찍을수 있으니 잘 따라오도록 하자.

코드 작성

프로젝트 생성

mkdir vue-webpack && cd vue-webpack
yarn init -y

package.json은 아래와 같을 것이다.

{
  "name": "vue-webpack",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
}

typescript를 사용할것이므로 tsconfig.json을 설정해준다.

{
    "compilerOptions": {
        "module": "CommonJS",
    },
    "include": [
        "./src/**/*",
    ]
}

라이브러리 설치

다음으로 이 프로젝트에 필요한 라이브러리를 설치하자.

yarn add vue vue-loader vue-template-compiler vue-styleloader typescript ts-loader css-loader webpack webpack-cli webpack-dev-server

vue: vue를 사용하기 위함
vue-loader: vue를 단일 파일 컴포넌트를 지원함
vue-template-compiler: vue의 template을 컴파일하기 위함?(이게 없으니 에러가떠서 추가해줌)
vue-styleloader: .vue안에 있는 style태그를 사용하기 위함
typescript: typescript를 사용하기 위함
ts-loader: ts를 해석하기 위함
css-loader: css파일을 사용하기 위함
webpack: webpack을 사용하기 위함
webpack-cli: webpack 명령어로 build 등을 하기 위함
webpack-dev-server: 코드의 변경사항을 바로 적용하기 위함

webpack 설정

webpack.config.js의 파일은 아래와 같을 것이다.

var path = require('path')
var webpack = require('webpack')
const VueLoaderPlugin = require('vue-loader/lib/plugin');

module.exports = {
    entry: './src/main.ts', // 최초 실행될 entry 파일
    output: {
      path: path.resolve(__dirname, './dist'), build 결과가 저장될 폴더
      publicPath: '/dist/', // 이걸 지우게 되면 css가 적용이 안되는게 확인됨. 약간 경로 관련해서 문제가 있던걸로 기억하는데 일단 path랑 똑같이 지정해준다.
      filename: 'build.js' // build 결과 파일 이름
    },
  module: {
    rules: [ // build 규칙들
      {
        test: /\.vue$/, // .vue파일을
        loader: 'vue-loader' // vue-loader로 해석
      },
      {
        test: /\.ts$/, // .ts파일을
        loader: 'ts-loader' // ts-loader로 해석
        },
      {
        test: /\.css$/, // .css파일을
        use: [
          'vue-style-loader', // vue-style-lodaer을 이용해서
          {
            loader: 'css-loader', // css-loader로 해석. 구글링을 찾은 방법
          }
        ]
      }
    ]
  },
  devServer: { // webpack-dev-server 옵션 설정
    host: "localhost", // localhost 설정
    port: 5500, // 포트 설정
    // noInfo: true, // true로 했더니 실행이 안되는줄알고 몇시간 삽질을 했다. 지워주자.
    open: true, // localhost:5500 으로 새탭 열림
  },
  plugins: [
    new VueLoaderPlugin() // 이것도 오류가나서 내용 보니까 설정해주라 해서 설정해줌.
  ]
}

main.ts

./src/components/main.ts 코드를 짜보자.

import Vue from 'vue';
import App from './App.vue';

new Vue({
    render: h => h(App),
}).$mount('#app');

위 코드를 해석하자면 참고 블로그

render: function(createElement) {
  return createElement(App);
}

일반적으로 h는 hyperscript의 약자로 Virtural DOM에서 관용적으로 사용되는 표현인데 HTML 구조를 생성하는 스크립트라는 의미 라고 에반유는 이야기하고 있다. 또 new Vue({ ... }).$mount('#app')이 부분은 공식문서에 나와 있듯이 id가 app인 태그에 엘리먼트를 삽입하는 부분이다.

var MyComponent = Vue.extend({
  template: 'Hello!'
})

// 생성하고 #app에 마운트 합니다.(#app을 대체합니다)
new MyComponent().$mount('#app')

// 위와 같습니다.
new MyComponent({ el: '#app' })

// 또는 문서를 렌더링하고 나중에 추가할 수 있습니다.
var component = new MyComponent().$mount()
document.getElementById('app').appendChild(component.$el)

App.vue

vue 관련 코드에 관한 설명은 블로그여기에서 이해를 해보자. App.vue 코드를 살펴보자.

HelloWorld.vue

./src/components/HelloWorld.vue코드는 아래와 같다.

타입 지정

이렇게만 하면 오류가 나게 되는데 아마 App.vue를 import할수 없을 것이다. 이러한 경우엔 커스텀 d.ts 파일을 생성해줘야 하는데 직접하기엔 아직이여서 구글링으로 파일을 찾았다. 아래와 같다. ./src/components/vue-shim.d.ts

declare module "*.vue" {
    import Vue from "vue";
    export default Vue;
}

index.html

./index.html을 생성해주자.





    
    
     // webpack build 후 스크립트 삽입

scripts 추가

package.json에 명령어를 추가해주자.

...
 "scripts": {
    "build": "webpack", // webpack build
    "start:dev": "webpack-dev-server --hot" // 개발시 코드 수정시 자동 반영
  },
...

Hello, world! 확인

이제 개발 서버를 켜 결과를 확인해보자.

yarn start:dev

아래와 같이 잘 작동되고 hello world를 다르게 변경시켜도 바로 반영이 되는걸 볼 수 있다. 전체 코드는 github-uchanlee에서 확인할 수 있다.

마무리

이틀간 vue.js를 ts, webpack으로 처음 실행해 봤는데 엄청 삽질을 많이 했다. 확실히 리액트와 다른부분이 있고 비슷한 개념도 있는것 같다. 이걸 개인프로젝트에 적용시킬지는 한번 고민해봐야할 문제인것 같다. vue또한 좋은 라이브러리임은 분명하다. 나중에 기회가 된다면 vue를 자세하게 파볼 생각이다.

mongoose 2단 SubDocument 사용법(with koa)

Sun, 24 May 2020 14:32:43 GMT

몽구스로 블로그의 대댓글 스키마를 구현하다가 난관에 빠져 몇시간 삽질을하고 2단subdocument를 사용하는법을 찾아냈다. 내가 '이렇게 하면 되려나?' 하고 찾은 방법이기때문에 이게 정답이라고 말할순 없다. 그냥 단순 참고용으로 확인 바라고 다르게 사용하는 방법이 있다면 댓글로 남겨주면 정말 감사하겠다. 그럼 시작해보도록 하겠다.

나와 같은 문제를 겪거나 해결법이 필요해서 오신 분들을 해결 코드로 가서 확인해보고 문제를 해결하기를 추천드린다.

정의

📖 subDocument가 뭔데?

먼저 이것에 대해 알기 전 MongoDB에서 스키마를 디자인 하는 방식에 대해 살펴보고 지나가야 한다.

MongoDB 특징 및 서브스키마

몽고디비는 기존 RDBMS(관계형데이터베이스)와 스키마를 디자인하는 방식이 완전 다르다.
1 RDBMS에서 데이터베이스를 설계하면 다음과 같을 것이다. ~~정확하지 않음~~
2 하지만 몽고디비는 NoSQL기반므로 NoSQL에서는 모든 것을 문서 하나에 넣는다. 아래와 같다.
```
  {
      _id: ObjectId,
      title: String,
      body: String,
      username: String,
      createdDate: Date,
      comments: [
          {
              _id: ObjectId,
              text: String,
              createdDate: Date,
           },
      ],
  }
```
1. comments와 같이 문서 내부에 또다른 문서가 위치할 수 있는데, 이를 서브다큐먼트(subdocument)라고 한다.
2. 서브다큐먼트 또한 일반 문서를 다루는 것처럼 쿼리할수 있다.
3. 문서 하나에는 최대 16MB의 데이터를 넣을수 있는데, 100자 댓글 데이터가 약 0.24KB를 차지한다. 16MB는 16.384KB이니 문서 하나에 댓글 데이터를 약 68,000개 넣을수 있다. 서브다큐먼트에서 이 용량을 초과할 가능성이 있다면 컬레션을 불리시키는 것이 좋다. [참고 - 리액트를 다루는 기술 개정판]

1단 subschema 구현

먼저, 문서 내에 서브스키마를 하나 넣는 경우를 구현해 보겠다. 하나만 넣을 경우엔 굉장히 간단하다. 몽구스 subdocument 공식문서 공식 문서에 나와있듯이 스키마를 구현할땐 다음과 같이 하면 된다.

스키마 생성

import mongoose from "mongoose";

const { Schema } = mongoose;

const CommentSchema = new Schema({
  text: String,
  publishedDate: {
    type: Date,
    default: Date.now,
  },
});

const PostSchema = new Schema({
  title: String,
  body: String,
  publishedDate: {
    type: Date,
    default: Date.now,
  },
  comments: [CommentSchema] // comments를 CommentSchema타입의 배열로 설정해줌, 여기가 서브 스키마
});

const Post = mongoose.model("Post", PostSchema);

export default Post;

이것처럼 댓글은 여러개가 올수 있으니 CommentSchema타입의 배열로 설정해 준 모습을 볼수 있다.

모델 생성

스키마를 만들었으니 이제 모델을 만들고 직접 값을 저장한뒤 데이터베이스에 저장해줘야 한다. 그럼 어떻게 하는지 알아보도록 하자. 다음 코드는 코드의 일부분이다.

import Router from 'koa-router';
import Post from "";
import { Context } from "koa";

/*
  POST /comments
  {
      text: '우와 좋은 정보 감사합니다!',    
  }
*/
const router = new Router();
router.post('/comments', async (ctx: any) => {
  const { id } = ctx.params;
  const { text } = ctx.request.body;
  const post: any = new Post(); // 먼저 그냥 model을 하나 생성해준다.

  const commentDoc = post.comments.create({ text }); // ✨핵심✨ comments에서 create함수를 사용해서 CommentSchema 스키마의 모델(?) 아무튼 값을 담을수 있는 문서가 하나 생긴다. 아직 정확히는 모르지만 스키마 타입의 변수라면 create함수가 있는것 같다. 그래서 post.create도 가능할것 같다고 본다.
  const newComments = [...postDoc.comments].concat(commentDoc);
  await Post.findOneAndUpdate(
    { id },
    {
      comments: newComments,
    },
    {
      new: true,
    }
  );
    ctx.body = commentDoc;
  } catch (e) {
    ctx.throw(500, e);
  }
});

자 이렇게 서브스키마가 하나 있는 경우에 모델을 생성해 보았다. 그러면 서브스키마 안에 서브스키마가 있는 경우는?

2단 서브스키마 구현

서브 스키마내부에 서브스키마 타입의 변수가 또 있는 경우를 해결해 보겠다.

스키마 생성

먼저 스키마의 구조는 다음과 같이 있다고 하자.

import mongoose from "mongoose";

const { Schema } = mongoose;

const RecommentSchema = new Schema({
  text: String,
  publishedDate: {
    type: Date,
    default: Date.now,
  },
});

const CommentSchema = new Schema({
  text: String,
  publishedDate: {
    type: Date,
    default: Date.now,
  },
});

const PostSchema = new Schema({
  title: String,
  body: String,
  publishedDate: {
    type: Date,
    default: Date.now,
  },
  comments: {
    type: [CommentSchema],
    default: {
      recomments: [],
    },
  }, // 이부분이 달라졌다. default 값을 선언안해두니 create()부분에서 recomments가 존재하지않다고 생성이 불가하였다.
});

const Post = mongoose.model("Post", PostSchema);

export default Post;

여기서 주의깊게 봐야할 부분은 PostSchema의 comments부분인데, 처음에 나는 comments: [ComentSchema] 라고만 설정해 주었는데 이렇게 하니까 create부분에서 comments의 값이 []로 빈 배열이여서 recomments를 생성하질 못했다. ~~갑자기 글을 쓰다 궁금해졌는데 그냥 schema를 import해와서 schema.create를 하면 문서가 만들어지나? 갑자기 궁금하네 아시는분 댓글좀 달아주세요!~~ 그냥 못참아서 직접 해봤는데 사진과 같다고한다. 음.. 왜 안되는지 모르겠다. 스키마 타입의 변수에만 create함수가 있는건가..? 흠....

모델 생성2

그럼 이제 2단으로 구성되어있는 서브스키마를 어떻게 모델로 생성하는지 알아보도록 하자.

import Post from "../../../../models/post";
import { Context } from "koa";
import Router from 'koa-router';

const router = new Router();
/*
  POST comments/:comment_id/recomment
  {
      text: '이게 되네...',    
  }
*/
router.post('/comments', async (ctx: any) => {
  const { id } = ctx.params;
  const { text } = ctx.request.body;
  const post: any = new Post(); // 아까와 같이 문서(모델?)를 만들어준다.
  try {
    const recommentDoc = post.comments[0].recomments.create({ text }); // 🎇여기 핵심, post는 지금 디폴트로 값이 지정되있는것들만 값이 있는 상태인데 아까 comments의 디폴트 값으로 recomments를 넣어두었기 때문에 comments[0].recomments로 접근해서 create함수를 사용해서 모델(문서?)를 생성해준다.🎇
    await Post.findOneAndUpdate(
      { id },
      {
        recommentDoc
      },
    );
    ctx.body = recommentDoc;
  } catch (e) {
    ctx.throw(500, e);
  }
};

마무리

오늘 삽질을 하다가 우연히 해결하게 된 몽구스에서 서브스키마 안에 서브스키마를 넣는 방법을 정리해 보았다. 구글링도 엄청 많이 해봤는데 keyword: subdocument.id()함수 - 뭔진 이해 못함, $함수? - 배열 안에 있는 서브스키마를 선택할때 사용한다고 한것 같음, $push - 이것도 관련되서 찾아보다가 발견, 등 등 새로운 개념들을 보았는데 너무 어려웠다. 공식 문서만 보고 개발하기엔 아직 한계가 있는것 같다. (영어 잘하자...)

이렇게 오늘 하루 몽구스 쿼리문에 대해도 많이 습득하고 스키마 짜는 것에대해서도 배워갔다. 백엔드는 너무 어렵다!!! 조금 더 열심히 공부해야겠다는 마음가짐이 생겼다.

koa-body를 이용한 파일(이미지, 동영상) 처리(Using with koa-router)

Tue, 19 May 2020 14:20:59 GMT

들어가기 전

nodejs koa에서 이미지와 동영상 등 파일들을 처리하기위헤 있는 폼데이터(form-data)를 처리하는 방법에 대해 알아보고 정리하였다.

koa-body란?

먼저 나는 koa-body라는 라이브러리(모듈?)을 사용했다. 사실 이것을 사용하기 전에 multer, formidable, koa-multer, koa-formidable 등 여러 종류를 시도해 보았는데 typescript와 호환이 안되거나 내가 영어 실력이 딸려서 이해하지 못해 formdata를 다루는데 성공하지 못하여서 포기하고 koa-body를 쓰게 됐다.

사용법

설명하기 전 koa-body npm주소에서 자세한 api를 볼수 있으니 참고 바란다. 또 나는 koa-router에 적용하는 방법을 사용했지만 Koa(app)에 적용하는 방법도 많으니 따로 찾아보면 쉽에 찾을수 있을것이다.

설치

yarn add koa-body

를 통해 설치를 먼저 해준다. 신기하게도 ex) types/koa-body 와같이 typescript 개발환경에서 type을 따로 설치 안해줘도 작동이 가능하다. 이유는 잘 모르겠다.

코드

import { Context } from 'koa'; 
import Router from 'koa-router';
import koaBody from 'koa-body'; // koa-body 불러오기

const rotuer = new Router();

router.post(
  '/post',
  koaBody({
    multipart: true,
  }),), // koaBody를 사용해서 multipart데이터를 허용한다고 설정해준다.
  (ctx: Context) => {
    const { title, body } = ctx.request.body; // formdata의 기본적인 text필드들은 ctx.request.body에 값이 들어오고
    const file = ctx.request.files.files; // file형식은 ctx.request.files에 들어온다. ctx.request.files.[files] 여기서 마지막 files는 내가 키값으로 설정해준 값이다. ex) new form().append('files', ~) 와 같이 키 값을 줬기 때문에 위와같이 접근한것이다.
    let files = [];
    for (let i = 0; i < file.length; i++)
      files.push(fs.readFileSync(file[i].path)); // 나는 file들을 formdata로 읽어와 buffer로 데이터베이스에 저장했다.

    /* 
        여기부터
    */
    const post = new Post({
      title,
      body,
      tags,
      files,
      isPrivate,
    }); 
    try {
      await post.save();
      ctx.body = post;
    } catch (e) {
      ctx.throw(500, e);
  }
  /*
    여기까지는 mongoose, mongodb관련된 코드인데 무시해도 된다.
  */
 }
)

npm 문서에 보면 multipart와 formidable 옵션이 있는데 둘다 multipart를 사용가능한것 처럼 보이는데 차이를 모르겠다. 나는 multipart가 익숙해서 이걸 옵션에 사용했다.

성공

성공적으로 mongodb에 바이너리코드의 버퍼(?)가 저장된것을 볼수 있다.

느낀점

오늘 하루는 formdata를 처리하기위해 5시간을 삽질한것 같다. 이렇게 한번 해결해 냈으니 다음에도 잘 해결할것이라 믿는다.

fomdata를 처리하는 방법을 알아봤는데 file을 다루는 것은 어느 분야에서든 어려운것 같다. 자주 접하면서 익숙해져가는게 답인것 같다.

Yarn CLI option 알아보기

Tue, 28 Apr 2020 07:48:59 GMT

라이브러리나 프레임워크를 사용하다보면 모듈을 자주 깔게 된다. 예를 들어 리액트를 사용할때면 yarn create react-app 이런 식으로 사용하곤 한다.

그런데 가끔 보면 cli 명령문 뒤에 -D와같이 다양한 옵션이 붙는 경우가 있다. 이게 무엇일까? 나는 이에 대해 궁금했고 공부 후 정리해보고자 글을 쓰게 됐다.

Yarn이 뭐야?

yarn 은 페이스북이 만든 javascirpt 의 package manager 이다.

npm vs yarn

npm은 yarn에 비해 성능이 떨어지고 보안 이슈, 의존 패키지의 버저닝 이슈 등이 있어 yarn을 자주 쓴다.

버저닝 이슈는 예를 들면 로컬에서 특정 패키지의 버전이 1.0.0인데 배포를 위한 빌드 서버에서는 시점에 따라 1.0.3으로 업데이트 될 수도 있음을 뜻한다. 속도 차이 참고 링크

⬆ 위로가기

yarn.lock

yarn으로 프로젝트를 하다보면 루트 디렉토리에 yarn.lock이란 파일이 생기는데(npm인 경우 package-lock.json) 매번 이게 무엇을 하는 파일인지 궁금했다. 그래서 이번 기회에 간단하게 무엇인지 알아봤다.

예를 들어 프로젝트를 개발자 두명이서 진행하는데 서로 react 버전이 다르다면

A: 16.13.0 B: 16.13.1

위와 같이 설치 버전이 다를수 있다. 만약 이렇게 된다면 A는 제대로 작동하지만 B는 작동이 안되는 경우가 발생할 수 있다. 이러한 상황은 패키지 매니저에서 패키지 잠금이 지원되지 않던 시절에 문제가 됐으며 이것을 해결하기 위한 패키지 잠금이 나타났다.

package-lock.json이나 yarn.lock과 같은 패키지 잠금 파일에는 프로젝트에 패키지에 최초로 추가될 당시에 정확히 어떤 버전이 설치가 되었는지 기록한다.

⬆ 위로가기

CLI 옵션

앞으로 나올 Yarn Command와 CLI option들은 전체를 다루지 않았으며 내가 지금까지 한번은 봤던 것들로만 이루어져 있다. Yarn-CLI 공식 문서를 참고했다.

각 command별로 option을 정리하겠다.

기본적인 내용

Default Command

yarn 뒤에 다른 명령어 없이 실행하게되면 기본적으로 yarn install이 실행된다.

User-defined scripts

yarn
4단계: 잘 작동하는지 확인

index.html파일을 생성하고 잘 작동하는지 확인하자. 크롬에서 html파일을 열고 크롬개발자 도구를 켜 네트워크탭에 css, js파일들이 정상적으로 불러와지는지 확인하자. index.html
    
        
        
        
    
아래와 같이 불러와졌다면 성공이다.

⬆ 위로가기

사용법

공식 사이트에 들어가서 메뉴를 보면 정말 다양한 것들이 나온다. 여기서 자신이 필요한 엘리먼트 등을 찾아 사용하면 되는것이다. 나는 이것들중 재밌어 보이는 것들 위주로 실습해 보겠다. 아래 사진과 같이 코드 보기를 누르면 예시가 나오는데 복사해 적용하면 된다.

⬆ 위로가기

Form

form.html파일을 생성하고 아래 코드를 작성하자.
    
        
        
        
        
    
    
        Form
        
            
              First Name
              
            
            
              Last Name
              
            
            
              
                
                I agree to the Terms and Conditions
              
            
            
          
    
사용할때 ui form 안에 field들로 이루어진걸 확인할수 있다. form태그에 클래스가 ui와 form이 있는데 나는 왜 두개나 사용했나 궁금해서 클래스 이름을 ui만 남기고, 또 form만 남겨서 결과를 확인했는데 엉망으로 나왔다. 정상적으로 보이기 위해서는 클래스에 ui form을 지정해줘야 하는걸 알수 있다. 지금 이 html파일만 보면 checkBox가 작동하지 않는다. 이를 해결하기 위해선 아래와 같이 자바스크립트 코드를 추가해줘야 한다. 이와 같은 사용법은 페이지 하단쯤에 사진과 같이 있다. form.html body태그 끝나기 전에 삽입
결과 사진이다.

⬆ 위로가기

DropDown - Multiple Search Selection

진짜 너무 신기하고 재밌는게 많은데 다 소개하기엔 너무 루즈해지므로 마지막으로 이것만 소개하고 글을 마치겠다. dropDown.html파일을 생성하고 다음과 같이 작성하자.
    
        
        
        
        
    
    
        dropDown
        
        
    
하단에 있는 javascript문을 넣어주지 않으면 아래 사진처럼 UI가 이상해진다. 나는 그래서 처음에 코드가 잘못된줄 알고 해맸다. 결국엔 이 방법을 알아서 적용했다.

결과 사진이다.

정상적으로 드롭다운과 검색, 선택, 삭제 모두 가능한걸 볼 수 있다.

⬆ 위로가기

느낀점 및 나의 생각

나는 이번 계기를 통해 처음 css 프레임워크를 사용해 봤다. 예전에 부트스트랩을 공부할까 고민도 했지만 그땐 어려워 보여서 포기했다. 이번에 Semantic UI를 사용하고 정리해 보았는데 정말 간편한 것 같다. 많이 쓰이는 사이드바나 드롭다운에 이렇게 쉽게 구현이 가능하다니 놀라웠다. 또, 사용방법이 자세히 또 쉽게 설명이 되어있어 사용자들이 배우기에 쉬울것 같다. 공식 문서를 읽다보니 React에도 이걸 쓸수 있는것 같다. 오늘 정리한 방식과는 다를것 같긴 하지만 나중에 도전해 볼것이다.

_uchanlee.log

네 만들어 드렸습니다~

TL;DR

사건의 발단

구글링 👨‍💻

전개

프로젝트 세팅

React 17

위기

로직 어떻게 하지...?

절정

npm gh-page

결말

버그?

뜨거운 반응 🕺🕺🕺

글을 마치며

문(Statement)과 표현식(Expression)

문(Statement)과 표현식(Expression)

문(Statement)

표현식(Expression)

문의 완료 값

문의 완료 값을 확인하는 방법은 없을까?

let c = 10; 같은 문은 완료 값이 뭘까?

콘솔 창이 반환해준 완료 값은 개발자가 내부 프로그램에서 사용할 수 있는 값은 아니다. 그럼 완료 값을 사용할 방법은 없을까?

하지만 다음과 같은 코드가 작동하지 않는 건 분명히 문제가 있다.

ES7 명세에는 'do 표현식'이 제안된 상태다.

표현식의 부수 효과

출처

리액트 네이티브 react-native start 에러

Github 프로필에 나의 Daliy 코딩 시간을 적용해보자!

Github 프로필에 Daliy 코딩시간 적용하기

적용해보자!✅

Vue.js(ts) + webpack으로 Hello, world! 찍기

코드 작성

프로젝트 생성

라이브러리 설치

webpack 설정

main.ts

App.vue

HelloWorld.vue

타입 지정

index.html

scripts 추가

Hello, world! 확인

마무리

mongoose 2단 SubDocument 사용법(with koa)

정의

MongoDB 특징 및 서브스키마

1단 subschema 구현

스키마 생성

모델 생성

2단 서브스키마 구현

스키마 생성

모델 생성2

마무리

koa-body를 이용한 파일(이미지, 동영상) 처리(Using with koa-router)

들어가기 전

koa-body란?

사용법

느낀점

Yarn CLI option 알아보기

목차

Yarn이 뭐야?

npm vs yarn

yarn.lock

CLI 옵션

기본적인 내용

Default Command

User-defined scripts

4단계: 잘 작동하는지 확인

사용법

Form

Form

결과 사진이다.

DropDown - Multiple Search Selection

dropDown

결과 사진이다.

느낀점 및 나의 생각

`let c = 10;` 같은 문은 완료 값이 뭘까?