기록

Vue Router에서 네비게이션 가드(Navigation Guards)는 사용자가 페이지(라우트) 간 이동할 때 특정 조건을 확인하거나 동작을 수행할 수 있는 메커니즘입니다. 주로 인증과 권한 제어를 위해 사용됩니다. 1. 네비게이션 가드의 종류1-1. 전역 가드 (Global Guards)전역적으로 모든 라우트 변경에 대해 작동합니다.beforeEach라우팅이 시작되기 전에 실행됩니다.주로 인증 또는 권한 확인에 사용됩니다.router.beforeEach((to, from, next) => { if (to.meta.requiresAuth && !isAuthenticated()) { next('/login'); // 인증이 필요하지만 인증되지 않았으면 로그인 페이지로 이동 } else { ..

HTML 문서에서 자바스크립트 파일을 임포트하는 위치는 성능과 사용자 경험에 영향을 미칠 수 있습니다. 자바스크립트를 어디에 삽입하느냐에 따라 페이지 로딩 시간, 초기화 속도, 그리고 페이지 렌더링에 차이가 발생합니다.주요 위치와 각각의 장단점을 살펴보겠습니다.1. - 장점 자바스크립트의 조기 실행: 자바스크립트가 페이지 로딩 초기에 실행되어야 할 때 유용합니다. 예를 들어, 초기 설정이나 중요한 데이터 로드가 필요할 때 사용할 수 있습니다. - 단점렌더링 차단: 자바스크립트 파일이 로드되고 실행될 때까지 HTML 파싱이 중단됩니다. 이는 페이지의 초기 렌더링 속도를 느리게 만듭니다. 2. 태그 끝에 위치 - 장점 렌더링 최적화: HTML 파싱과 렌더링이 완료된 후에 자바스크립트를 ..

호이스팅(hoisting) 이란?자바스크립트에서 변수와 함수의 선언이 해당 스코프의 최상단으로 끌어올려지는 것처럼 동작하는 특성입니다.선언은 스코프의 최상단으로 옮기지만, 초기화(할당)는 그 위치에서 그대로 이루어집니다.호이스팅은 함수와 변수를 다르게 처리합니다. 호이스팅(hoisting) 원인실행 컨텍스트의 생성 단계에서 변수와 함수의 선언이 미리 처리되기 때문에 발생합니다.실행 컨텍스트는 자바스크립트 코드가 실행되는 환경을 정의하며, 함수 호출 또는 전역 코드가 실행될 때마다 생성됩니다.실행 컨텍스트는 생성 단계와 실행 단계로 나뉩니다.생성 단계 (Creation Phase)변수와 함수 선언 처리: 실행 컨텍스트가 생성될 때, 자바스크립트 엔진은 먼저 현재 스코프 내의 변수와 함수 선언을 찾아서 메모..

쿠키(Cookie), 세션(Session), 캐시(Cache)는 웹 애플리케이션에서 데이터를 저장하고 관리하는 데 사용되는 세 가지 주요 개념입니다. 쿠키(Cookie)쿠키는 클라이언트 측(웹 브라우저)에 저장되는 작은 데이터 파일입니다. 주로 사용자와 웹 서버 간의 상태 정보를 저장하고 유지하는 데 사용됩니다.저장 위치: 클라이언트(웹 브라우저)수명: 서버가 설정한 만료 시간까지 지속됨. 만료 시간 없이 설정된 쿠키는 브라우저 세션이 끝나면 삭제됨.사용 예: 로그인 상태 유지, 사용자 설정 저장, 트래킹 정보 저장장점: 서버 부담 감소, 사용자의 장치에 데이터 저장 가능단점: 보안 취약성(쿠키 탈취), 저장 용량 제한(일반적으로 4KB) 세션(Session)세션은 서버 측에서 관리되는 데이터 저장 방식..

React Hooks Hooks 는 리액트 v16.8 에 새로 도입된 기능으로서, 기존의 함수형 컴포넌트에서 할 수 없었던 다양한 작업을 할 수 있게 해줍니다. 함수형 컴포넌트에서 상태(state)와 생명주기(lifecycle) 메서드를 사용할 수 있도록 하는 기능입니다. 코드를 더 간결하고 가독성 있게 작성할 수 있습니다. *함수형 컴포넌트, 클래스형 컴포넌트 https://sumni.tistory.com/69 react Component React Component 비교 Class Component 많은 기능제공, 대신 코드길고복잡, 성능느림 - provide more features - longer code - more complex code - slower performance Functional..

개념 Socket 일반적인 소켓은 네트워크 통신을 위한 엔드포인트를 나타냅니다. TCP/IP 기반의 네트워크에서 사용되며, 클라이언트와 서버 간의 양방향 통신을 가능하게 합니다. 주로 로컬 네트워크 또는 인터넷을 통해 컴퓨터 간의 통신을 할 때 사용됩니다. WebSocket 웹 소켓은 HTML5에서 지원하는 통신 프로토콜로, 클라이언트와 서버 간의 실시간 양방향 통신을 가능하게 합니다. 일반적인 소켓과 달리, 웹 브라우저에서도 사용할 수 있으며, HTTP 프로토콜 위에 구현되어 있습니다. 웹 소켓은 클라이언트와 서버가 지속적으로 연결된 상태를 유지하며, 실시간으로 데이터를 주고받을 수 있습니다. Socket.IO Socket.IO는 웹 소켓을 이용한 실시간 양방향 통신을 구현하기 위한 JavaScript..

file-saver를 이용해 파일을 다운로드 하는데 fetch함수의 response가 실패라고 떴다. 알고보니 파일위치를 변경할 필요가 있었습니다. public 디렉토리 Vue CLI에서 public 디렉토리는 정적 자원을 호스팅하는데 사용되는 특별한 디렉토리입니다. 이 디렉토리 내의 파일들은 빌드할 때 루트 경로(/)에서 접근 가능한 정적 파일로 처리됩니다. (react에서도 사용합니다!!) 기본적으로 public 디렉토리는 Vue CLI 프로젝트의 루트 디렉토리에 위치합니다. 프로젝트를 구조 예시 입니다. project-root |-- public | |-- index.html | |-- assets | |-- files | |-- filename.pdf |-- src |-- ... *정적 파일 서버..

iframe을 이용하는 화면에서 sesstion timeout이 발생했을 때 로그인 페이지로 이동해야하는데 iframe 영역안에서 login페이지로 가는 경우가 있습니다. login페이지의 js에 아래와 같이 작성하면 됩니다. $(document).ready(function(){ if ( self !== top ) { top.location.href = "/"; } }); $(document).ready(function(){...});: 문서(페이지)가 로드될 때 실행되는 jQuery의 함수입니다. 이는 페이지의 모든 요소가 로드된 후에 스크립트가 실행되도록 보장합니다. if (self !== top) { ... }: 현재 페이지(self)가 최상위 레벨 페이지(top)가 아닌 경우를 검사합니다. 이는 ..

file-saver 자바스크립트에서 파일을 생성하고 사용자에게 다운로드할 수 있게 해주는 라이브러리입니다. 1. 설치 npm install file-saver 2. 사용법 saveAs 함수 이 함수를 사용하여 클라이언트 측에서 파일을 저장하고 다운로드할 수 있습니다. saveAs(다운로드할 파일의 데이터 (Blob 또는 File), 다운로드될 파일의 이름) 3. 예시 (vue3) import { saveAs } from 'file-saver'; // fetch 함수를 사용하여 지정된 URL에서 PDF 파일을 가져옵니다. // 가져온 PDF 파일을 ArrayBuffer로 변환합니다. const fetchPdf = async () => { const response = await fetch('/assets/..

Redux는 JavaScript 애플리케이션의 상태 관리 라이브러리로, 특히 React와 함께 사용되어 복잡한 상태를 효율적으로 관리하고 상태 관련 로직을 분리하는 데 도움을 줍니다. Redux의 핵심 개념은 "스토어(Store)", "액션(Action)", "리듀서(Reducer)"입니다. https://sumni.tistory.com/67 Redux, Props, State 개념 1. 개념 Redux : 상태관리 라이브러리, state를 이용해 웹 사이트 혹은 애플리케이션의 상태 관리를 해줄 목적으로 사용. Props 1. porperties의 줄임말 2. 부모 컴포넌트에서 자식 컴포넌트한테 보낼 수 sumni.tistory.com 1. Redux 설치 먼저 Redux를 설치합니다. npm 또는 ya..