1. 모바일 우선주의

• 대부분의 기업들은 모바일 경험을 우선으로 설계한 후에 반응형 디자인으로 디스플레이 사이즈에 맞게 확장되는 디자인을 가지고 있다.
• 디자인 물론, 기능까지 나눠서 만들 수 있다.

2. 모바일 디자인의 어려운 점

1. 작은 화면 크기
   • 메뉴, 정보 등을 길게 보여줄 공간이 없다.
   • 부가 요소를 다 없애고, 중요한 부분만 남겨두고 나머지는 숨겨놓자.
2. 다양한 화면 너비
   • 모바일 기기들 마다도 다 사이즈가 다르다.
   • 키보드가 달려있다거나, 요즘에는 옆으로 열리거나 아예 반으로 접혀 버리는 화면도 있다.
   • 각 기기마다 모바일 버전을 다르게 만들 수 도 있고, 최대한 화면의 너비를 효율적으로 사용하는 것이 포인트가 된다.
3. 터치 스크린
   • 터치 스크린의 사이즈와 키페드의 사이즈도 생각을 해서 디자인해야 한다.
   • 그리고 링크의 사이즈도 충분히 커야한다. (안드로이드 9mm, IOS 약 8mm) 그리고 사이 간격을 조금 줘서 손가락으로도 클릭이 쉽도록 설계한다.
4. 문자 입력하기
   • 키패드의 사용을 줄일 수 있도록 하자.
   • 자동완성등의 기능을 이용할 수 있다.
5. 물리적 환경의 제약
   • 휴대폰은 꼭 지정된 장소에서 사용하지 않는다. 그래서 사용자의 물리적 환경을 생각해서 만들어야 한다.
   • 예를 들어 사용자의 환경에 따라 달라지는 빛의 정도가 달라질 수 있으므로 가독성을 더 생각한 텍스트를 만들거나, 흔들리는 버스 등의 장소에서 사용할 경우를 대비해 '팻 핑거'를 이용해 실수를 바로잡을 수 있도록 한다.
6. 사회적 영향과 집중력의 한계
   • 모바일기기는 유저가 PC 상황보다 집중을 덜 하게 된다. 다른 일을 하고 있으면서 휴대폰을 사용하는 경우가 많기 때문이다.
   • 그러므로, 사용자가 산만하다는 것을 가정하고 디자인하는 것이 도움이 된다.
   • 태스크 순서를 쉽고 빠르고, 재진입이 쉽도록 만드는 것이 포인트이다.

3. 모바일 디자인에 접근하는 방법

1. 유저의 니즈를 파악하자
   
   • 유저들의 모바일 기기를 어떨경우에 이용할까?
   • 잠깐 짬이 났을때, 빠르게 정보를 검색해야 할 때, 다른 사람들과 연결할 때 등등이다.
   • 이런 상황을 가정하고 디자인 하는 것이 중요하다. 그래서 화면을 탭 하는 횟수를 최소화하고, 가로로 콘텐츠를 배치 하기보다 세로로 배치하여 정렬하기 등을 할 수 있다.
2. 모바일 기기의 하드웨어 이용하기
   • 모바일 기기는 손쉽게 카메라, 위치 인식, 음성인식, 진동등의 기능을 사용할 수 있다.
   • 서비스의 이용에 적절하게 이용하여 더 편하게 서비스를 이용할 수 있게 만든다.

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를 입력해서 업데이트를 다시 진행한다.
• 이제 다시 터미널을 종료했다가 다시 켜 보면 최신으로 업데이트되어 있기 때문에 업데이트할 거냐고 묻지 않는다.