JavaScript/JavaScript 문법60

• 

  [JavaScript]XMLHttpRequest의 readyState 이해하기 XMLHttpRequest의 readyState란? XMLHttpRequest의 readyState 프로퍼티는 XMLHttpRequest 객체의 상태를 보여줍니다. readyState 프로퍼티의 값이 변경될 때마다 readystatechange 이벤트가 실행되므로 해당 이벤트에서 readyState 프로퍼티의 값을 확인하는 것이 좋습니다. 값 상태 설명 0 UNSENT XMLHttpRequest 객체는 생성되었지만 open() 메서드가 호출되지 않았습니다. 1 OPENED open() 메서드가 호출되었습니다. 2 HEADERS_RECEIVED send() 메서드가 호출되었습니다. 3 LOADING 응답을 로드 중입니다. 4 DONE 요청 완료되었습니다. 이번 포스팅은 readyState가 변경되는 과정을.. JavaScript/JavaScript 문법 2022. 11. 7.

• 

  [JavaScript]XMLHttpRequest 사용 방법 XMLHttpRequest란? JavaScript에서 XMLHttpRequest 객체를 사용하여 서버에 동기 또는 비동기식 요청을 보낼 수 있으며, 요청에 대한 응답 정보를 웹 페이지에 로드할 수 있습니다. 따라서, 웹 페이지를 다시 로드하지 않아도 웹 페이지의 일부를 변경할 수 있습니다. XMLHttpRequest() 객체 사용 방법을 요약하면 다음과 같습니다. - XMLHttpRequest 객체를 생성합니다. - open() 메서드로 요청에 필요한 정보를 설정합니다. - send() 메서드로 서버에 요청을 보냅니다. - 응답에 대한 콜백 함수를 생성합니다. 이번 포스팅은 XMLHttpRequest 객체 사용 방법을 설명합니다. XMLHttpRequest 객체 생성 new 키워드를 사용하여 XMLHtt.. JavaScript/JavaScript 문법 2022. 11. 7.

• 

  [JavaScript]Boolean으로 변환하는 방법 Boolean으로 변환하는 방법 이번 포스팅은 JavaScript에서 값을 Boolean으로 변환할 수 있는 두 가지 방법을 소개합니다. 방법 1. !! 연산자 Not 연산자인 ! 연산자는 값을 Boolean으로 변환하고 값을 부정합니다. 그다음 ! 연산자를 추가적으로 호출하여 부정된 Boolean 값을 원래 Boolean 값으로 변환합니다. 예를 들어, true에 !! 연산자를 사용하는 경우 다음과 같이 동작합니다. // true 값을 부정합니다. !true // false // 부정된 값을 다시 복원합니다. !!true // true !(!true) // true !! 연산자는 일반적으로 많이 사용되는 방법이지만, 다른 개발자가 !! 연산자 동작 방식에 대한 이해도가 낮을 수 있습니다. [Number.. JavaScript/JavaScript 문법 2022. 10. 1.

• 

  [JavaScript]Promise 병렬 처리 JavaScript 특징 Promise 병렬 처리하는 방법을 알아보기 전에 JavaScript의 두 가지 특성부터 알아봅시다. 싱글 스레드(single-thread) JavaScript는 싱글 스레드(Single-Thread) 방식이므로 명령어 또는 코드가 순차적으로 실행됩니다. 그러므로 동시에 2개 이상의 함수를 실행시킬 수 없습니다. 이벤트 루프(Event Loop) JavaScript는 싱글 스레드 방식으로 동작하므로 이론적으로 비동기 작업이 불가능합니다. 하지만, 싱글 스레드가 이벤트 루프에 의해 처리되므로 멀티 스레딩(Multi-Thread) 방식으로 동작하는 것처럼 보여줍니다. Promise Promise는 비동기 처리에 사용되는 객체입니다. JavaScript 특성인 이벤트 루프의 규범을 따.. JavaScript/JavaScript 문법 2022. 5. 13.

• 

  [JavaScript]async, await 예외 처리 일반적인 예외처리 다음은 자바스크립트(JavaScript)에서 일반적인 예외처리입니다. function goThrows() { throw new Error('throw new Error from goThrows()'); } function run() { try { goThrows(); } catch(err) { console.error('catch from run()'); console.error(err); } finally { console.log('finally from run()'); } } run(); // catch from run() // Error: throw new Error from goThrows() // finally from run() run() 함수는 예외를 강제로 발생시키는 go.. JavaScript/JavaScript 문법 2022. 3. 27.

