JS - 마크다운 문법 html 웹 페이지와 호환하기 (마크다운 html 변환, markdown to html)

개요마크다운 문법으로 구성된 문서를 HTML에 표시하고 싶을 때 어떻게 해야할까?직접 구현하는 것도 좋지만, 보편적으로 이미 만들어져있는 것을 사용하는 것이 생산성면에서 훨씬 이득이다.보편적으로 사용되는 Markdown > HTML로 변환하는 라이브러리는 Marked를 이용한다.이번 포스팅에서는 Marked 라이브러리를 이용하여 Markdown 형식의 문서를 HTML 로 변환하는 방법에 대해 가볍게 다뤄본다. 단, 단순히 파싱만 하는 과정을 소개하며 자세한 옵션에 대한 처리는 다루지 않는다.(글을 쓰는 목적은 단순히 마크다운의 문서를 웹 페이지에 표시하기 위함이기 때문이다.) Marked 라이브러리란?Marked는 JavaScript 기반의 Markdown 파서(parser)이다.이 라이브러리는 Mark..

• format_list_bulleted Web/Javascript
• · 2024. 7. 1.
• textsms

JS - iframe 페이지에서 부모 페이지 요소 제어하기, 샘플 포함

개요iframe에서 부모 페이지의 요소를 제어해야 할 때가 있다.내 상황으로 예를 들자면, iframe 페이지에서 선택한 값을 부모 페이지로 넘겨주고 싶다.보통 다른 페이지간 데이터 전달은 URL 주소 뒤에 물음표(?) 기호를 이용하는 쿼리 스트링을 사용하지만,페이지 내에 구성되어 있는 iframe은 조금 경우가 다르다. 방법요소를 선택하는 것은 기본적으로 document.getElementId를 사용한다.여기서 부모 요소를 의미하는 window.parent 키워드를 추가적으로 이용하면 된다. window.parent:window.parent는 현재 iframe의 부모 창을 참조하는 것을 의미한다.iframe 내부에서 실행될 때 window.parent를 통해 부모 문서의 window 객체에 접근할 수 ..

• format_list_bulleted Web/Javascript
• · 2024. 6. 29.
• textsms

JS - 문자열, 유니코드 변환하기 (유니코드 인코딩/디코딩, String to Unicode, Unicode to String)

문자열을 유니코드로 변환하기 문자열을 유니코드로 변환하려면 charCodeAt() 메서드를 사용하여야 한다. [ 구문 ] charCodeAt(index) charCodeAt() 메서드 설명 문자열의 지정된 인덱스에서 UTF-16 코드를 나타내는 정수를 String 타입으로 반환한다. 주어진 인덱스에서 유니코드 포인트를 얻으려면 괄호 사이에 인덱스를 넣으면 된다. 가능한 값의 범위는 0부터 65535까지이며, 인덱스가 범위를 벗어나면 NaN 값을 반환한다. 문자열의 인덱스란, 문자열에서 나타내는 글자수로 생각하면 이해하기 쉽다. 예를 들어, '은별' 이라는 문자열이면.. '은'의 문자 인덱스는 0이고 '별'의 문자 인덱스는 1이다. 유니코드 포인트 변환 예시 // 문자열을 유니코드로 출력 let str =..

• format_list_bulleted Web/Javascript
• · 2024. 2. 29.
• textsms

JS - async function, Promise를 활용하여 비동기 작업 수행하기, 비동기 작업을 동기로 처리하기

서론 각각의 작업 a, b, c가 있다. a는 5초가 걸리고, b는 10초, c는 3초가 걸린다. 작업을 순차적으로 기다리면서 처리하게 된다면 이 작업은 총 5+10+3 으로 총 18초가 걸리게 된다. 그럼 각각의 작업을 일괄적으로 처리하게 하려면 어떻게 해야 할까? 정답은 비동기 작업으로 해당 작업들을 수행하면 된다. 이 포스팅에서는 비동기 방법 중 Promise 객체에 대해 다룬도록 한다. Promise 개념 비동기 작업의 완료 또는 실패에 따른 결과 값을 나타내는 객체 비동기 메서드에서 마치 동기 메서드처럼 반환할 수 있음 세 가지의 상태가 존재 대기(pending) : 초기 상태 이행(fulfilled) : 비동기 작업 성공 거부(rejected) : 비동기 작업 실패 상태에 따라 then 메서드..

• format_list_bulleted Web/Javascript
• · 2023. 11. 17.
• textsms

JS - Date 표준 내장 객체 설명, 현재 시간 구하기, 날짜/시간 형식 변경하기

Date 객체 설명 Date 객체 자바스크립트의 표준 내장 객체 시간의 한 점을 플랫폼에 종속되지 않는 형태로 나타냄 1970년 1월 1일 UTC(국제표준시) 자정과의 시간 차이를 밀리초로 나타내는 정수 값을 담음 Date() 생성자 시간의 특정 지점을 나타내는 Date 객체 플랫폼에 종속되지 않는 형태로 생성 Date 객체는 1970년 1월 1일 UTC(국제표준시) 자정으로부터 지난 시간을 밀리초로 나타내는 UNIX 타임 스탬프를 담음 const today = new Date(); console.log("new Date ===>>> " + today); // new Date ===>>> Fri Aug 04 2023 13:53:27 GMT+0900 (한국 표준시) Date 객체 메서드 (현재 날짜 시간 ..

• format_list_bulleted Web/Javascript
• · 2023. 8. 7.
• textsms

JS - 인코딩 함수 encodeURIComponent()와 encodeURI() 그리고 escape() 개념과 함수 설명, 차이점

문자 인코딩 문자 인코딩(Character encoding) 혹은 텍스트 인코딩(Text encoding) 또는 줄여서 인코딩이라 한다. 한국어로는 암호화(=부호화)를 의미하며, 반대말은 복호화(decoding)이라 부른다. 사용자가 입력한 문자나 기호들을 컴퓨터가 이용할 수 있는 신호로 만드는 것을 의미한다. 인코딩은 보통 인터넷에서 파일을 다운로드 받거나 혹은 웹 페이지 검색이나 페이지 이동 시에 주소창에 이상한 글씨들로 주소가 되어 있는 것을 본 경험이 있을 것이다. 이는 대개 표현할 수 없는 기호나 공백들을 처리할 수 있도록 인코딩을 한 형태이다. 대부분의 사용자는 인코딩의 형식을 위와 같은 경우에서 많이 보았을 것이다. 예를 들어 보자. "가 나"라는 문자열이 있다. 이 문자열의 공백을 처리하기..

• format_list_bulleted Web/Javascript
• · 2023. 8. 1.
• textsms