본문 바로가기

전체 글388

[React] Prop 프로퍼티 사용하기 Prop 이란? properties의 줄임말로, 상위 컴포넌트가 하위 컴포넌트에 값을 전달할 때 사용한다. (단방향 데이터 흐름) 프로퍼티는 수정할 수 없다는 특징이 있다. 자식입장에선 읽기 전용인 데이터이다. 프로퍼티에 문자열을 전달할 때는 큰따옴표 (" ")를, 문자열 외의 값을 전달할 때는 중괄호({ })를 사용한다. Ex1) 기본적인 Prop src 아래에 component 폴더를 만들어 Comp1.js를 생성후 함수를 만들었다. 이 컴포넌트는 val1이라는 속성(props)을 받아서 해당 속성을 사용하여 "Hello {val1}"을 렌더링한다. 이후 export default Comp1로 외부에서도 사용할 수 있게 만들어 Comp1 컴포넌트를 내보낸다. 기본적인 Prop이 실행된 것을 볼 수 있.. 2023. 9. 20.
[Spring] 자바스크립트 JSON 문자열, 컨트롤러에서 객체로 변환 javascript var encodedData = encodeURIComponent(JSON.stringify(data)); JSON.stringify()를 사용하여 JavaScript 객체를 JSON 문자열로 변환한 후, encodeURIComponent()를 사용하여 JSON 문자열을 URL에서 사용할 수 있는 형태로 인코딩한다. location.href = "/update?memberVO=" + encodedData; 생성된 인코딩된 데이터를 URL 파라미터로 사용하여 /update 엔드포인트로 이동한다. memberVO라는 이름으로 인코딩된 데이터를 전달하게 된다. 이렇게하여 /update 엔드포인트에서는 memberVO 파라미터를 받아 해당 데이터를 JSON 형태로 파싱할 수 있다. 컨트롤러 .. 2023. 9. 19.
[Spring] 검증(Validation) -1 타임리프(thymeleaf) join.html 타임리프를 써서 검증을 진행해보았다. th:object를 해서 MemberVO에 있는 데이터들을 th:field에 매핑시켜줄 수 있다. th:field를 사용하면 id, name, value 모두 자동으로 만들어준다. 맨 아래에 있는 완료 버튼을 누르면 submit하여 form의 action에 있는 joinCommit 컨트롤러를 찾아간다. MemberController 컨트롤러에 도착하게 되면, 매개변수로 MemberVO와 Model을 추가한다. MemberVO는 html에서 submit으로 name 값을 가져오기 위해 넣었고, Model은 html에 데이터를 뿌리기 위해 넣어준다. errors라는 변수를 Map객체로 만들어 주고, 위 코드와 같이 html의 input 태그에서 값이 입.. 2023. 9. 19.
[Spring] 스프링 부트에서 메시지 국제화, Gradle HTML 삽입 미리보기할 수 없는 소스 원래라면 메시지 관리 기능을 사용하려면 스프링이 제공하는 MessageSource 인터페이스를 빈으로 등록해야한다. 하지만, 스프링 부트를 사용하면 스프링 부트가 MessageSource를 자동으로 스프링 빈으로 등록한다. 따라서 위 코드는 없어도 된다. application.properties application.properties에서 spring.messages.basename=messages 를 작성한다. 이는 기본 값이라 작성하지 않아도 위 코드가 자동으로 등록된다. messages.properties messages.properties는 locale이 지정되지 않았을때 기본으로 출력할 properties이고, messages_en.properties는 l.. 2023. 9. 18.
[Spring] 부트에서 AOP 의존성 추가하고 사용하기 @Aspect [Spring] AOP 개념과 용어 8가지 AOP란? 관점지향 프로그래밍으로, 문제를 바라보는 관점을 기준으로 프로그래밍 하는 방법론 what when where 횡단관심사(cross-cutting-concerns) 흩어진 관심사를 Aspect로 모듈화하고 핵심적인 비즈니스 bright-landscape.tistory.com AOP에 대해 알아보고 싶다면 위 포스팅으로. build.gradle HTML 삽입 미리보기할 수 없는 소스 위 코드를 build.gradle에 추가시켜준다. application.properties에 가서 나는 로깅 레벨을 info로 찍을 것이기 때문에 위와 같이 코드를 짰다. LoggingAspect HTML 삽입 미리보기할 수 없는 소스 현재 위 코드에서는 @Before과 @A.. 2023. 9. 18.
[Spring] SqlSessionTemplate 대신 Mapper 인터페이스 사용 SqlSessionTemplate 사용한 ServiceImpl 클래스 여태까지 나는 ServiceImpl 클래스에서 항상 SqlSessionTemplate을 주입받아 사용해왔다. 하지만, 또 다른 방법이 있어 기록하고자한다. Mapper 인터페이스를 사용한 ServiceImpl 클래스 하지만 위 ServiceImpl을 보면 MemberMapper 라는 녀석을 주입받아 사용한다. 그리고 mapper 패키지에 MemberMapper라는 녀석이 보인다. 얘는 뭐하는 놈일까? MemberServiceImpl 클래스에서 private MemberMapper memberMapper 필드를 @Autowired로 주입하고 사용하는 이유는 Spring에서 데이터 액세스를 수행하는 객체에 대한 의존성을 주입하기 위해서이다.. 2023. 9. 18.
[Spring] 스프링 부트 mySql mybatis 연동하기 (gradle) mySQL 위 데이터들을 콘솔에 뿌려볼 것이다. 1. build.gradle HTML 삽입 미리보기할 수 없는 소스 위 코드를 build.gradle에 있는 dependencies에 복붙해주자. (추가 한뒤 리프레쉬 해야함.) 2. application.properties HTML 삽입 미리보기할 수 없는 소스 위 코드를 application에 복붙해준다. 이때 url에 있는 bitdb는 왼쪽 사진에 있는 테이블 명을 나타내고, username과 password는 root 계정과 그 비밀번호를 나타냈다. 또한 mybatis 경로를 설정해주어야하는데, 노란색 표시와 같이 경로를 잘 지정해주자. member-mapper.xml MemberVO mapper와 대입될 데이터들을 만들어준다. service Con.. 2023. 9. 15.
[Spring-Legacy] validate 유효성 검사 jsp jsp에서 input 태그의 name과 age, 그리고 js에서 여기에 데이터를 입력 후 serialize를 통해 ajax로 넘긴다. VO와 컨트롤러 ValidateModel이라는 객체를 만들어, input 데이터를 받아주기 위해 name과 age를 만들었고, 컨트롤러 ajax에서 modelAttribute로 받아 콘솔에 찍어볼 것이다. 데이터를 찍어보니 잘 나온다. ValidaterTest ValidaterTest 클래스를 만들어, Validator를 구현시켜준다. 그리고 오버라이드를 시켜주고, 오른쪽과 같이 return을 수정한다. 이렇게 지정해야 해당 모델을 검사해준다. ValidaterTest 문자를 계산하는 StringUtils는 org.springframework.utl을 사용해준다. .. 2023. 9. 14.
[Spring-Legacy] XML로 Interceptor 인터셉터 사용하기 interseptor.jsp 로그인 버튼을 누르면, 컨트롤러에 있는 loginInterChk로 이동할 것이다. 컨트롤러 컨트롤러로 오게되면 콘솔창에 loginInterProcess Controller 를 출력하고, 페이지 이동을 한다. 인터셉터 컨트롤러 컴포넌트의 value를 inter로 지정해주고, 이를 다른곳에서 참조하게 되면 인터셉터가 실행되는 것이다. servlet-context.xml 1. xml에서 인터셉터를 등록해주고, 2. mapping 시키는 곳에 path를 적용시킬 컨트롤러 주소, 3. bean을 인터셉터 value 값을 대입. 해당 페이지에서 LOGIN을 눌르면, 콘솔창에 preHandle, postHandle, afterCompletion 모두 나오는 걸 볼 수 있다. 인터셉터 컨트.. 2023. 9. 14.
[Spring] SessionAttribute 보호되어 있는 글 입니다. 2023. 9. 14.
[Spring] 구글 차트 DB에 넣어 Ajax로 시각화하기 https://developers-dot-devsite-v2-prod.appspot.com/chart/interactive/docs/gallery/piechart?hl=ko 시각화: 원형 차트 | Charts | Google for Developers 이 페이지는 Cloud Translation API를 통해 번역되었습니다. Switch to English 의견 보내기 시각화: 원형 차트 컬렉션을 사용해 정리하기 내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요. 개요 SVG developers.google.com 구글 차트로 데이터를 시각화시켜보았다. 방법1. (Iterator 사용하고,, 어려운 방법이니 추천하지 않는다.) ajaxDemo3.jsp HTML 삽입 미리보기할 수 없는 소스 : Goog.. 2023. 9. 14.
[Spring] thymleaf에서 제공하는 th:object 와 th:field th:object 에서 사용할 객체를 지정한다. form에서 th:obejct="${item}" 을 지정하고, th:field="*{itemName}"과 같이 넣어주게 되면 id, name, value 속성을 모두 자동으로 만들어준다. th:object = "${item}" 이렇게 받아주고, form 안에 있는 태그들에게 th:field를 주고, *{객체에 있는 변수명} 을 작성해주면, id와 name 값이 지정된다. 이렇게 th:field="*{itemName}"을 작성해주고 나니, 실행된 웹 브라우저에서 id와 name 값이 itemName으로 세팅됐다. th:field는 id, name, value 값을 지정해주는데, 현재 input의 value 값은 비어있으므로 "" 이 출력된다. input 태그.. 2023. 9. 13.

티스토리툴바