[Vue.js] Intro

박은지·2022년 4월 6일

vue.js

Vue.js

목록 보기

1/2

1. WEB

인터넷

인터넷(Internet)이란 컴퓨터로 연결하여 TCP(Transmission Control Protocol)/IP(Internet Protocol) 통신 프로토콜을 이용하여 정보를 주고 받는 컴퓨터 네트워크이다.

웹사이트

웹사이트(Website)는 인터넷 프로토콜 기반의 네트워크에서 도메인 이름이나 IP주소, 루트 경로만으로 이루어진 URL을 통해 보이는 웹 페이지 (Web Page)들의 묶음이다. 우리가 흔히 아는 '홈페이지'가 바로 웹사이트이다.

웹 개발

웹 개발(Web Development) 인터넷이나 인트라넷을 위한 웹사이트를 개발하는 일을 말한다.
일반적으로 웹 개발이라고 하면 웹 프로그래밍만을 의미하는 것이 아니라 웹 디자인, 웹 콘텐츠 개발, 클라이언트 사이드/서버 사이드 스크립트 작업, 웹 서버 및 네트워크 보안 등을 아울러 의미한다.

웹 프로그래밍

웹 개발의 일부분인 웹 프로그래밍(Web Programming)은 웹 사이트 또는 웹 페이지를 만드는 과정을 말한다.
웹 프로그래밍은 '프론트엔드(Front-end)' 그리고 '백엔드(Back-end)', 이렇게 크게 2가지로 나누어 생각할 수 있다.

- 프론트엔드 (Front-end)

프론트엔드 프로그래밍은 '클라이언트' 측 프로그래밍으로, 브라우저 단에서 동작하는 코드를 작성하는 작업을 의미한다.
주로 사용되는 언어는 HTML, CSS, Javascript이다.
HTML은 Hypertext Markup Language의 약자로 마크업 언어(문서)를 말한다. HTML을 통해 페이지의 뼈대, 구성을 만들 수 있다.
CSS(Cascading Style Sheets)는 문서의 스타일 지정하는 언어로, HTML로 만든 요소에 디자인 요소를 추가할 수 있다.
그리고 Javascript는 페이지 구성요소에 움직임 등을 추가하는 동적인 기능을 추가할 때 사용된다.

- 백엔드 (Back-end)

백엔드 프로그래밍은 서버 쪽에서 실행되는 코드를 작성하는 것을 의미하고, 서버 사이드 프로그래밍이라고도 부른다.

정리해보면, 프론트엔드는 웹 페이지에서 눈에 보이는 것을 담당하고, 백엔드는 웹페이지 상에서는 바로 볼 수 없는 데이터 처리를 담당한다고 할 수 있다.

2. Vue.js

Vue.js는 웹 애플리케이션의 사용자 인터페이스를 만들기 위해 사용하는 자바스크립트 프레임워크로,
고성능의 SPA (Single Page Application)을 구축하는데 사용할 수 있다.
Vue.js와 비슷한 프레임워크로는 React와 AngularJS가 존재한다.

3. Chrome 개발자 도구 사용하기

웹 프로그래밍 시 '개발자 도구'를 사용하면 보다 더 편리하고 빠르게 작업을 진행할 수 있다.
먼저, Chrome 개발자 도구를 열려면 F12키 혹은 Ctrl + Shift + I 를 누른다.
오른쪽 상단에 있는 점3개가 세로로 나열된 버튼을 클릭한 후 도구 더보기 메뉴를 선택하여 개발자 도구를 여는 방법도 가능하다.

개발자 도구의 상단에는 여러 가지 메뉴들이 존재한다.

- Element

HTML 요소 탭으로, 현재 웹페이지의 소스 보기를 보여준다.
소스의 태그 위에 마우스 커서를 올리면 웹페이지의 화면에 툴팁을 해당 태그에 대한 상세 속성 정보가 나타난다.

- Sources

소스 보기 탭으로, 웹페이지에 포함된 모든 리소스를 열어볼 수 있는 기능 탭이다.
CSS, Javascript 소스 파일 이외에, 이미지나 동영상 등 웹페이지에 포함된 모든 리소스를 열어볼 수 있다.
Sources 탭 멘에서 왼쪽의 도메인별 리소스 트리를 펼쳐서 가져올 리소스(HTML, CSS, Javascript, 이미지 등)를 선택할 수 있다.

- Network

네트워크 탭으로, 웹페이지와 웹페이지에 포함된 모든 리소스들이 로딩되는 시간, 리소스 파일 크기, 상태 코드, 리소스 타입, 파일명 등의
리소스의 네트워크 전송 정보를 확인하는 메뉴이다. 즉, 다시 말해 서버와 클라이언트의 통신에 관한 정보를 확인할 수 있는 메뉴이다.
처음부터 너무 많은 정보를 담게되면 로딩시간이 너무 길어지기 때문에,
처음에 많은 정보를 담지 않고 필요할 때마다 통신으로 통해 데이터를 받는 것이 트렌드이다!
FE와 BE를 연결할 때 BE로부터 FE까지 데이터를 무사히 잘 넘겨받았는지 확인하는 등의 경우에 네트워크 탭을 활용한다.

