◆ 주소 끝에 "/"를 사용하는 이유
- 끝에 슬래시가 있는 URL은 디렉토리를 나타낸다.
- ex) https://example.com/about/
- 끝에 슬래시가 없는 URL은 특정 파일을 가리킬 수 있습니다.
- ex) https://example.com/about
- 엔드포인트를 동일하게 하기 위해서
- 인터셉터의 처리를 쉽게 하기 위해서
- 검색 엔진이 콘텐츠를 색인화할 때 중복된 콘텐츠로 간주되는 것을 방지할 수 있습니다.
- 끝에 슬래시를 추가하면 검색 엔진 최적화(SEO)에 도움이 되고 웹 서버가 요청을 올바르게 처리할 수 있습니다.
◆ 경로변수와 쿼리스트링(?)
- 경로 변수와 쿼리 문자열은 모두 URL을 통해 서버에 데이터를 전달하는 데 사용됩니다.
◆경로변수
- URL 경로의 일부이며, 서버에서 특정 리소스 또는 리소스 그룹을 식별하는 데 사용됩니다.
- 일반적으로 RESTful API에서 사용되며 계층 구조를 따릅니다.
- ex) https://example.com/users/123
- 데이터 값이 없으면 안된다.
- 정규표현식 사용 가능하다.
◆쿼리스트링(?)
- 물음표(?) 뒤에 추가되는 키-값 쌍입니다.
- 요청에 대한 추가 데이터나 매개변수를 제공하는 데 사용됩니다.
- 필터, 정렬 옵션 또는 페이지 정보와 같은 추가 데이터를 서버에 전송하는 데 사용됩니다.
- ex) https://example.com/users?sort=asc&page=2
- 이 예시에서 sort와 page는 각각 asc와 2라는 값을 가진 쿼리 문자열 키입니다.
- 데이터가 없을 수도 있다.
◆ 한글 등 IME 입력 이슈에 대응하기 위한 방법
- v-model만으로는 어려우므로 v-on:input을 같이 사용한다.
- v-on:input으로 입력 발생 시 수동으로 데이터를 갱신하도록 작성한다.
v-on:input="데이터 = $event.target.value"
- $event는 Vue에서 관리하는 이벤트 정보 객체이다.
◆ watch와 computed의 차이 설명
◆ 감시 영역(watch)
- 값 반환이 불가능하다.
- data의 변동사항이 생기면 자동으로 실행되는 영역이다.
- computed와 유사한 역할을 수행하지만 다르다.
- watch는 데이터가 변했을 때 특정 코드를 실행하는 용도
- 특정 속성 변경에 따라 비동기 통신이나 부수 효과를 수행해야 하는 경우에 사용
- 계산이 복잡해질 수록 watch를 쓰는 것이 성능적으로 좋다.
◆ 데이터 실시간 계산 영역(computed)
- 값을 반드시 반환해야 한다.
- computed는 새로운 값을 계산하는 용도
- 이는 캐시되고 반응성 있는 getter 함수로, 종속성이 변경될 때 자동으로 업데이트됩니다.
- computed는 watch보다 상대적으로 서버의 무리가 더 많이 가므로 비동기통신에서는 watch를 사용한다.
- 동일(단일)한 작업이 가능하다면 computed를 쓰는 것이 성능적으로 좋다.
- 캐싱 방식을 사용하여 데이터의 변화가 없을 경우 추가 계산을 수행하지 않는다.
◆ lodash 라이브러리
- throttle과 debounce를 이용할 수 있다.
- 자바스크립트 최적화를 해주는 라이브러리
◆ throttle
- 시간을 억제해서 느리게 실행
(사용자 입장에서 느리게 느껴질 수 있다.)
- 설정한 주기대로 실행(미만 제거)
◆ debounce
- 마지막만 실행
- 설정한 주기만큼 지난 후 실행
- 일정 시간 이상 입력이 없어야한다.
- 스크롤바에 사용
- blur 대신 사용
- 실행 횟수가 적기때문에 throttle보다 성능이 좋다.
- VueJS
VueJS를 사용할 경우 EL과 JSTL(백엔드 언어)는 사용하지 못한다.
자바스크립트를 사용해야한다.
ex) 60,000원 처럼 형식 설정
VueJS는 한 페이지의 CRUD를 사용할 경우 이용한다.
관리자페이지, 메세지
overflow:hidden;
: 브라우저의 화면 영역 만큼은 데이터가 잘려서 출력된다.
overflow:scroll;
: 데이터가 많은 경우, 스크롤바가 생성
overflow:visible;
: 브라우저의 화면 영역을 초과해서 데이터가 출력된다.