달력

5

« 2025/5 »

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
2022. 11. 20. 22:55

SpringBoot AutoConfiguration Spring2022. 11. 20. 22:55

SpringBoot의 AutoConfiguration은 정말 편리하게 의존성만 추가해주면 관련된 기능들이 모두 설정된다. 편리한 만큼 이를 커스터마이징하는 데는 주의가 필요하다. 이 글에서는 Spring AutoConfiguration의 간단한 원리를 알아보고 어떤 관점으로 바라봐야 하는지 제시한다.

@SpringBootApplication

@SpringBootConfiguration
@EnableAutoConfiguration
@ComponentScan(excludeFilters = {
  @Filter(type = FilterType.CUSTOM, classes = TypeExcludeFilter.class),
  @Filter(type = FilterType.CUSTOM, classes = AutoConfigurationExcludeFilter.class)
})
public @interface SpringBootApplication {
}

@SpringBootApplication 은 위의 3가지 어노테이션을 합친 것이다.

  • @SpringBootConfiguration : @Configuration과 같은 기능을 한다.
  • @EnableAutoConfiguration : classpath에 있는 /resource/META-INF/spring.factories 중 EnableAutoConfiguration 부분에 정의된 Configuration들을 자동으로 등록한다. 이때, 모든 경우가 적용되는 것이 아니라, AutoConfiguration의 등록 조건을 만족하는 경우에만 등록된다. --debug 옵션을 가지고 jar파일을 실행시키면 조건 만족 여부와 함께, 어떤 Bean들이 등록되는지 확인해 볼 수 있다.
  • @ComponentScan : base-package가 정의되지 않으면 해당 어노테이션이 붙은 classpath 하위의 @Component 어노테이션을 스캔해서, Bean으로 등록한다.

이때, 개발자가 정의한 Component들이 먼저 스캔 돼서 Bean으로 등록된 후에 AutoConfiguration의 Bean들이 등록된다. 해당 등록 부분을 확인하고 싶으면 ConfigurationClassParser 클래스의 doProcessConfigurationClass 메소드를 디버깅을 해보면 확인해 볼 수 있다.

추가로 IntelliJ에서는 별도의 설정 없이 Actuator의 기능을 제공해서, 어떤 Bean들이 등록됐는지 다음과 같이 쉽게 확인할 수 있다.


Springboot AutoConfiguration

Springboot의 아무 의존성이나 추가하면, spring-boot-autoconfigure가 설정이 되고, 그 내부에 있는 /resource/META-INF/spring.factories 를 확인하면 위와 같이 설정이 되어있다. 이 중 FlywayAutoConfiguration을 보며 어떤 방식으로 AutoConfiguration이 진행되는지 알아보자.

  1. Configuration(proxyBeanMethods = false)

대부분의 AutoConfiguration 설정의 경우 proxyBeanMethods = false로 설정되어 있다. 기본 설정은 proxyBeanMethods = true 인데, CGLIB을 통해 런타임에 동적으로 Configuration 객체의 프록시를 생성해준다. 필자가 이해한 바로는 아래의 설정을 진행하는 데 필요하다.

@Configuration
public class Config {

  @Bean
  SomeBean someBean() {
    return new SomeBean();
  }

  @Bean
  NothingBean nothingBean() {
    return new NothingBean(someBean());
  }
}

@Configuration에서는 메소드 호출로 내부에서 정의한 Bean을 바로 사용할 수 있다. 기본 설정을 사용하면 Configuration의 Proxy가 생성되고, Proxy는 그 내부의 Bean이 한 번만 생성되도록 관리한다. 즉, 기본 설정에서는 SomeBean은 한 번만 생성되고, proxyBeanMethod = false를 사용하면, NothingBean을 생성하는 시점에서 또 다른 SomeBean이 생성되어 총 두 번 생성이 된다. 하지만, 이런 방식은 모든 Configuration에서는 필수적이지 않으며, Proxy를 생성하는 부분에서 성능적인 이슈가 있다고 한다. 자세한 부분은 다음 SpringBoot 이슈 를 참고하길 바란다.

  1. @Conditional-#