참고 [ 오류 번호 ]

500번~ : 서버쪽 문제

400번~ : 클라이언트쪽 문제

- Application

어플리케이션 실행 정보 탭으로, 크롬 안에 실행 중인 코드(앱)의 프로세스, 스토리지(로컬, 세션, 쿠키), 캐시 사용 정보를 표시한다. 또한 자바스크립트로 제작한 앱 혹은 코드가 사용하는 크롬의 리소스에 대한 상세 정보를 표시한다. 앱 개발시 세션 스토리지, 쿠키 스토리지를 정리된 표 형태로 확인 가능하기 때문에 유용하다.

Storage

로컬 스토리지 (Local Storage) : 브라우저 자체에 저장

세션 스토리지 (Session Storage) : 로그인 정보 등

- Performance

페이지의 로딩 성능을 측정하는 메뉴로, 성능 측정 페이지의 왼족 상단의 시작 버튼을 누르거나 단축키 Ctrl + E를 선택한다.

- Memory

Memory는 메모리 사용량 모니터링 메뉴이다. 현재 웹페이지의 메모리 사용량 정보를 확인할 수 있다.
특히 실시간 자바스크립트 메모리 할당 정보는 시간대별로 자바스크립트의 어떤 객체 타입이 할당되었는지를 확인할 수 있어,
자바스크립트 개발을 할 때 메모리 사용량 측정이 가능하다.

- Application

어플리케이션 실행 정보 메뉴로, 크롬 안에서 실행 중인 코드(앱)의 프로세스, 스토리지(로컬, 세션, 쿠키), 캐시 사용 정보를 표시한다.
클라이언트가 서버에 요청한 문서들, 즉 페이지의 모든 소스가 들어있다.
또한 앱 개발시 세션 스토리자, 쿠키 스토리지를 정리된 표 형태로 확인할 수 있어 유용하다.

Chrome으로 디버깅하기

디버깅 (Debugging) 이란 컴퓨터 프로그램 개발 단계 중에 발생하는 시스템의 논리적인 오류나 비정상적 연산을 찾아내어
그 원인을 밝히고 수정하는 작업 과정을 말한다.

debugger 을 외치자!
이 방법은 가장 간편하고 빠르게 디버깅을 시작할 수 있는 방법이다.

다음은 짝수만을 리턴하는 함수이다. 이 예제 코드를 console 창에서 실행시켜보자.

// 짝수값만 리턴하는 함수

function checkEven(arr) {
	const result = [];
  
	for (let i=0; i < arr.length; i++) {
    	if (arr[i] % 2 === 0) {
        	result.push(arr[i]);
        }
    }
  	
  	return result;
}

debugger;
checkEven([1,2,3,4,5,6,7,8]);

console 창에 위 코드를 입력하고 Enter 키를 누르면
자동으로 Source 창이 자동으로 실행되고, 입력한 코드를 Source 창에서 확인할 수 있다.

Source 창의 오른쪽 탭 상단에서 아래와 같은 버튼들을 볼 수 있다.
이 버튼들은 디버깅할 때 사용할 버튼들이다.

왼쪽부터 순서대로 각 버튼들의 역할을 살펴보자.

Step : 다음 명령어를 실행한다.
다음 debugger를 만날 때까지 스크립트 실행을 계속한다.
디버거가 더 이상 없으면, 나머지 스크립트를 실행하고 끝난다.

Step Over : 다음 명령어 실행하되, 함수 안으로 들어가지는 않는다.
Step은 함수 내부로 진입해 함수 본문 첫 번째 줄에서 실행을 멈춘다.
반면, Step Over는 함수를 실행하지만, 함수 내로 진입하지 않는다. 실행은 함수 실행이 끝난 후, 즉시 멈춘다.
함수 호출 시 내부에서 어떤 일이 일어나는지 궁금하지 않을 때 유용하다.

Step Into : 함수 안으로 진입하여 모든 작업을 한 줄씩 검사한다.
Step은 비동기 동작은 무시한다.
반면, Step into는 비동기 동작을 담당하는 코드로 진입하고, 필요하다면 비동기 동작이 완료될 때까지 대기한다.

Step Out : 함수를 검사하고 해당 함수를 호출하는 라인으로 돌아간다.
현재 실행 중인 함수의 실행을 계속 이어가다가 함수 본문 마지막 줄에서 실행을 멈춘다.
빨리 함수 실행을 끝내고 싶은 경우에 사용한다.

모든 중단점(breakpoint)을 활성화/비활성화
모든 중단점을 일시적으로 활성화/비활성화 한다. (실행에는 영향이 없음)

