CodeHoon

1. 분산형 버전 관리 시스템
2. 이력 관리 저장소
3. 변경을 기록하는 Commit
4. Work Tree & Index

1. 분산형 버전 관리 시스템

  ① 동시 편집 시, 발생할 수 있는 덮어쓰기 현상을 방지할 수 있다.
    -> 편집 내용이 충돌 시, 알림
  ② 소스코드가 변경된 이력을 쉽게 확인이 가능하다.
  ③ 특정 시점에 저장된 버전과 비교하거나 특정 시점으로 되돌아갈 수 있다.

2. 이력 관리 저장소

비슷한 파일이라도 실제 내용 중 일부가 다르면 다른 파일로 인식
  -> 파일을 변경사항 별로 구분해 저장이 가능

① 원격 저장소 (Remote Repository)
  -> 파일이 원격 저장소 전용 서버에서 관리되며, 여러 사람이 함께 공유하기 위한 저장소
② 로컬 저장소 (Local Repository)
  -> 내 PC, 개인 전용 저장소

3. 변경을 기록하는 Commit

① 파일 및 폴더의 추가/변경 사항을 저장소에 기록하려면 ‘Commit’을 해야한다.
② 시간 순으로 저장된다.

③ 각 커밋에는 영문/숫자로 이루어진 40자리 고유 이름이 붙는다.
  → 저장소에서 커밋을 구분하고 선택하는 기준이다.
④ 커밋 시, -m 옵션으로 메세지를 필수로 기입해야한다.

💡 Commit 작성팁
1번째 줄 : 커밋 내의 변경 내용을 요약
2번째 줄 : 빈 칸
3번째 줄 : 변경한 이유

4. Work Tree & Index

① 작업트리 - Work Tree 
  → Git에서 말하는 작업 폴더

② 인덱스 - Index
  → 커밋을 실행하기 전의 저장소와 작업 트리 사이에 존재하는 공간
  → `스테이징(Staging)한다` 라고 표현하기도 함.

도움이 되셨다면 광고 한번 클릭해주세요. 블로그 운영에 큰 힘이 됩니다. 감사합니다.

안녕하세요, 상훈입니다.

■ Websocket (웹소켓)

- Websocket이란?
- Websocket과 socket.io
- Websocket, JavaScript
- Websocket, Socket.io

■ Websocket이란? / Websocket의 특징

1. 서버(server)와 클라이언트(client)간의 특정 포트를 이용해 지속적인 실시간 양방향 통신 
2. 실시간 통신이 필요한 경우에 사용
   ex) 실시간 스트리밍 방송, 채팅, 게임 등
3. 일반 TCP Socket과 다른 점
   → 최초 접속 = 일반 Http Request를 통해 handshaking과정 거친다.
4. 기존의 port : 80, 443으로 접속→ CORS적용, 인증 등을 유지 가능
5. → 추가 방화벽을 열지 않고 통신이 가능함

■ 추가. 비동기(Http)통신을 웹소켓처럼 사용하면 지속적인 연결을 요청하기 때문에 과부하가 걸린다.

■ Websocket과 socket.io

  - WebSocket과 socket.io 는 다르다.

→ WebSocket
  : 양방향 소통 프로토콜, socket.io : 양방향 통신을 위해 웹소켓 기술을 활용하는 라이브러리.
    ⇒ JavaScript & jQuery 의 관계

참고

■ 사용 방법 - JavaScript

웹소켓을 사용하려면 Web Socket 객체 생성을 해야한다.

→ 이 객체는 자동으로 서버와 연결을 열려고 할 것이다.

1. 필수 파라미터 1개 : url
2. 선택 파라미터 1개 : protocols
3. ERROR : SECURITY_ERR ⇒ 포트 차단일 경우 발생
   

• 한개의 프로토콜

 var exampleSocket 
   = new WebSocket("ws://www.example.com/socketserver", "protocolOne");

• 여러개의 프로토콜

var exampleSocket
 = new WebSocket("ws://www.example.com/socketserver", ["protocolOne", "protocolTwo"]);

• 서버에 데이터 전송
  • 전송 가능한 데이터 유형 : String, Blob, ArrayBuffer
  • 바로 데이터를 전송하면 실패할 수 있기 때문에 onopen() 으로

exampleSocket.onopen = function (event) {
  exampleSocket.send("Here's some text that the server is urgently awaiting!");
};

