BoostCourse 진행 중에 HTML Template 해야하는 일이 생겨 정리


HTML Template (String.replace() 사용하기)



 - ${id}가 2개, ${description} 2개, ${placeName}, ${content}가 존재한다.

 - 위 문자열들을 바꿔야 하는데 JS에는 string에 replace()함수가 존재한다.

 - 하지만 replace()가지고는 {id}를 내가 원하는 변수의 값으로 바꾸기 위해서는 개수 대로 써줘야 한다.



 얼마나 멍청한 짓인고....


그래서 찾아봤다. 자바에 replaceAll같은 함수가 있는지.. 

하지만 JavaScript에는 replaceAll은 없고 정규표현식을 이용하여 replaceAll의 기능을 구현해야한다.


tempalte에 정의되어 있는 상태는 ${ 변수명 }를 바꾸어야한다.


MDN :: https://developer.mozilla.org/ko/docs/Web/JavaScript

위 사이트를 참조했을때 수행되어야할 일은 ${ }이와같은 특수문자로 감싼 데이터만을 골라 낸 뒤 바꿔야 한다.


 1. 일단 정규표현식의 패턴


/ 문자 /


  - 정규표현식은 슬래쉬로 감싸면 된다.

  - 또는 RegExp 생성자 함수를 호출한다.


var re = RegExp("문자");


  - 생성자 함수의 호출은 다른 출처로부터 패턴을 가져와야 하는 경우 사용한다.


 2. 사용해야할 정규표현식 문법


  - 우선 $ { } 같은 특수문자를 제거 해야 한다.

  - 특수문자를 특별하지 않은 문자로 인식하게 하는 방법은 역슬래시를 사용하는 것이다.


\$ \{  \}


  - 이렇게 되면 javascript는 아무것도 출력하지 않는다.


 3. 플래그를 사용한 고급검색 (replaceAll과 같은 전역검색)


  - g : 전역 검색

  - i : 대소문자 구분없는 검색

  - m : 다중행 검색

  - u : 유니코드 패턴을 유니코드 코드 포인트의 나열로 취급

  - y : "sticky" 검색을 수행, 문자열의 현재 위치부터 검색을 수행


 4. 결과적으로 정규표현식을 적용한 replace()





 결과물 


  - 문자열도 잘 바뀐 것 같고 화면도 나오긴 나온다.


프로젝트를 하는 중에 어노테이션의 구분을 제대로 하지 못해 시간을 날린 기억에 간단하게 정리 한다.

(Project 3 내용 범위의 방법론에 대해서만 정리)


사전지식

 Spring MVC

  - 프론트 컨트롤러

  - 핸들러

 


@Controller와 @RestController의 차이

 (Spring MVC vs Restful 웹서비스 컨트롤러)


 - @Controller는 화면(View)을 리턴하는 용도




 - @RestController는 데이터를 리턴하는 용도




@RestController는 Spring 4.x 버전이후 등장한 어노테이션이기 때문에 


만약 Spring 3.x에서 @RestController의 기능을 구현하기 위해서는 


@Controller와 메서드 리턴타입을 @ResponseBody를 붙여야 한다.


 - @Controller + @ResponseBody




결과적으로 사용방법은 이러하다.




밑의 내용은 어노테이션 사용시 구조적인 차이와 동작 방식


 @Controller만 사용할 경우 동작 흐름




 @Controller + @ResponseBody를 사용할 경우 동작 흐름



@RestController를 사용할 경우 동작 흐름




Spring Test 코드 작성기


 - Boostcourse 프로젝트 작성 시 

   데이터가 제대로 출력되는지 확인하기 위해서 서버를 올렸다 내렸다 하기 귀찮아서 테스트 클래스를 따로 만듦


요약

 1. Pom.xml에 spring-test, junit 설정

 2. DB 설정

 3. Test 코드 작성


 - 필요 라이브러리 (Pom.xml)


spring-test

<!-- https://mvnrepository.com/artifact/org.springframework/spring-test -->

<dependency>

    <groupId>org.springframework</groupId>

    <artifactId>spring-test</artifactId>

    <version>${spring.version}</version>

    <scope>test</scope>

</dependency>

junit

<dependency>

<groupId>junit</groupId>

<artifactId>junit</artifactId>

<version>4.12</version>

<scope>test</scope>

