빌드랑[bɪ'ldraŋ]

- 해시뱅이란?

말그대로 해시(#)와 뱅(!)이 합쳐진 단어로 단일 페이지 애플리케이션(SPA)를 구현하기 위해서 사용하는 것으로 해시뱅을 사용하게 되면

페이지의 갱신없이 URL변경을 할 수 있습니다.

트위터의 URL에 들어가게 되면서 유명해졌는데 현재 트위터에서는 사용하고 있지 않습니다.

예를 들면

ex) http://javascriptHi.com/#home

이런식으로 사용을 하며 해시뱅의 # 뒤에 붙는 부분은 fragment identifier라고 부릅니다.

즉, 해시뱅은 웹 주소창에 URL과 해시뒤에 원하는 fargment identifier를 붙이게 되면 단일 페이지로 제작 된 홈페이지에서 페이지가 갱신되어 다른페이지로 넘어가는 것 처럼 보이게 합니다.

또한 ajax를 이용했을 경우 화면이 변경되도 히스토리 관리가 안되기 때문에 URL이 변경되지 않아 뒤로가기나 앞으로가기가 되지않는데 이 또한 해시뱅을 이용하면 ajax를 사용하더라도 구현이 가능하게 됩니다.

- 해시뱅이 동작하는 방법

해시뱅은 HTML 앵커기능을 이용한 방법으로 앵커와 같은 동작을 하게 됩니다.

HTML의 앵커(네임앵커)는 특정위치를 태그안에 name속성으로 지정하고

a태그를 통해서 href를 name속성에 적은 값으로 지정을 하면 원하는 위치로 이동을 하게 됩니다.

이것과 마찬가지로 hash라는 속성으로 값을 지정해 놓고 그 값을 찾아서 이동을 하게 되는 방식으로

로컬에 fragment identifier를 저장하고 fragment identifier를 파싱하여 지정한 값에 대한 정보를 서버에 요청하는 방식입니다.

- 자바스크립트에서의 해시뱅 구현방법

해시뱅을 구현하는 방법은 location.hash를 사용하는 방법입니다.

저는 카테고리 선택 시 화면의 일부분만 바뀌도록 ajax를 사용하였는데요. 그러다 보니 URL변경이 없어서 location.hash를 사용한 상황입니다.

선택한 카테고리의 메뉴번호(menuNum)을 DB에 넘겨 화면에 보여줄 게시물 리스트들을 받아옵니다.

그러면서 document.location.hash를 사용하여 #뒤에 붙을 fragment identifier를 작성해 줍니다.

적용을 하게 되면

실제 URL창에 작성한 값들이 나타나게 됩니다.

이제 해시뱅을 구현했으니 뒤로가기를 구현해보겠습니다.

뒤로가기는 jquery 이벤트인 hashchange로 구현하였습니다.

location.hash를 이용하여 지금 현재 받아오는 URL의 hash값을 받아오게 합니다.

만약 hash값이 #home이면 메인페이지로 넘어가고 hash값이 menuNum/301이면 301번 게시글로

cateNum/11이면 11번 카테고리로 넘어가게끔 작성했습니다.

이렇게 작성을 하게 되면 뒤로가기로 눌렀을 시 로컬에 hash가 저장되어있기 때문에 URL로 호출이 되면 자동으로 지정한 곳으로 넘어가게 됩니다.

정리를 하면 해시뱅은

- 장점

ajax를 사용할 시 뒤로가기등 url변경이 가능하다.

- 단점

해시뱅은 웹의 기본에 위배가 되는 사항이고 자바스크립트의 function이 오류가 난다면 웹사이트의 모든 동작들이 멈추게 된다

저작자표시 비영리 동일조건 (새창열림)

'Web Framework > Web' 카테고리의 다른 글

크롬 개발자 도구 디버깅 (0)	2021.03.15

텍스트 유사도는 각 텍스트가 얼마나 유사한지 정량적으로 계산한 값입니다.

이를 통해 동일한 의미를 가진 텍스트에 대해 같은 결과 값을 갖도록 처리한다면 모델의 효율성을 높일 수 있습니다.

방법 1 | 텍스트를 통한 직접 측정

자카드 유사도

문장을 단어 토큰(token)으로 나누고, 공통된 단어의 수를 전체 단어 수로 나눠서 계산합니다.

0~1 사이 값으로 나타나고, 1에 가까울수록 유사도가 높다고 판단할 수 있습니다.

(예시)

A : 빌드는 다양한 관점의 차트와 보드를 제공합니다
B : 차트 및 보드를 통해 다양한 관점에서 데이터를 탐색합니다

<토큰>
A : [빌드, 는, 다양, 한, 관점, 의, 차트, 와, 보드, 를, 제공, 합니다]
B : [차트, 및 ,보드, 를, 통해, 다양한, 관점, 에서, 데이터, 를, 탐색, 합니다]

방법 2 | 벡터화 된 텍스트를 통한 측정

TF-IDF를 통해 문장을 벡터화하고, 그 값을 바탕으로 유사도 계산합니다.

문장 A, B에 대한 벡터 값이 다음과 같이 나타난다고 가정해보겠습니다.

코사인 유사도

두 문장 벡터의 사이 각(θ)에 대한 코사인 값을 나타냅니다.

방향성 개념이 더해지는 것이 특징입니다.

-1~1사이 값을 가지며, 유사도가 높을수록 1에 가깞게 나타납니다(cos0 = 1).

유사성이 없는 경우, 코사인 유사도는 0입니다(cos90 = 0).

(예시)

(Python 코드 구현)

# TF-IDF로 벡터화한 각 문장을 A, B라고 가정
from sklearn.metrics.pairwise import cosine_similarity
cosine_similarity(A, B)

유클리디안 유사도

두 벡터 사이의 최단 거리를 계산한 값입니다.

정규화를 하지 않고 계산하면, 정해진 값의 범위 없이 거리에 따라 무한하게 나타는 것이 특징입니다.

(예시)

(Python 코드 구현)

# TF-IDF로 벡터화한 각 문장을 A, B라고 가정
from sklearn.metrics.pairwise import euclidean_distances
euclidean_distances(A,B)

맨하탄 유사도

벡터 값이 좌표 위에 있다고 가정할 때, 좌표를 가로지르지 않는 최단 거리를 의미합니다.

유클리디언 유사도와 마찬가지로 거리에 대한 값이기 때문에 값의 범위가 정해져 있지 않습니다.

(예시)

(Python 코드 구현)

# TF-IDF로 벡터화한 각 문장을 A, B라고 가정
from sklearn.metrics.pairwise import manhattan_distance
manhattan_distance(A, B)

저작자표시 비영리 동일조건 (새창열림)

개발자 도구에서는 CSS변경, 페이지 로드 성능 확인, 네트워크 요청 모니터링과 같은 작업을 위한 도구를 제공합니다.
Source패널은 자바스크립트 디버그를 하는 곳입니다.
Source패널 UI는 크게 3부분으로 나뉩니다.

1. File Navigator. 해당 페이지가 요청하는 모든 파일이 나타납니다.
2. Code Editor. File Navigator창에서 파일을 선택한 후, 해당 파일의 콘텐츠가 표시됩니다.
3. JavaScript Debugging. 페이지의 자바스크립트를 검사하는 도구입니다.

디버깅 예시

데모사이트

위 데모사이트에서 Number1과 Number2의 합이 이상하게 나타나는 버그를 확인해보도록 하겠습니다.

변수값 확인

Scope
예시처럼 32번 라인을 클릭하면 중단점이 추가되며 파란색으로 바뀝니다.
이제 개발자도구는 이 코드 줄을 실행하기 전에 항상 일시중지합니다.
코드가 일시중지되면 Scope창이 현재 정의된 로컬과 전역 변수가 무엇인지 표시됩니다.

Watch
Watch 탭을 이용하면 시간에 따른 변수 값을 모니터링 할 수 있습니다.
+버튼(Add watch Expression)을 누르고 typeof sum을 입력합니다.
sum은 숫자여야하지만 문자열로 평가되고 있었습니다. 이렇게 버그의 원인을 확인할 수 있습니다.

실행추적

1. Resume: 스크립트 실행 다시 시작(단축키 F8)
2. Step over: 다음 명령어를 실행하되, 함수 안으로 들어가진 않음(단축키 F10)
3. Step into: Step과 유사하지만 Step은 비동기 동작은 무시하지만 Step into는 비동기 동작을 담당하는 코드로 진입하고 완료때까지 대기(단축키 F11)
4. Step out: 실행 중인 함수의 실행이 끝날때까지 실행을 계속함(단축키 Shift + F11)
5. Step: 다음 명령어를 실행합니다(단축키 F9)
6. 모든 중단점을 활성화/비활성화
7. 예외 발생시 코드를 자동 중지시켜주는 기능 활성화/비활성화