전에 업로드 했었던 사이드바를 최종으로 마무리하여 다시 글을 작성한다~~ sidebar 만들기 (feat. 시작하자마자 사이드바 실행 및 본문 밀어내기) 프로젝트를 하는 중에 사이드바를 만들게 되었다. 찾아보니 만드는 건 너무 쉬운데 말입니다? 꼭 내가 원하는 디자인은 없다는게 학계의 정설. 내가 원했던 사이드바 □ 페이지가 시작하자마자 henniee.tistory.com 일단 완성 본! 전에는 닫기 버튼을 이용했었는데 이제는 그냥 삼선 막대기로 열고 닫고 두가지 모두 진행 하고 로고도 넣었다. 닫아도 로고와 막대기는 그자리 그대로에 있고 메인 화면은 전체 화면 사이즈에 맞게 늘어난다. [JSP] 로그인을 하게 되면 선생님 아이디와 학부모가 로그인 할 수 있는 페이지가 따로 존재한다. 따라서 sideba..

이클립스에서 백단으로 사용하는 spring과 비쥬얼 스튜디오에서 프론트로 사용하는 vue를 이클립스로 연동하는 방법에 대해 알아보자. 보통은 이렇게 두개의 개발도구를 이용해 동시에 다른 서버를 이용하여 웹페이지를 구현 하는게 정석이지만 만약에 내가 진짜로 서버에 해당 페이지를 올리고 싶다면 함께 넣어 놓는 것이 편리하고 + 어떤 거래처에서 프론트와 백까지 한번에 개발해 달라고 할 수 있기 때문에 연동하는 방법을 알아 두는 것이 좋다고 한다. 첫 번째 vscode에서 생성한 프로젝트의 제일 하단에 보면 vue.config,js 를 클릭한다. 두 번째 아래의 코드를 작성해준다. ● outputDir은 뷰의 입장에서 이클립스의 resources/static 폴더까지 가는 경로를 작성해준다. 예를 들어, 나는 ..

Spring 은 백과 프론트 기능을 완벽하게 분리한 것으로 백앤드를 구현 할 때는 사용자가 보는 화면은 구현 하지 않는다. 예시로 이전까지의 프로젝트들에는 front를 구성하는 webapp에 JSP 파일이 있지만 완벽하게 분리 된 Spring은 webapp에 아무 파일도 없는 것을 볼 수 있다. Spring 은 view 단에서 요청이 오면 해당 요청을 수행 한다. Spring은 이게 회원가입인지, 로그인인지. 마이페이지인지 전혀 관심이 없다. 그저 DB와 관련되거나 다른 어플리케이션에서 들어온 요청을 처리하기에 바쁘다. 그렇다면 view 는? 사용자가 보는 화면을 띄어주는 역할로 백단에서 구현 한 dto, dao, service 이런 것 들을 전혀 신경쓰지 않는다. 그저 사용자에게 기능을 보여주고 서버에..

뷰의 새로운 프로젝트를 생성하기 위해 cmd 창이나 Visual Studio 의 Terminal 을 이용한다. 처음에 cmd 창을 이용했는데 VScode 이용하는게 훨씬 편하다! 더 자세하게 작성 된 vue 프로젝트 생성~~ Vue 프로젝트 생성 및 환경설정 이클립스에서 작성한 내용들을 Vscode에서 불러와 Front를 구성 해 주어야 할 때 필요한 과정들이다. cmd 창을 이용하기 보다는 Vscode 에 있는 Terminal 탭을 클릭 후 사용 해도 결과는 똑같으니 꼭 cmd henniee.tistory.com 1. node.js 설치. 패스등록 https://nodejs.org/ko/ 2. workspace로 사용할 폴더 생성 ex>C:\Users\Playdata\Desktop\vue_project..

Vue Directive 란? HTML 태그 안에 v- 접두사를 가지는 모든 속성들을 의미하며 화면의 요소를 더 쉽게 조작하기 위해 사용하는 기능이다. 뷰의 데이터 값이 변경 되었을 때 화면의 요소들이 반응하여 변경된 데이터 값에 따라 갱신 된다. 따라서 화면의 요소를 직접 제어할 필요 없이 뷰의 디렉티브를 활용하여 화면 요소들을 조작 할 수 있다. v-bind v-bind는 지정된 해당 태그의 속성값을 지정하는 데 사용되는 디렉티브다. v-bind 지우고 : 로 축약 가능, v-bind:href=“url”을 줄여서 :href=”url” 이라고 표기해줄 수 있다. {{test1}} {{test2}} v-if 저장한 뷰 데이터 값의 참, 거짓 여부에 따라 해당 HTML 태그를 화면에 표시 여부를 결정하는 ..

Node.js 설치와 비쥬얼 스튜디오 설치 Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org Visual Studio Code - Code Editing. Redefined Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows. code.visualstudio.c..