jhhan의 블로그

이번에는 뷰 템플릿에 대해 알아보겠습니다. 뷰 템플릿: HTML, CSS 등의 마크업 속성과 뷰 인스턴스에서 정의한 데이터 및 로직들을 연결하여 사용자가 부라우저에서 볼 수 있는 형태의 HTML로 변환해 주는 속성 데이터 바인딩(Data Binding) HTML 화면 요소를 뷰 인스턴스의 데이터와 연결하는 것을 의미 {{}} 문법과 v-bind 속성 {{}} 은 지금까지 여러번 사용했으므로 딱히 설명드리지 않겠습니다. v-bind: HTML 속성값에 뷰 데이터 값을 연결할 때 사용하는 데이터 연결 방식 프레임워크 목록 가져오기 아이디 바인딩 클래스 바인딩 스타일 바인딩 {{ true ? 100 : 0 }} {{ reversedMessage }} Good Vue.js {{ system }} Better V..

이번 시간에는 라우팅에 대해 알아보겠습니다. 라우팅 : 웹페이지 간의 이동방법 현대 웹 앱 형태 중 하나인 싱글 페이지 애플리케이션에서 주로 사용 라우팅 특징 화면간의 전환 매끄러움 애플리케이션의 사용자 경험 향상 뷰 뿐만 아니라 리액트, 앵귤러도 사용 뷰 라우터 : 뷰에서 라우팅 기능을 구현할 수 있게 지원하는 공식 라이브러리 이번 뷰 라이터 실습을 위해 새로운 프로젝트를 만들겠습니다. vue create vue_router를 이용해 뷰 프로젝트를 하나 만듭니다. 그리고 cd vue_router로 이동한 후 vue add router를 입력하고 실행하면 기본 라우팅 화면을 볼 수 있습니다. 그리고 About을 누른다면 이 화면도 볼 수 있습니다. 이제 여기서 코드를 작성해 나가겠습니다. Nested R..

이번에는 컴포넌트에 대해 알아보겠습니다. 뷰에서는 화면 분할을 사용할 때 컴포넌트라는 개념을 사용해서 분할합니다. 그래서 보다 직관적으로 코드를 이해할 수 있습니다. 코드를 살펴보겠습니다. 저는 이런식으로 컴포넌트를 구성했습니다. global-component는 전역 컴포넌트 my_component는 지역 컴포넌트 parent-component는 부모-자식 관계에 있는 컴포넌트 입니다. 전역 컴포넌트부터 살펴보겠습니다. 전역 컴포넌트는 전역 변수처럼 어디에서든지 쓰일 수 있는 컴포넌트입니다. import GlobalComponent from "./components/global-component"; 처럼 선언을 한 후 해당위치에 vue파일을 만들어줍니다. 이제 global-component 파일을 보겠습..

이번에는 Vue.js에 대해 알아보겠습니다. [Do it! 예제로 이해하고 실전프로젝트로 완성한다! Vue.js입문] 책으로 진행합니다. { 참고로 Vue.js 설치 관련해서는 지금은 아니고 나중에 쓰겠습니다. 뷰 파일의 경우 .html파일이 아닌 .vue파일로 진행합니다. } 뷰 프로젝트를 하나 만드시면 다음과 같은 화면을 얻을 수 있습니다. 기본으로 제공되는 코드이고 이것을 실행시키기 위해서는 Terminal을 연 후 vue 프로젝트 파일로 이동한 후 'npm run serve'를 입력하시면 작동합니다. 그후 Terminal에 보이는 (포트번호가 포함된)주소를 입력하시면 다음과 같은 화면을 얻으실 수 있습니다. .vue 파일에서는 , , 3가지 부분으로 나뉩니다. 에는 우리가 알던 코드를 입력할 수 ..

이번에는 JPA를 활용하여 DB에 좀 더 간단하게 접근할 수 있는 법에 대해 알아보겠습니다. JPA를 사용하여 DB를 직접 손대지 않고 테이블 관리를 할 수 있습니다. 저는 MariaDB를 활용하여 진행하고 있습니다. MariaDB 연결과 관련해서는 링크를 걸어놓겠습니다. https://jhhan009.tistory.com/20?category=761889 JPA를 사용하기 위해서 필요한 것이 있습니다. 의존성을 추가해야하는데 JPA와 lombok를 추가할 것입니다. 프로젝트를 새로 만드신다면 JPA와 lombok을 찾아서 추가하시면 되시고 프로젝트를 이미 만드셨다면 pom.xml에 다음과 같이 추가합니다. JPA와 lombok을 저렇게 추가하면 사용할 수 있게 됩니다. lombok에 대해서는... 제가..

저번 포스트에 이어서 이번에는 회원가입 페이지를 만들어 보겠습니다. (다시 보니 코드를 보기 힘드실 수도 있을 것 같습니다.. 아직도 코드를 올리는 것은 힘드네요.. 사진으로 올릴지 이런 식으로 올릴지는 좀 더 고민해봐야겠습니다..) 이런 화면이 나오도록 진행할 것입니다. Main ReportSystem 게시판 SignUp Please LogIn Username should be end with '@pharmcadd.com'. Check your Username and Password. You have been logged out. UserName Password LogIn 저번에 만들었던 로그인 화면에 이렇게 변경하시면 위와 같은 화면이 나오게 될 것입니다. 그리고 SignUp 에 해당하는 부분을 컨트..

Spring thymeleaf에 관해 새롭게 알게된 점이다. 타임리프를 사용할 때는 th를 붙여서 사용한다. 다음과 같은 예시가 있다. 내가 작성한 코드 중 하나로 -> create을 진행하는 간단한 예제이다. 보면 form태그와 input태그에 th:~를 사용해서 진행하고 있다. 타임리프 사용방법이다. 이것은 서버에서 처리하는 것으로 실제 실행한 후 코드를 다시 보면 보이지 않는 부분이다. 위의 그림과 같이 간단한 화면이 나타나는 것을 확인할 수 있고, F12를 눌러 코드를 검사한다면 위와 같은 화면은 얻을 수 있다. 여기서 th:~로 작성한 부분은 보이지 않는다. 서버 쪽에서 처리한 것으로 클라이언트에서는 볼 수가 없다. 다르게 생각하면 th를 무시하는 것으로 볼 수 도 있다.. 사실 th가 실제로는..

이번에는 DB연결에 대해서 알아보겠습니다. DB연결은 MariaDB를 사용해서 진행할 예정입니다. 먼저 MariaDB 설치부터 하겠습니다. 참고로 MariaDB 다운로드는 https://downloads.mariadb.org/ 이 웹사이트에서 다운로드가 가능합니다. 이 포스트를 쓰는 시점(03.11) 기준으로 10.4.12를 다운받으시면 됩니다. 윈도우 기준으로 64비트 버전을 다운받아서 진행하시면 됩니다. 설치를 진행하실 때 port번호와 사용자 이름, 비밀번호 설정만 잘하시면 됩니다. 설치를 다 하신후 MariaDB(바탕화면에 HeidiSQL이라는 아이콘이 생겼을 겁니다)를 더블클릭하시면 다음과 같은 화면이 나오는데 여기서 호스트명, 사용자, 암호, 포트 번호만 잘 설정하시면 됩니다. 아마도 호스트명..