1. https://html5up.net/

 

HTML5 UP

Responsive HTML5 and CSS3 site templates designed by @ajlkn and released under the Creative Commons license.

html5up.net

템플릿이 많지는 않지만 퀄리티가 좋음!(무료)

 

2. https://themewagon.com/theme_tag/free/

 

1000+ Free Bootstrap HTML5 CSS3 Website Templates | High Quality Web Templates

Searching for high-quality free demo HTML5 website templates? Download responsive HTML5 CSS3 website templates & Bootstrap themes. Free for commercial use.

themewagon.com

생각보다 다양한 템플릿들 존재!(무료)

 

3. https://bootstrapthemes.co/items/free-bootstrap-templates/

 

Html Free Bootstrap Templates and Free Bootstrap Themes

Download High-Quality Html free bootstrap themes, free bootstrap templates for your website. All are free for commercial use.

bootstrapthemes.co

다운 받으려면 sns에 공유하기를 해야만 한다. 하지만 좋은 반응형 템플릿들이 있음(무료)

 

4. https://themeforest.net/

 

WordPress Themes & Website Templates from ThemeForest

Discover 1000s of premium WordPress themes & website templates, including multipurpose and responsive Bootstrap templates, email templates & HTML templates.

themeforest.net

자주 구매하는 곳(유료)

'Web > Front' 카테고리의 다른 글

[HTML] 템플릿 파일 적용 규칙  (0) 2021.07.30
[Javascript] window.location 객체  (0) 2021.07.30
[ERROR] 500에러 관련  (0) 2021.07.30
[ERROR] static파일 적용 관련  (0) 2021.07.30
[HTML, Javascript] jQuery  (0) 2021.07.28

500 ERROR 상황

- 서버 통신의 Timeout 시간 지연 오류
- 서버 트래픽 과부하
- 서버 언어의 구문 에러(스크립트 문법 오류)

 

❗ 나의 경우에 스크립트 쪽 오류가 계속 떴었고 이는 폴더 이름들과 연관 있었다.

templates라 코드에 선언했지만 폴더 이름은 template이어서 경로가 맞지 않았던 것이다.

폴더 이름 생성에 있어서 유의해야겠다!! ❗

'Web > Front' 카테고리의 다른 글

[Javascript] window.location 객체  (0) 2021.07.30
[HTML] HTML 템플릿 다운로드 사이트  (0) 2021.07.30
[ERROR] static파일 적용 관련  (0) 2021.07.30
[HTML, Javascript] jQuery  (0) 2021.07.28
[Thymeleaf] 기본 문법  (0) 2021.07.27

 "template을 자꾸 찾을 수 없다"는 오류가 떴다.

이는 handler 선언을 하지 않았기 때문에 뜬 오류이다! 경로를 설정해줘야 한다.

 

config 폴더를 생성해 안에 MvcConfig.java 파일을 생성하고 안에 핸들러를 선언해줘야 한다.

 

@Configuration
public class MvcConfig implements WebMvcConfigurer {

  @Override
  public void addResourceHandlers(ResourceHandlerRegistry registry) {
    registry.addResourceHandler("/static/**")
        .addResourceLocations("classpath:/static/")
        .setCachePeriod(3600000);
  }

}

위와 같이 WebMvcConfigurer를 implements 하고 addResourceHandlers 선언하고 경로를 찾아준다.

'Web > Front' 카테고리의 다른 글

[HTML] HTML 템플릿 다운로드 사이트  (0) 2021.07.30
[ERROR] 500에러 관련  (0) 2021.07.30
[HTML, Javascript] jQuery  (0) 2021.07.28
[Thymeleaf] 기본 문법  (0) 2021.07.27
[HTML] Thymeleaf  (0) 2021.07.27

jQuery

  • HTML 클라이언트 사이드 조작을 단순화하도록 설계된 크로스 플랫폼의 자바스크립트 라이브러리
  • MIT 라이선스를 가진 자유 오픈 소프트웨어
  • 사용 이유
    • 페이지 내부 요소에 접근하기 쉽다
    • 페이지의 보여지는 모습을 변경하기 쉽다
    • 상호작용 처리가 쉽고 애니메이션 사용 가능
    • AJAX의 사용이 쉽다