• 서버로부터 데이터 수신
  • 메세지가 수신되면 message 이벤트 ⇒ onmessage 함수로 전달된다.

• exampleSocket.onmessage = function (event) {
    console.log(event.data);
  }

• 연결 종료
  • 웹 소켓 사용 종료 시 close() 메소드를 호출하여 연결을 종료한다.

  exampleSocket.close();
  

  • 네트워크에 전달이 되지 않은 정보가 아직 남았을 수도 있으니, bufferedAmount Attribute를 조사하여 데이터를 검사하는 것도 좋다.
    
• 고려사항 - 보안
  • 웹소켓은 혼합 연결 환경에 이용할 수 없다.
  • ex) HTTPS로 로드 된 페이지 → non-secure 웹소켓 연결 수립, non-secure 웹소켓 연결 → HTTPS로 로드 된 페이지

참고페이지 : MDN

■ 사용방법 - Node.js

Node.js에서 웹소켓을 구성하려면 ws 패키지를 사용해야 한다.

$ npm install ws

1. 서버측
   • port: 3000 으로 웹소켓 서버를 연다.

const WebSocket = require('ws')
const wss = new WebSocket.Server({ port: 3000 })

wss.on('connection', ws => {
  ws.on('message', message => {
    console.log('received: %s', message)
  })
  ws.send('something')
})

1. 클라이언트측
   • 마찬가지로 port:3000 으로 연결하고 데이터를 전송

const ws = new WebSocket('ws://localhost:3000')

ws.on('open', () => {
  ws.send('something')
})
ws.on('message', data => {
  console.log(data)
})

참고페이지 : 웹소켓

출처: 메시지 아이콘 제작자: Freepik - Flaticon

Vue.js 에서 클릭 이벤트 (click event) 로 한 개의 이벤트가 아닌 여러 개의 이벤트를 주고 싶을 때 사용할 수 있다.
=> 당연히 method 실행도 가능하다.

버튼을 누르면 2개의 알림창( alert() )이 출력되도록 하겠다.

<template>
    <main>
        <button type="button" @click="event1(), event2()">다중이벤트버튼</button>
    </main>
</template>
<script>
export default {
    name: '',
    components: {},
    methods: {
        event1() {
            alert('event1')
        },
        event2() {
            alert('event2')
        }
    }
}
</script>

콤마로 구분해놓으면 첫번째 실행이 끝난 후 실행이 된다.

Vue.js 에서 v-for 객체배열을 통해 반복문을 연습하기 예제입니다.

<template>
    <main>
        <h1>반복문 사용하기</h1>
        <table>
            <thead>
                <tr>
                    <th>제품명</th>
                    <th>가격</th>
                    <th>카테고리</th>
                    <th>배송료</th>
                </tr>
            </thead>
            <tbody>
                <tr :key="i" v-for="(product, i) in products">
                    <td>{{ product.name }}</td>
                    <td>{{ product.price }}</td>
                    <td>{{ product.category }}</td>
                    <td>{{ product.delivery }}</td>
                </tr>
            </tbody>
        </table>
    </main>
</template>
<script>
export default {
    name: '',
    components: {},
    data() {
        return {
            products: [
                { name: '게이밍마우스', price: 34500, category: '컴퓨터/주변기기', delivery: 4000 },
                { name: '무선게이밍마우스', price: 52000, category: '컴퓨터/주변기기', delivery: 3000 },
                { name: '게이밍키보드', price: 42000, category: '컴퓨터/주변기기', delivery: 3000 },
                { name: '무선게이밍키보드', price: 50000, category: '컴퓨터/주변기기', delivery: 4000 },
                { name: '무선충전기기', price: 24000, category: '컴퓨터/주변기기', delivery: 3000 },
                { name: '갤럭시탭', price: 385000, category: '모바일/휴대기기', delivery: 0 },
            ]
        }
    },
    methods: {}
}
</script>

오히려 이전 발행글보다 난이도가 낮아진 기초의 느낌입니다.

Canvas.js 를 사용하는 와중 특정한 조건에 의해 새로운 차트를 비동기로 재출력하는 상황,
아래와 같은 에러가 발생하였다.

이유인즉슨, 기존의 차트가 존재하기 때문에 새로운 차트를 적용할 수 없다는 것이다.

그렇기 때문에 기존의 차트를 제거하는 수순을 밟아야한다.

 const ChartName = new Chart(
        document.getElementById('generalList'),			// canvas의 id 호출
        ChartNameConfig								// Config로 기본 설정했던 변수 호출
      );
      ChartName.destroy()							// ★★destroy로 기존의 canvas를 제거
  }

