1. html 파일과 js 파일 분리하기 // src/main.js 파일 // Application의 전체 로직을 확인할 수 있는 파일 import { movieData } from "./movie.js"; import { movieTitle } from "./search.js"; let movies = movieData(); console.log(movies) // [1, 2, 3] let search = movieTitle(); console.log(movies) // [4, 5, 6] // src/movie.js 파일 // 영화 정보를 가져와서 UI에 리스팅하는 기능을 담당 export let movieData = () => [1, 2, 3]; // src/search.js 파일 // 원하는 제목의..
일반 화살표 함수 let add = (x, y) => { return x + y; } console.log(add(2, 3)); // 5 한 줄로 된 화살표 함수 let add = (x, y) => x + y; console.log(add(2, 3)); // 5 매개변수가 하나인 화살표 함수 let square = x => x * x; console.log(square(3)); // 9 DOM 제어하는 API 1. 문서 객체 생성과 선택 - `document.createElement(tagName)` : 새로운 HTML 요소를 생성합니다. - `document.getElementById(id)` : id 속성을 기준으로 요소를 선택합니다. - `document.getElementsByTagName(nam..
이번 미니 프로젝트에서 웹사이트에서 음성으로 말하는 기능을 구현하기 위해 Web Speech API를 사용하였다. 버튼 클릭 시 작성된 텍스트를 읽어주고, 텍스트를 클릭하면 음성을 멈추도록 구현했는데 정말 신기하고 재밌었다. // 문서 객체 읽어드리고 생성하기 const introText = document.querySelector("#intro"); // text const speakBtn = document.querySelector("#speakBtn"); // button // web Speech API 객체를 가져오기 const speechContent = window.speechSynthesis; // speech가 실행 중인지 여부를 확인하기 위한 변수 let isSpeaking = false..