Spring4부터 제공하는 Conditional 어노테이션은, AutoConfiguration의 구성에 자주 사용된다. 조건에 따라 해당 자동 설정이 적용 여부를 결정한다. 대표적으로 몇 가지를 적으면 다음과 같다.

  • @ConditionalOnClass: 해당 Class가 classpath에 존재할 때 조건을 만족한다. 위의 경우 Flyway에 대한 dependency를 추가해주지 않았기 때문에, 빨간색으로 표시가 되었고, FlywayAutoConfiguration이 동작하지 않게 된다.
  • @ConditionalOnMissingBean: 특정 Bean이 사전에 정의되지 않을 때 조건을 만족한다.
  • @ConditionalOnProperty: 특정 property를 명시해주고 일치할 때 조건을 만족한다.
  • @AutoConfigurationBefore / @AutoConfigurationAfter

AutoConfiguration의 등록 순서를 결정한다. FlywayAutoConfiguration 같은 경우에는 DatasourceAutoConfiguration, JdbcTemplateAutoConfiguraion, HibernateJpaAutoConfiguration 이후에 설정이 진행된다.

실제로 직접 AutoConfiguration을 만들어서 라이브러리도 배포할 수도 있다. 해당 부분은 잘 정리한 이 블로그 를 참고하길 바란다.


AutoConfiguration을 대하는 자세 (feat.DB Replication)

SpringBoot에서 DB Replication 설정을 위해 구글링을 해보면 다음과 비슷한 형태의 코드들을 많이 발견할 수 있다. 이 예시를 조금 더 SpringBoot스럽게 코드 수정 작업을 진행해보고자 한다.

@Configuration
@EnableAutoConfiguration(exclude = {DataSourceAutoConfiguration.class})
@EnableTransactionManagement
@EnableJpaRepositories(basePackages = {"com.example"})
class DataBaseConfig {

  @Bean
  @ConfigurationProperties(prefix = "spring.datasource.master")
  public DataSource masterDataSource() {
    return DataSourceBuilder.create().type(HikariDataSource.class).build();
  }

  @Bean
  @ConfigurationProperties(prefix = "spring.datasource.slave")
  public DataSource slaveDataSource() {
    return DataSourceBuilder.create().type(HikariDataSource.class).build();
  }

  @Bean
  public DataSource routingDataSource(@Qualifier("masterDataSource") DataSource master,
                                      @Qualifier("slaveDataSource") DataSource slave) {
    ReplicationRoutingDataSource routingDataSource = new ReplicationRoutingDataSource();

    HashMap<Object, Object> sources = new HashMap<>();
    sources.put(DATASOURCE_KEY_MASTER, master);
    sources.put(DATASOURCE_KEY_SLAVE, slave);

    routingDataSource.setTargetDataSources(sources);
    routingDataSource.setDefaultTargetDataSource(master);

    return routingDataSource;
  }

  @Primary
  @Bean
  public DataSource dataSource(@Qualifier("routingDataSource") DataSource routingDataSource) {
    return new LazyConnectionDataSourceProxy(routingDataSource);
  }
}

public class ReplicationRoutingDataSource extends AbstractRoutingDataSource {
  public static final String DATASOURCE_KEY_MASTER = "master";
  public static final String DATASOURCE_KEY_SLAVE = "slave";
  private static final Logger logger = LoggerFactory.getLogger(ReplicationRoutingDataSource.class);

  @Override
  protected Object determineCurrentLookupKey() {
    return TransactionSynchronizationManager.isCurrentTransactionReadOnly() ? DATASOURCE_KEY_SLAVE
      : DATASOURCE_KEY_MASTER;
  }
}

위 코드를 간단히 설명하면 다음과 같다.

  • DB Replication는 Read를 Slave DB로, CUD(Create, Update, Delete)의 작업은 Master DB에 접근해야 한다. DB Replication의 개념이 궁금한 분은 MariaDB Replication Overview 를 참고하길 바란다.
  • master/slave DataSource를 설정한다.
  • ReplicationRoutingDataSource에서 @Transactional의 readOnly 여부에 따라 연결하는 DataSource를 결정한다.
  • 기존의 DataSource는 Transaction이 시작되는 시점에서 DataSource를 결정하지만 LazyConnectionDataSourceProxy를 사용하여 그 DataSource 결정을 실제 Statement가 요청되었을 때로 늦춘다.