jQuery의 시작

 

$(document).ready(function(){
   // process.. 
});

제이쿼리가 자바스크립트보다 더 빨리 실행되는 이유는 document문서가 로드되었을 때(text문서만 로딩) 제이쿼리는 실행된다. 하지만 자바스크립트의 window.onload는 모든 내용을 로드 한 뒤 실행된다.

 

jQuery 선택자(selector)

 

$("p") element selector
$("#id") id selector
$(".class") class selector

[출처] https://www.w3schools.com/jquery/jquery_ref_selectors.asp

 

❗ 이밖에도 jQuery문법은 다양하다. https://www.w3schools.com/jquERy/default.asp 를 참고하도록 ❗

'Web > Front' 카테고리의 다른 글

[ERROR] 500에러 관련  (0) 2021.07.30
[ERROR] static파일 적용 관련  (0) 2021.07.30
[Thymeleaf] 기본 문법  (0) 2021.07.27
[HTML] Thymeleaf  (0) 2021.07.27
[HTML] 기본 태그  (0) 2021.07.27

Querydsl

  • SQL, JPQL을 코드로 작성할 수 있도록 도와주는 빌더 API
  • 오픈소스
  • 장점
    • 문자가 아닌 코드로 작성
    • 컴파일 시점에 문법 오류를 발견
    • 코드 자동완성(IDE 도움)
    • 동적 쿼리

사용법

1. pom.xml에 dependency 추가

    <!-- Querydsl -->
    <dependency>
      <groupId>com.querydsl</groupId>
      <artifactId>querydsl-jpa</artifactId>
    </dependency>
    <dependency>
      <groupId>com.querydsl</groupId>
      <artifactId>querydsl-apt</artifactId>
      <scope>provided</scope>
    </dependency>
 <plugins>
 	<plugin>
       <groupId>org.springframework.boot</groupId>
       <artifactId>spring-boot-maven-plugin</artifactId>
       <configuration>
         <excludes>
           <exclude>
             <groupId>org.projectlombok</groupId>
             <artifactId>lombok</artifactId>
           </exclude>
         </excludes>
       </configuration>
    </plugin>
    <plugin>
       <groupId>com.mysema.maven</groupId>
       <artifactId>apt-maven-plugin</artifactId>
       <version>1.1.3</version>
       <executions>
         <execution>
           <goals>
             <goal>process</goal>
           </goals>
           <configuration>
             <outputDirectory>target/generated-sources/java</outputDirectory>
             <processor>com.querydsl.apt.jpa.JPAAnnotationProcessor</processor>
           </configuration>
         </execution>
       </executions>
     </plugin>
</plugins>

 

2. maven lifecycle을 이용해 "clean → compile" 하면 target 폴더 안에 Query Type 생성됨

3. repository/custom 안에 CustomRepository 생성 (Custom____Repository)

4. repository/support 안에 custom을 구현하는 Impl.java 파일 생성 (____RepositoryImpl.java)

5. 기존의 Repository에 CustomRepository를 extends에 추가 (____Repository)

 

❗ 복잡한 쿼리문은 querydsl을 통해서 코드 작성하는 게 보기에도 구현하기에도 편할 것 같다. ❗

❗ querydsl관련 : https://querydsl.com/

 

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

[ERROR] Querydsl import  (0) 2021.08.02
[Util] ControllerNameInterceptor  (0) 2021.07.30
[배경] JPA  (0) 2021.07.27
[배경] Maven  (0) 2021.07.27
[배경] Template Engine  (0) 2021.07.27

Persistence(영속성)

  • 데이터를 생성한 프로그램이 종료되더라도 사라지지 않는 데이터의 특성
  • Object Persistence : 메모리 상의 데이터를 파일 시스템, 관계형 데이터베이스 혹은 객체 데이터베이스 등을 활용하여 영구적으로 저장하여 영속성 부여
  • JDBC, Spring JDBC, Persistence Framework(Hibernate, Mybatis 등)

