본문 바로가기

전체 글388

HTML을 부트스트랩(Bootstrap) 적용시키는 방법과 사용 팁, 주의사항 사이트 검색시 한글로 치지말고 영어로 쳐서 들어가자. 이후 Docs로 들어가면된다. 위 사진과 같이 태그는 태그가 끝나기 전에, 태그는 태그가 끝나기 전에 적절하게 붙여넣어 주면 완성이다. Bootstrap 적용 X Bootstrap 적용 O 왼쪽 스크롤에 Components 에 있는 Buttons을 살펴보면 위와 같이 각 클래스 이름들이 있다. 적절하게 사용해주면 이쁜 버튼들이 완성될 것 같다. Bootstrap 이용시 주의 사항 혹은 로 들어와야 Bootstrap이 적용이 잘 된다. 위 html 페이지 소스 코드 HTML 삽입 미리보기할 수 없는 소스 div6 은 col-6 으로 인해 화면의 반을 차지하고, 그 외는 각 3칸 씩 총 토탈 12칸으로 화면이 꽉찬다. 이처럼 Bootstrap은 하나의 열.. 2023. 3. 17.
[Spring] CSS 및 JS 적용시키는 방법 fragment html을 제외한 모든 파일 img, js, css 등은 static 파일이 기준이 된다. 그리고 경로 설정 시 맨 앞에 ' / ' 슬러쉬를 붙여주어야 한다. CSS static 폴더에 css 폴더를 생성하여 test.css를 생성하였다. 이후 template에 만들어준 fragment.html에 경로를 설정해주었다. 외부에 있는 html이랑 css를 찾는 폴더의 기준은 static이다. 태그를 넣는 위치는 가 끝나는 부분에 넣어주자. static 폴더는 접근할 때 반드시 앞에 '/' 슬러시를 넣어줘야한다. JS js 파일은 html의 body 끝나는 부분에 추가하여 준다. src 부분에도 당연히 ' / ' 슬러시를 추가하여야 경로가 똑바로 적용된다. fragment layout.html의 body 태그.. 2023. 3. 17.
[HTML] 스프링(Spring)에서 파일 생성 시 형식 추가 세팅 파일 메뉴의 Window -> Preferences를 클릭한다. 검색창에 template를 치고, HTML Files를 찾아 Templates를 선택하면 위와 같은 창이 뜨는데, New 혹은 Edit을 클릭하여 창을 생성 또는 수정한 후 OK를 누른다. 생성 or 수정한 HTML 파일 만들어보기 위와 같은 방법으로 마지막에 Finish를 누르면 생성이 된다 ! 2023. 3. 17.
[Spring] 페이지 나누기 (Thymeleaf Fragment ) 기능 적용 일단 페이지 실행을 위해 세개만 프로젝트를 만들 때 위 세개만 체크해주고 생성했다. implementation 'nz.net.ultraq.thymeleaf:thymeleaf-layout-dialect' 위 코드를 build.gradle에 dependencies 위와 같이 build.gradle을 수정해주면 반드시 프로젝트 우클릭해서 Gradle -> Refresh Gradle Project를 클릭해주자. templates에 두개의 폴더를 만들어준다. content와 fragment를 만들어주었다. 그리고 왼쪽과 같이 content / board_list.html fragment / header.html과 user_layout.html 을 만들어준다. user_layout.html xmlns:layout=.. 2023. 3. 16.
[Spring] DI(의존성 주입) @Autowired, @Resource, @Controller, @Service DI(의존성 주입)을 하는 방법 1. 프로그램 실행 시 필요할 것 같은 객체는 모두 만들어준다. 2. 만들어진 객체 중 필요한 객체를 의존성 주입시킨다. 프로젝트 생성시 기본 패키지 안에 있는 모든 클래스는 스프링이 자동으로 객체를 생성하는 자격이 된다. 객체 생성 어노테이션을 사용하여 객체를 생성한다. ( @Component, @Controller, @Service, @Repository 등) @Component는 스프링 초창기 버전에 사용했던 어노테이션이다. 초창기에는 밑에 있는 어노테이션들이 없었다. 이 클래스가 왜 객체를 만들어야하는지 애매모호했다. 그래서 세분화 시켰다. 역할을 부여하기 위해 세분화 한 것이 @Controller, @Service, @Repository 이다. 스프링 mapper.. 2023. 3. 15.
[Spring] 의존성 주입(DI)과 제어의 역전(IOC) 의존성 주입(DI) 이란? 객체를 직접 생성하는게 아니라 외부에서 생성한 후 주입시켜주는 방식. 걍 결합도를 느슨하게 만드는 것이다. How?? 객체를 직접 만들어서 사용하는게 아니라 주입받아서 사용한다. Spring에서 new 연산자를 안쓰는 이유가 바로 이것이다. 인터페이스 왼쪽과 같이 Ch라는 인터페이스 하나를 만들었다. 이 Ch에서는 cooking() 이라는 메소드를 가진다. 클래스 두 클래스에는 각각 일반요리사(Chef)와 짱쌘요리사(SuperChef)가 있다. 그리고 두 요리사 모두 cooking( ) 이라는 메소드를 Ch에게 상속받아 해당 메소드를 사용할 수 있다 식당(Restaurant)에서 요리할 줄아는 Ch를 고용했다. 일반요리사(Chef)와 짱쌘요리사(Chef)는 둘다 요리를 할줄 안.. 2023. 3. 15.
[Spring] 타임리프 사용해서 폼(form)만들기 - th:object, th:field 타임리프 , form에서 th를 사용하는 법 th:object를 쓰면 name 안넣어줘도 된다. th:field를 넣어준 이유는 테스트 해보기 위함이다. 자동으로 id와 name, value 3개의 값들을 보여준다. 하지만 check값과 radio는 value 속성에 값을 따로 지정해줘야한다. 그렇다면 checkbox와 radio는 어떤 값을 가질까? id와 name에만 값이 들어가고 value는 " " 과 같이 빈 값이 나타나기 때문에 따로 value 값을 넣어줘야한다. 이런식으로 쓸 수 있는 이유는 memberVO로 데이터가 넘어왔기 때문에 사용할 수 있으므로, 컨트롤에서 메소드의 매개변수에 MemberVO 커맨드 객체를 생성해줘야한다. MemberVO는 위 사진의 왼쪽에 보다시피 MemberVO 클.. 2023. 3. 15.
[Spring] 어노테이션 @RequestParam 과 @ModelAttribute @RequestParam 과 @ModelAttribute은 매개 변수에 어노테이션을 사용할 수 있다. 밑의 test 예제로 공부해보았다. @RequestParam test1 페이지 -> test2 페이지 타임리프 th:href 을 이용하여 java 데이터를 name이라는 이름으로 test2 컨트롤러에 넘긴다. 넘어오는 데이터를 받는 상세 방법 @RequestParam의 name은 넘어오는 데이터의 이름이다. 즉, name이라는 이름으로 넘어온 이름을 data로 적용시킬 수 있다. 따라서 data = java를 담고있다. test2 페이지 -> test3 페이지 test3로 이동. 여기서는 그냥 컨트롤러 이동만 해주고, 데이터는 안넘겨 줬다. @RequestParam의 required는 데이터를 필수로 받.. 2023. 3. 15.
[Spring] 스프링에서 Mybatis Oracle 데이터베이스 연동하기 1. 프로젝트 생성 시 SQL 체크항목 추가 2. application.properties 설정 쿼리가 실행되면 콘솔에 상세하게 뜨기 위해 위 두개를 주석처리하고 조금 수정했다. #xml location은 mappers 패키지 안에 *.xml로 끝나는 모든 파일 적용하는 것으로 설정해주었다. 3. build.gradle 코드 한줄 복사 implementation 'org.bgee.log4jdbc-log4j2:log4jdbc-log4j2-jdbc4:1.16' //쿼리 로그 라이브러리 추가 쿼리 띄우려면 이 쿼리가 필요하다. 이후 해당 프로젝트 우클릭하여 Gradle -> Refresh Gradle을 해준다. 필요한 jar파일을 모두 가져와 읽어준다. 4. spring 로그소스 적용 해당 로그 소스 알집을 .. 2023. 3. 14.
[Spring] 스프링 form태그 이용해서 페이지 이동 컨트롤 안에 있는 총 3개의 Mapping과 템플릿 3개를 만들어 데이터를 주고 받도록 해보았다. VO 두개를 만들어 첫페이지에 있는 값을 두번째 페이지에 넘긴 후, 두번째 페이지에서 첫번째 값과 두번째 값을 담은 VO를 마지막 페이지에 넘긴다. 1. 컨트롤러를 만든다. src/main/java 폴더 밑에 controller 패키지를 만든 후 컨트롤러를 만든다. 이후 어노테이션(@)을 사용하여 Controller라는 것을 정의해주고, 경로를 앞에 하나 더추가하기 위해 @RequestMapping을 추가해준다. 2. Mapping 경로를 받아와 HTML 페이지로 이동시킨다. 앞에서 설정한 절대 경로 /board에 추가하여 /reg 라는 경로를 설정해주면, regMember.html이 열릴수 있도록 retu.. 2023. 3. 13.
[Spring] 스프링 프로젝트 생성 방법 및 데이터 전달 스프링에서 웹 개발을 하려면 프로젝트 생성을 이클립스와 또 다르게 만들어줘야한다. 우클릭 New -> Spring Starter Project를 선택한다. Frequently에서 위 4개는 필수이다. Spring Boot DevTools => 스프링을 수정하고 다시 Run안시키고 페이지를 F5누르면 바로바로 변화되는걸 볼 수있게 하는거다. 반드시 위와 같은 패키지에서 클래스 파일을 만들어주자. 프로젝트를 최초로 실행시킬 때에는 컨트롤 + F11이 아니라, 지정해서 해줘야한다. 위의 사진에서 @GetMapping 어노테이션 뒤에 경로를 지정해주었다. Spring은 메소드를 사용해서 컨트롤러 역할을 한다. 이것은 이클립스에서 사용했던 if문과 동일한 역할을 한다. 서블릿에서 사용했던 page가 return .. 2023. 3. 13.
[Spring] 스프링 설치 및 이클립스 개발 환경설정 -2 com.example.demo 패키지에서 새로운 클래스를 하나 만들어준다. 어노테이션 Controller를 만들고, 클래스 안에 어노테이션 GetMapping과 밑에 goMain() 메소드를 하나 만들어준다. 에러가 뜨면 Windows -> Preferences에서 검색창에 mark를 쳐서 Mark Occurrences를 들어온다. 이곳에서 맨 위에있는 체크박스를 해제한다. Spring Boot App을 Run 해주면 실행이된다. 혹은 com.example.demo 패키지에 DemoApplication.java를 Run 해주자. 위 태그를 아래에 있는 것으로 바꾸어준다. 태그에서 th: 자동완성 기능이 생기면 성공이다. Window -> Preferences .@qwertyuioplkjhgfdsazxcv.. 2023. 3. 13.

티스토리툴바