전체 글93 [영화 검색 사이트] 영화 상세 페이지(스켈레톤 UI, Loader) 스켈레톤 UI 실제 데이터가 렌더링 되기 전에 보이게 될 화면의 윤곽을 먼저 그려주는 로딩 애니메이션 사용자의 이탈을 막고, ‘어떤 것들이 보여질 것이다’라고 미리 알려주는 효과 Loader.vue Movie.vue {{ theMovie.Title }} {{ theMovie.Released }} {{ theMovie.Runtime }} {{ theMovie.Country }} {{ theMovie.Plot }} Ratings {{ score }} Actors {{ theMovie.Actors }} Director {{ theMovie.Director }} Production {{ theMovie.Production }} Genre {{ theMovie.Genre }} 2023. 2. 11. [영화 검색 사이트] 로딩 애니메이션, Footer https://getbootstrap.com/docs/5.3/components/spinners/ Spinners Indicate the loading state of a component or page with Bootstrap spinners, built entirely with HTML, CSS, and no JavaScript. getbootstrap.com MovieList.vue {{ message }} movie.js export default { // module! namespaced: true, // data! state: () => ({ movies: [], message: 'Search for the movie title!', loading: false }), // computed! .. 2023. 2. 11. [영화 검색 사이트] 텍스트 말줄임 표시 white-space: nowrap; overflow: hidden; text-overflow: ellipsis; https://developer.mozilla.org/ko/docs/Web/CSS/white-space white-space - CSS: Cascading Style Sheets | MDN CSS white-space 속성은 요소가 공백 문자를 처리하는 법을 지정합니다. developer.mozilla.org https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow text-overflow - CSS: Cascading Style Sheets | MDN The text-overflow CSS property sets how hidden .. 2023. 2. 11. [JAVASCRIPT] 비동기 - 콜백과 프로미스, 예외 처리(then, catch, finally) method가 순서대로 실행되기 위한 방법 1. 콜백(callback) function a(callback) { console.log('A') callback() } function b() { console.log('B') } a(function(){ b() }) 2. 프로미스(promise) function a(){ return new Promise(function (resolve){ setTimeout(function (){ console.log('A') resolve('Hello') }, 1000) }) } function b(){ console.log('B') } async function test(){ const res = await a() console.log('res:', res) b() }.. 2023. 2. 10. 이전 1 2 3 4 5 6 ··· 24 다음
