Ajax, Fetch의 동기 및 비동기 방식 알아보기

안녕하세요. 오늘은 웹 개발자들 사이에서 꾸준한 관심을 받고 있는 두 가지 웹 통신 기술, AJAX와 Fetch를 예제를 통해 비교해 볼 거예요. 이 두 기술은 서버와 통신하는 데 있어 각각 동기와 비동기 방식을 지원하는데요. 이번 포스팅에서는 서로의 차이를 살펴보고, 다양한 호출법에 대해 예제를 통해 알아보도록 하겠습니다. ​ 동기(Sync) 방식은 코드가 순차적으로 실행되며, 요청이 완료될 때까지 다음 작업이 대기하는 방식이에요. 이 방식은 코드가 직관적이지만, 요청에 시간이 걸릴 경우 애플리케이션의 성능이 저하될 수 있죠. 동기 방식은 AJAX를 사용해 구현할 수 있습니다. ​ 비동기(Async) 방식은 코드가 병렬로 실행되며, 요청이 완료되기 전에 다음 작업을 처리할 수 있는 방식이에요. 이 방식..

• format_list_bulleted 개발 이야기/Javascript 이야기
• · 2023. 6. 11.
• textsms

OpenAI의 ChatGPT API를 활용한 AI 챗봇 만들기

안녕하세요. 오늘은 OpenAI의 ChatGPT API를 사용해서 AI 챗봇을 만들어 볼 거예요. 개발자도구 콘솔에서 직접 실행 가능한 자바스크립트 코드를 구현하려고 했지만 HTML로 채팅창 디자인을 만들어서 대화하는 게 더 보기 편할 거 같아서 HTML 파일도 같이 만들겠습니다. 이번에 만들어볼 AI 챗봇은 OpenAI의 GPT-3 TURBO 모델을 활용할 거예요. 이 모델을 사용하기 위해선 API를 발급받아야 합니다. 이 모델은 API 요청 시 사용되는 토큰 수에 따라 비용이 발생하는데, 1000 토큰당 0.002$(약 2~3원)의 비용이 발생해요. 1000 토큰으로 생성 가능한 대략적인 문자 수는 600~700자 정도 되니 텍스트 길이를 적절하게 조절해서 사용한다면 큰 부담은 안될 거 같네요. 참고..

• format_list_bulleted 개발 이야기/Javascript 이야기
• · 2023. 6. 9.
• textsms

자바스크립트로 키워드 검색량과 연관검색어 조회하기

안녕하세요. 오늘은 네이버 검색 광고 API를 활용해서 키워드 검색량과 연관검색어를 조회하는 자바스크립트를 만들어볼 거예요. 이 API를 활용하면 PC와 모바일에서 각각 특정 키워드의 검색수를 조회하고, 인기 키워드와 해당 키워드의 연관 검색어들을 쉽게 파악하고 분석할 수 있어요. ​ 이번 시간에도 추가적인 프로그램 사용이나 설치 과정 없이 자바스크립트를 이용해서 사용하고 계시는 브라우저 콘솔 창에서 바로 실행할 수 있는 코드로 만들게요. 그리고 HTML로 화면을 만들어서 키워드를 입력 후 검색 버튼을 누르면 결과를 리스트로 보여주는 예제도 같이 만들겠습니다. ​ 먼저 네이버 API를 발급받아야 해요. 아래 URL 접속 후 네이버 아이디로 로그인해서 간단한 인증 과정만 거치면 바로 발급받을 수 있어요. ..

• format_list_bulleted 개발 이야기/Javascript 이야기
• · 2023. 6. 7.
• textsms