위의 구현에서 의문이 드는 점

  1. @EnableAutoConfiguration(exclude = {DataSourceAutoConfiguration.class})

DataSource를 커스터마이징한다고 하면, 무조건 DataSourceAutoConfigration을 exclude 해야 하나? 필자의 견해는 No 이다.

Auto-configuration is non-invasive

SpringBoot 공식문서에서는 위와 같이 설명한다. AutoConfiguration은 침투적이지 않다, 즉 @Conditional-*의 어노테이션을 사용해서 충분히 AutoConfiguration을 exclude하지 않아도 된다.

// DataSourceAutoConfiguration 클래스
@Configuration(proxyBeanMethods = false)
@Conditional(EmbeddedDatabaseCondition.class)
@ConditionalOnMissingBean({DataSource.class, XADataSource.class})
@Import(EmbeddedDataSourceConfiguration.class)
protected static class EmbeddedDatabaseConfiguration {
}

DataSourceAutoConfiguration 에서는 @ConditionalOnMissingBean({ DataSource.class, XADataSource.class }) 설정을 통해, DataSource클래스의 Bean이 이미 존재한다면, 새로운 DataSource Bean을 생성하지 않는다.

추가적으로 DataSourceAutoConfiguration의 코드를 보게 되면, DataSourceInitializationConfiguration 이 deprecated(SqlInitializationAutoConfiguration 로 이전한 것으로 보임)돼서 별도의 설정이 진행되지 않지만, 다른 AutoConfiguration에서는 별도의 설정이 진행될 가능성이 있다. AutoConfigration은 직접 들어가서 확인해보기 전까지는 그 작업을 예단하면 안 된다.

  1. @EnableTransactionalManager, @EnableJpaRepositories

해당 설정은 TransactionAutoConfiguration에서 자동으로 설정이 된다. 그렇기에 불필요한 설정이다. JpaRepositoriesAutoConfiguration  @EnableJpaRepositories는 효과가 동일하기 때문에 삭제해도 된다.

  1. 실제로 잘 동작하는가?

해당하는 설정을 진행했을 때, 특이한 상황을 발견했다. 여러 개의 트랜잭션으로 구성된 api콜의 경우 맨 처음 트랜잭션의 readOnly 여부에 따라 master/slave DB가 결정된다. 예를 들어 @Transactional(readOnly=true)의 트랜잭션을 DB에 쓰이는 것을 확인할 수 있었다. 각각의 트랜잭션별로 readOnly 검증하고 있다고 생각했는데, 실제로는 그렇게 동작하지 않았다. 그 이유는 HibernateJpaAutoConfiguration 설정에서 자체적으로 OSIV(Open Session In View)설정이 true로 설정되어 있기 때문이다. OSIV의 자세한 내용이 궁금한 분은 조영호님 OSIV 정리 글 을 참고하기를 바란다. 트랜잭션별로 DataSource를 설정해주기 위해서는 jpa.open-in-view=false설정을 application.properties에 추가해줘야 한다.

주의 사항

Spring의 많은 AutoConfiguration Setting들은 한 개의 DataSource의 사용을 가정하는 것으로 보인다. HibernateJpaAutoConfiguration, JdbcTemplateAutoConfiguration , SqlInitializationAutoConfiguration 에서 모두 @ConditionalOnSingleCandidate(DataSource.class) 의 설정이 요구된다. 여러 개의 DataSource를 사용하게 되었을 때에는 @Primary 어노테이션을 붙여주어야 한다. 그렇지 않게 되면, 실행된 것으로 예상된 동작들이 작동하지 않는 것을 확인할 수 있다.

  1. Flyway의 의존성을 추가해줬을 때 FlywayAutoConfigration으로 인한 순환 참조의 문제 발생

