반응형 FrontEnd6 History모드 : SPA, SSR, CSR SPA: (Single Page Application)각 UI는 javascript 코드로 만들어서 하나의 페이지( html 문서) 에 마운트 시킨다.페이지를 따로 로딩하지 않아도 되기 때문에 UI를 빠르게 사용할 수 있다. SSR: 서버측에서 각 페이지 UI에 보여질 리소스를 생성해서 화면으로 내려주는 방식CSR: 클라이언트에서 javascript코드로 html생성해서 보여주는 방식 [운영서버에 배포할 때 차이점] History모드: 전체 경로를 포함해서 리소스를 요청한다.하지만 히스토리 모드로 서버에 배포를 하게 되면 404 NotFound 페이지가 보여지게 된다. 즉 히스토리 모드로 서버에 배포를 할 때는 추가로 사용하는 서버에 맞게 설정을 해줘야 한다. hash모드: 해시모드로 서버에 자원.. 2024. 8. 5. javascript에서 this 컨트롤 하기 * 해당 글은 정리가 잘 된 포스팅 글 전체를 가져온 글입니다. (공부를 위해 타이핑..) 같은 글이니 아래 링크에서 포스팅 확인하세요 :) https://poiemaweb.com/js-this this는 매개변수로 전달되는 인자값 이외에 argument객체와 this를 암묵적으로 전달 받는다. this를 통해 자신이 속한 객체 또는 자신이 생성할 인스턴스의 프로터피나 메서드를 참조할 수 있다. 크게보면 전역에서 사용할 때와 함수안에서 사용할 때로 나눌 수 있다. 자바스크립트에서 this는 함수 호출 방식에 따라 바인딩되는 객체가 달라진다. 1. 전역에서 선언된 함수에서의 this는 global(window, global)이다. 2. 함수 내부에서 사용하는 this - 엄격모드에서 일반 내부함수의 thi.. 2024. 4. 1. 브라우저 성능 최적화 앞 글에서 웹 최적화를 위해 reflow와 repaint에 대한 정리를 하면서 paint과정 외에도 composite라는 과정이 더 있는 점을 알게 되었다. composite는 브라우저가 각각의 레이어를 스타일 방식에 따라서 병렬적으로 레이어로 분류되고 paint을 한 후에 모든 레이어를 합치는 과정이다. 애니메이션을 처리하기 위해서 GPU도 사용하게 된다. GPU에서 애니메이션을 처리하므로 메인 스레드는 렌더링 레이아웃에 포커스를 둘 수 있게 된다. * 브라우저가 별도의 Layer 생성할 때 조건 * - video, canvas 태그 사용 - animation 이나 transition 사용 - will-change가 opacity, left, top, bottom, right, transform - i.. 2024. 3. 30. [vue2] 비밀번호 유효성 검사 연속문자 체크하기 비밀번호에 대한 요구 조건을 아래와 같이 정했다. 1. 최소 10자리 최대 16자리 2. 영문과 숫자 포함 필수 3. 공백과 특수문자는 미포함 내가 구현했던 방식은 실제 비밀번호를 입력하는 input에서 벨리데이션을 검사하고 비밀번호 확인란은 단순히 앞에 입력한 비밀번호와 일치하는지 안하는지 여부에 따져서 버튼을 활성화 시켜줬다. [invalid.js] - 정규표현식이나 유효성 모음 파일을 별도로 분리해서 사용했다. export default { pwValid: /(?=.*[a-zA-Z])(?=.*[0-9]){10,16}$/, repeatWord: ['0123456789', 'abcdefghijklmnopqrstuvwxyz','ABCDEFGHIJKLMNOPQRSTUVWXYZ'], keyboard: ['1.. 2024. 3. 25. 이전 1 2 다음 728x90 반응형