</dependency>



 - DB 설정


 여기서는 개인의 DB 설정 방법에 따라 다름

 (xml에 DB설정 또는 java class에 DB설정)


 - 내 프로젝트 구성


 - 특이사항이라면 xml로 DB 설정이 xml에 설정되어 있는 것이 아니라 Java class에 DB 설정


ApplicationContext.class

@Configuration

@ComponentScan(basePackages = { "kr.or.seok.naver.dao", "kr.or.seok.naver.service" })

@Import({ DBConfig.class })

public class ApplicationConfig {


}


 - application.properties 파일에 DB 설정 정보를 담아 놓고 @PropertySource 어노테이션으로 불러다가 사용


DBConfig.class


@Configuration

@PropertySource({"classpath:application.properties"})

@EnableTransactionManagement

public class DBConfig implements TransactionManagementConfigurer {


@Value("${spring.datasource.driver-class-name}")

private String driverClassName;

@Value("${spring.datasource.url}")

private String url;


@Value("${spring.datasource.username}")

private String username;

@Value("${spring.datasource.password}")

private String password;

/**

 * DataSource 설정

 * @return

 */

@Bean

public DataSource datasource() {

BasicDataSource dataSource = new BasicDataSource();

dataSource.setDriverClassName(driverClassName);

dataSource.setUrl(url);

dataSource.setUsername(username);

dataSource.setPassword(password);

return dataSource;

}


/**

 * Transaction처리 기능을 사용하기위한 설정

 * 

 * @return

 */

@Bean

public PlatformTransactionManager transactionManager() {

// DB 설정을 커스터마이징 하기 위한 메서드

return new DataSourceTransactionManager(datasource());

}


@Override

public PlatformTransactionManager annotationDrivenTransactionManager() {

return transactionManager();

}


}


 - TestCode 작성


 기존 BoostCourse에서 배운 Test 방법

 하나의 기능만 테스트를 하기엔 별 문제 없으나 하나의 클래스에서 여러 테스트를 하기 위해서는 ApplicationContext를 계속 써줘야함


public class TestDaoPromotion {


/**

* 프로모션(Promotion) 출력

*/

@Test

// @Ignore

public void testProduct() {

// DB 설정

ApplicationContext ac = new AnnotationConfigApplicationContext(ApplicationConfig.class);

PromotionDao promotionDao = ac.getBean(PromotionDao.class);


List<Promotion> promotions = promotionDao.getPromotions();


for (Promotion promotion : promotions) {

System.out.println(promotion);

}

}

}


 

그래서 수정해봄


@RunWith(SpringJUnit4ClassRunner.class)

@ContextConfiguration(classes = {ApplicationConfig.class, DBConfig.class})

@WebAppConfiguration

public class TestDaoPromotion {


@Autowired

PromotionDao promotionDao;

 

/**

* 프로모션(Promotion) 출력

*/

@Test

public void testProduct() {

List<Promotion> promotions = promotionDao.getPromotions();


for (Promotion promotion : promotions) {

System.out.println(promotion);

}

}


}




결론


 - promotion, category 에서는 필요한 메서드가 하나 뿐이라 테스트코드가 의미 없어보일 수도 있으나 

product와 그 이후 작업을 위해서 세팅

[BoostCourse] 프로젝트 3: 예약관리 시스템 : 메인페이지

 
 * 이 글은 웹 프로그래밍 과정을 진행하면서 "개인적인" 생각을 정리한 글입니다.
 * 잘못된 부분이나 더 좋은 생각이 있으신 분들은 댓글 남겨주세요.
 
 - 다음 글
 
 - 프로젝트3(메인페이지) - 요구사항 정의서

 

[요구사항 - 기능 요구사항]

 

 

[요구사항 - 기술 요구사항]

 

 

 

[요구사항 - 코드 작성 규칙(FE)]

 

 

[요구사항 - 코드 작성 규칙(BE)]

 

 

 

 

 

 

 

 

 

 

 

 

결과 화면

 

 

 - 부족한 점

 1. 슬라이드 캐러셀로 구현해야함

 2. 자바스크립트 부분에서 반복되는 부분 줄여야 함

 3. 언어간 데이터 전달은 오브젝트로 할 것

 4. 무조건 JSP로만 해야한다는 생각을 버릴 것 (어떻게 하든 방법은 많으니...) 

 5. 부족한게 너무 많다..

 

 - 프로젝트 3. 예약관리 시스템: 메인페이지 - 시연영상

 