어찌 보면 당연한 문제다. 지금의 DataSource는 @Transactional 의 readOnly 여부에 따라 dataSource가 결정되는 부분인데, DB Migration을 담당하는 Flyway는 여러 DB 중 어떤 DB를 스스로 선택해서 Migration해줘야 할까? FlywayAutoConfiguration의 설정을 보면 @FlywayDataSource라는 어노테이션을 활용해서 Flyway가 관리하는 DataSource를 지정해줄 수 있다. 설정하지 않으면 여러 DataSource일 때는 @Primary 가 붙은 DataSource를, 하나일 때는 해당 DataSource가 관리된다.

현재 시점에서는 Spring Boot 이슈 에서 확인 할 수 있듯이 여러 DataSource에 대한 별도의 Solution이 없는 것으로 보인다.


수정 후 코드

위의 고려 사항을 반영한 코드는 다음과 같다. jpa.open-in-view=false 옵션도 추가해야 한다.

@Configuration(proxyBeanMethods = false)
public class DataSourceConfig {

  @Bean
  @FlywayDataSource
  @ConfigurationProperties(prefix = "spring.datasource.master")
  public DataSource masterDataSource() {
    return DataSourceBuilder.create().type(HikariDataSource.class).build();
  }

  @Bean
  @ConfigurationProperties(prefix = "spring.datasource.slave")
  public DataSource slaveDataSource() {
    return DataSourceBuilder.create().type(HikariDataSource.class).build();
  }

  @Bean
  public DataSource routingDataSource(@Qualifier("masterDataSource") DataSource masterDataSource,
                                      @Qualifier("slaveDataSource") DataSource slaveDataSource) {
    ReplicationRoutingDataSource routingDataSource = new ReplicationRoutingDataSource();

    HashMap<Object, Object> sources = new HashMap<>();
    sources.put(DATASOURCE_KEY_MASTER, masterDataSource);
    sources.put(DATASOURCE_KEY_SLAVE, slaveDataSource);

    routingDataSource.setTargetDataSources(sources);
    routingDataSource.setDefaultTargetDataSource(masterDataSource);

    return routingDataSource;
  }

  @Bean
  @Primary
  public DataSource dataSource(@Qualifier("routingDataSource") DataSource routingDataSource) {
    return new LazyConnectionDataSourceProxy(routingDataSource);
  }
}

해당 부분을 이슈로 작업했던 흐름은 GPU-IS-MINE DB Replication 이슈 에서 확인해 볼 수 있다.

정리

SpringBoot의 AutoConfiguration은 편리하다. 하지만, 예측하지 못하는 경우가 발생하기도 하고, 이는 바로 확인하기가 쉽지 않다. AutoConfiguration의 작동 방식을 잘 이해했을 때, 코드는 더 간결해지고 SpringBoot를 SpringBoot답게 쓸 수 있다고 생각한다.

'Spring' 카테고리의 다른 글

@PostConstruct  (0) 2022.11.18
:
Posted by Habba
2022. 11. 19. 23:32

nth-child 와 nth-of-type 차이 카테고리 없음2022. 11. 19. 23:32

nth-child와 nth-of-type 이라 했지만

first-child, first-of-type이나

last-child, last-of-type등 모든요소에서 공통적으로 적용되는 개념이다.

 

간단하게 비교를 해보자면

nth-child(n)  nth-of-type(n)
 부모 엘리먼트의 모든 자식 엘리먼트중 n번째  부모 엘리먼트의 특정 자식 엘리먼트중 n번째

 

이론적인 개념만 봐서는 확 와닿지 않으니 바로 적용예제를 통해 비교해보자!

우선 기본세팅은 아래와 같다.

1
2
3
4
5
6
7
<div class="box">
    <p>1. p태그1</p>
    <span>2. span태그1</span>
    <p>3. p태그2</p>
    <span>4. span태그2</span>
    <p>5. p태그3</p>
</div>
 

출력물

 

여기서 5.p태그3의 글씨 색깔을 바꾸는것으로 사용방법을 비교해보겠다.

 

nth-child을 이용해서 글씨색깔을 빨간색으로 바꿔보자!

1
2
3
.box > p:nth-child(5){
    color:red;
}
 

 

 

nth-child는 모든 요소를 포함해서 순서를 카운팅한다.

