1. PostCSS?

• JavaScript를 이용해 CSS를 편하게 작성할 수 있게 도와주는 플러그인을 사용할 수 있게 하는 플러그인이다.
• 혼자서는 아무것도 못 하고 자바스크립트와 함께 사용할 수 있다.
• 우리가 creat-react-app 하면 함께 설치된다.

2. 어떤 기능들이 있나요?

• 약 270개가 넘는 플러그인들이 있다. 그중 간단한 것을 살펴보면
  1. autoprefixer : -webkit과 같은 prefix를 생략해준다.
  2. postcss-for : for 문을 css에서 쓸 수 있게 된다.
  3. postcss-color-function : 색의 밝기를 조절 할 수 있다.
  4. postcss-nesting : 들여쓰기 가능!

3. 어떻게 사용하나요?

1. 만약 인스톨 되지 않았다면?
2. npm install postcss poscss-loader --save-dev
3. 인스톨 후 루트 root에 'postcss.config.js' 파일을 만든다.

module.exports = (ctx) => ({
 parser: 'postcss-scss', // 만약, scss등의 파싱이 필요한 경우 설정한다.
 plugins: [
  require('postcss-import')({
    path: ['app/assets/']
  }),
// 다음 필요한 플러그인들을 적는다.
 ]
})

// 플러그인들은 실행순서가 중요하다. 위에서 부터 아래로 실행하기 때문이다.
// 그래서 충돌 없이 실행시키기 위해서는 PostCSS의 깃헙 레포로 가서
// Readme를 참고하여 순서를 지켜줘야 한다.

1. 문제의 발단

포트폴리오 배포를 깃허브로 하기로 하였다. 포트폴리오는 정적 사이트이기 때문에 간단하게 배포할 수 있기 때문에 바로 적용해 보도록 한다. 정말 못 하는 게 없는 깃허브다.

2. 어떻게 하나요?

1. 레포를 만든다.
   • 아래의 그림처럼, 이름을 자신의 '깃허브 아이디.github.io'로 만들면 이 것이 도메인이 되어 사용이 가능하다.
   • 나는 이미 포트폴리오 사이트를 만들어 사용중이므로, 중복된 이름이라고 뜬다.
   • 퍼블릭으로 만들자.
   • Readme를 추가해주자.
2. 작업을 한다.
   • 초기 세팅은 create-react-app으로 간단하게 하고 작업하는 것이 편하다.
3. 작업이 끝나면 'gh-pages'를 install 한다. 
   • npm install gh-pages --save-dev
4. package.json파일을 수정한다.

   • "name": "[Github 아이디].github.io",
         "version": "0.1.0",
         "private": true,
         "homepage": "https://[Github 아이디].github.io",
         
         // homepage 부분을 추가한다. 주소는 레포를 만들때 설정했던 그대로 한다.

   •     "scripts": {
             "start": "react-scripts start",
             "build": "react-scripts build",
             "test": "react-scripts test",
             "eject": "react-scripts eject",
             "predeploy": "npm run build",
             "deploy": "gh-pages -d build"
         },
         
         // predeploy와 deploy 부분을 추가한다.

5. npm run deploy로 배포한다.
6. 배포한 깃허브 레포로 들어가서 Settings -> Pages 탭에 가보면 

이렇게 되어 있어야 배포가 완료 되었다는 말이다. 아직 체크표시가 아니라면 세로 고침을 하면서 기다려보자. 시간이 조금 걸릴 수 있다.

1. 사건의 발단

터미널을 열면 항상 oh-my-zsh 버전을 확인한다. 그래서 업데이트를 하려고 하는데 언젠가부터 oh-my-zsh 업데이트가 똑바로 안되고 있다. 심지어 에러 메시지도 없다.

• Try again later?

이게 전부 였다. 그래서 구글링 한 결과로 답을 찾을 수 있었다.

2. 어떻게 하나요?

• 터미널을 연다.
• cd ~/.oh-my-zsh 을 입력. oh-my-zsh 디렉터리로 이동하자.
• git status로 지금 내가 가지고 있는 oh-my-zsh가 master 브렌치보다 앞서있는지를 확인한다. 병합되지 않은 파일들이 있다고 나올 것이다.
• git stash 를 입력해서 git에 저장을 해준다.
• upgrade_oh-my-zsh를 입력해서 업데이트를 다시 진행한다.
• 이제 다시 터미널을 종료했다가 다시 켜 보면 최신으로 업데이트되어 있기 때문에 업데이트할 거냐고 묻지 않는다.

