웹과 앱(하이브리드 앱), vue 공부

웹과 앱(하이브리드 앱)

IT 서비스 개발에는 대표적으로 4가지 방식이 있다.(우왕 나도 서비스 개발한다아아앙)

모바일 웹, 웹 앱, 하이브리드 앱, 네이티브 앱

 

내가 곧 진행해야 할 프로젝트는 하이브리드 앱 개발이다.(아직 정확한 목표는 모르겠다.)

그래서 4가지 방식에 대한 기본적인 내용을 알아보았다.

모바일 웹과 웹 앱은 웹을 브라우저에서 보는 것이다. 이로 인해 어플을 다운받거나 할 수는 없다. 차이점은 실행 방법에 대한 차이로 구분한다.

모바일 웹은 풀 브라우저 방식으로 화면 일부분이 변경될 때 화면 전체 내용을 서버에서 새로 받아오는 방식이다.

그렇기 때문에 페이지 리로드 시 속도가 느리다.

웹 앱은 단일 페이지 방식(SPA, Single Page Application)이다. 브라우저에 최초 한 번 페이지 전체를 받아오고, 화면 일부분이 변경 및 요청될 때 해당 부분만 Ajax를 통해 데이터를 바인딩한다.

 

하이브리드앱은 웹 기반으로 운영체제에 따른 패키징을 달리하여 ios와 안드로이드에서 실행하는 방법이다. 네이티브는 내가 알고 있던 스위프트, 안드로이드로 개발하는 것이다.

https://brunch.co.kr/@rlatjrwn9086/61

모바일웹 / 웹앱 / 하이브리드앱 / 네이티브앱  

위에서 더 자세하게 설명한다.

 

잠깐 git 기초에 대해 글을 읽었다. 세세하게 다 보지는 않았고, 필요할 때 한 번씩 보겠다.

 

https://git-scm.com/book/ko/v2/%EC%8B%9C%EC%9E%91%ED%95%98%EA%B8%B0-Git-%EA%B8%B0%EC%B4%88

Git - Git 기초

 

 

 

vue 공부

오늘 오후에는 vue.js 강의를 들었다. 굉장히 세세하게 설명하는 편이기도 하고, 초기 세팅부터 설명을 해서 다 보려면 좀 걸릴 거 같다..

 

• 현대 웹 서비스 개발 절차

요구사항 -> 서비스 기획 -> ui, ux 상세 설계 -> gui 디자인 -> 퍼블리싱 -> 백엔드 api 개발 -> 프론트엔드 개발 -> QA

 

오늘은 node.js 와 nvm, vue.js 등 설치 후 예제 플젝을 따라해보았다.

현재 node.js lts 버전이 16.17.1인데 10.16.3으로 맞춰주었다.