따라서 5번째 요소를 nth-child로 선택하려면 p:nth-child(5)

 

nth-of-type으로 글씨색깔을 바꾸려면??

1
2
3
.box > p:nth-of-type(3){
    color:blue;
}
 

 

결과물

 

nth-of-type은 특정 요소만을 순서 카운팅한다.

따라서 5번째 요소를 nth-of-type로 선택하려면 p:nth-of-type(3)

 

nth-child는 p와 span태그 두개다 순서에 포함시켰기에 p:nth-child(5)

nth-of-type은 p태그만을 순서에 포함시켰기에 p:nth-child(3)

 

 

[ 참고한사이트 ]

https://www.w3schools.com/cssref/sel_nth-child.asp

https://www.w3schools.com/cssref/sel_nth-of-type.asp

:
Posted by Habba
2022. 11. 19. 22:50

css selector CSS2022. 11. 19. 22:50

CSS(Cascading Style Sheets)는 HTML 요소(Element)의 style(design, layout etc)을 정의한다. 그리하려면 HTML이 존재하여야 하고 또한 style을 적용하고자하는 HTML 요소를 특정할 필요가 있다.

이러한 목적으로 사용되는 것이 셀렉터(Selector)이다. 즉, style을 적용하고자하는 HTML 요소를 셀렉터로 특정하고 선택된 요소에 스타일을 정의하는 것이다.

 

 

[ 참고 사이트 ]

https://poiemaweb.com/css3-selector

:
Posted by Habba
2022. 11. 19. 22:39

Node 와 Element 의 차이 JavaScript2022. 11. 19. 22:39

Javascript에서 DOM을 다루다 보면

node와 element가 자주 등장합니다.

이 2가지를 다루는 방법이 조금 달라서 헷갈리는 경우가 많은데,

이번 포스팅에서는 node와 element의 차이점을 정리해 보도록 하겠습니다.

 

node vs element

DOM 문서는 node의 계층 구조로 이루어져 있습니다.

이 node는 여러 가지 다양한 유형이 존재합니다. 요소(element), 텍스트, 주석 등등...

element는 이러한 node의 여러가지 유형 중 한 가지입니다.

위 그림과 같이 element는 여러 가지 node의 유형 중 한 타입입니다.

즉, node는 element의 상위 개념입니다.

좀 더 자세히 설명하면,

element는 html 문서에서 <div>, <p>, <title>과 같은 태그를 사용해서 작성된 node라고 할 수 있습니다.

 

 

 

1. node

 
<!DOCTYPE html>
 
<html>
 
<head>
 
<title>My Page</title>
 
</head>
 
<body>
 
<!-- Page Body -->
 
<h2>My Page</h2>
 
<p id="content">Thank you for visiting my web page!</p>
 
</body>
 
</html>

위 문서는 다음과 같은 node 구조를 가지고 있습니다.


위와 같이 node는

태그, 텍스트, 주석 등을 모두 포함합니다.

 

node의 유형은 Node.nodeType 속성을 이용하여 구분할 수 있는데

목록은 다음과 같습니다.

  • Node.ELEMENT_NODE
  • Node.ATTRIBUTE_NODE
  • Node.TEXT_NODE
  • Node.CDATA_SECTION_NODE
  • Node.PROCESSING_INSTRUCTION_NODE
  • Node.COMMENT_NODE
  • Node.DOCUMENT_NODE
  • Node.DOCUMENT_TYPE_NODE
  • Node.DOCUMENT_FRAGMENT_NODE

 

2. element

앞에서 설명한 것과 같이

element는 node의 한 종류입니다.

주로, <p>, <div> 같은 태그를 사용해서 작성된 노드를 말합니다.

앞의 예제에서 element는

<html>, <head>, <title>, <body>, <h2>, <p>입니다.

 

우리가 javascript에서 DOM을 탐색하고, 조작할 때는

Node의 다른 형태인 주석이나 텍스트보다는

주로 이 element를 조작하고자 하는 경우가 많습니다.

 

DOM을 조작하는 방법에는

node를 탐색하는 방법과 element를 탐색하는 방법이 있는데

element를 탐색하는 방법을 사용하면

