전체 글

늘 무언가를 배우고 만드는 중인 개발자 만두의 기록 공간입니다 ✏️
WEB/JS

[JS] 15-2. 과제 - 챗봇 유동적인 기능 만들기 (json parsing)

✅오늘의 과제 ➰챗봇에 유동적인 기능 추가하기 ➰코드 day15.html 오늘 옷 뭐입지 ? 알아보기 day15.js let count= 0; let topText1; let topText2; let default_background = document.getElementById("body"); let context = document.getElementById("context"); let default_text = document.getElementById("cloth"); // let val = document.getElementById("input_text").value; let text_set = ["겨울이에요" + "" + "따뜻하게 입으세요 !", "봄, 가을이에요" + "" + "날씨 좋아요..

WEB/JS

[JS] 15-1. 챗봇 유동적인 기능 만들기 (json parsing)

✅json이란 ? JSON(JavaScript Object Notation)은 속성-값 쌍 또는 키-값 쌍으로 이루어진 데이터 객체를 전달하기 위해 인간이 읽을 수 있는 텍스트를 사용하는 개방형 표준 형식이다. 예시는 다음과 같다. [ { topText1 : '오늘의 기온을 적어주세요', topText2 : '기온에 맞는 옷차림을 알려드릴게요' } ] 서버와 웹 클라이언트 사이에서 데이터를 주고 받을 때 주로 사용한다. ✅json 활용법 서버를 직접 구현하지 않을 것이기 때문에 json 형식의 코드를 이용하여 설명할 예정이다. 다음 코드를 보자. let json = [ { topText1 : '오늘의 기온을 적어주세요', topText2 : '기온에 맞는 옷차림을 알려드릴게요' } ]; json이라는 변..

WEB/JS

[JS] 14-2. 과제 - CDN 사용법

✅오늘의 과제 ➰챗봇에 타이핑 애니메이션 추가하기 ➰코드 day14.html 오늘 옷 뭐입지 ? 알아보기 day14.js let count = 0; function input_check() { let context = document.getElementById("context"); let default_text = document.getElementById("cloth"); let default_background = document.getElementById("body"); let val = document.getElementById("input_text").value; if (val === "나 뭐입지?") { let typewriter = new Typewriter(context, { loop: t..

WEB/JS

[JS] 14-1. CDN 사용법

✅CDN이란 ? Content Delivery Network의 줄임말이며 지리적으로 분산된 여러 개의 서버이다. 이는 웹 콘텐츠를 사용자와 가까운 곳에서 전송함으로써 전송 속도를 높인다. CDN은 웹 페이지, 이미지, 비디오 등의 콘텐츠를 사용자의 물리적 위치와 가까운 서버에 복제해둔다. 이렇게 하면 콘텐츠가 로딩될 때까지 기다릴 필요 없이 영화 감상, 소프트웨어 다운로드, 은행 잔고 확인, 소셜 미디어 포스팅, 구매 등의 작업을 할 수 있다. ➰CDN 사용법 원하는 기능을 검색하면 다양한 웹사이트에서 CDN링크를 제공한다. 아래의 사이트들이 이에 해당된다. https://cdnjs.com/ cdnjs - The #1 free and open source CDN built to make life easi..

WEB/NODE.JS

[NODE.JS] 2. mongoDB 연결하기

✅mongoDB 연결하기 이제 기존의 파일들을 mongoDB와 연결해보자. 먼저 mongoDB 사이트(https://www.mongodb.com/)에 들어가서 회원가입 후 로그인한다. The most popular database for modern apps We're the creators of MongoDB, the most popular database for modern apps, and MongoDB Atlas, the global cloud database on AWS, Azure, and GCP. Easily organize, use, and enrich data — in real time, anywhere. www.mongodb.com organization에서 설정한 후 왼쪽 projec..

WEB/NODE.JS

[NODE.JS] 1. Node.js와 Express.js 다운로드하기

✅node js란 ? 자바스크립트를 서버사이드에서도 쓸 수 있게 해주는 언어이다. ✅express.js란 ? node.js를 이용하여 웹사이트나 어플리케이션을 쉽게만들 수 있도록 도와주는 프레임워크이다. ✅node.js와 express.js 다운받고 사용하기 터미널에 node -v 쳤을 때 버전 나오면 설치된 것이다. 설치되지 않았다면 node.js사이트(https://nodejs.org/ko/)에 들어가서 다운로드를 받아준다. 이제 파일을 만들어보자. 터미널에서 npm init 명령어를 입력하고 계속 enter 누른다. package.json이 자동생성된다. 디렉토리 안에 앱의 시작점인 index.js 파일을 만든다. 터미널에서 npm install express --save 명령어를 입력한다. 💨"-..

WEB/JS

[JS] 13. 과제 - 챗봇 만들기 3일차 (태그 제어 → 값 변경 및 버튼 이벤트 생성)

✅오늘의 과제 ➰나만의 챗봇 만들기 ➰코드 day13.html 오늘 옷 뭐입지 ? 알아보기 day13.js let count = 0; function input_check() { let default_text = document.getElementById("cloth"); let default_background = document.getElementById("body"); let val = document.getElementById("input_text").value; console.log(val); if (val

WEB/JS

[JS] 12. 과제 - 챗봇 만들기 2일차(태그 제어 → 배경색 변경)

✅오늘의 과제 ➰ style 변경 기능을 통해 다양한 디자인 적용하기 ➰코드 day12.html 오늘 옷 뭐입지 ? 도씨 알아보기 day12.js function input_check() { let default_text = document.getElementById("cloth"); let default_background = document.getElementById("body"); let val = document.getElementById("input_text").value; if (val

WEB/JS

[JS] 11. 과제 - 챗봇 만들기 1일차(조건문 → 값 전달)

✅오늘의 과제 ➰사용자의 입력을 받아 특정 텍스트가 들어왔을 때, 자신이 출력하거나 바꾸고 싶은 요소들을 console.log()로 출력하기 ➰코드 day11.html 오늘 옷 뭐입지 ? 도씨 알아보기 day11.js function input_check() { let val = document.getElementById("input_text").value; if (val

개발자 만두
AI DUMPing