기록76

• 

  [Vue] Event DOM 이벤트를 듣기 위해 v-on directive를 사용한다. 이벤트가 트리거될 때 javascript를 실행한다. 1. method 이름 v-on에 이벤트 발생 시 처리해야하는 method의 이름을 받아서 처리한다. 클릭 2. inline javascript 메소드 이름을 직접 바인딩하는 대신 인라인 javascript 구문에 메소드를 사용할 수 있다. 클릭 3. $event 원본 DOM 이벤트에 엑세스해야하는 경우 특별한 $event 변수를 사용해 메소드에 전달한다. Greet greet: function (e, msg) { if (e) e.preventDefault(); alert('Hello ' + msg + '!'); } 4. 이벤트 수식어 $event로 DOM이벤트에 접근할 수 있지만, m.. 기록/FRONTEND 2022. 5. 18.

• 

  [Vue] Vue Instance 1. el Vue가 적용될 요소 지정. CSS Selector 또는 HTML Element를 사용한다. 2. data Vue에서 사용되는 정보 저장. 객체 또는 함수의 형태이지만, 함수 형태를 권장한다. 3. method 화면 로직 제어와 관계된 method를 정의하는 속성. 마우스 클릭 이벤트 처리와 같이 화면의 전반적인 이벤트와 화면 동작과 관련된 로직을 추가한다. 보간법으로 method를 부를 때 ()를 빠뜨리지 않아야 한다. 하지만 @click 등 이벤트 처리에 파라미터가 없는 method를 사용할 경우는 method 이름만 써도 가능하다. method 안에서 데이터를 접근할 때는 "this.데이터이름"으로 접근해야한다. 이 코드는 reversedMsg()를 호출해서 message를 뒤집은 값을 .. 기록/FRONTEND 2022. 5. 17.

• 

  [Vue] Directives 1. 디렉티브 - v-접두사가 있는 특수 속성이다. - 디렉티브 속성 값은 단일 Javascript 표현식이 된다.(v-for는 예외) - 디렉티브의 역할은 표현식의 값이 변경될 때 사이트 이펙트를 반응적으로 DOM에 적용하는 것이다. 2. 종류 v-text v-model v-show v-once v-bind v-if v-html v-for v-else-if v-cloak v-on v-else 1) v-text 데이터 바인딩의 가장 기본 형태인 {{속성명}} 이중 중괄호를 사용한 것과 동일하다. 이렇게 코드를 작성하면 속성값으로 렌더링된다. 2) v-once 데이터 변경 시 업데이트되지 않는 일회성 보간을 수행할 수 있다. {{속성명}} 3) v-html 속성값을 텍스트가 아닌 HTML로 데이터를 출력한.. 기록/FRONTEND 2022. 5. 16.

• 

  [Vue] Vue.js 1. Vue.js 사용자 인터페이스를 만들기 위해 사용하는 오픈소스 Progressive Framework. 특징 1. Approachable (접근성) 2. Versatile (유연성) 3. Performant (고성능) 2. MVVM Pattern - Model + View + ViewModel - Model : 순수 자바스크립트 객체 - View : 웹페이지 DOM - ViewModel : Vue 역할. view와 model을 연결하고 자동으로 바인딩하므로 양방향 통신을 가능하게 한다. 3. 사용방법 방법은 간단하다. html header에 이 script를 추가하고 뷰 인스턴스를 생성하면 된다. 4. Vue Instance 뷰 인스턴스는 HTML의 특정 범위 안(el 속성)에서만 옵션 속성들이 적.. 기록/FRONTEND 2022. 5. 15.

• 

  [MYSQL] 그룹함수 1. 다중행 함수 하나의 값이 아닌 값들의 집합에 대해서 동작하는 함수다. COUNT COUNT(필드) 선택된 필드에서 특정 조건을 만족하는 레코드의 총 개수를 반환한다. 없다면 0을 반환한다. 중복된 값을 제외하려면 DISTINCT 키워드를 사용한다. MIN/MAX MIN(필드), MAX(필드) 선택된 필드에 저장된 값 중 가장 작은값/큰값을 반환한다. SUM SUM(필드) 선택된 숫자타입의 필드에 저장된 값의 총 합을 반환한다. AVG AVG(필드) 선택된 숫자타입의 필드에 저장된 값의 평균값을 반환한다. 2. 단일행 함수 문자열 함수 LENGTH() LENGTH('문자열') 전달받은 문자열의 길이 반환 CONCAT() CONCAT('문자열','문자열', ..) 전달받은 문자열을 모두 결합하여 하나의.. 기록/DB 2022. 5. 14.

• 

  [MYSQL] DCL(Data Control Language) 1. 사용방법 WITH GRANT OPTION : 권한을 다른 사용자에게 부여 가능 여부를 결정하는 옵션이다. 접속경로로 '%'를 설정하면 외부접속을 모두 허용한다. 계정 생성 시 [IDENTIFIED BY 암호]를 넣지 않으면 비밀번호 없는 계정을 생성한다. -- 계정 생성 CREATE USER 계정명@접속경로 [IDENTIFIED BY 암호] -- 권한 부여 GRANT 권한종류 ON 대상(DB명.테이블명) TO 계정명@접속경로 [WITH GRANT OPTION]; -- 설정한 권한 적용 FLUSH PRIVILEGES; -- 권한 확인 SHOW GRANTS FOR 계정명@접속경로 -- 권한 해제 REVOKE 권한종류 ON 대상(DB명.테이블명) TO 계정명@접속경로; 권한 종류 CREATE, ALTER.. 기록/DB 2022. 5. 13.