주석이나 텍스트 등을 제외한 element만을 탐색할 수 있기 때문에

DOM을 조작할 때는 주로 element를 탐색하는 방법을 많이 사용합니다.

'JavaScript' 카테고리의 다른 글

[정규식] match와 exec의 차이  (0) 2019.03.27
:
Posted by Habba
2022. 11. 18. 17:25

@PostConstruct Spring2022. 11. 18. 17:25

1. @PostConstruct란?

@PostConstruct는 의존성 주입이 이루어진 후 초기화를 수행하는 메서드이다. @PostConstruct가 붙은 메서드는 클래스가 service(로직을 탈 때? 로 생각 됨)를 수행하기 전에 발생한다. 이 메서드는 다른 리소스에서 호출되지 않는다해도 수행된다. 

 

출처: Oracle Doc

 

2. 왜 사용하는가(장점)?

 

1) 생성자(일반)가 호출 되었을 때, 빈(bean)은 아직 초기화 되지 않았다. (예를 들어, 주입된 의존성이 없음)

하지만, @PostConstruct를 사용하면, 빈(bean)이 초기화 됨과 동시에 의존성을 확인할 수 있다. 

+ 개인 의견으로 클래스 내에 @Autowired를 붙여서 객체를 사용할 때, 생성자가 필요하다면 @PostConstruct를 사용하면 될 것 같다. 빈(bean)이 등록되고 사용할 수 있으니까 말이다. 나도 그렇게 사용했고..

 

2) bean lifecycle에서 오직 한 번만 수행된다는 것을 보장할 수 있다. (WAS가 올라가면서 bean이 생성될 때 딱 한 번 초기화함) 그래서 @PostConstruct를 사용하면 bean이 여러번 초기화되는 것을 방지할 수 있다.

 

출처: StackOverFlow

 

3. 직접 적용했던 코드

 

1
2
3
4
5
6
7
8
9
10
11
12
13
@Service
public class BusinessServiceImpl implements BusinessService{
 
    @Autowired
    DataDAO dataDAO;
 
    private ParamDTO paramDTO;
 
    @PostConstruct
    public void initialize(){
        paramDTO = new ParamDTO();
    }
}
 

'Spring' 카테고리의 다른 글

SpringBoot AutoConfiguration  (0) 2022.11.20
:
Posted by Habba
2022. 11. 18. 16:58

Vue.js Setting 관련 정리 Vue.js2022. 11. 18. 16:58

1. VS Code 설치


2. node.js 설치


3. Vue 관련 Extention Pack (확장팩) 설치
  - Vetur (혹은 Vue Language Features (Volar)) 
  - Vue 3 Snippets, ESLint, HTML CSS Support 등


4. D directory 에 적당한 Project Folder 생성후 VS Code 에서 폴더 File > Open Folder 로 생성한 폴더 열기


5. VS Code Terminal
  -> npm install -g vue  -> 확인 -> vue --version 
  -> npm install -g @vue/cli
  -> vue create welcome(프로젝트 이름 아무거나)
      -> 에러시 window powershell 에서 
      -> 1) set-ExecutionPolicy -ExecutionPolicy Unrestricted 실행
      -> 2) Get-ExecutionPolicy -List => 적용 확인
      -> 3) 원복할 경우 => set-ExecutionPolicy -ExecutionPolicy Undefined

   -> cd welcome > npm install -force --save axios   (ajax 통신용) 


