Web Sever 개발과 CS 기초/JS 프론트엔드 (3) 썸네일형 리스트형 Javascript Axios 사용 방법 관련 내용 해당 프로젝트 깃허브 개요 목적 Spring Rest API 백엔드 서버를 테스트하는 두 가지 방법이 있다. 첫 번째는 서버가 단순할 때 Postman으로 테스트한다. 그러나, 복잡한 백엔드 서버일 때는 Postman으로 일일이 테스트하는 것은 너무 번거롭다. 두 번째 방법인 UI 웹페이지를 만들고 Axios를 사용해 RestAPI 서버를 테스트 한다. Axios 특징 Axios는 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리 운영 환경에 따라 브라우저의 XMLHttpRequest 객체 또는 Node.js의 http api 사용 Promise(ES6) API 사용 HTTP 요청과 응답을 JSON 형태로 자동 변경 Axios 사용하여 백엔드 서버.. HTML 슬라이드 페이지 만들기 개요 목적 이번 시간에 만들 프론트 웹페이지는 슬라이더이다. 옆으로 넓게 펼쳐진 페이지를 특정 영역만 보이게 하고, 버튼을 통해 옆으로 움직여서 마치 카드를 넘기는 것 같은 효과를 낼 수 있다. 아래 그림 예시는 영어 통문장을 암기할 수 있게 도와주는 테스트 페이지 이다. 아래 테스트 페이지 같은 슬라이더를 만드는 구체적인 방법에 대해서 알아보자. 테스트 페이지 틀 잡기 먼저 테스트 페이지 틀이 되는 element 요소들을 작성하고, 데이터 수에 맞게 만들어 놓은 틀을 복사하여 옆으로 나열한다. 틀이 되는 테스트 페이지 코드가 어떻게 되는 지 알아보자. 자세한 테스트 페이지 틀 html, css 소스 코드는 https://github.com/dae0hwang/IgnorantEnglish IgnorantE.. 백엔드 개발을 위한 CSS, Bootstrap 기본 사용법 개요 목적 백엔드 개발자도 개발자 페이지를 만들거나, 백엔드 서버를 테스트할 웹페이지를 만들 때가 있다. 그럴 때 유용하게 사용할 수 있는 기본적인 css와 bootstrap 기술들을 내가 만든 웹페이지 이미지를 참고하면서 알아보자. 기초적인 CSS, Bootstrap 사용법 페이지의 요소들을 번호를 매겨 해당 요소의 구성 방법을 알아보자. 해당 html과 css 소스 코드 원본은 깃허브 주소 IgnorantEnglish\UI\src\main\resources\templates\admin\page.html 와 IgnorantEnglish\UI\src\main\resources\static\css\admin\page.css 에서 확인할 수 있다. 0. normalize.css 적용 CSS 통일 일관화 브라.. 이전 1 다음
