기록

📌 1.type="file" HTML에서 요소는 사용자가 로컬 컴퓨터에서 파일을 선택해 서버로 업로드할 수 있게 하는 입력 필드다.file 입력 필드에 들어가는 데이터는 FileList 객체로 input[type="file"].files를 호출하면 FileList 객체가 반환된다. ✅ 동작 원리1️⃣ html의 기본 요소 중 하나인 file 요소는 클릭 시 로컬 파일 탐색기 창을 열고, 2️⃣ 파일을 선택하면, 요소의 값이 파일 객체로 채워진다.3️⃣ 폼 제출 시, 파일이 multipart/form-data 형식으로 서버에 전송된다. ⚠️ 주의: 태그의 enctype이 반드시 multipart/form-data로 지정되어야 파일이 전송된다. 📌 2. DataTransfer을 이용한 커스텀커스텀하..

1. node.js 설치 1-1. 다운로드https://nodejs.org/en 1-2. 설치 후 확인node -vnpm -v 2. Vue cli 설치2-1. 설치npm install -g @vue/cli 2-2. 설치 확인vue --version *Error: EPERM: operation not permitted, rmdir 에러 발생 시 관리자 권한으로 cmd/bash/powershell 실행 캐시 지우기npm cache clean --force-> 이후 다시 vue/cli 설치 시도. * 기타 참고 명령어Npm 최신 버전 설치npm install -g npm@latest --force 폴더 생성된 것 확인npm list -g --depth=0 전역 설치된 패키지 제거npm uninstall -g ..

0. 라이브러리 선택 기준기존 다른 editor 라이브러리를 사용하고 있었는데 불필요한 기능들이 많고 모바일뷰에서 적합하지 않아서 새로운 무료 라이브러리를 찾아보았다. 내 선택 조건은 아래와 같았다.무료 라이센스모바일 최적화JSP 환경많은 기능 필요x에디터에 사진 넣을 수 있어야함. 대부분 에디터 라이브러리가 react, vue 기준이거나 pc 기준인 것이 많았는데내 조건에 맞는 라이브러리로 summernote를 찾았다. 1. 사용방법1-1. 라이브러리 다운로드 및 적용다운로드 링크https://summernote.org/ 적용 위치/resources/js/plugins/summernote 1-2. Script, link 태그로 불러오기 1-3. Html 작성form 없이 썸머노트를 사용하려면 div에 ..

HTTP 상태 코드 (HTTP Status Codes)웹서버나 클라이언트 간 통신에서 응답 상태를 나타내는 3자리 숫자 코드 상태 코드의미설명1xx정보 응답(Informational)요청을 받았고 처리 중임을 알림2xx성공(Success)요청이 정상적으로 처리됨200OK성공적으로 요청 처리 완료201Created요청이 성공적으로 수행되어 자원 생성됨3xx리다이렉션(Redirection)클라이언트가 추가 작업 필요301Moved Permanently요청한 리소스가 영구적으로 다른 위치로 이동됨302Found요청한 리소스가 임시로 다른 위치로 이동됨4xx클라이언트 오류(Client Error)요청에 오류가 있어 서버가 수행 불가400Bad Request잘못된 요청401Unauthorized인증 필요403Fo..

📌 1. SOAP 개념과 REST와의 비교REST와 SOAP는 각기 다른 두 가지의 온라인 데이터 전송 방식. SOAP는 프로토콜, REST는 아키텍처 스타일이다.📌 1-1. SOAP (Simple Object Access Protocol)✅ 1-1-1. SOAP 기본 개념SOAP은 XML 기반의 메시징 프로토콜. 즉, 두 시스템이 데이터를 주고받는 방식에 대한 규격을 정해놓은 표준.SOAP 메시지는 XML 포맷으로 요청과 응답을 주고받고, 이를 기반으로 시스템 간의 상호작용을 정의.✅ 1-1-2. SOAP 특징프로토콜 기반: SOAP은 네트워크 프로토콜에 종속적이지 않지만, HTTP, SMTP, FTP 등 다양한 프로토콜을 사용할 수 있다.메시지 포맷: SOAP은 XML 포맷을 사용하여 데이터를 주..

📌 자바스크립트에서 모듈이란?모듈은 하나의 파일 안에 기능을 캡슐화하고, 필요한 부분만 외부로 내보내 다른 코드에서 재사용할 수 있게 해주는 코드 단위이다.-> 즉, 하나의 js 파일에서 다른 js파일 함수/객체를 이용하는 방법!! 📌 1. 를 사용하면 된다. 스크립트 파일 전체를 로드해서 전역에 추가하는 방식. -> 전역 변수 충돌 위험, 로드 순서가 중요한 단점이 있다!! ✔️ common.js 파일이 로드되며, 전역 스코프(window)에서 사용 가능. 📌 2. window 객체 활용브라우저의 전역 객체인 window에 등록하는 방법.특정 함수/객체만 전역에 노출 -> 하지만 여전히 충돌위험/로드 순서 중요. 📖 math.js (모듈 파일을 전역 변수로 등록)function add(a, ..

📌 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 파싱과 렌더링이 완료된 후에 자바스크립트를 로드, 사용자에게 페이지의 콘텐츠가 더 빨리 보인다. -> 초기 렌더링 성능 향상 - 단점조기 실행 불가능: 초기 설정이 필요하거나 HTML 요소가..

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