[Window 7] 설치 후

 - 윈도우 설치 후 예상대로라면 유선 Lan선 꼽혀 있으니까 3dp로 네트워크 잡아서 해야지

 - 하지만 이 데스크탑에는 ODD도 USB도 네트워크도 안된다... ㄷㄷ


https://m.blog.naver.com/hes2tory/220836186360

여기서 보고 해결했다.

현재 내 상태는 윈도우는 설치 했으나 할 수 있는게 없는 상태


 1. 윈도우 설치

 2. USB에 3DP를 넣어 놓고

 3. USB 부팅 모드로 들어가

 4. 윈도우 설치 64비트 설정하는 곳에서 선택 후 다음 창까지 들어가

 5. shift + F10을 누르면 cmd 창 같은게 나옴

 6. diskpart를 치고 list volume을 치면 이 컴퓨터의 디스크에 대한 정보가 나옴

 7. exit로 diskpart 에서 나와

 8. 내 usb로 들어감 "e:/3dp/" (경로 이동)

 9. c:로 3dp파일을 옮김 "copy 3dp_net ~~" , "copy 3dp_chip ~~" (파일 이동)

 10. 원래 윈도로 부팅

 11. c: 들어가보면 3dp_net이랑 chip 옮겨져 있음

 12. net부터 깔면 인터넷 되고 3dp_chip 설치 해서 나머지 드라이브를 잡는다.

[웹 레이아웃 기술 발전사]


레이아웃이 없던 초창기

 - 레이아웃을 위한 디자인 방법이 없었을 때, 제한적인 텍스트 디자인을 사용


테이블 레이아웃

 - 테두리(border)를 투명하게 설정한  테이블을 사용해 멀티 컬럼 디자인이 시작


프레인 레이아웃

 - 테이블 레이아웃에 프레임 기술이 합쳐진 방법, 여러 장의 HTML 문서를 결합해 하나의 문서를 만듦

 - 페이지의 공통 부분을 분리, 효율적으로 관리할 수 있게 됨

 - Ajax 기술의 발전으로 사용되지 않음


CSS 레이아웃

 - HTML을 구조 언어의 역할로만 사용, 표현 언어인 CSS가 제공하는 레이아웃 기술(float, position)을 사용해 레이아웃을 만듦

 - 모바일 시대에 접어들면서 멀티 스크린에 대응하는 디자인을 만들기에는 부족함


Flexbox 레이아웃

 - 다양한 모바일 환경에 대응하기 위한 레이아웃 기술

 - X축, Y축 방향으로 요소를 배치, 정렬할 수 있으며 각 요소의 순서를 변경할 수 있어 기존의 레이아웃 기술 대비 자유도가 높아짐

 - Bootstrap에서 사용하는 기반 기술


Grid 레이아웃

 - 시스템을 언어 차원에서 지원하면서 더 이상 기존의 그리드 프레임 워크를 사용할 필요가 없음

 - 행/열 격자 구조에 요소를 자유롭게 배치, 반응형 웹 레이아웃 대응도 가능


참고 - https://uid.gitbook.io/css-grid/



[NamedParameterJdbcTemplate 사용하기]



NamedParameterJdbcTemplate

 - 바인딩시 ? 를 사용하지 않고 :parameter 를 사용

 - 세번째 파라미터로 RowMapper<>와 함께 활용

(sql문에 바인딩 할 값이 있을 경우에 바인딩 할 값을 전달할 목적으로 사용하고 있는 객체)


BeanPropertyRowMapper

 - column의 값을 자동으로 DTO에 담아주는 객체

 - query() 메서드의 반환 값이 여러 건일 때 내부적으로 반복하면서 DTO를 생성후 List에 담아 반환



GitGist

'Spring > Spring Basic' 카테고리의 다른 글

[Spring Study] 코드로 배우는 스프링 웹 프로젝트  (0) 2018.01.07

[이클립스 실행 시 오류]



프로젝트 폴더에 .metadata -> .plugins -> org.eclipse.core.resources -> .projects 의 하위 폴더를 삭제



그러고 나면 eclipse가 다시 폴더를 자동으로 생성하게 되므로 해결

+ Recent posts