1. 라우터 세팅하기 : npm install vue-router@4

2. 템플릿에서 <router-link> 태그 설정하기

<router-link to="/home"> Home </router-link> <router-link to="/servicees"> Services </router-link>

3. main.js 에서 Vue와 Vue 라우터 import 하고 함수를 이용해 호출하기

import Vue from 'vue'; import VueRouter from 'vue-router';
Vue.use(VueRouter)

4. 라우트 컴포넌트를 정의하거나 import 한다.

const Home = { templete: '<div>Home</div> } const Services = { templete : '<div>Services</div>' }

5.라우트를 정의합니다. 각 라우트는 반드시 컴포넌트와 매핑되어야 합니다.

const routes = [ { path: '/home' , component: Home }, { path: '/services' , component: Services } ]

6. routes 옵션과 함께 router 인스턴스를 만듭니다.

const router = new VueRouter ({ routes })

7. 루트 Vue 인스턴스를 만들고 mount 합니다.

const app = new Vue({ router }).$mount('#app')

동적 라우트 매칭 (매개변수와 라우트 사용하기 )

const User = { template: '<div>User {{ $route.params.name }}, PostId: {{ route.params.postid }}</div>' }
const router = new VueRouter({ routes: [ { path: '/user/:name/post/:postid', component: User } ]})

프로젝트를 진행하다보면 필연적으로 깃헙을 쓰게되는데, 사용하면서 여러 헷갈리던 기능 정리하기!

작업 중 새로운 브랜치 만들기

• 이번 프로젝트에서 바로 실수 했던 부분인데, 작업 중 새로운 브랜치를 만들고 싶을 때! 바로 작업 중인 브랜치에서 새로운 브랜치를 만들면 안된다!

1. 진행중인 작업이 있다면 commit 을 한 후 main 브랜치로 이동한다.
2. main 브랜치에서 git branch "새로운 브랜치 이름"
3. git checkout "새로운 브랜치 이름"

의 과정으로 진행해야 한다. 그렇게 진행하지 않았을 때, 이전 브랜치에서 작업한 commit 내용이 같이 올라가서 매우 당황한 기억이 있다. 내역이 얼마되지 않아 브랜치를 삭제하거나 그러진 않았지만, 삭제한 경우도 있다고 들었기에 작업 중 새로운 브랜치는 꼭 main에 이동해서 만들자!

작업 중 main에 merge 된 브랜치가 있을 때

• 거의 매일매일 일어났던 상황인데, 늘 익숙해지지 않아 한번 정리해본다.

미리 만들어뒀던 브랜치 라면?

1. 진행중인 작업이 있다면 commit 을 한 후 main 브랜치로 이동한다.
2. git pull origin main 으로 main 브랜치의 변경 내용을 업데이트 한다. (한번 npm start로 확인하는 것도 좋은듯, 보면 꼭 오류가 발생하거나 깨지거나 하므로)
3. git checkout "미리 만들어둔 브랜치 이름"
4. git merge main 으로 작업하던 브랜치에도 merge 받은 모든 내역을 추가한다.
5. conflict 발생 하므로 그걸 해결한 후 git add -> git commit -> git push 하면 작업하던 브랜치에 merge 내역이 추가되고 다음 작업을 진행하면 된다.

사실 이것이 정답인지 아닌지는 확신할 수 없지만, 프로젝트 과정중 이렇게 진행해왔다.

merge 후 브랜치를 만들고 싶다면?

위 케이스와 동일하되 2번까지 작업하고 그냥 git branch로 브랜치를 만들면 된다. 이유를 물어봤을 때, main에서 새로운 브랜치를 만들때 이미 업데이트가 완료된 상태에서 새로운 브랜치를 만들기 때문에 추가적으로 merge 받을 필요가 없다고 하셨다!

자기소개 홈 페이지 만들기 전, [Codecademy How to make a Website] (https://www.codecademy.com/learn/make-a-website) HTML 파트 이다.

HTML 태그

HTML은 태그들의 집합이다. 다양한 태그들로 코드를 작성하면, 브라우저가 이를 인식해 내용을 표현한다.

<h1>Hello, HTML</h1>

태그를 사용하는 기본적인 방식이며, 대부분의 태그는 시작 태그와 종료 태그로 이루어져 있다.

속성이란?

속성은 태그에 추가적인 정보를 제공하거나 태그의 출력을 제어할 수 있는 설정값 이다.

<h1 id="Apple" class="Banana">Hello, HTML</h1>

<h1> 태그에 id 속성과 class 속성을 선언한 코드이다. 예시와 같이 id, class 속성을 모두 사용한다면 id에 적용한 규칙은 class 규칙보다 우선적이다.

빈 태그란?

태그는 보통 시작 태그와 종료 태그로 이루어져 있으나 그렇지 않은 일부 경우가 존재한다. 이를 빈 태그 라고 한다.

<br>
<img src="">
<input type="">

이러한 빈 태그의 경우 내용이 존재하지 않아 종료 태그가 필요하지 않다. 내용이 존재하지 않지만 다른 용도로 사용되는 경우 대체되는 태그라고 한다.

공백

HTML은 두 칸 이상의 공백과 줄바꿈을 무시한다. 줄바꿈을 하고 싶다면 빈 태그에서 언급된 <br> 태그를 사용한다.

HTML 태그의 종류

<H1>...<H6> : Heading 태그, 문서 내 제목 표시 <H1> 태그의 경우 페이지 당 하나가 규칙이나 더 사용할 수 있다. 하지만 글쓰기 규칙에 어긋나는 점은 참고하자. <P> : Paragraph 태그, 새로운 단락이며 제목이 없는 내용
<br> : 줄바꿈 태그 <b> : bold, 글자를 굵게 <i> : italic, 글자를 기울여서 HTML5 버전에서 단순 표현용 태그에서 의미를 가지는 태그로 변경되었다. <u> : underline, 글자에 밑줄 <s> : strike, 글자에 중간선 <div> : 의미가 없는 컨테이너 요소, 페이지를 나누기 위한 목적이며 그 나눠진 부분은 서로 독립적이며 각각의 구성, 이동, 스타일을 지정 할수 있다. 블록 레벨 태그 <span> : 의미가 없는 컨테이너 요소, 요소들을 묶기 위해 사용한다. 인라인 레벨 태그

HTML 앵커 요소

<a>는 a태그, 앵커 등으로 부른다. 링크를 만들기 위해 <a> 태그는 반드시 href (hypertext reference) 속성을 가져야 한다.

<a href="http://www.naver.com/" target="_blank">네이버 홈페이지</a>

href 속성값은 링크의 목적지가 되는 URL 이며, href 속성을 사용하여 사용자를 웹 사이트에 연결한다.

target="_blank" 를 사용하면 연결된 URL이 별도의 창에서 열린다.

내부 링크로 사용하기

<a>를 통해 페이지 내부의 특정 요소로 이동할 수 있어 이를 내부 링크라고 한다.

<a href="#page-bottom">홈페이지 맨 아래로 이동하기</a>

.......

<h1 id="page-bottom">홈페이지 맨 아래</h1>

내부 링크로 사용할 때는 href 속성값에 #을 쓰고 페이지 내에서 이동할 요소의 id 속성값을 적는다.

HTML 리스트 요소

<ul> 순서가 없는, 정렬되지 않는 리스트를 표현할 때 사용한다. <ol> 순서가 있는 리스트를 표현할 때 사용한다. (요리) 각 태그를 정의 한 후 <li> 를 사용하여 각 항목을 나타낸다.

<dl> 용어와 그에 대한 정의를 표현할 때 사용

<dl>
    <dt>사자</dt>
    <dd>사자는 식육목 고양이과 표범속으로 분류되는 포유류다.</dd>
    <dt>호랑이</dt>
    <dd>호랑이 또는 칡범, 갈범은 고양이과에 속하는 맹수다.</dd>
</dl>

<dt> 는 용어를 나타내는 태그, <dd> 는 용어에 대한 정의 및 설명을 표현하는 태그

HTML 이미지 요소

<img> 는 이미지를 삽입하는 태그이며 *빈 태그 *이다.

<img src="chicken.png" alt="치킨">

상대경로와 절대경로

<!-- 상대경로 -->
<img src="./images/chicken.png" alt="치킨">

<!-- 절대경로 -->
<img src="C:/users/document/images/chicken.png" alt="치킨">
<img src="http://www.naver.com/chicken.png" alt="치킨">

상대경로 : 현재 웹 페이지를 기준으로 상대적으로 이미지의 위치를 나타내는 경로 상대경로의 ./는 페이지가 있는 폴더 절대경로 : 실제 그 이미지가 위치한 곳의 전체 경로

<video> 는 동영상을 삽입하는 태그이며 닫는 태그가 필요하다.

문서의 기본 구조

<!DOCTYPE html> 웹 브라우저에 HTML 문서를 요청 <html> ... </html> 모든 HTML 요소의 부모 <head> ... </head> 제목과 같이 사이트에 대한 데이터를 포함 <title> ... </title> 검색엔진에서 찾았을 때 뜨는 사이트의 제목 <meta charset="utf-8"/> 사용할 문자 집합 이 경우 utf-8 임

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>HTML</title>
    </head>
    <body>
        <h1>Hello, HTML</h1>
    </body>
</html>

부스트코스(boostcourse) 웹 프로그래밍 기초

HTTP(Hypertext Transfer Protocol)

서버와 클라이언트가 인터넷상에서 데이터를 주고 받기 위한 프로토콜

그렇다면 프로토콜은 무엇인가?

컴퓨터 내부 혹은 컴퓨터 사이에서 데이터의 교환 방식을 정의 하는 규칙 체계 기기 간 통신은 교환되는 데이터의 형식에 대해 상호 합의를 요구한다. 어떠한 데이터 형태도 전송할 수 있다. (이미지, 오디오, 텍스트 문서 등)

HTTP 작동방식

클라이언트가 "요청"을 서버에 보내면 이 "요청"을 받아 서버가 클라이언트에게 "응답" 한다.

HTTP와 HTTPS 의 차이

암호화의 차이 HTTPS의 경우 암호화가 필요하기에 추가적인 시간 및 비용이 발생한다. HTTPS의 S는 secure socket 즉 보안 통신망이다.

URL(Uniform Resource Locator)

인터넷 상의 자원의 위치 특정 웹 서버의 특정파일에 접근하기 위한 경로 혹은 주소 접근 프로토콜 + ip주소 또는 도메인 이름 + 문서의 경로 + 문서이름

브라우저의 동작

브라우저는 월드와이드웹(WWW)에서 정보를 검색, 표현하고 탐색하기 위한 소프트웨어 서버에서 받은 문서(HTML, CSS, Javascript)를 해석하고 실행하여 화면에 표현하기 위한 해석기(Parser) 들을 가지고 있다.

사파리 브라우저에서 처리되는 webkit렌더링엔진의 처리과정

HTML을 해석해서 DOM Tree를 만들고, CSS를 해석해서CSS Tree(CSS Object Model)을 만든다. 해석 과정에서 Parsing이 필요하며 해석 방식은 소스코드의 컴파일 과정과 비슷하다. DOM Tree와 CSS Tree는 연관되어 있으므로 Render Tree로 다시 조합된다. 이렇게 조합된 결과는 화면에 표현되는 크기와 위치 정보를 담고 있다. 이후에 이렇게 구성된 Render Tree정보를 통해서 화면에 어떤 부분에 어떻게 색칠을 할지 Painting과정을 거치게 된다.

HTML / CSS 파싱 및 DOM트리 만들기 > (HTML+CSS)렌더트리 만들기 > 렌더트리 배치 > 렌더트리 그리기

브라우저에서의 웹 개발

HTML 문서구조 CSS 코드는 보통 head 태그 안에 두며, 길어지면 link를 이용해서 따로 분리한다. Javascript 코드는 body 태그 밖에 두며, 길어지면 link 이용해서 따로 분리한다. Javascript 코드는 위치에 따라 body 태그 내용이 언제 나오는지 달라진다. JavaScript 코드는 body 태그 닫히기 전에 위치하는 것이 렌더링을 방해하지 않아 좋고, CSS코드는 head 안에 위치해서 렌더링 처리 시에 브라우저가 더 빨리 참고 할 수 있게 하는 것이 좋다.

웹 서버란?

웹 서버는 소프트웨어를 말하지만 웹 서버 소프트웨어가 동작하는 컴퓨터를 칭한다. 클라이언트가 요청하는 HTML문서나 각종 리소스를 전달한다. 대표적으로 Apache, Microsoft, Nginx, Google 등

WAS(Web Application Server)

클라이언트는 서비스를 제공하는 서버에게 정보를 요청하여 응답 받은 결과를 사용한다.

DBMS(Database Management System)

다수의 사용자들이 데이터베이스 내의 데이터를 접근할 수 있도록 해주는 소프트웨어

대표적으로 mySQL, Oracle 등

미들웨어(middleWare)

클라이언트와 DBMS 사이에 또다른 서버를 두는 방식이며 미들웨어에서는 대부분의 로직을 동작시킨다.

WAS는 일종의 미들웨어로 웹 클라이언트(웹 브라우저) 의 요청 중 보통 웹 애플리케이션이 동작하도록 지원하기 위함이다.

WAS도 보통 자체적으로 웹 서버 기능을 내장하고 있다. 하지만 규모가 커질수록 웹 서버와 WAS를 분리한다. 그 목적은 장애 극복 기능(failover)인 경우가 많다. 즉, 웹 사이트를 무중단으로 운영하기 위해서 사용한다.