ORM(Object Relational Mapping)

  • 객체와 관계형 데이터베이스의 데이터를 자동으로 매핑해주는 것
  • DB 데이터 ← 매핑 → Object 필드
  • Persistant API (JPA, Hibernate 등)

❗ 참고 : https://gmlwjd9405.github.io/2019/02/01/orm.html

JPA(Java Persistence API)

  • Hibernate : ORM 프레임워크, Open Source SW
  • JPA : 현재 자바 진영의 ORM 기술 표준으로, 인터페이스의 모음
    • JPA 인터페이스를 구현한 대표적인 오픈소스가 Hibernate

JPA의 동작과정

  • JPA는 애플리케이션과 JDBC 사이에서 동작

JPA 사용이유

  • SQL 중심적인 개발에서 객체 중심으로 개발
  • 생산성
  • 유지보수
  • 성능 최적화 기능

❗ 참고 : https://gmlwjd9405.github.io/2019/08/04/what-is-jpa.html

 

사용법

Dependency추가

<dependency> 
	<groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-data-jpa</artifactId> 
</dependency> 
<dependency> 
	<groupId>com.h2database</groupId> 
	<artifactId>h2</artifactId> 
</dependency> 
<dependency> 
	<groupId>org.springframework.boot</groupId> 
	<artifactId>spring-boot-starter-test</artifactId> 
	<scope>test</scope> 
</dependency> 
<dependency> 
	<groupId>org.projectlombok</groupId> 
	<artifactId>lombok</artifactId> 
	<optional>true</optional> 
</dependency>

 

Domain 생성 → Repository 생성 → Service 생성 → Controller 생성

 

properties 설정

<!--application.yml-->
jpa:
    database-platform: kr.co.userinsight.ams.dialect.CustomMariadbDialect
    hibernate:
      ddl-auto: update
      naming:
        physical-strategy: org.springframework.boot.orm.jpa.hibernate.SpringPhysicalNamingStrategy
        implicit-strategy: org.hibernate.boot.model.naming.ImplicitNamingStrategyComponentPathImpl
    open-in-view: true
<!--application-local.yml-->
  jpa:
    hibernate:
      ddl-auto: update
    properties:
      hibernate:

 

JpaRepository

(JpaRepository에서 엄청 많은 기능을 제공)

인터페이스를 상속 받아서 사용하면 된다.(extends)

public interface ItemRepository extends JpaRepository<Item, Long> {
    // 비어있음
}

 

 

공통 인터페이스 기능

  • JpaRepository 인터페이스 : 공통 CRUD 제공
  • <엔티티, 식별자>로 설정

 

자주 쓰는 정렬 기능을 위해 Sort 삽입 가능

public interface MemberRepository extends JpaRepository<Member, Long> {
    List<Member> findByName(String username, Sort sort);
}

 

추가로 페이징을 위한 기능도 존재

public interface MemberRepository extends JpaRepository<Member, Long> {
    Page<Member> findByName(String username, Pageable pageable);
}

 

@Query 어노테이션을 사용해서 직접 JPQL을 지정 가능

public interface MemberRepository extends JpaRepository<Member, Long> {
    
    @Query("select m from Member m where m.username = ?1")
    Member findByUsername(String username, Pageable pageable);
}

 

Web 페이징과 정렬 기능

  • /members?page=0&size=20&sort=name,desc
@RequestMapping(value = "/members", method = RequestMethod.GET)
String list(Pageable pageable, Model mobel) {}

 

 

❗ JPA를 적용하면 개발자는 인터페이스만 만들면 된다. 알아서 동적으로 객체를 생성해서 주입해줌 ❗

❗ JPA의 한계가 존재한다! 따라서 Querydsl도 연동해서 같이 사용한다.. 다음엔 Querydsl을 확인해야지 ❗

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

[Util] ControllerNameInterceptor  (0) 2021.07.30
[배경] Querydsl  (0) 2021.07.28
[배경] Maven  (0) 2021.07.27
[배경] Template Engine  (0) 2021.07.27
[배경] Spring Security  (0) 2021.07.27

+ Recent posts