전체 글15 Vue App 구조와 Router (뷰 라우터) 세팅 방법 라우터(라우팅)이란 무엇인가 서버 사이드에서 라우팅이란 웹 페이지 접속자(유저)의 url 경로에 따라 서버가 응답을 보내는 것을 의미합니다. 우리가 아는 인터넷 페이지를 생각해본다면 아주 간단합니다. 어떤 주소를 치고 들어갔을 때 HTML 응답을 받아 새로운 페이지를 불러오는 것처럼 말입니다. 하지만 싱글 페이지 어플리케이션(Single Page Application)에서는 클라이언트 사이드 자바스크립트가 경로를 알아내 전체 페이지를 새로 불러오는 것이 아닌 바뀌어야 할 데이터와 구성 요소만을 재구성합니다. 이는 당연히 상호 작용이 많이 일어나는 현대 사회의 웹 서비스에서는 훨씬 효과적입니다. 우리가 vue에서 사용하게 되는 라우터 또한 이처럼 클라이언트 사이드에서 작동하게 됩니다. 자 이렇게 이론적인 .. 2022. 9. 19. Backoffice(관리자 페이지) 살펴보기 왜 관리자 페이지인가? 관리자 페이지는 어느 기업에서나 무슨 프로젝트를 하던 필수 불가결한 존재입니다. 게임을 만들더라도, 온라인 쇼핑몰을 하더라도, 캐주얼 앱뿐만 아니라 그냥 평범한 회사 홈페이지를 만들더라도 관리자 페이지는 필요하기 때문입니다. 가장 많이 쓰이며 보편적인 기능을 포함하기 때문에 저희가 도전해 보기 아주 좋은 과제입니다. 난이도 또한 어려운 것은 별로 없습니다. 그럼 Vuetify 마켓에 올라온 샘플 관리자 페이지를 보면서 관리자 페이지가 무엇인지 좀 더 자세히 살펴보겠습니다. 앞으로 프로젝트 진행 시 Google Chrome을 사용합니다. Google Dev Tool(구글 개발 도구)는 웹 개발에 있어 매우 중요한 역할을 하기 때문에 다른 익스플로러를 사용하시는 분들은 지금 꼭 설치하.. 2022. 3. 4. Vue 프로젝트 세팅하기 Vue 프로젝트 생성 시 수동으로 옵션 선택하기 이전에 생성했던 프로젝트는 vue에 대해 알아보기 위하여 자동으로 빠르게 생성하였으나, 이제 앞으로 작업할 방식에 맞게 수동으로 옵션을 선택하여 새로운 프로젝트를 다시 생성할 것입니다. 먼저 VS Code를 닫고 이전에 생성한 폴더로 이동하여 webproject 폴더를 삭제합니다. 저의 경우 D:\dev\New 안에 있던 작업 폴더를 삭제하여 완전히 빈 폴더가 되었습니다. 그리고 다시 VS Code를 열어 New 폴더를 엽니다. 여기에 이전과 같은 명령어로 Vue-CLI를 실행합니다. 새로운 작업 폴더의 이름은 "newproject"로 하였습니다. vue create newproject 처음 나오는 옵션에서 수동으로 피쳐 선택(Manually select .. 2022. 3. 3. Vue 샘플 페이지 살펴보기 HelloWorld.vue 구성 src/components/HelloWorld.vue 파일을 선택하여 띄워봅시다. 이전 포스팅에서 설명한 것처럼 각각의 뷰(. vue 파일)는 template, script, style로 구성됩니다. 지금부터 인터넷을 열어 http://localhost:8080/ 페이지와 함께 비교하면서 보도록 하겠습니다. 컴퓨터를 다시 켰거나 개발 서버가 종료된 경우 다음 명령어로 서버를 띄워주십시오. 이전 포스팅에서 yarn을 설치하였기 때문에 npm과 yarn 둘 중 하나를 선택하여 서버를 실행합니다(저는 앞으로 yarn을 사용합니다). npm run serve or --- yarn serve 1. template 템플릿은 HTML언어 형식으로 기입해야 하며, 가장 큰 특징은 시작 .. 2022. 3. 3. 이전 1 2 3 4 다음