• 

  [MYSQL] DML(Data Manipulation Language) 1. 사용방법 * [참고] WHERE 없는 DELETE와 TRUNCATE의 차이점 DELETE : DML.데이터만 지워진다. 디스크 상 공간, 인덱스도 모두 남아있다. TRUNCATE : DDL. 최초 테이블이 만들어진 상태로 돌아간다. 따라서 디스크 공간과 인덱스도 삭제된다. 자동으로 커밋을 실행하기 때문에 데이터를 복구할 수 없다. -- 삽입 -- 1. 특정 필드만 삽입할 때 INSERT INTO 테이블이름(필드이름, 필드이름, ..) VALUES(데이터값, 데이터값, 데이터값, ..); -- 2. 전체 필드를 넣을 때 -- (NULL저장가능 필드, DEFAULT 설정된 필드, AUTO_INCREMENT 설정 필드 생략가능) INSERT INTO 테이블이름 VALUES(데이터값, 데이터값, 데이터값,.. 기록/DB 2022. 5. 12.

• 

  [MYSQL] DDL(Data Definition Language) 1. 사용방법 -- 데이터베이스 생성 CREATE DATABASE 데이터베이스이름; -- 데이터베이스 사용 USE 데이터베이스이름; -- 테이블 생성 CREATE TABLE 테이블이름 ( 필드이름1 필드타입1, 필드이름2 필드타입2 ); -- 서브쿼리를 활용해서 테이블 생성(SELECT로 가져온 결과를 이용할 수 있음) CREATE TABLE 테이블이름 AS SELECT구문 -- 데이터베이스 수정 ALTER DATABASE 데이터베이스이름 변경내용; -- 테이블 수정 -- 1. 새로운 필드 추가 ALTER TABLE 테이블이름 ADD 필드이름 필드타입; -- 2. 필드 삭제 ALTER TABLE 테이블이름 DROP 필드이름; -- 3. 필드 타입변경 ALTER TABLE 테이블이름 MODIFY COLUM.. 기록/DB 2022. 5. 11.

• 

  [SpringBoot] Swagger 3.x 적용 1. pom.xml 라이브러리를 추가한다. io.springfox springfox-boot-starter 3.0.0 2. application.properties documentationPluginsBootstrapper 빈 관련 오류를 막기 위해 다음을 추가한다. spring.mvc.pathmatch.matching-strategy = ANT_PATH_MATCHER 3. SwaggerConfiguration Class @Configuration, @EnableSwagger2 어노테이션을 추가한 configuration class를 만든다. consumes(Set consumes) parameter content type을 설정한다. produces(Setproduces) response content.. 기록/BACKEND 2022. 5. 10.

• 

  [SpringBoot] MySql & MyBatis 설정하기 1. pom.xml 프로젝트를 만들 때 MyBatis Framework, MySQL을 추가해도 되고, 프로젝트가 생성된 후 pom.xml 하단 Dependencies에서 검색해 추가해도 된다. 결론적으로 pom.xml에 이 코드가 생성된다. org.mybatis.spring.boot mybatis-spring-boot-starter 2.2.2 mysql mysql-connector-java runtime 2. application.properties src/main/resources/application.properties에 다음을 작성한다. spring에서 servlet-context.xml에 있던 설정들이다. #DataBase Setting spring.datasource.driver-class-na.. 기록/BACKEND 2022. 5. 9.

• 

  [Spring] Annotation 정리 @Controller Presentation Layer의 MVC Controller에 사용한다. 스프링 웹 서블릿에 의해 웹 요청을 처리하는 컨트롤러 빈으로 선정한다. @Service Service Layer 클래스에 사용한다. @Repository DAO 또는 Repository 클래스에 사용한다. DataAccessException 자동변환과 같은 AOP 적용대상을 선정하기 위해 사용한다. @Component @Repository, @Service, @Controller 의 레이어 구분을 적용하기 어려운 일반적인 경우에 설정한다. @Scope component의 scope을 설정한다. 기본값은 singleton이다. @Configuration 설정 클래스임을 명시한다. @Bean 스프링 컨테이너가 관.. 기록/BACKEND 2022. 5. 3.

• 

  [Spring] 프로젝트 실행 순서 1. 서버 실행 -> server.xml 서버가 실행되면 서버의 server.xml 파일로 들어가서 프로젝트에 대한 context를 읽는다. 2. 현재 프로젝트 읽기 시작 -> META-INF/context.xml 현재 프로젝트로 들어오면 가장 처음으로 META-INF의 context.xml을 읽는다. context.xml에는 주로 db정보가 들어있다. (JDNI 위해) 3. web.xml 1. 웹 관련X context-param : root-context.xml 위치를 알려준다. listener : Spring Container를 생성한다. 이 컨테이너를 servlet, filters에서 같이 쓴다. 2. 웹 관련 filer, filter-mapping : 필터를 지정하고 매핑한다. servlet : .. 기록/BACKEND 2022. 5. 2.