CodeHoon

안녕하세요 상훈입니다. 
지난 번에는 text 와 utext 에 관해서 포스팅을 했었는데요, 아래 링크를 통해 확인이 가능합니다.

1. 그래서, | | 이 뭔데?

이번에는 | | : literal substitution 에 대해 간단하게 작성하려고합니다.

해당 문법은 JavaScript 를 아시는 분이라면 유명한 template literal 라고 생각하시면 편한데요,
바로 보여드리도록 하겠습니다.

//Java
model.addAttribute("name", name);

//HTML
<p th:text="|The Name is ${name}|"></p>

해서 값을 받아와 출력을 하면,

requestParam으로 받아온 값이 위 사진과 같이 출력이 됩니다.

주요한 기능으로는 안의 문자열을 조합하여 한번에 출력이 가능하다고 볼 수 있겠네요.

또 다른 예시)

    <p th:text="|My Name is ${name}, and his name if ${name2}. Also her name is ${name3}|"></p>

이런식으로도 작성이 가능하겠네요.

자바스크립트로는 백택(`) 을 사용하여 ${변수명} 으로 사용하는 템플릿 리터럴(Template Literal)과 동일하네요.

[글작성일자: 2024.01.16] 안녕하세요 상훈입니다.

이번에 프로젝트를 통해 타임리프를 사용하게 되었는데, 생각보다 신기하고 간단하더라구요.
하나씩 공부하는 입장으로서 작성중에 있습니다.

1. 타임리프

타임리프는 아래 링크에 소개드립니다. 만약 보신적이 없으시다면 간단하게 훑는걸로 봐주세요!

https://www.thymeleaf.org/index.html#natural-templates

2. text, utext 무슨 차이인데?

딱 필요한부분만 말하자면, 문자 내에 html 태그를 사용할 수 있는가 없는가의 차이입니다.

예시)

//Java
model.addAttribute("testText", "<b>utext를 통하여 Escaped문자열을 사용할 수 있다.</b>");

  //HTML
  utext 를 사용할 경우:   <span th:utext="${testText}">testText</span><br/>
  utext 를 사용하지 않았을 경우: <span th:text="${testText}">testText</span>

이렇게 다른 결과를 볼 수 있습니다.

다른말로는 Escape 문법을 사용하여 화면에 렌더링을 시킬 수 있는가 정도.

html inspect 를 살펴보면, <b> 태그로 위에는 들어가있는 반면,  => Escaped
아래는 문자열로 들어가지는 모습을 볼 수 있습니다.

안녕하세요 상훈입니다. 

Spring + Maven, MySQL 을 사용하는데 DBeaver 를 통해서는 MySQL 과 연동이 되는데, 스프링에서는 서버 구동조차 안되어 난감했던 경험을 하였습니다.

최근에 NCP-Computed Engine 에서 AWS - EC2로 서버이전을 하게되었는데, 이 과정 중 발생하였습니다.

보통 인바운드, 아웃바운드 설정 오류인 것이다. 라는 내용이 대부분이라 인바운드, 아웃바운드 모두 모든 트래픽 허용 (0.0.0.0/0) 으로 했는데도 안되고 (::/0)... 너무 난감했습니다.

 ✔ Which Error?

✔ Communications link failure

바로 연결 오류.

해당 오류가 뜨면서 서버 구동조차 안되었기 때문에, 무엇이 오류였던건지 2일정도 찾아 헤매었습니다.

구글 서핑 중 우연히 발견하게 된 블로그의 한 단락

이번 서버 설정에서는 MySQL 의 기본 설정인 bind-address 를 설정하지 않았다는 것이 상기되었다.

✔ MySQL 기본 설정하기 [Solution]

mysql 의 기본 설정 중 bind-address 를 찾아 주석처리
  - 로컬에서만 된다는 것으로 설정된 기본 형태를 주석 처리하여 모두 사용이 가능하도록 변경

sudo nano /etc/mysql/mysql.conf.d/mysqld.cnf

초보적인 실수였지만 겨우 잘 찾았으니 다행.
(그냥 ec2 어떻게 서버 올리는지 순서에 따라 작성을 한 번 해야하나? 라는 필요성을 느낌)

안녕하세요 상훈입니다.

Spring, MyBatis 에서 여러 가지의 쿼리를 만들어놓고 부품처럼 이거 쓰고 저거 쓰고 할 때 사용하는 방법입니다.

1. 메인 기능 설정

<select id="selectListPage" 
    parameterType="a.b.c.ABCDTO"			
    resultType="a.b.c.ABCDTO"
    >			
        <include refid="COMMON.pagingPreSQL" />
        <include refid="listPage" />
        <include refid="COMMON.pagingPostSQL" />
</select>

여기서 주의할 점!

include refid = "" 작성시,

1. 같은 파일 내의 쿼리를 작성하면 listPage 와 같이 작성.
2. 다른 파일 내의 쿼리를 가져다가 사용하려면, 해당 mapper 의 namespace 를 체이닝으로 작성해주세요. COMMON.pagingPreSQL 와 같이 작성

2. 각 기능 설정

/*기본 목록 조회 */	
<sql id="listAdmUserBas"	>			
    SELECT USER_ID	/* 사용자아이디 */
         , DESIG_IP	/* 지정IP주소 */
         , USER_PWD	/* 사용자비밀번호 */
      FROM 테이블명	
     WHERE 1=1	
    <if test='userId != ""'> <!-- 사용자 아이디가 있을 경우 -->
        AND USER_ID LIKE CONCAT('%',#{userId},'%')
    </if>
    <if test='desigIp != ""'> <!-- 지정 아이피가 있을 경우 -->
        AND DESIG_IP LIKE CONCAT('%',#{desigIp},'%')
    </if>
    <if test='brofcCd != ""'> <!-- 코드가 있을 경우 -->
        AND BROFC_CD LIKE CONCAT('%',#{brofcCd},'%')
    </if>
</sql>

각 기능을 담당하는 쿼리는 메인 쿼리로직과는 다른점이 있는데요,

1. 각 기능에 대한 쿼리는 모두 <sql> 태그로 설정
2. parameterType, resultType 을 작성하지 않습니다.

이상입니다.

도움이 되셨다면, 여유롭게 커피 한 잔 사주시면 감사합니다~

Buy me a Coffee ☕

안녕하세요 상훈입니다.

✔ 에러 환경 / 내용

FrontEnd(Javascript, Vue.js) → BackEnd(Java)
비동기 통신 axios, post 방식으로 전송하였는데, 아래와 같은 에러가 발생하였습니다.

.w.s.m.s.DefaultHandlerExceptionResolver : Resolved [org.springframework.web.HttpMediaTypeNotSupportedException: Content type 'application/x-www-form-urlencoded;charset=UTF-8' not supported]

경고이긴하지만, 데이터가 안들어왔으니 결함이 되겠지요?

✔ 이유

- application/x-www-form-urlencoded
- charset=UTF-8

를 컨트롤러(Controller) - 어노테이션 @RequestBody 에서 인식하지 못하기 때문입니다.

✔ 결과

그래서 간단하게 RequestBody 어노테이션을 삭제해주었더니 정상적으로 데이터가 받아졌습니다.

이상입니다.

감사합니다.

안녕하세요 상훈입니다.

Vue3 + Spring 를 비동기 통신 axios 로 서버의 데이터 불러오기를 하려고합니다. 

2가지 이슈가 있었습니다.

1) Spring에서 사용하는 Post 방식.
2) Axios 통신에서 생기는 자체적인 문제

해당하는 부분에 적용해서 봐주시면 될 것 같습니다.

😱 1번째 이슈 😱 

- GET방식만 사용하다 보니, POST 방식을 똑같이 적용하는데에 오류가 발생하였다.

그래서 AXIOS를 사용하여 데이터를 백에서 받을 때 자체가 정상적으로 이루어지지 않았다.

@RestController
@RequestMapping("/rp")
public class RPController {
	@Autowired
	RPService rpService;
    
	@ResponseBody
	@PostMapping("/getItems")
	public List<SearchListOut> searchLists (@RequestBody SearchListIn searchListIn) {
		return rpService.searchLists(searchListIn.getRSeq());
	}
}

 - RestController 를 설정, ReqeustMapping을 통하여 "/rp"에 대한 모든 경로를 받을 것을 선언.

- Service를 연결.

- ResponseBody, PostMapping 을 통하여 post 통신방식으로 데이터를 받을 것을 선언.

- @RequestBody SearchListIn searchListIn 
   ㄴ searchListIn.java  DTO 에서 선언한 내용을 값으로 받겠다고 선언

- searchListIn.getRSeq() 를 통해 해당 값을 전달.

✔ SearchListIn  DTO

// SearchListIn DTO
import lombok.Data;

@Data
public class SearchListIn {
	private int rSeq;
}

이렇게 처리하여서 값을 받아왔습니다!

😱 2번째 이슈 😱 

알고보니 axios에서 2번째 파라미터로 값을 보내게 되는데, 이 부분에서 제대로 적용이 안된다는 이슈가 있었습니다.

그래서 3번째 파라미터로 전달하도록 처리했습니다.

function _fetchRP (url, payload) {
	return new Promise ((resolve, reject) => {
		axios.post(url, null, {params: {...payload} })
		...
	}
}

3번째 인자는 원래 config 옵션인데, 이상하게 그렇게 오류가 뜬다고 알려져 있더라구요.

후일 2번째 파라미터로 정상 동작하게 된다면 현재 옵션이 오류가 발생할 것으로 보입니다.

유념해주세요!

안녕하세요. 상훈입니다.

✔ 발생 환경

Java - springfox 를 의존성 주입하여 프로젝트 git에 push 한 것을 pull 받아 바로 구동하려고하는데 

환경 : VSCode.

빨간줄이 떠버렸습니다.

The import springfox cannot be resolvedJava(268435846)

이런 안내문구와 함께요.

✔ 오류 발생 원인 

😢 이 에러가 발생한 건 Build 때문입니다.

✔ 해결 방법

✨Build를 진행하도록 하겠습니다.

build.gradle  > 우클릭  > Reload Projects 를 해주세요.

이렇게 새로운 빌드가 되는것을 보실 수 있습니다.

build가 완료되면 에러표시가 사라진것을 보실 수 있습니다.

만약 그래도 안사라지시면, vscode를 한 번 종료 후, 재구동 시켜서 build를 진행해주세요!

이상입니다.

도움이 되셨다면 광고 한번 클릭해주세요. 블로그 운영에 큰 힘이 됩니다. 감사합니다.

안녕하세요 상훈입니다.

Spring에서 css 경로를 잡아주도록 하겠습니다. [ jsp example css path ]

실제 경로는 
"src/main/webapp/resources/css/cssfilename.css" 인데요,

이걸 다 써줄 수도 없으니, jsp 파일에서 작성할 link부분을 바로 작성하도록 하겠습니다.

<link rel="stylesheet" href="${pageContext.request.contextPath}/resources/css/addrbook.css" type="text/css" media="screen" />

${pageContext.request.contextPath} 를 넣어주는겁니다.

이상입니다.