6. Terminal 에서 D:\VueProject\welcome 로 이동후
 -> npm run serve (http://localhost:8080)

 

7. 추가 설정

- .prettierrc 생성 (prettier code convention 에서 아래 내용 제외)
{
  "semi": false,
  "bracketSpacing": true,
  "singleQuote": true,
  "useTabs": false,
  "trailingComma": "none",
  "printWidth": 80
}

- Template Make 
  -> Configure User Snippets > vue.json 검색 > 아래내용추가
  "Generate Basic Vue Code": {
    "prefix": "vue-start",
    "body": [
      "<template>\n\t<div</div>\n</template>\n\n<script>\nexport default {\n\tcomponents: {},\n\tdata(){\n\t\treturn{\n\t\t\tsamepleData:''\n\t\t}\n\t}, \n\tsetup() {},\n\tcreated() {}, \n\tmounted() {},\n\tunmounted() {}, \n\tmethods:{}\n}\n</script>"
    ],
    "description": "Generate Basic Vue Code"
  }

- package.json 추가 (eslintConfig 부분) 
    "rules": {
      "space-before-function-paren": "off"
    }

- vue.config.js
 -> 기존거 삭제하고 아래 추가 (이클립스 서버를 먼저 뛰우면 vue 서버는 자동으로 8081 로 실행)

 -> 이클립스 서버 실행후 VSCode 에서 Client 만 구성하여 ajax 통신할때 CORS 에러 없이 실행하고 싶을 때 세팅
module.exports = {
  devServer: {
    proxy: 'http://localhost:8080' -> eclipse base domain
  }
}


:
Posted by Habba
2019. 3. 28. 21:51

trigger 와 triggerHandler 차이 2 JQuery2019. 3. 28. 21:51

<!DOCTYPE html>

<html lang="ko">

<head>

    <meta charset="utf-8">

    <script src="js/jquery.js"></script>

</head>

<body>

 

    <input type="text" />

    <input type="text" />

    <input type="text" />

 

    <button>triggerHandler</button>

    <button>trigger</button>

 

    <script>

 

        /*

        trigger 와 triggerHandler의 차이는 예제소스의 버튼을 클릭해보면 차이를 알수 있다.

        trigger 버튼을 클릭하면 전체 input박스에 css가 적용되고, 마지막input에 커서가 깜빡일것이다.

        triggerHandler 버튼은?? 

        - 이벤트의 기본 동작은 발생시키지 않고 핸들러함수만 실행한다. (즉, focus기본이벤트(커서깜빡임 이벤트는 발              생되지 않는다.))

        - jQuery확장집합에서 첫번째 요소만 적용된다.

        */

       

        $("input[type='text']").focus(function(event) {

            $(this).css("background", "red");

        });

        

        $("button:eq(0)").click(function() {

            $("input[type='text']").triggerHandler("focus");

        });

 

        $("button:eq(1)").click(function() {

            $("input[type='text']").trigger("focus");

        });

        

    </script>

 

</body>

</html>

'JQuery' 카테고리의 다른 글

trigger 와 triggerHandler 차이 1  (0) 2019.03.28
:
Posted by Habba
2019. 3. 28. 21:25

trigger 와 triggerHandler 차이 1 JQuery2019. 3. 28. 21:25

두 함수는 비슷하게 생겼지만 아주 다른 동작을 보여줍니다.

 

trigger() 함수는 input에 포커스가 들어가면서 텍스트가 나타납니다.

하지만 triggerHandler() 함수는 input에 포커스가 들어가지는 않고 텍스트만 나타나게 됩니다.

 

둘다 input에 focus() 이벤트를 호출하여 실행시키고 있지만 triggerHandler() 함수로 호출된 focus() 함수는 실행되지 않았네요. 두 함수의 차이점을 잘 인식하고 계셔야 겠네요.

 

[ Example ]

 

<button id="old">.trigger("focus")</button>

<button id="new">.triggerHandler("focus")</button><br/><br/>

<input type="text" value="To Be Focused"/>

 

<script>

$("#old").click(function(){

    $("input").trigger("focus");

});

 

$("#new").click(function(){

    $("input").triggerHandler("focus");

});

 

$("input").focus(function(){

    $("<span>Focused!</span>").appendTo("body").fadeOut(1000);

});

</script>

'JQuery' 카테고리의 다른 글

trigger 와 triggerHandler 차이 2  (0) 2019.03.28
:
Posted by Habba
2019. 3. 27. 01:07

[정규식] match와 exec의 차이 JavaScript2019. 3. 27. 01:07

[정규식] match와 exec의 차이

[ g 옵션이 있을경우와 없을경우의 차이 ]
match : 전체 문자열을 반복적으로 검색해 해당하는 모든 결과를 배열로 뿌려줌
괄호로 묶은 부분은 찾은 문자에서 두번째값으로 지정되어야 하지만 match함수에서 g 옵션이 들어갈 경우
값이 할당되지 않는다. g 옵션이 없을 경우에는 처음 찾은 값만 리턴하기 때문에 두번째값으로 지정됨
ex)
<script type="text/javascript>
<!--
    var temp = "\"첫번째\" \"두번재\"\n\"세번째\"";
    var reg = /"([^"]+)"/igm;
    document.write(temp.match(reg));
    //결과값 : "첫번째","두번재","세번째"

    var reg = /"([^"]+)"/im;
    document.write(temp.match(reg));
    //결과값 : "첫번째",첫번째    <=== 따옴표가 없는 첫번째 는 괄호안의 검색 값임
