쭈미로운 생활
close
프로필 배경
프로필 로고

쭈미로운 생활

  • 분류 전체보기 (27)
    • 개발 이야기 (17)
      • Javascript 이야기 (13)
      • Flutter 이야기 (4)
    • 유용한 정보 (4)
    • 한눈에 스킨 (6)
  • Home
  • hannoone
  • TensorFlow
  • JavaScript
  • Flutter
Ajax, Fetch의 동기 및 비동기 방식 알아보기

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

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

  • format_list_bulleted 개발 이야기/Javascript 이야기
  • · 2023. 6. 11.
  • textsms
OpenAI의 ChatGPT API를 활용한 AI 챗봇 만들기

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
자바스크립트 클로저(Closure)와 Fetch를 사용한 비동기 처리

자바스크립트 클로저(Closure)와 Fetch를 사용한 비동기 처리

안녕하세요. 이번 시간에는 자바스크립트에서 비동기 처리를 위해 자주 활용되는 클로저(closure), AJAX, Fetch에 대해 다뤄보려고 해요. 이 함수들은 모던 웹 개발에서 많이 사용되는 기능 중 하나이기 때문에 알아두면 유용하게 활용하실 수 있어요! 먼저 개념부터 하나하나 알아볼게요. ​ 1. 클로저 - Closure 클로저란, 함수가 선언될 당시의 *환경을 기억하을 하는 기능을 말해요. 자바스크립트에서는 함수가 호출될 때마다 새로운 환경이 생성되는데, 이 환경은 함수 내부의 변수와 함수 매개변수, 그리고 외부에서 전달된 인자 등을 포함하죠. 하지만, 함수 내부에서 선언된 변수는 외부에서 접근할 수 없어요. ​ 이때, 클로저를 사용하면 함수 내부에서 선언한 변수에 접근할 수 있답니다. 이렇게 외부..

  • format_list_bulleted 개발 이야기/Javascript 이야기
  • · 2023. 6. 5.
  • textsms
자바스크립트 애니메이션 차트를 이용해 데이터 시각화하기

자바스크립트 애니메이션 차트를 이용해 데이터 시각화하기

안녕하세요. 이번 시간에는 javascript로 chart.js를 활용해서 데이터 시각화를 위한 애니메이션 차트 만드는 법을 알아볼 거예요. chart.js는 canvas를 이용해서 다양한 유형의 차트를 그릴 수 있는 오픈소스 라이브러리예요. 사용법이 간편하고 많은 옵션이 제공돼서 누구나 쉽게 차트를 만들고 커스터마이징 할 수 있답니다. ​ 이번에 만들 차트는 일반적으로 많이 사용하는 대표적인 막대, 라인, 원형 3종 차트입니다. 코드가 너무 길어지면 소스코드 의 가독성이 덜어지기 때문에 html 파일은 따로 만들고 디자인은 최소한으로 해서 코드를 줄일 거예요. 화면 우측에는 그래프를 보여주고, 좌측은 x축과 y축 각각 데이터를 입력할 수 있는 텍스트 필드를 만들어줄게요. 데이터를 입력할 수 있도록 추가..

  • format_list_bulleted 개발 이야기/Javascript 이야기
  • · 2023. 6. 5.
  • textsms
자바스크립트로 웹 크롤링 하는 방법

자바스크립트로 웹 크롤링 하는 방법

안녕하세요. 오늘은 자바스크립트로 크롤링 하는 법을 알아보려고 해요. 먼저 많은 분들이 궁금해하시는 웹 스크래핑과의 차이를 설명드릴게요. 이 둘은 서로 관련되어 있지만, 각각 다른 목적과 과정을 가지고 있는 개념이라고 이해하시면 되는데요. 크롤링과 웹 스크래핑의 차이 크롤링이란 인터넷상의 웹 페이지들을 방문하고 정보를 수집하는 과정이에요. 크롤러(또는 스파이더)라 불리는 프로그램이 웹 페이지를 방문하고, 그 페이지에 있는 링크들을 따라가며 다른 페이지로 이동하면서 정보를 수집해요. 웹 스크래핑은 그 수집한 정보를 추출하고 원하는 형태로 가공하는 과정까지 포함한 개념입니다. 웹 스크래핑은 웹 크롤링을 기반으로 하지만, 더 많은 데이터 처리 작업이 포함되어 있어요. 간단한 예를 들어볼게요. 웹 크롤링을 통해..

  • format_list_bulleted 개발 이야기/Javascript 이야기
  • · 2023. 5. 30.
  • textsms
  • navigate_before
  • 1
  • 2
  • navigate_next
전체 카테고리
  • 분류 전체보기 (27)
    • 개발 이야기 (17)
      • Javascript 이야기 (13)
      • Flutter 이야기 (4)
    • 유용한 정보 (4)
    • 한눈에 스킨 (6)
최근 글
인기 글
최근 댓글
태그
  • #자바스크립트
  • #웹스크래핑
  • #javascript
  • #SEO최적화 스킨
  • #플러터
  • #네이버API
  • #한눈에 스킨
  • #티스토리 스킨
  • #fetch
  • #flutter
Copyright © 쭈미로운 생활 All rights reserved.
Designed by JJuum

티스토리툴바