프로그래밍 공부 6

3. Vue.js 작동 순서

Vue.js 작동 순서 1. package.json 설정들이 들어가져있다. vue의 버전 같은데 전부 기입되어져있다. eslintConfig 등도 포함되어져있다. Spring 의 pom.xml 같은 역할을 한다고 보면 될거같다. 2. index.html 기본적인 html 파일이다. App.vue가 들어갈 장소를 명시해놓는 뼈대 역할을 한다. 왠만해서는 이 파일을 수정하지 않는다. 바로 이 부분이 App.vue 가 들어갈 장소이다. 3. main.js 전역으로 파일을 연결시키려면 main에서 처리하면 된다. 이 파일에서 import한 파일들은 나머지 뷰에서 잘 동작한다. main.js 부터 작동되므로 가장 먼저 마운트 되는 뷰는 new Vue({ router, store, render: (h) => h(A..

2. Vue.js 기본 앱 분석 - 1

Vue는 총 3가지로 나뉘어진다. - template 이랑 동일하다. 다른 점은 v-text 같은 {{ }} 같은 데이터 바인딩이 들어간다. 에 아이디 값을 넣어넣고 데이터가 들어갈 장소를 지정해준다. 아니면 불러온 파일에 어떤데이터가 들어갈 것인지 지정해준다. v-on , v-bind 등이 여기에서 기입된다. - script import 로 파일 주소를 불러와서 해당 변수명으로 링크를 걸어주어야한다. 이때 이름은 해당 파일의 이름과 달라도 괜찮다. 같아야하는건 해당 파일 내에 있는 export 데이터 내의 name 요소 이다. 스크립트에서 어떤 데이터가 어떤 요소에 들어갈 건지 결정한다. - style Css 요소들이 각 Vue파일내에 있는 tag들에게만 적용되는게 아니다. 전체적으로 전부 다 들어간다..

Vue.js 시작하기

Vue.js 시작하기 1. Vue.js 설치하기 Vue.js 공식 사이트가서 가이드를 그대로 하면 된다. - node.js 설치 node, npm 버전 확인하기 node.js가 잘 설치되었는지 확인해 본다. - VScode 설치 VSCode 터미널 들어가서 $ npm install vue 로 Vue.js 최신 버전을 설치 [Error 메세지] 이 시스템에서 스크립트를 실행할 수 없으므로 파일을 로드할 수 없습니다. 자세한 내용은about_Execution_Policies를 참조 window 파워쉘 가서 Get-ExecutionPolicy 확인 Restrict 이면 Set-ExecutionPolicy / RemoteSigned 으로 설정을 바꾸어준다. 그 다음부터 다시 차근차근 진행하면서 설치하며 된다. ..

디자인 패턴

-디자인 패턴이 필요한 이유 모든 디자인 패턴들은 화면에서 보여지는 로직과 실제 데이터들이 처리되는 로직을 분리한다. 그리해야 협업, 유지보수, 테스트에 용이하다. 즉 쾌적하고 편리한 개발환경 구축가능하기 때문이다. -디자인 패턴 종류 MVC, MVP, MVVM 모델등이 있다. -MVC 모델 Model, View, Controller 로 이루어져있다. Model 데이터, 데이터의 상태(State), 비지니스 로직이 들어가 있다. View Model를 표현한다. 사용자가 입력한 값을 Controller에게 전달한다. Controller Model을 통해 사용자가 입력한 데이터들을 받는다. 처리된 데이터 값들을 View로 넘긴다. Model과 View사이에서 행동한다. -대략적인 작동방식 사용자의 Actio..

Spring Framework 개발 순서

Spring Framework 개발 순서 1. SQL Table 작성 어떤 데이터를 어떻게 저장하고 어떤 방식으로 관리할지 목록 작성 및 데이터 크기 관리 결정 2. DTO (VO) 작성 테이블 내에 들어갈 데이터들이 들어갈 개체 생성 및 프론트 단에서 이용할 데이터들 목록 생성 3. DAO, Service, SQL 구문 작성 데이터 검색을 위한 SQL구문을 작성 SQL을 만들고 나서 그 과정을 DAO와 변수 이름을 맞추어 주기 4. Controller 작성 어떤 DTO를 넘겨주고 데이터 송신 방식을 get, post, delete 등으로 할지 결정 백엔드에서는 프론트 단에서 화면을 만들기 전까지 제대로 SQL 구문이 가는지 Postman을 이용해서 화면단으로 넘어가는 데이터 전송를 테스트 5. jsp ..