웹 서비스 개발(FB,BE,SERVER,DB)/Vue.js5

• Bootstrap 1. 부트스트랩이란? Bootstrap은 HTML, CSS, JavaScript를 기반으로 하는 가장 인기 있는 오픈 소스 프런트엔드 프레임워크 중 하나다. 반응형 웹사이트와 애플리케이션 개발을 위한 다양한 사전 제작된 컴포넌트와 편리한 디자인 옵션을 제공한다. Bootstrap 2. 주요 특징 1) 반응형 디자인: 다양한 기기와 화면 크기에 맞게 자동으로 조정되는 레이아웃을 제공한다. 2) 사용 용이성: 사용자가 쉽게 접근하고 사용할 수 있는 인터페이스 컴포넌트를 제공한다. 3) 사전 제작된 컴포넌트: 버튼, 네비게이션 바, 모달 창 등의 재사용 가능한 컴포넌트를 포함한다. 4) 사용자 정의 가능성: CSS 사전 처리기인 Sass를 사용하여 테마와 컴포넌트를 사용자가 원하는 대로 조정할 수 있다. 5).. 웹 서비스 개발(FB,BE,SERVER,DB)/Vue.js 2024. 3. 11.

• 

  4. Vue.js 활용 1. Event Handling 1-1. Vue.js에서 이벤트 처리하기 - 이벤트 듣기 (Listening to Events) Vue.js에서는 v-on 지시자를 사용하여 DOM 이벤트를 듣고, 이벤트가 발생할 때 JavaScript를 실행할 수 있다. 이 지시자는 보통 @ 기호로 줄여 씁니다. 예를 들어, 클릭 이벤트를 듣고 싶다면 v-on:click="handler" 또는 단축형으로 @click="handler"와 같이 사용한다. handler 값은 다음 중 하나가 될 수 있다. 1) 인라인 핸들러 (Inline Handlers): 이벤트가 트리거될 때 실행될 인라인 JavaScript (기본 onclick 속성과 유사) 2) 메소드 핸들러 (Method Handlers): 컴포넌트에 정의된 메소드.. 웹 서비스 개발(FB,BE,SERVER,DB)/Vue.js 2024. 3. 8.

• 3. Vue 이해하기 1. 라우터 1-1. 라우팅(Route) 클라이언트 측 라우팅과 서버 측 라우팅은 웹 애플리케이션의 사용자 경험과 성능에 중요한 영향을 미치는 두 가지 다른 접근 방식이다. 이 두 방식의 주요 차이점은 페이지의 콘텐츠 로딩 방식과 사용자의 상호작용에 대한 응답 방식에 있다. 1-1-1. 서버 측 라우팅의 특징 1) 전체 페이지 새로고침: 사용자가 링크를 클릭할 때마다 전체 페이지가 새로고침된다. 이는 서버가 각 요청에 대해 새로운 HTML 페이지를 생성하고 전송하기 때문이다. 2) 서버 부하: 각 페이지 요청은 서버에 새로운 요청을 생성하며, 이는 서버 부하를 증가시킬 수 있다. 3) SEO 최적화: 검색 엔진은 각 URL에 대해 별도의 HTML 페이지를 쉽게 크롤링하고 인덱싱할 수 있어 SEO에 유리하.. 웹 서비스 개발(FB,BE,SERVER,DB)/Vue.js 2024. 3. 7.

• 2. Vue.js 1. Vue.js 란? Vue.js는 현대 웹 개발에 널리 사용되는 직관적이고 강력한 JavaScript 프레임워크입니다. 주로 싱글 페이지 애플리케이션(SPA) 및 인터랙티브한 웹 인터페이스 개발에 쓰인다. 1-1. Vue.js의 주요 특징 import { createApp } from 'vue' createApp({ data() { return { count: 0 } } }).mount('#app') 숫자 세기: {{ count }} 1-1-1. 선언적 렌더링 (Declarative Rendering) 1) 개념 : '선언적 렌더링'은 개발자가 애플리케이션의 상태와 UI를 어떻게 보이게 할 것인지 '선언'하는 방식으로 작업하는 것을 의미한다. 이는 명령적 렌더링과 대비되는 개념으로, 명령적 렌더링은 .. 웹 서비스 개발(FB,BE,SERVER,DB)/Vue.js 2024. 3. 6.

• 1. Vue 설치하기 Node.js 설치 및 확인 https://nodejs.org/ko/ Node.js 페이지에서 Node.js LTS버전으로 설치 Node 설치 확인 VS Code를 열고 터미널에서 node -v 입력 Vue.js 설치 및 확인 Vue 설치 npm install -g vue 명령어를 터미널에 입력 vue/cli 설치 vue/cli 란 기본적인 프로젝트를 생성할때 필요한 셋팅을 자동으로 생성해주는 도구입니다. 이러한 도구를 사용하면 프로젝트를 생성할때, 폴더의 구조나 필요라이브러리등을 일일이 설정하고 고민하지 않아도 됩니다. npm install -g @vue/cli Vue 설치 확인 터미널에 vue --version 확인 Vue 프로젝트 초기 생성 프로젝트 생성 vue create 프로젝트명 터미널에 입력.. 웹 서비스 개발(FB,BE,SERVER,DB)/Vue.js 2024. 3. 6.