rhanziy

길고 복잡한 HTML 덩어리를 한줄로 축약하려면 Component화 시키면 된다. .vue파일을 새로 만들어서 HTML 작성하고 1. 만든 .vue파일 import하기 2. component에 등록하기 3. 가져다 쓰기 component 파일 작명할 때 주의점 🔽 더보기 컴포넌트.vue 작명은 2단어 이상으로 작명하자. 안그러면 에러발생ㅠ ex) MyDiscount 작명은 카멜형식 이게 귀찮으면 vue.config.js 파일 열어서 lintOnSave : false 하고 서버 재가동하거나 const { defineConfig } = require('@vue/cli-service') module.exports = defineConfig({ // transpileDependencies: true, lintO..

일단 Vue로 동적인 모달창 만드는법 1. 모달창 HTML, CSS로 만들기. 2. 현재 HTML ui 상태를 데이터로 저장해두기. 3. 상태에 따라(if문) HTML ui를 보여줄지 말지 Vue 문법으로 작성 step1. 모달창 UI 코드짜기 상세페이지 상세페이지 내용 // CSS .black-bg { position: fixed; top:0; left:0; width:100%; height:100%; padding:50px; background: rgba(0, 0, 0, 0.5); } .white-bg { position:relative; width:80%; margin:0 auto; padding:50px 0; background:white; border-radius: 8px; } .white-bg..

vue에서 이벤트 처리는 v-on:이벤트명 = " 이벤트 발생 시 실행할 코드 " or @이벤트명 = " 이벤트 발생 시 실행할 코드" 으로 사용한다. 예를들어 이벤트 핸들러 onclick은 v-on:click = " " 축약형으로는 @click = " " 이 되는 것. 1. 이벤트 발생 시 실행할 함수는 script태그 export default { method { } } 에 때려넣는다. 2. vue에서는 데이터가 변하면 html에 바로 반영되니까 @click = " 변수++ " 이렇게 쓰면 댐. 3. 여러가지 이벤트들은 ctrl+space로 확인하자. @mouseover, @drag, @input 등등 많음. {{ a }} {{ a }} 50만원 허위매물신고신고 수 : {{ click }} 허위매물신..

vue에서 html에 자바스크립트 데이터를 바인딩하는 방법은 {{ 변수명 }} 콧수염 문법을 사용하면 된다. 변수명은 어떻게 담냐!? script 태그내에 export default 안에 data() { return { 여기에 obj 형식으로 담으면 댄다. } } 이걸 데이터 보관함이라고 하자. product라는 데이터는 array형식으로 넣었는데, 사용할때는 뭐 배열 꺼내오는 방식으로 쓰면 된다. 원룸샵 {{ products[0] }} {{ price1 }} 만원 {{ products[1] }} 70만원 {{ products[2] }} 70만원 보면 html속성 값(class나 style)에도 데이터 바인딩을 할 수 있는데, html속성에 사용할때는 콧수염 문법이아닌 : 속성name = "변수명" 이렇..

@ResponseBody @ResponseBody 는 핸들러 메소드에 붙일 수 있는 어노테이션으로 컨트롤러가 데이터를 반환할 때 HttpMessageConverter 를 사용해서 자바 객체를 응답 본문(body) 메시지를 만들어 반환할 수 있게 도와준다. @RestController를 사용하면 자동으로 모든 핸들러 메소드에 @ResponseBody가 적용된다.. @Controller public class AccountController { @GetMapping("/accounts/{id}") @ResponseBody public Account handle(@PathVariable long id) { // ... } } @RestController public class AccountController ..

@RequestParam @RequestParam 어노테이션은 사용자가 요청시 전달하는 값을 Handler(Controller)의 매개변수로 1:1 맵핑할때 사용되는 어노테이션이다. @Controller public class TestController { @GetMapping("/") public String getTestPage(@RequestParam("name") String name) { System.out.println("이름 : " + name); return "test"; } } 예를 들어 사용자가 /?name=test 로 요청한다면, 위 핸들러의 매개변수인 name 에 "test"가 매핑됨. @ModelAttribute 우선 @ModelAttribute는 메소드레벨, 메소드의 파라미터 두..

Database에 저장되어있는 페이지 개수만큼 페이지 목록을 출력하도록 구현된 경우, 1. 게시판 데이터가 많을수록 가독성이 떨어지고 2. 많은 데이터를 한 페이지에 불러오고 출력하는데 있어 시스템의 자원을 많이 사용한다. 는 문제점이 있다. 그래서 페이징 처리에 사용할 수 있는 쿼리의 종류에 대해 알아보자. 페이징 쿼리 1. Rownum을 통한 방식(Oracle, MariaDB) 2. LIMIT를 통한 방식(MySQL, MariaDB) 3. TOP을 통한 방식(MSSQL) - Rownum 모든 SQL에 그대로 삽입해서 사용할 수 있는 가상의 컬럼(Column)이다. 해당 컬럼 값은 SQL이 실행되는 과정에서 발생하는 행의 일련번호를 뜻한다. 쉽게 말해 select를 통해 출력되는 결과 테이블에 행(Ro..

대부분의 기능 구현 작업순서는 VO, DTO(도메인 모델 계층) -> Mapper(퍼시스턴스 계층) -> Service(비즈니스 계층) -> Controller(제어 계층) -> JSP(프리젠테이션 계층) 순으로 작업된다. 도메인 모델 계층 도메인 모델은 각 계층간의 전달 되어야 할 정보를 담는 객체 입니다. 해당 객체에 담긴 데이터들은 캡슐화해서 보관됩니다. ( 데이터의 접근자 private / getter,setter를 통해 데이터 접근) 퍼시스턴트 계층 DAO 계층이라고도 불립니다. DB 질의를 통해서 데이터 러치를 담당하는 객체입니다. 비즈니스 계층 핵심 업무 로직의 구현과 그에 관련된 데이터의 적합성 검증 외에도 다양한 부가적인 구현을 수행합니다.(ex. 트랜잭션 처 리, 다른 계층들간 통신을 ..