1. 문제의 발단

• 모든 프로젝트를 진행하면서 어떤 폰트를 사용할까? 에 대한 고민을 정말 오랜 시간 많이 했다.
• 느낌으로 결정하는 폰트보다, 상황에 맞는 가독성 좋은 그리고 예쁘기까지 한 폰트를 알아보자.

2. 세리프(Serif)

• 글자의 끝에 장식선과 곡선이 존제하는 체. 빽빽한 글을 읽을 때 눈의 피로를 줄여줘 가독성에 용의 하다.

3. 산세리프(Sans serif)

• 세리프와 달리 끝에 장식선이 없다. 깔끔한 디자인과 크기가 작아도 가독성이 좋아서 인터페이스 등에 사용하기 용의 하다.

4. 디스플레이(Display)

• 폰트 사이즈가 클 때 유리하다. 그래서 제목이나 로고 등의 용도로 사용할 때 용의 하다.
• 하지만 가독성이 낮아 텍스트가 많거나, 사이즈가 작으면 사용해서는 안된다.

5. 고정폭(Monospace)

• 글자의 실제 크기와 상관없이, 모든 글자가 동일한 가로길이를 보여준다.
• 주로, 텍스트를 자세하게 표현할 수 없는 경우 사용한다.

6. 세부적인 조절에 필요한 용어

• 크기 : 일명 pt. 일반적으로는 css에서 font-size로 조절하는 부분이다. 대부분 10px이하는 가독성이 너무 떨어져서 추천하지 않고, 12px정도가 정석이다.
• 줄 간격 : css에서 line-height로 조절하는 부분이다. 글자 간의 세로 길이를 뜻하며, 어느 정도 떨어져서 자연스럽게 텍스트가 읽히도록 한다. 너무 많이 띄어놓으면 자연스럽게 읽히지가 않고 강조하는 느낌이나, 아예 다른 섹션의 글처럼 느껴질 수 있다.
• 자간(tracking)과 커닝(karning) : 자간은 css에서 letter-spacing으로 조절하는 부분이다. 글자 하나하나 간의 사이 간격을 말한다. 커닝은 css에서 font-kerning으로 조절하는 부분이다. 대부분의 브라우저는 auto로 설정되어 있고, 사용하거나(normal), 사용하지 않는(none)을 속성으로 가지고 있다. 글자 내부의 공백(자간보다 좁은 글자 하나에 해당하는 빈 공간)을 조절한다.
• 폰트 페어링(font pairing) : 한 가지 디자인에서 폰트를 여러 가지 조합한다. 너무 다른 폰트를 같이 사용하면 어색하다.
  • Tip: 같은 폰트 중에서 굵기나 볼드, 이탤릭체 등을 사용해서 다른 느낌을 주어서 같은 폰트이지만 미묘하게 다른 느낌으로 사용할 수 도 있다.
  • Tip: 형태가 비슷한 폰트는 같이 사용하는 것을 피하는 것이 좋다. 세리프와 산세리프를 사용하면 비슷하지만 다른 느낌으로 사용할 수 있다.
• 가독성 : 얼마나 잘 읽히는가에 관한 것이다. UX에서 가장 중요한 요소이다.
  • Tip: 컴퓨터 화면에서는 작은 폰트로 텍스트를 표시할 경우가 많은데 이때, 산세리프가 유리하다.
  • Tip: 이탤릭체나 필기체 등을 너무 남발하면 가독성은 최악이다. 적당히 필요한 곳에만 사용한다.
  • Tip: 가끔 구분이 힘든 글자들이 섞여있는 폰트들이 존재한다. (ex: e, c, d, o 등이 주로 헷갈리게 표현될 수 있다) 이런 부분까지 확인하고 사용하는 것이 옳다.
  • Tip: 대문자는 제목에서 정도만 사용하자. 읽기가 쉽지 않다.

사실 이부분은 디자인에 가깝다. 하지만 개발자가 알아서 나쁘지 않은 부분이다. 가독성 부분은 UX에서도 매우 중요한 부분이며, 여러 가지 폰트를 다양하게 적용시켜 보면서 최선의 선택을 하는 것은 디자이너와 협업하기 전에도 필요하기 때문이다. 아래에는 참고하거나 폰트를 얻을 수 있는 사이트를 적어 놓는다. 물론, 가장 중요한 '저작권' 문제가 있다. 대부분 폰트를 다운 받을때 확인 할 수 있도록 적혀있다.
꼭 사용이 가능한 것인지 확인하고 사용하자!