• 

  [JavaScript]길이만큼 문자열 자르기 자바스크립트(JavaScript)에서 일정한 길이만큼 문자열을 잘라야 하는 경우가 존재합니다. 예를 들어서 "ABCDEFGHIJ"라는 문자열을 길이 3으로 분리하면 ["ABC", "DEF", "GHI", "J"]라는 문자열 배열을 반환해야 합니다. 각 문자열은 정확한 길이로 분리되어야 합니다. 만약 다음과 같이 문자열의 길이가 특정 길이보다 작은 경우에는 배열의 요소는 한 개입니다. "AB"라는 문자열을 길이 5로 분리하면 ["AB"]라는 문자열 배열을 반환해야 합니다. 이번 포스팅은 자바스크립트(JavaScript)에서 문자열을 일정한 길이만큼 자르는 방법을 소개합니다. match 함수와 정규식을 활용한 방법 function chunkSubstr(str, size) { return str.match(n.. JavaScript/JavaScript 문법 2022. 3. 24.

• 

  [JavaScript]쿠키(Cookie) 사용 방법 쿠키(Cookie)란? HTTP는 웹에서 이루어지는 모든 데이터를 주고받기 위한 서버-클라이언트 모델을 따르는 프로토콜입니다. HTTP의 특징 중 하나로 "상태 비저장(stateless)"이 있는데, 이 특징은 세션과 같은 사용자 정보를 저장 또는 유지하지 않는다는 것입니다. 이러한 단점을 해결하기 위해 웹 브라우저는 쿠키라는 것을 사용합니다. 쿠키는 소량의 특정 데이터를 기억하기 위해 저장하는 데이터로 사용자 컴퓨터에 저장됩니다. 쿠키의 특징 웹 브라우저(IE, Chrome, Firefox등...)마다 쿠키가 저장되는 위치가 다릅니다. 쿠키는 이름-값 쌍의 형태의 정보를 문자열로 저장합니다. 사용자의 웹 브라우저가 쿠키를 읽어서 사용자 정보 같은 데이터를 식별합니다. 쿠키의 단점 보유할 수 있는 데이터.. JavaScript/JavaScript 문법 2022. 2. 4.

• 

  [JavaScript]URL 사용 방법 URL 객체란? URL 객체는 디스크의 파일을 가리키는 객체입니다. 사용자가 이미지 또는 pdf와 같은 파일을 선택하여 웹 페이지에 미리보기를 보여줘야 하는 경우 URL 객체를 사용할 수 있습니다. URL 객체 사용 방법 URL 객체는 전역 객체로 URL 처리를 지원하는 여러 함수가 포함되어 있습니다. ▶ URL 생성 URL 객체의 createObjectURL() 함수를 사용하여 File 또는 Blob 객체를 가리키는 URL을 생성할 수 있습니다. 함수의 인수로 파일 객체를 전달합니다. File 또는 Blob 객체는 생성된 고유한 URL에 매핑되고 URL.createObjectURL() 함수는 URL을 string으로 반환합니다. 다음 예제는 업로드한 이미지 파일을 표시하는 예제입니다. input 엘리먼.. JavaScript/JavaScript 문법 2022. 2. 4.

• 

  [JavaScript]예외 처리(Exception Handling) 예외 처리란? 예외 처리는 프로그램에서 발생할 수 있는 오류를 대응하는 방법을 의미합니다. 프로그램에서 발생하는 오류는 프로그래밍 언어에 따라 다를 수 있으며, JavaScript는 다음과 같은 이유로 오류가 발생할 수 있습니다. 구문 오류(SyntaxError): 세미콜론 또는 대괄호 누락으로 발생하는 오류입니다. 범위 오류(RangeError): 값이 표현할 수 있는 범위를 벗어나는 경우 발생하는 오류입니다. 참조 오류(ReferenceError): 존재하지 않는 변수에 값을 할당하는 경우 발생하는 오류입니다. 타입 오류(TypeError): 값이 예상한 결과와 다른 경우 발생하는 오류입니다. URIError: endcodeURI() 또는 decodeURI() 함수에 의해 발생하는 오류입니다. 그 외.. JavaScript/JavaScript 문법 2022. 2. 3.

• 

  [JavaScript]파일 입출력 - FileReader 객체 FileReader란? FileReader는 type이 file인 input 태그 또는 API 요청과 같은 인터페이스를 통해 File 또는 Blob 객체를 편리하게 처리할 수 있는 방법을 제공하는 객체입니다. abort, load, error와 같은 이벤트에서 발생한 프로세스를 처리하는데 주로 사용되며, File 또는 Blob 객체를 읽어서 result 속성에 저장합니다. JavaScript 개발자는 result 속성을 통해 데이터를 접근할 수 있습니다. 이번 포스팅은 FileReader 객체에 대해 소개하며, 예제는 이전 포스팅을 참고해주세요. 목차 비동기로 동작하는 FileReader FileReader 사용 방법 언제 File 또는 Blob를 읽어야 하는지 FileReader 객체의 주요 속성 비동.. JavaScript/JavaScript 문법 2022. 1. 25.

• 

  [JavaScript]파일 업로드 구현 이번 포스팅은 JavaScript에서 파일 업로드 구현하는 방법을 소개합니다. HTML input 태그 작성 html 파일에서 input 태그를 작성 후 type = 'file'로 설정하고 input 태그의 id를 지정합니다. 하나 이상의 파일을 업로드해야 하는 경우 multiple='multiple' 속성을 추가합니다. 또한 이미지 유형에 대해 업로드하는 경우 accept 속성을 accept='image/*'와 같이 작성하며 파일 확장자를 jpg만 허용하는 경우 accept='.jpg'로 작성합니다. JavaScript에서 이벤트 핸들러를 구현 const fileInput = document.getElementById("fileUpload"); // 또는 const fileInput = $("#file.. JavaScript/JavaScript 문법 2022. 1. 25.

• 

  [JavaScript]exceljs 사용방법 및 엑셀 다운로드(내보내기) 이번 포스팅은 exceljs 라이브러리를 사용하여 엑셀 다운로드(내보내기)하는 방법을 소개합니다. exceljs를 사용하는 이유 JavaScript에서 엑셀 다운로드를 지원하는 다양한 라이브러리가 존재하지만, exceljs 라이브러리는 엑셀의 모든 셀을 접근하여 커스텀할 수 있다는 장점이 있습니다. font, border, fill 등... 특정 행의 셀마다 스타일을 설정할 수 있으며 이미지도 엑셀로 내보낼 수 있습니다. 자세한 사용 방법은 exceljs 공식 문서에서 확인할 수 있습니다. 엑셀 다운로드 구현 방법 예제는 react에서 구현하였지만, JavaScript를 사용하는 다른 웹 프레임워크에서도 사용할 수 있습니다. ※ 주의사항 exceljs의 주의사항으로 행과 셀은 0이 아닌 1부터 시작합니다.. JavaScript/JavaScript 문법 2022. 1. 25.