기록

📌 JSP에서 JavaScript 모듈 사용하기JSP에서 JavaScript 모듈을 사용하려면 몇 가지 주의해야 할 점이 있다. 특히, 를 사용하면 된다.common.js 파일이 로드되며, 전역 스코프에서 사용 가능. 하지만 ES6 모듈을 사용하면 이렇게 로드할 수 없다. 📌 2. ES6 모듈(export / import) 사용 방법ES6 모듈을 사용하려면 ✔️ 모듈을 사용하면 import 키워드를 통해 특정 함수만 가져올 수 있다. ❌ 이클립스에서는 ✔️ JSP에서 없이도 ES6 모듈처럼 활용할 수 있다. ✔️ 이클립스에서도 코드 색상이 정상적으로 표시됐다.

📌 JavaScript 코드 실행 순서 & 실행 타이밍 제어 방법JavaScript는 브라우저에서 HTML을 해석하면서 실행된다! 그런데 코드의 실행 순서를 잘못 이해하면 예상과 다르게 동작하거나 오류가 발생할 수도 있다. 😵그래서 JavaScript의 실행 순서와 실행 타이밍을 제어하는 방법을 정리해보았다.✅ 1. JavaScript 코드 실행 순서JavaScript는 HTML을 위에서 아래로 해석하면서 실행된다.   🔹 기본적인 실행 흐름1️⃣ HTML(DOM) 위에서 아래로 해석2️⃣  🔹 실행 결과1️⃣ head 내부 스크립트 실행2️⃣ body 내부 script 실행3️⃣ document ready 실행 (DOM 완성 후)4️⃣ window.onload 실행 (이미지..

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)가 아닌 경우를 검사합니다. 이는 ..