.gitignore 파일이 안먹히는 경우

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 파일을 생성해주는 유용한 사이트다.

이 블로그의 인기 게시물

Nodemailer를 이용해서 mail 전송

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시 두 번 다운로드 하는 문제

스태틱 리소스에 대해서 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를 추가해 준다.

자세한 내용 보기

CSS autoprefixer 사용시 스타일 제거 될 경우

Autoprefixer 는 CSS 사용 시 최신 프로퍼티에 vendor prefix를 붙여주는 역할을 한다. ::-webkit-input-placeholder { color : gray ; } ::-moz-placeholder { color : gray ; } :-ms-input-placeholder { color : gray ; } ::-ms-input-placeholder { color : gray ; } ::placeholder { color : gray ; } 그런데 사용중인 Autoprefixer 버전에서 지원하지 않는 프로퍼티를 제거해버리는 경우가 있다. 실제로 Autoprefixer 6.7.7 버전에서는 backdrop-filter 라는 프로퍼티를 사용하게 될 경우 그대로 감쪽같이 지워지는 현상이 있다. 이런 현상을 방지하기 위해 autoprefixer 기능을 잠시 꺼두면 된다. .some-selector { /* autoprefixer: off */ backdrop-filter: blur(2px); /* autoprefixer: on */ } 물론 Autoprefixer 최신 버전을 사용하면 왠만한 경우 해결이 된다. 혹시나 버전을 올리기 힘든 상황인 경우 위 방식을 사용하고, 그렇지 않다면 최신 버전을 사용하는 것을 추천한다.

자세한 내용 보기

낙타의 블로그

이 블로그 검색