튜토리얼 출처: JavaScript30 튜토리얼 이름: Day 01 - JavaScript Drum Kit 튜토리얼 분류: JavaScript 튜토리얼 설명: 웹사이트 내 요소 클릭 시 드럼 소리 재생 & 클릭 시각효과 추가하기 진행기간: 2020년 4월 12일 HTML audio 태그 JavaScript로 재생하기 const audio = document.querySelector('audio'); audio.playTime = 0;// 오디오가 중첩될 수 있도록 재생시간을 되돌림 audio.play(); CSS Transition이 끝나는 시점 인식하기 element.addEventListener('transitionend', event handler); Web API는 transitionend 외 t..

강의: [edwith 부스트코스] 웹 프로그래밍 챕터 3, 웹 앱 개발: 예약서비스 1/4 학습일: 2020년 4월 11일 2. DOM API 활용 - FE DOM Node 조작하기 DOM을 다루는 다양한 API가 존재 DOM API의 종류 document 객체에 대해 사용할 수 있는 API: HTML DOM Document Objects element 객체에 대해 사용할 수 있는 API: HTML DOM Element Objects DOM을 탐색하는 DOM API 유용한 속성을 기준으로 탐색 tagName textContent: 해당 element의 하위 텍스트 노드의 값을 조회하거나 바꿀 수 있음 nodeType 특정 요소를 기준으로 이동하며 탐색 childNodes firstChild firstEl..

강의: [edwith 부스트코스] 웹 프로그래밍 챕터 3, 웹 앱 개발: 예약서비스 1/4 학습일: 2020년 4월 10일 0. 소개 FE(Front End)의 Key Point JavaScript 배열, 객체 배열, 객체를 조작하는 메서드를 위주로, 데이터를 조작하는 방법 - 배열 조작 메서드 위주 DOM API, AJAX 심화 웹 애니메이션 웹페이지의 스르르 움직이는 모습을 위해 필요 BE(Back End)의 Key Point : Spring MVC MVC 패턴 복잡한 웹 어플리케이션 개발 시 효율적으로 개발할 수 있도록 돕는 디자인 패턴 직접 구현하기는 어렵지만, 기존의 잘 만들어진 프레임워크를 사용할 예정이므로 문제되지는 않음 가장 많이 사용되는 Spring MVC를 이용 레이어드 아키텍쳐(Lay..

프로젝트: [edwith 부스트코스] 웹 프로그래밍 프로젝트 B, To-do List 만들기 진행기간: 2020년 4월 9일, 10일 Java 문자열 부분적으로 바꾸기 .replace( ), .replaceAll( ), .replaceFirst( ) 메서드를 사용해 바꿀 수 있음 참고자료: [Java] 문자열 치환(Replace) 사용법 & 예제 Java의 If ... Else 구문에서 ==로 비교했는데 오류가 발생할 때 해결 방법 조건식에 string == "문자열" 대신 string.equals("문자열") 사용 ==는 타입까지 비교하므로, 값이 같은데도 오류가 발생할 수 있음 참고자료: How do I compare Strings in Java? - Stack Overflow HTML form 요소..

사이트: edwith 강의: [부스트코스] 웹 프로그래밍 챕터 2, DB 연결 웹 앱 학습일: 2020년 4월 8일 11. Web API - BE Web API 실습 Maven Project 생성 archetype 종류는 webapp, artifactId는 webapiexam 입력 pom.xml 변경 plugin에 JDK 버전 1.8 추가 (Maven (Back End) 프로젝트 설정 참고) dependencies에 라이브러리 추가 MySQL JDBC (JDBC (Back End) ... Part 1 환경설정 참고) JSON 라이브러리 Java Servlet 라이브러리 (Maven (Back End) 프로젝트 설정 참고) JSTL 라이브러리 (Maven (Back End) 프로젝트 설정 참고) 변경사항 ..

사이트: edwith 강의: [부스트코스] 웹 프로그래밍 챕터 2, DB 연결 웹 앱 학습일: 2020년 4월 7일 11. Web API - BE REST API란? API (Application Programming Interface) 운영체제나 프로그래밍 언어가 제공하는 기능을 응용 프로그램에서 사용, 제어할 수 있게 만든 인터페이스 파일 제어, 창 제어, 화상 처리, 문자 제어 등을 위한 기능을 제공함 기능을 제공하는 라이브러리의 내부 구현 코드를 모르더라도 인터페이스만 알면 사용할 수 있음 예시) Java로 절대값을 구할 때 사용하는 Math 클래스의 abs( ) 메서드 REST (REpresentational State Transfer) API 핵심 컨텐츠 및 기능을 외부 사이트에서 활용할 수 ..