예외 발생 시 코드를 자동 중지시켜주는 기능을 활성화/비활성화
활성화되어 있고, 개발자 도구가 열려있는 상태에서 스크립트 실행 중에 에러가 발생하면 실행이 자동으로 멈춘다.
실행이 중단되었기 때문에 변수 등을 조사해 어디서 에러가 발생했는지 찾을 수 있다.
개발 진행 중 에러와 함께 스크립트가 죽었다면 디버거를 열고 이 옵션을 활성화한 다음, 페이지를 새로 고침하면 에러가 발생한 곳과 에러 발생 시점의 컨텍스트를 확인할 수 있다.

다시 예제 코드로 돌아가서 Step Into 버튼을 계속 눌러
checkEven([1,2,3,4,5,6,7,8]); 코드를 지나면 checkEven 함수로 진입하게 된다.

계속해서 Step Into 버튼을 누르면 checkEven 함수의 작동 과정을 확인할 수 있다.

Source 창의 오른쪽의 Scope 탭을 확인해 보면
Step into 버튼을 누를 때마다 코드가 실행되면서 증감문에 따라 i값이 1씩 커지고,
조건문을 지나면서 조건에 맞는 요소가 result 배열에 하나씩 추가되는 과정을 확인할 수 있다.

- Security

Security는 말 그대로 보안 메뉴이다. 현재 웹 페이지의 도메인 보안 접속(SSL) 결과를 보여준다.
또한 웹 페이지에서 리소스를 가져온 링크 도메인에 대한 보안 접속 여부까지 확인할 수 있다.

- Lighthouse

Lighthouse는 리포트 도구 메뉴로, 현재 웹 페이지에 대한 분석 결과를 리포트로 제공한다.
리포트에는 현재 웹 페이지의 성능, 웹앱, 접근성, SEO 등에 대한 상세 분석 결과를 보여준다.

4. Github & groom IDE

groom IDE는 웹 기반 클라우트 통합 개발 환경이다.
groom IDE는 네트워크만 연결되어 있다면 손쉽게 다양한 언어로 프로그래밍할 수 있는 개발 환경을 만들 수 있다.

groom IDE

Github 형상관리를 위해 Github 계정과 연동시켜 회원가입을 했다.

아래의 이미지를 보면 2개의 컨테이너가 생성되어 있다.
1. Vue.js 컨테이너 : 오직 Vue.js 프로젝트만을 위한 컨테이너이다.
2. Github 연동된 컨테이너 : Github와 연동된 컨테이너이다. 여기에 Vue.js 컨테이너 소스를 넣어준다.

굳이 이렇게 2가지를 만들어 합친 이유는..?
groom IDE에서는 Vue.js 프로젝트 생성과 Github 연동을 동시에 할 수 없기 때문에 따로따로 만들어 두 가지를 합치는 방법을 선택했다.

컨테이너 생성하기

[1] Vue.js 컨테이너

오직 Vue.js 프로젝트용 컨테이너를 생성해보자.

[ 새 컨테이너 ]를 클릭하고 아래와 같이 작성하고 옵션들을 선택한다.
완료 후 하단의 [ 생성하기 ]를 클릭하면 컨테이너 생성이 시작된다.

성공적으로 컨테이너가 생성되면 콘솔에서 새로 생성된 컨테이너를 확인할 수 있다.

[2] Github 연동 컨테이너

이제 Github 연동용 컨테이너를 생성해보자.
가장 먼저 Github에서 연동시킬 새로운 Repository를 생성한다.

바로 위에서 살펴본 방법과 동일하고, 옵션만 다르게 선택해주면 된다.

콘솔에서 새로 생성된 컨테이너를 확인할 수 있다.

[3] 두 컨테이너 합치기

이제 Github과 연동된 Vue.js 컨테이너를 만들기 위해 앞서 만든 두 가지 컨테이너를 합쳐보자.
방법은 간단하다. Github 연동 컨테이너에 Vue.js 컨테이너 소스를 추가해주면 된다.

가장 먼저 Vue.js 컨테이너를 실행한다.
그 다음 프로젝트 폴더에서 마우스 우클릭 후, 아래의 이미지처럼 ZIP으로 [ 폴더 내보내기 ]하여 추가할 Vue.js 컨테이너 소스를 준비한다.

하단에 ZIP 폴더가 새로 생겨난 것을 확인할 수 있다.
이 폴더의 구성은 다음과 같다. 압출을 풀고 다음 단계로 넘어간다.

이제 압축 해체한 소스를 Github 연동 컨테이너에 추가하는 작업을 해보자.

Github 연동 컨테이너를 실행시킨다.
ZIP 폴더 안의 파일은 그냥 드레그해서 복사해준다.
ZIP 폴더 안의 폴더는 마우스 우클릭 후, [ 폴더 ]를 선택하여 추가할 폴더를 가져온다.

최종적으로 확인할 수 있는 폴더 구조는 다음과 같다.

.git은 원래 "Github 연동 컨테이너" 안에 존재했던 폴더이고,
public , src 폴더와 .gitignore ,README.md , package.json , vue.config.js 파일은 "Vue.js 컨테이너"의 ZIP 소스에서 복사한 것이다.