낙타의 블로그

gitignore git을 사용해서 소스코드를 관리하는 경우 .gitignore 파일을 이용하면 git 저장소에 일부 디렉토리나 파일을 제외할 수 있다. 프로젝트 루트 디렉토리에 .gitignore 파일을 만들고 제외하고 싶은 디렉토리나 파일명을 적어주면 끝. node_modules out .webpack .vscode coverage 이렇게 하면 해당 디렉토리과 파일을 변경하더라도 git에서 무시하기 때문에 아무런 반응이 없게 된다. 그런데 간혹 .gitignore에 새로운 디렉토리나 파일을 추가해도 계속해서 추적되는 경우가 있다. 이 때는 git cache를 삭제하면 해결된다. git rm -r --cached . git add . git commit -m "Fix untracked ignore files" 참고 gitignore.io 자신이 사용중인 환경에 따라 자동으로 gitignore 파일을 생성해주는 유용한 사이트다.

Git Repository의 모든 작업 내역을 통째로 옮기기 1. Repository 이사 준비 git clone --mirror {git Repository 주소} mirror 옵션뒤에 Git Repository 주소를 넣어서 해당 Git이 미러링 될 수 있도록 한다. Tip.  기존 레파지토리에 권한이 없어져서 git 레파지토리 주소를 쓸 수 없는 경우가 있다. 이럴땐 로컬에 있는 .git 디렉토리를 넣어주면 된다. Repository 루트 디렉토리에는 .git 이라는 디렉토리가 존재한다. 이걸 --mirror 뒤에 넣어주면 된다. git clone --mirror ./.git 이렇게 하면 로컬 Repository를 그대로 옮길 수 있다. 2. 새 Repository 주소 연결 기존에 연결된 Repository 주소를 새로 이사갈 Repository 주소로 바꿔준다. git remote set-url origin {새로 이사갈 Repository 주소} 이렇게 하면 현재 Repository는 새로 이사갈 Repository의 주소와 연결된다. 3. 새 Repository로 올리기 git push --mirror 짠! 이렇게 하면 모든 내용이 새 Repository로 올라간다.

   최근 SPA(Single Page Application)로 구현하는 웹 서비스가 많아졌다. SPA로 구현한 서비스는 한 화면 내의 여러 컴포넌트들에서 동일한 데이터로 동기화해야 하는 이슈가 생겼다. SPA로 서비스를 구현하면서 생긴 데이터의 상태 이슈를 관리하기 위한 도구가 State Management 도구다. MobX ? MobX 는 공식 홈페이지에 들어가면 아주 심플하게 설명이 나와있다. Simple, scalable state management 쉽게 말해서 State Management 도구다. MobX의 큰 특징은 Observable을 이용해 변수의 변화를 추적할 수 있도록 만든다. 그리고 이 변수에 변화가 생기면 미리 정의한 액션을 트리거한다. Observable, Reactions observable은 위에도 설명했지만 변수를 state로 승격한다고 생각하면 된다. Mobx는 state 변수의 값의 변화를 Reactions에서 감지해서 처리할 수 있다. Reactions autorun reaction when 각 reactions의 특징을 예제와 함께 살펴보자. Autorun autorun은 하나의 함수를 파라미터로 받는다. 함수 내부에서 참조하는 observable 변수에 변화가 생기면 파라미터로 넘긴 함수를 실행한다. User 클래스의 name 앞에 observable 데코레이터를 붙였다. 이렇게 하면 name에 변화가 있을 때 이를 추적할 수 있게 된다. 10번 줄을 보면 autorun 내부에서 user.name을 통해 observable 변수인 name에 접근하고 있다. 그리고 13번 줄에서 name에 "Caeml"이라는 값을 할당한다. name에 변화가 생기면서 autorun으로 넘긴 함수가 실행된다. console에는 결과가 Hello, Camel이라고 찍히게 된다. 그런데 실제 결과에 약간의 문제가 있다. ...

Nodemailer Nodemailer는 이름에서 알 수 있듯이 node 기반의 메일을 쉽게 보낼 수 있는 라이브러리다. 설치 yarn을 이용하는 경우 yarn add nodemailer npm을 이용하는 경우 npm install --save nodemailer 메일을 보내보자 /* mail.js */ var nodemailer = require('nodemailer'); var smtpConfig = { host: ${SMTP Server 주소}, port: ${SMTP SErver 포트}, secure: true, // use SSL auth: { user: ${SMTP ID}, pass: ${SMTP 비밀번호} } }; var mailOptions = { from: ${받는사람 메일 주소}, to: ${보내는사람 메일 주소}, subject: ${제목}, text: ${본문 내용} }; var smtpTransport = nodemailer.createTransport(smtpConfig); smtpTransport.sendMail(mailOptions, function (error/*, response*/) { if (error) { console.log(error); } else { console.log('Complete'); } smtpTransport.close(); }); 실행 node mail.js 위 코드에 ${} 형태로 된 부분만 각자 입맛에 맛게 채워주면 끝이다. 파일을 첨부해보자 메일을 보낼 때 파일을 첨부하고 싶은 경우 mailOptions에 attachments 값을 넣어 주면 끝이다. node에서 파일을 읽기 위해서는 fs를 사용한다. /* mail.js */...

스태틱 리소스에 대해서 preload 를 사용하면 초기 로딩 속도를 최적화시킬 수 있다. css와 font 파일들은 렌더링 블럭을 발생시키기 때문에 이 파일들을 모두 다운받기 전까지는 렌더링을 하지 않게 된다. <link rel="preload" href="some-font.woff2" as="font" type="font/woff2> 기본적으로 위와 같은 형식으로 쓰면 페이지 진입과 동시에 font를 로딩하게 된다. 그런데 네트워크 탭을 살펴보면 같은 폰트를 두 번 다운로드 받게 되는것을 볼 수 있다. <link rel="preload" href="some-font.woff2" as="font" type="font/woff2 crossorigin> 이를 해결하기 위해 아래와 같이 crossorigin attribute를 추가해 준다.