신입 개발자 첫 출근 후기

회사는 맥북을 사용한다.
맥북은 사용해본 적이 없어서 프로그램 만질 때나 단축키가 윈도우랑 달라서 꽤나 어려움이 있었지만, 그나마 아이폰 유저라 다행이었던 거 같다.

오늘 하루가 굉장히 정신 없이 9시간이 뚝딱 지나갔기 때문에 잘 기록해놓아야 앞으로의 나날을 체계적으로 공부하며 정리해나갈 수 있을 거 같다.
내가 사용하는 맥북은 최신장비였고, 오늘 내가 맥북으로 작업한 업무에 대한 리스트를 작성해보려 한다.

1. 맥북 환경설정

• Mac OS 설치

• 키보드 교체(한영 키가 안 돼서.)

• Mac에서 마우스 휠 위아래 반대로 설정하기
  마우스 휠을 아래로 내리면 페이지가 아래로 스크롤 돼야 하는데 맥북이라 그런지 휠을 아래로 스크롤 하면 페이지가 위로 올라간다.(넘 불편했고... 사수분께서 변경해주셨다.)

• 듀얼 모니터 설정하기
  사수분께서 맥 설정에서 왼쪽 모니터, 오른쪽 모니터, 노트북 모니터 이렇게 세개로 맞춰서 지정해주셨다.
  
  

2. 회사 계정 연동

• 구글 크롬 설치
• 구글 회사 이메일 계정 로그인
• 구글챗 연동
• 프로필 사진 설정
• 필요한 프로그램 설치

통신사 요금을 지원해주는데 사수분께서 이건 아직 급한 건 아니라고 다음 달에 하면 된다는 식으로 얘기를 하셨다. 이건 다음에 생각날 때 자세하게 여쭤봐야겠다.

사수분들이 다들 옆에서 많이 신경 써주셨는데, 다들 친절하시고 좋은 분들인 거 같다.

3. 개발 환경 설정 및 프로젝트 생성

위의 과정을 다 거치고 나서 이제 과제를 할 때가 되었다.
나는 Vue3 중심으로 공부를 했는데 회사는 Vue2로 개발을 한다.

• 크롬 확장자 Vue.js devtools 설치(이건 메뉴얼엔 없지만 필요할 거 같아서 설치)
• Vscode 설치
• 플러그인 설치
  • Vetur
  • Vue 2 Snippets
  • Vue peek
  • Eslint
  • Prettier
• node.js와 npm 설치
• 파이썬 설치
• Vue 설치
  • npm install vue@^2
• Vue의 기본 개발 환경을 설정해주는 Vue CLI 설치
  • sudo npm install -g @vue/cli c
  • sudo npm i -g @vue/cli-init
• 프로젝트 생성
  • vue create 프로젝트명

여기서 에러가 떴다.
맥북 사용자 폴더로 이동한 상태에서 vue 프로젝트를 생성하려니 계속 에러가 났는데 이 에러는 회사 가서 정리해야겠다.

결국 사수분께 도움을 요청해서 문제를 해결하였고, 원인은 사용자 폴더에다 새로운 프로젝트를 생성한 게 문제였다. 사용자 폴더에다 project 폴더를 생성해서 그 안에다 여러 프로젝트를 새롭게 생성하는 것이 옳은 방법이었다.

<요약: 에러-원인-해결>

❌에러: Vue 프로젝트가 생성이 안 됨
❓원인: 사용자 폴더 안에다 Vue 프로젝트를 생성했기 때문임
⭐️해결: 사용자 폴더에다 새로운 폴더를 생성해서 그 안에다 Vue 프로젝트를 새롭게 생성

근데 vue 프로젝트가 아니라 Quarsar로 설치해야 된다. 그래서 다시 Quarsar 프로젝트를 생성했다.
그러니까 위의 단계에서 vue create 프로젝트명 이 단계만 건너뛰자.

Quasar Framework는 단일 코드베이스로 앱을 구축하기 위한 오픈 소스 Vue.js 기반 프레임워크이다.

Quasar는 생소하지만 곧 익숙해지겠지...

• quasar v1 설치

  • sudo npm install -g @quasar/cli@1

• 프로젝트 설치

  • npm init quasar
    프로젝트를 설치할 때 스타일은 stylus로 선택해서 설치하였고,(처음에 SCSS로 설치했다가 이게 아니라는 얘기를 듣고 다시 재설치) 프로젝트 생성 후에 pug를 npm install을 해주자.
  • npm install --dev pug pug-plain-loader
    • pug 설치 후 quasar.config file 환경설정 작업 필요(아래 코드 참조)

• 프로젝트 실행

  • quasar dev

// quasar.config file 환경설정 작업
chainWebpack(chain) {
  chain.module
    .rule('pug')
    .test(/\.pug$/)
    .use('pug-plain-loader')
    .loader('pug-plain-loader');

  chain
    .plugin('eslint-webpack-plugin')
    .use(ESLintPlugin, [{ extensions: ['js', 'vue'] }]);
},

여기서 pug는 또 처음 접해보는 것인데...

pug는 자바스크립트를 사용하여 HTML을 렌더링할 수 있게 하는 템플릿 엔진 중 하나이다.
기존 html 문법과 다르고 자바스크립트 문법이 들어가기도 한다.

정의 말고 pug의 예를 들어보겠다.

기본 HTML

<div class="box">
  <span>이름</span>
  <span>나이</span>
</div>

pug 적용 HTML

div.box
  span 이름
  span 나이

열고 닫기를 무조건 해줘야 되는 html을 이렇게 들여쓰기로만 해주는 것이 꼭 파이썬 같다... 내가 이래서 파이썬을 안 좋아하는데...이것도 곧 익숙해지겠지 뭐.ㅜㅜ

4. TodoList App 과제

quarsar 프로젝트를 생성을 마치고 나서야 점심 이후부터 과제를 시작하게 되었다.
새롭게 접한 quarsar 프로젝트도 그렇고 pug 문법도 그렇고 stylus도 그렇고 익숙해지는 시간이 필요할 거 같다...!! 게다가 React하다가 Vue를 하니 편하지가 않다. 열심히 공부하자.