안녕하세요. 오늘은 웹 개발자들 사이에서 꾸준한 관심을 받고 있는 두 가지 웹 통신 기술, AJAX와 Fetch를 예제를 통해 비교해 볼 거예요. 이 두 기술은 서버와 통신하는 데 있어 각각 동기와 비동기 방식을 지원하는데요. 이번 포스팅에서는 서로의 차이를 살펴보고, 다양한 호출법에 대해 예제를 통해 알아보도록 하겠습니다. 동기(Sync) 방식은 코드가 순차적으로 실행되며, 요청이 완료될 때까지 다음 작업이 대기하는 방식이에요. 이 방식은 코드가 직관적이지만, 요청에 시간이 걸릴 경우 애플리케이션의 성능이 저하될 수 있죠. 동기 방식은 AJAX를 사용해 구현할 수 있습니다. 비동기(Async) 방식은 코드가 병렬로 실행되며, 요청이 완료되기 전에 다음 작업을 처리할 수 있는 방식이에요. 이 방식..
안녕하세요. 오늘은 OpenAI의 ChatGPT API를 사용해서 AI 챗봇을 만들어 볼 거예요. 개발자도구 콘솔에서 직접 실행 가능한 자바스크립트 코드를 구현하려고 했지만 HTML로 채팅창 디자인을 만들어서 대화하는 게 더 보기 편할 거 같아서 HTML 파일도 같이 만들겠습니다. 이번에 만들어볼 AI 챗봇은 OpenAI의 GPT-3 TURBO 모델을 활용할 거예요. 이 모델을 사용하기 위해선 API를 발급받아야 합니다. 이 모델은 API 요청 시 사용되는 토큰 수에 따라 비용이 발생하는데, 1000 토큰당 0.002$(약 2~3원)의 비용이 발생해요. 1000 토큰으로 생성 가능한 대략적인 문자 수는 600~700자 정도 되니 텍스트 길이를 적절하게 조절해서 사용한다면 큰 부담은 안될 거 같네요. 참고..
안녕하세요. 오늘은 네이버 검색 광고 API를 활용해서 키워드 검색량과 연관검색어를 조회하는 자바스크립트를 만들어볼 거예요. 이 API를 활용하면 PC와 모바일에서 각각 특정 키워드의 검색수를 조회하고, 인기 키워드와 해당 키워드의 연관 검색어들을 쉽게 파악하고 분석할 수 있어요. 이번 시간에도 추가적인 프로그램 사용이나 설치 과정 없이 자바스크립트를 이용해서 사용하고 계시는 브라우저 콘솔 창에서 바로 실행할 수 있는 코드로 만들게요. 그리고 HTML로 화면을 만들어서 키워드를 입력 후 검색 버튼을 누르면 결과를 리스트로 보여주는 예제도 같이 만들겠습니다. 먼저 네이버 API를 발급받아야 해요. 아래 URL 접속 후 네이버 아이디로 로그인해서 간단한 인증 과정만 거치면 바로 발급받을 수 있어요. ..
안녕하세요. 이번 시간에는 자바스크립트에서 비동기 처리를 위해 자주 활용되는 클로저(closure), AJAX, Fetch에 대해 다뤄보려고 해요. 이 함수들은 모던 웹 개발에서 많이 사용되는 기능 중 하나이기 때문에 알아두면 유용하게 활용하실 수 있어요! 먼저 개념부터 하나하나 알아볼게요. 1. 클로저 - Closure 클로저란, 함수가 선언될 당시의 *환경을 기억하을 하는 기능을 말해요. 자바스크립트에서는 함수가 호출될 때마다 새로운 환경이 생성되는데, 이 환경은 함수 내부의 변수와 함수 매개변수, 그리고 외부에서 전달된 인자 등을 포함하죠. 하지만, 함수 내부에서 선언된 변수는 외부에서 접근할 수 없어요. 이때, 클로저를 사용하면 함수 내부에서 선언한 변수에 접근할 수 있답니다. 이렇게 외부..
안녕하세요. 이번 시간에는 javascript로 chart.js를 활용해서 데이터 시각화를 위한 애니메이션 차트 만드는 법을 알아볼 거예요. chart.js는 canvas를 이용해서 다양한 유형의 차트를 그릴 수 있는 오픈소스 라이브러리예요. 사용법이 간편하고 많은 옵션이 제공돼서 누구나 쉽게 차트를 만들고 커스터마이징 할 수 있답니다. 이번에 만들 차트는 일반적으로 많이 사용하는 대표적인 막대, 라인, 원형 3종 차트입니다. 코드가 너무 길어지면 소스코드 의 가독성이 덜어지기 때문에 html 파일은 따로 만들고 디자인은 최소한으로 해서 코드를 줄일 거예요. 화면 우측에는 그래프를 보여주고, 좌측은 x축과 y축 각각 데이터를 입력할 수 있는 텍스트 필드를 만들어줄게요. 데이터를 입력할 수 있도록 추가..
한눈에 스킨 v1.1.0 업데이트 내용 1. 자동 글자 수 세기 관리자인 경우 본문상단에 공백을 포함한 글자수와 공백을 제거한 글자 수가 표시됩니다. * 본문의 텍스트를 추출하여 글자 수를 세는 방식입니다. DOM구조를 분석하여 텍스트를 추출하고, 그 텍스트를 기반으로 글자수를 세는 방식으로 웹페이지 내의 실제 텍스트를 정확하게 반영합니다. 타 웹사이트에서 제공하는 텍스트를 직접 읽어 처리하는 방식과는 약간의 차이가 있습니다. 2. 중복 단어 체크 관리자인 경우 중복 단어를 조회할 수 있는 버튼이 추가되었습니다. 버튼 클릭 시 본문에서 2회 이상 중복된 단어의 목록이 표시됩니다. *중복(반복) 단어 체크는 문장 구조나 문법과는 상관없이 단어를 공백 기준으로 추출한 것입니다. 대략적인 참고 용도로만 활용해..