nvm이라는 node 버전별 설치 후 관리해주는 게 있는데 이것을 설치해주었다.(대신 node.js 설치 전에 설치해야 꼬이지 않는다.

https://devbirdfeet.tistory.com/67?category=854218

Vue - (맥os) NVM설치하기

zsh에서 nvm 명령어를 찾을 수 없다고 해서 해결방법을 찾았다.(내가 아마 강의를 보고 zsh에서 실행하는데 bashrc 파일만 설정해줘서 제대로 설정이 안된 것 같았다.)

https://velog.io/@palette/zsh-command-not-found-nvm-%EC%98%A4%EB%A5%98%ED%95%B4%EA%B2%B0%EB%B2%95 

zsh: command not found: nvm 오류해결법

 

이후 클론한 프로젝트의 디펜던시를 npm i로 설치하였다.

npm run dev 명령어를 실행하면 package.json에 정의되어있는 dev 명령어가 실행되는 것이다.

 

localhost:3000/api/docs/로 접근하게 되면 swagger ui로 이동하게 해놧는데 이는 app.js와 api-doc.js를 참고하면 어떤 식으로 호출 시 응답을 오게 설정했는지 볼 수 있다.(강의 예제 소스 clone)

 

데이터베이스를 연결해보겠다.

몽고 cloud를 사용할 것인데 https://www.mongodb.com/ko-kr/cloud 에서 설정하면 된다. 클러스터를 생성하고 접근을 특정 아이피만 접근할 수 있도록 설정했었는데 다른 곳에서도 접근하고자 network access를 anywhere로 변경해주었다. 하지만 이는 학습용이라 그런 것이다.

이후 swagger를 이용해 db 연동 테스트 가능하다.

 

여기서 잠깐!  swagger 작성은 프론트엔드와 백엔드의 소통 방법이기도 하니 아주 중요~

 

node 10.16.3

vue 4.1.1 

버전에 맞춰 설치해주었다.

 

• dedicated config files VS package.json
  • dedicated config files
    • 프로젝트를 구성하는 기능들의 설정 각각의 설정파일로 구성
    • 선택하면 .browserslistrc, .eslintrc.js, babel.config.js, jest.config.js 설정파일이 생성된다.
  • package.json
    • 프로젝트를 구성하는 기능들의 설정을 하나의 파일로 구성

dedicated config files를 선택하면 각각의 기능들의 설정을 설정파일로 따로 볼 수 있다.(좀 더 보기도 편하고, 설정도 편함)

Eslint

eslint란 자바스크립트에서 에러가 날 가능성을 찾아서 알려주는 것

 

eslint 설정을 했는데 잘못된 선언에도 빨간 줄이 뜨지 않아서 해결 방법을 찾았다.

F1 -> settings 검색해 setting json 파일을 찾는다. 이후 파일을 열어서 수정한다.

Eslint 로 인한 에러 발생 시 화면에 에러가 Overlay 되는데 이는 Vue.config.js 에서 eslint overlay false 를 통해 없앨 수 있다. 다만 이는 에러를 없애는 것이 아니라 오버레이를 없앤 것이다.

 

eslint 설정 파일에 rules를 보면 production일 때 콘솔을 찍으면 에러가 나도록 해놨다.(배포용이므로)

 

vue는 hot reload로 소스를 바꾸고 저장만 하면 자동으로 반영되어 reload 되지만, 설정파일들은 설정을 다시 적용해야 하므로 껐다가 켜야 한다.

 

Prettier

코드 포멧터이다.

프리티어의 설정파일을 따로 만들어 직접 설정을 해줄 수도 있으나 eslint에서 prettier를 설정해줘야 한다.(충돌 방지, eslint 우선)

 rules: {
    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
    "prettier/prettier": ['error', {
      printWidth: 80
    }]
  },

 

위 룰즈 안에 프리티어 설정 추가

 

eslint와 prettier에 대한 자세한 설명은 아래 사이트를 참고한다.

https://joshua1988.github.io/web-development/vuejs/boost-productivity/

Vue.js 개발 생산성을 높여주는 도구 3가지

 

이렇게 eslint와 prettier 설정을 해줌으로써 코드의 규칙을 정하고 이를 팀원들과 소스를 공유해 같은 코드 규칙으로 개발할 수 있다.(개발 툴 종류에 영향을 받지 않고, 소스단에서 설정)

 

@vue ~ 상대경로

컴포넌트를 임포트 할 때 상대경로로 ../../ 이런 식으로 경로를 설정해줘야 할 때가 있다. 굉장히 번거롭게 느껴진다.

상대경로 설정을 통해 @~ 로 간결하게 경로를 지정할 수 있다.

 

• 상대경로 설정

jsconfig.json 파일로 설정을 한다. vs code 내부 기능 활용

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "~/*": [
        "./*"
      ],
      "@/*": [
        "./src/*"
      ],
    }
  },
  "exclude": [
    "node_modules",
    "dist"
  ]
}

위처럼 경로를 지정해줘서 @/~ 이런 식으로 경로를 지정할 수 있다.

 

https://v2.vuejs.org/v2/style-guide/?redirect=true 

Style Guide — Vue.js

코딩 컨벤션, 스타일 가이드를 맞춰가고 추천하는 것들이 있기 때문에 위 사이트를 통해 어느 정도 알아둘 필요가 있다.

 

백엔드 개발자지만 아직 하려고 하는 프로젝트에 대해 잘 모르기 때문에 프론트부터 접근하려고 vue 를 공부하고 있다. 

내일부터는 하이브리드 앱 소스코드를 보고 서버를 돌려보며 공부하려고 한다. 물론 강의는 틈날 때마다 들을 것

증말로 너무 바쁘다..

 

공부한 것을 증발시키지 말고 기록이라도 하자..