Topic

자바스크립트

A collection of 195 posts

url.parse() deprecated 문제 처리

URL 경로 문자열을 재가공하고 핸들링 하려면 문자열을 URL 객체로 변경해서 객체의 메소드를 사용하면 됩니다. 기존에 사용하던 방식은 URL 모듈을 가져와서 모듈의 parse() 메소드로 URL 객체를 반환받았습니다. const url = require('url') var u = url.parse(str_url) 간결하고 사용하기 편했는데 언젠가부터 VSCode에서 parse() 메소드에 줄이 그어져 보입니다. 사용하지 말라는 뜻입니다. 확인해보면
1 min read

Puppeteer waitFor() is not a function 에러 처리 방법

Puppeteer 버전 < 22.0 waitFor() 함수가 5.3.0 이상부터 waitForTimeout()으로 변경되었습니다. 코드를 waitFor(밀리세컨트) -> waitForTimeout(밀리세컨드)로 변경하면 됩니다. const browser = await puppeteer.launch({headless:true}) const page = await browser.newPage(); await page.setViewport({width:1920,height:1080,deviceScaleFactor:page.devicePixelRatio}); try{ await page.goto(url, {waitUntil:
1 min read

[javascript] 문자열에 문자열이 포함되어있는지 확인하는 방법 - 문자열 검색

자바스크립트에서 문자열에 특정 문자열이 포함되어 있는지 확인하는 함수는 indexOf(), includes() 두 가지입니다. 사용 방법은 단순하지만 사용 방법은 조금 달라서 용도도 조금 다릅니다. string.indexOf('찾는문자열') 문자열에서 찾는 문자열의 위치(인덱스)를 정수 값으로 반환합니다. 일치하는 문자열이 없으면 -1을 반환합니다. 찾는 문자열이 있는지만을 확인하려면 다음처럼 if문으로 조건 체크를 해야 합니다. let
2 min read

[javascript] 객체의 속성을 삭제하는 방법들 - delete 연산자 사용 방법

객체에서 속성을 사용할 때는 대표적으로 delete 연산자를 사용합니다. 객체의 속성 자체를 삭제하려는 것이 아니라면 속성 값을 초기화하는 다음 방법을 사용하는 것인 delete 연산자를 사용하는 방법보다 속도 면에서 훨씬 유리합니다. 평균적으로 delete 연산자를 사용하는 방법보다 두 배이상 빠릅니다. 목적이 속성 값을 초기화 하는 것인지 속성 자체를 삭제하려는 것인지 구분해서 꼭 필요한
5 min read

[javascript] jQuery로 요소가 보이지 않는지 확인하기

jQuery의 is() 함수를 사용해서 대상 요소가 보이거나 보이지 않는지 확인할 수 있습니다. is() 함수로 대상 요소의 CSS 화면 표시 속성인 visibility 속성의 값을 확인합니다. $(element).is(":visible"); $(element).is(":hidden"); 또는 쿼리 선택자로 속성까지 표시 해서 is() 함수 없이 한번에 확인할 수 있습니다. $("element:visible"); $("element:hidden"); CSS visibility 속성으로
2 min read

[javascript] JSON 문서에 코멘트를 사용하는 방법

표준 JSON문서는 데이터를 표현하는 규격만 있으며, 코멘트를 작성하거나 표시하는 규격은 없습니다. 따라서 JSON 안에 코멘트를 표시하는 태그, 또는 작성 방법은 없습니다. 모든 문서가 그렇지만, 데이터만을 표현하는 JSON에도 JSON 키와 데이터 구조에 대한 설명을 작성해서 JSON 데이터를 사용하는 사용자에게 알릴 필요가 있습니다. 그래서 JSON 안에 코멘트를 작성하는 몇몇가지 융통성 있는 방법,
2 min read

[AI] ChatGPT API와 node.js로 AI 자동 글쓰기 기능 만들기

ChatGPT API를 node.js에서 사용하려면 "openai" 패키지를 설치해야 합니다. openai는 node.js에서 ChatGPT API를 사용할 수 있게 해주는 모듈입니다. 인터넷으로 검색되는 ChatGPT API 사용 코드들의 상당수가 현재 버전의 최신 openai 모듈의 사용법과 호환이 되지 않습니다. 모듈의 객체 구조가 많이 다르고, ChatGPT API의 응답 결과를 담는 데이터 구조도 조금 다릅니다. 먼저
10 min read

[javascript] dialog 태그로 팝업창과 모달 대화상자 만들기

dialog 태그 별도의 창에 표시하지 않는 팝업창과 모달 대화상자를 생성하는 방법은 자바스크립트 코딩을 할 때 꽤 귀찮은 작업입니다. 웹 페이지 안에 모달창을 생성하는 많은 라이브러리들이 있지만 보다 가볍고 빠르게 로딩되는 요즘의 웹 제작 추세와는 거리가 있기 때문에 많은 경우 모달창을 커스텀 제작을 해서 사용하기도 합니다. 웹페이지 가운데 표시되는 인라인 팝업창
14 min read

[javascript] 정규표현식 객체와 매칭 함수 사용 방법 - RegExp match()

자바스크립트의 정규 표현식 객체 자바스크립트로 작성한 정규표현식은 별도의 개발 도구 없이 웹 브라우저 콘솔 창에서 코드를 실행해서 정규표현식 실행 결과를 확인할 수 있습니다. 자바스크립트는 정규 표현식을 내장 객체로 지원합니다. 정규 표현식 객체를 생성한 후, 문자열을 검색하는 메소드에 정규 표현식 객체를 인자로 삽입해서 정규 표현식 매칭을 합니다. 문자열을 검색하는 메소드 중에
9 min read

[javascript] null 체크와 널리시 값 체크

null 체크를 알기에 앞서 몇가지 기본적인 타입 체크를 하는 방식과 널리시(Nullish) 값에 대해서 알아야 합니다. typeof 자바스크립트에서 변수의 타입을 체크하는 지시자는 typeof 입니다. "typeof 변수명"을 하면 변수의 타입을 반환합니다. 기본적인 사용 방법은 다음과 같습니다. 반환하는 타입 정보는 문자열입니다. typeof 반환 값과 비교를 할 때는 문자열과 비교를 해야 합니다.
3 min read