//-->
</script>

exec : 문자열에서 해당하는 값을 배열로 뿌려줌
한번 검색 시 처음 해당하는 값만 뿌려줌
<script type="text/javascript">
<!--
    var temp = "\"첫번째\" \"두번재\"\n\"세번째\"";
    var reg = /"([^"]+)"/igm;
    document.write(reg.exec(temp));
    document.write(reg.exec(temp));
    //결과값 : "첫번째",첫번째"두번째",두번째
//-->
</script>

g 옵션이 있을경우 한번 검색하면 다음으로 포인터가 넘어가고 없을경우에는 첫번째 해당하는 값만 리턴해줌
전체 문자열에서 검색을 하기 위해선 다음과 같이하면 된다
<script type="text/javascript">
<!--
    var temp = "\"첫번째\" \"두번재\"\n\"세번째\"";
    var res = null;
    while((res = reg.exec(temp)) != null) {
        document.write(res+' - ');
    }
    //결과값 : "첫번째",첫번째 - "두번째",두번째 - "세번째",세번째 -
//-->
</script>


'JavaScript' 카테고리의 다른 글

Node 와 Element 의 차이  (0) 2022.11.19
:
Posted by Habba
2018. 11. 10. 20:09

[UML] Sequence Diagram Modeling2018. 11. 10. 20:09

객체간의 송수신 하는 메시지를 시간 순서대로 표현한 그림

 

인터렉션 (Interaction)

의미: 특정 목적을 달성하기 위한 행위, 메시지들의 집합

표현: 메시지를 포함하는 사각 테두리의 좌측 상탄에 기술

 

인터렉션 연산자

의미: 시퀀스 다이어그램의 반족, 조건, 병행 처리 등을 표현

표현: 메시지를 포함하는 사각 테두리(Frame)의 좌측 상탄에 기술

종류

- alt: alternative 조건에 따라 선택 사항이 여러개인 경우

- opt: optional 조건에 따라 선택 사항이 하나인 경우

- break: loop를 벗어날 경우

- par: parallel 병렬로 수행하는 경우

- seq: sequence 메시지 전달 순서가 엄격하지 않은 경우

- strict: 메시지 전달 순서가 엄격한 경우

- neg: negative 절대 발생하면 안되는 상황

- critical: 여러 병행 작업이 있을 때 우선 처리되어야할 경우

- ignore: 특정 메시지를 무시할 경우

- consider: 특정 메시지를 중요하게 고려할 경우

 

ref

의미: 인터렉션에서 다른 인터렉션을 참조할 경우

 

객체 (Object)

의미: 시퀀스 다이어그램에 참여하는 객체

표현: 사각형안에 객체명:클래스명으로 표기

        클래스명 혹은 객체명 둘 중 하나는 생략 가능

 

생명선 (Lifeline)

의미: 객체가 살이있는 정도를 표현

표현: 파선, 소멸시엔 선 끝에 x 표시

 

메시지 (Message)

의미: 객체 사이에 송수신하는 메시지

표현: 시간 순서대로 위에서 아래로 표현

- 실선 꽉찬 머리 화살표: 동기 메시지

- 실선 얇은 머리 화살표: 비동기 메시지

- 파션 얇은 머리 화살표: 응답

 

제어초점 (Focus of Control)

의미: 객체가 활성화된 상태

표현: 생명선 위에 사각형으로 표현

 

 

 

 

 

'Modeling' 카테고리의 다른 글

ERD  (0) 2018.06.30
:
Posted by Habba