FE

요즘 소비자들은 디지털 콘텐츠와 서비스를 이용할 때, 웹을 중심으로 점점 더 많이 움직이고 있습니다.여러분이 직접 웹사이트 분석 데이터를 들여다봐도 방문자들이 웹에 얼마나 의존하는지 확인할 수 있을 겁니다. 하지만 여기서 주목해야 할 점이 하나 있습니다.소비자들의 기대 수준이 과거보다 훨씬 높아졌다는 것!단순히 경쟁자 웹사이트와 비교하는게 아니라 그들이 매일 사용하는 최고 수준(best-in-class)의 서비스들, 예를 들어 구글, 아마존, 인스타그램 같은 곳과도 비교합니다. 이번 챕터에서는 "웹사이트 퍼포먼스(성능)이 비즈니스 성공에 어떤 영향을 미치는지에 대한 여러 연구 결과를 소개하고,왜 웹사이트 속도가 성공을 좌우하는 핵심 요인이 되는지"에 대해 살펴봅니다.✅ 웹 퍼포먼스는 사용자를 붙잡는 힘이..

✅ 웹 퍼포먼스란 무엇인가?Web Performance는 웹 개발에서 가장 중요한 요소 중 하나입니다. 웹 페이지가 얼마나 빠르게 로드되는지, 그리고 사용자의 입력에 얼마나 빠르게 반응하는지를 다룹니다. 웹 사이트의 퍼포먼스를 최적화한다는 것은, 사용자에게 더 나은 경험을 제공하는 것과 직결됩니다.좋은 사용자 경험은 결국, 우리가 웹 사이트를 만들면서 세웠던 목표를 달성하는데 큰 도움이 됩니다. ✅ 웹 퍼포먼스는 왜 중요할까?웹 퍼포먼스는 겉으로 보면 조금 전문적인 주제처럼 느껴질 수 있지만, 실제로는 폭넓고 또 깊이 있는 분야입니다.그래서 웹 퍼포먼스를 배울 때는, 누구나 쉽게 다가갈 수 있으면서도, 동시에 중요한 내용은 놓치지 않는 방향으로 배워야 합니다.이번에 소개하는 이 강좌는, 퍼포먼스의 기본 ..

[step1] , 태그를 , 태그로 바꾸기 AutoComplete.vue {{item.animalName}} 비교를 위한 기존코드는 아래와 같습니다. ComboBox.vue 선택해주세요 {{item.animalName}} input 창에 blur이벤트와 focus 이벤트로 select 박스의 옵션들이 나오는 것처럼 li태그들이 나오게 만들어주면 됩니다. li태그를 선택하면 animal data의 값이 설정될 수 있도록 이벤트를 만들어줍니다. AutoComplete.vue 여기에 콤보박스처럼 보이도록 CSS를 입혀줍니다. AutoComplete.vue (autocmplete css) #content{ display: grid; grid-template-columns: 100px 200px; } .title..

개요 태그로 구현된 콤보박스의 옵션이 점점 많아지게 되면서 원하는 정보를 찾기 불편하다는 요청을 받게 되었습니다. 이를 개선하기 위한 방안으로 콤보박스에 검색 기능을 추가하게 되었고, 구글링을 하던 중 AutoCompletes라는 Vuetify의 컴포넌트를 알게 되었습니다. https://vuetifyjs.com/en/components/autocompletes/#usage Autocomplete component — Vuetify The autocomplete component provides type-ahead autocomplete functionality and provides a list of available options. vuetifyjs.com 해당 기능을 참고하여 개선을 완료하였고 잊기..

Vue에서 구현했던 기능을 정리하기 위해 가상 API가 필요하여 검색하던 중 My JSON Server를 발견하였습니다 https://my-json-server.typicode.com/ My JSON Server - Fake online REST server for teams my-json-server.typicode.com/user/repo/posts/1 { "id": 1, "title": "hello" } my-json-server.typicode.com 사용법은 간단하게 잘나와있지만 1. 내 github에 레포를 하나 생성합니다. 2. db.json 파일을 생성합니다. 3. https://my-json-server.typicode.com// 를 열어 가상 API 서버가 잘 열리는 지 확인합니다. 저..