destroy()를 new Chart 함수의 마지막에 작성한다.

해당 페이지 참고

Vue.js의 template 세트를 원하는 부분에 미리 작성해놓고 사용하는 방법이 있습니다.

물론 기본적으로 ctrl  + space 만 눌러도 template, script, style 이 세가지가 다 나오지만, 

잠깐 귀찮으면서 미리 작성해놓으면 원하는 내용을 추가적으로 등록해놓을 수 있습니다.

이런식으로 말이죠.

F1을 눌러 snippet을 검색하고, preferences를 누릅니다.

그 다음 vue 를 검색하여 vue.json을 클릭합니다.

vue.json 파일이 열리며, 이곳에 작성해주시면 됩니다.

{ 
// ...
"Generate Basic Vue Code" : {
		"prefix": "vue-start",
		"body": [
			"<template>\n\t<main>\n\n\t</main>\n</template>\n<script>\nexport default {\n\tname: '',\n\tcomponents: {},\n\tdata() {\n\t\treturn {\n\t\t\texample: '',\n\t}\n},\n\tbeforeCreate() {},\n\tcreated() {},\n\tbeforeMount() {},\n\tmounted() {},\n\tbeforeUpdate() {},\n\tupdated() {},\n\tbeforeUnmount() {},\n\tunmounted() {},\n\tmethods: {}\n}\n</script>"
		],
		"description": "Generate Basic Vue Code"
	}
}

prefix 부분에 명령어와 같이 vue-start를 입력하면 해당 body 포멧을 불러올 수 있게 됩니다.

body 부분에 원하는 내용을 작성하는 것입니다.

추가.

{
"Generate Other Vue Code" : {
		"prefix": "vue-other",
		"body": [
			"<template>\n\t<main>\n\n\t</main>\n</template>\n<script>\nexport default {\n\tname: '',\n\tcomponents: {},\n\tdata() {\n\t\treturn {\n\t\t\texample: '',\n\t}\n},\n\tcreated() {},\n\tmounted() {},\n\tmethods: {}\n}\n</script>"
		],
		"description": "Generate Basic Vue Code"
	}
}

이상입니다.

Vue.js Cli 3 부터 prefetch 기능이 추가 되었습니다!

■ prefetch란?

pre + fetch 로, fetch를 선행한다는 뜻입니다. 
기본적으로 Vue.js에서는 prefetch = true로 설정되어져 있고, 이를 vue.config.js 에서 수정이 가능합니다.
브라우저가 미리 캐시(cache) 하는 것으로, 브라우저를 사용하는데에 빠르다고 느낄 수 있다.

■ 사용 목적

1. 렌더링 시간 단축
    => 하지만, 잘못 사용 시 오히려 렌더링 시간이 증가하게 된다. 

■ 특징

- Lazy Load가 적용된  Components는 모두 prefetch 기능이 적용 된다. (= 캐시가 미리 저장된다)
- 비동기 컴포넌트로 정의된 모든 리소스들을 캐시에 담기 때문에 요청(request) 수가 증가한다.
- 초기 화면은 오히려 느림
    => 마지막에 다운로드 받기 때문이다.
        => 따라서 초기 렌더링은 prefetch를 사용하지 않는 것이 더 빠르다.

■ 추가

- Vue Application 개발 시 기본적으로 prefetch는 끄는 것을 권장한다.
- vue-router에서 주석으로 처리된 "webpackPrefetch: true" 를 넣어주면 prefetch가 적용된다.

Javascript로 select box 내의 option들을 특정 조건에 의해 함수를 호출하여 제거하려고 한다. 
검색 기능으로 사용하면 유용하다.

물론 select box 말고도 p, span, div...등등 부모-자식 관계의 태그들이라면 모두 가능하다.

Node . removeChild 를 사용한다.

const item_name = document.querySelector('#item_name')	// item_name이라는 부모 요소
while (item_name.firstChild) {		// 첫번째 자식 태그가 존재하면 무한 반복
      item_name.removeChild(item_name.firstChild);		// 첫번째 자식 태그를 제거한다. 
 }

item_name 이라는 id를 가진 태그를 querySelector로 가져온다.

가져온 태그 내 자식 태그가 1개 이상일 때 반복문이 실행된다.

그리고 removeChild를 통해 자식요소를 제거한다.