Spring Framework 는 엔터프라이즈 애플리케이션 개발을 위한 포괄적인 프로그래밍과 구성 모델을 제공하는 자바 기반의 프레임워크로, 어떤 종류의 배포 플랫폼에서도 적용이 가능합니다. 스프링은 애플리케이션 수준에서의 인프라 지원으로, 특정 배포 환경에 불필요하게 얽히지 않고, 애플리케이션 수준의 비즈니스 로직에 집중할 수 있도록 도움을 준다.

스프링 프레임워크의 핵심 기술

IOC(Inversion of Control) = 제어의 역전

• 객체의 생명 주기(생성, 초기화, 소멸, 호출 등)을 개발자가 결정하는 것이 아니라, 스프링 프레임워크가 객체의 생명 주기를 관리

DI(Dependency Injection) = 의존성 주입

• A객체와 B객체가 관계가 있는 경우, 스프링 컨테이너가 의존성을 주입하여, 개발자가 코드 상에서 객체의 생성과 관계에 대해 관여하지 않아도 되기 때문에, 객체의 의존도와 겹합도를 낮추고 유연성을 확보할 수 있다.

** AOP(Aspect Oriented Programming) = 관점 지향 프로그래밍**

• 핵심 로직과는 별도로 부가적인 기능(로깅, 트랜잭션, 예외처리, 보안 등)을 모듈화하여 관리할 수 있게 해주는 프로그래밍 기법.

스프링이 객체를 관리하는 방법

** 스프링 컨테이너**

스프링 컨테이너는 BeanFactory 와 ApplicationContext 두 종류의 인터페이스로 구현되어 있다.

• BeanFactory 스프링의 가장 기본적인 IoC 컨테이너로, 객체(Bean)의 라이프사이클(초기화, 소멸 등)과 의존성을 주입, 지연 로딩(Lazy Loading) 방식으로 동작하며, 임베디드 시스템이나 매우 간단한 테스트 환경에서 주로 사용된다.

• ApplicationContext BeanFactory를 확장한 인터페이스로, 더 많은 고급 기능(국제화, 이벤트 처리, AOP, 트랜잭션, 환경 설정 등)을 제공, 즉시 로딩(Eager Loading) 방식으로 동작하며, 대규모 엔터프라이즈 애플리케이션이나 복잡한 기능을 요구하는 경우 사용된다.

스프링 프레임워크로 객체 관리하기

스프링 어노테이션

• 스프링 프레임워크에서 어노테이션은 클래스, 메서드, 필드, 매개변수 등에 메타데이터를 제공하는 마킹 기능으로 어노테이션을 사용함으로써 코드에 부가적인 정보나 설정을 주입할 수 있으며, 코드 간결화, 가독성 향상, 유지보수성, 개발 생산성이 증가한다. 스프링에서 어노테이션은 @[어노테이션명] 으로 사용된다.

객체를 관리하는데에는 결합도에 따라 Java Bean, POJO(Plain Old Java Object), Spring Bean 으로 나눌 수 있지만 스프링 컨테이너가 관리하는 모든 객체는 Spring Bean으로 new 를 사용하여 생성된 것이 아니라, 스프링에 의해 생성되고 관리된다.

스프링 프레임워크의 의존성 관리

스프링 프레임워크를 사용하면 객체가 아닌 의존성과 와이어링에 집중할 수 있다. 개발자는 애플리케이션의 비즈니스 로직에 집중할 수 있고, 스프링 프레임워크는 객체의 생명 주기를 관리하므로, @Component, @Autowired 어노테이션을 사용해서 의존성을 표시하기만 하면 된다. 그러면 스프링 프레임워크는 우리를 위해 전체 시스템의 준비를 갖춘다.

스프링 프레임워크가 객체를 관리해주지만 스프링의 기본 객체 로딩 방식은 즉시 로딩이다. 스프링 컨테이너는 애플리케이션이 시작될 때 객체(Bean)를 생성하고 로딩 시점을 신경 쓸 필요가 없기 때문에, 코드를 단순하게 작성할 수 있지만, 애플리케이션 실행 시점에 모두 생성되기 때문에, 초기 성능이 저하될 수 있다. 따라서 특정 요청에서만 사용되는 객체는 지연 로딩을 사용하는 것이 최적화에 좋다.

지연 로딩(Lazy Loading)은 스프링 컨테이너가 객체(Bean)가 필요한 시점에 로딩하는 방식이다. 초기 성능을 향상시키고 리소스를 절약할 수 있는 장점이 있지만, 로딩 시점이 애플리케이션이 실행된 이후(Runtime)이므로, 예상치 못한 문제를 유발할 수 있고, 디버깅이 어려운 문제가 있으니, 특정 상황에 맞게 주의하여 사용하는 것이 좋다.

Spring Bean Scope

스프링에서 객체의 생성과 소멸의 범위를 개발자는 간단하게 어노테이션으로 관리할 수 있다. @Scope(”singletin”) 또는 생략 --- 스프링 컨테이너 당 하나의 인스턴스 @Scope(”prototype”) --- 요청할 때마다 새로운 인스턴스 @Scope(”request”) --- HTTP 요청 당 하나의 인스턴스 @Scope(”session”) --- HTTP 세션 당 하나의 인스턴스 @Scope(”application”) --- 애플리케이션 범위에서 하나의 인스턴스 @Scope(”websocket”) --- 웹 소켓 연결 당 하나의 인스턴스

스테레오타입 어노테이션

• 객체(Bean)를 정의하기 위해 @component 어노테이션을 사용하였지만 이를 더욱 명확하게하여 유지보수 및 가독성을 높일 수 있다. 물론 @component으로 모든 클래스에 정의내려 쓸 수 있지만 각 클래스들이 무슨 역할을 하는지 의도를 명확하게 파악하기 어려워진다.

스테레오타입 어노테이션 종류

(스테레오타입 어노테이션은 @Component 어노테이션을 기본으로 하여, 플리케이션 구조를 명확하게 하기 위해 파생된 어노테이션이다)

@Controller

해당 클래스가 웹 요청을 처리하는 컨트롤러임을 나타내며, MVC 패턴의 컨트롤러 역할을 수행하고, 이 어노테이션이 붙은 객체는 DispatcherServlet 이 핸들링 하는 객체가 되며, 뷰를 반환하거나, Restful API의 엔드포인트로 동작한다.

@Service

해당 클래스가 비즈니스 로직을 처리하는 클래스임을 나타냄 애플리케이션의 비즈니스 로직, 트랜잭션, Presentation 레이어와 Data Access 레이어의 중간다리 역할 등을 수행.

@Repository

해당 클래스가 데이터 접근 객체(Data Access Obejct)임을 나타냄. 데이터베이스, 파일 시스템, 3rd-party 등 데이터 저장소와 통신하는 역할을 수행.

@Configuration

해당 클래스가 스프링 설정 정보를 담고있는 객체임을 나타냅니다. @Bean 어노테이션으로 애플리케이션에 필요한 설정 객체를 등록할 수 있습니다(데이터베이스 연결 설정, 3rd-party 설정 등).

함수형 프로그래밍

함수형 프로그래밍은 자료 처리를 수학적 함수의 계산으로 취급하고, 상태와 가변 데이터를 멀리하는 프로그래밍 패터다임의 하나. 함수형 프로그래밍은 병렬 처리에 유리하여 2010년, 빅데이터와 분산 시스템이 발전하면서 많은 인기를 얻기 시작했다. 현재 많은 프로그래밍 언어들이 함수형을 지원하고 있으며, 자바는 8버전 이후부터 람다 표현식(Lambda Expression) 과 Stream API 가 도입되어 함수형 프로그래밍을 작성할 수 있게 되었되었다.

###

람다 표현식(Lambda Expression)

함수형 프로그래밍을 구성하기 위한 함수식을 말합니다. 메서드를 하나의 식으로 표현한 것으로, 익명 함수(Anonymous Function)입니다. 자바에서 람다 표현식은 화살표로 표현합니다.

(int a, int b) -> { 
    int result = a * b; 
    return result; 
}

명령형과 선언형 프로그래밍

• 명령형 프로그래밍

어떻게(How) 문제를 해결할지를 기술하는 방식입니다. 명령어가 순차적으로 실행되며, 조건문, 반복문 등의 실행 흐름을 명시적으로 정의합니다. 프로그램이 실행됨에 따라 변수를 변경 또는 데이터 상태가 변하는 방식으로 동작합니다.

int[] numbers = {1, 2, 3, 4, 5};
for (int i = 0; i < numbers.length; i++) {
    numbers[i] = numbers[i] * 2;
}

• 선언형 프로그래밍

무엇을(What) 해결할지를 기술하는 방식입니다. 결과를 정의하는 데 중점을 두며, 실행 흐름을 직접적으로 명시하지 않습니다.

int[] numbers = {1, 2, 3, 4, 5};
int[] doubledNumbers = Arrays.stream(numbers).map(n -> n * 2).toArray();
// 어떻게 map 함수가 내부적으로 동작하는지 신경쓰지 않고, 해당 배열의 요소를 2배로 만들겠다는 결과만 정의

스프링 부트 시작하기

• 스프링 부트는 대부분의 설정을 자동으로 처리하여 초기 설정의 복잡함을 줄이고, 의존성 관리를 간소화하여 버전 관리와 호환성 문제를 해결하고 배포를 위한 내장 웹 서버(Tomcat, Jetty, Undertow 등)도 가지고 있어, 외부 웹 서버 필요 없이 독립적으로 실행할 수 있게 되었다.

📁 src/main/java Java 소스 코드가 위치하는 디렉토리.

📁 src/main/resources 애플리케이션 리소스 파일들(설정 파일, 정적 파일, 뷰 템플릿)이 위치하는 디렉토리.

📁 static HTML, CSS, JS, 이미지 같은 정적 리소스 파일이 위치하는 디렉토리입니다. 이곳에 위치한 파일들은 /static 경로 없이 제공

📁 templates Thymeleaf, Freemarker, Mustache 와 같은 서버 사이드 템플릿 파일을 저장하는 디렉토리.

📁 src/test/java 테스트 코드가 위치하는 디렉토리 입니다. JUnit, Mockito 등을 활용하여 테스트 코드를 작성할 수 있다.

📄 application.properties / application.yml 애플리케이션 환경 설정 파일입니다. 데이터베이스, 포트, 로깅 등 다양한 설정을 이 곳에서 정의할 수 있다.

📄 pom.xml (Maven) / build.gradle (Gradle) Maven 프로젝트, Gradle 프로젝트에 따라 생성되는 프로젝트 빌드 설정 파일입니다. 의존성 관리와 빌드 설정을 정의하는 데 사용.

JDBC 이해하기

Java DataBase Connectivity 의 약자로, 자바에서 데이터베이스에 접속할 수 있도록 하는 표준화된 API를 말한다. JDBC는 JDK1.1 버전에 출시된 아주 오래된 기술이며, 요즘은 직접 사용하는 일은 거의 없고, JDBC를 기반으로 동작하는 기술들(Spring JDBC, Hibernate, Spring Data JPA, MyBatis 등)을 사용하고 있다.

MyBatis

MyBatis는 SQL을 직접 작성할 수 있도록 지원하는 SQL 기반의 프레임워크입니다. 기존 JDBC의 불편함을 해결하면서도, SQL의 강력한 제어를 유지할 수 있다.

JPA

JPA(Java Persistence API)는 자바의 표준 ORM(객체-관계 매핑) 프레임워크로, SQL을 직접 작성하지 않고 객체 중심적인 방식으로 데이터베이스 작업을 수행한다.

MVC 디자인 패턴과 Dispatcher Servlet

모든 흐름의 제어는 Front Controller 가 담당하고, 일부 로직은 컨트롤러가 처리하도록 위임(Delegation)하는 구조가 특징이며, Spring MVC의 아키텍처이다.

💡Dispatcher Servlet

Spring MVC 에서 핵심적인 역할을 하는 서블릿으로, 모든 웹 요청은 Dispatcher Servlet 을 통해 처리되고 라이언트 요청을 컨트롤러로 전달하고, 결과를 View 로 반환하는 일을 수행한다.

HTTP Status Codes

• 1xx: Informational 100 Continue → 임시 응답으로, 지금까지 상태가 괜찮으니 클라이언트가 계속해서 요청을 하거나, 요청을 완료한 경우 무시해도 되는 것을 알려줍니다. 101 Switching Protocal → 클라이언트 요청에 따라 서버에서 프로토콜을 변경할 것임을 알려줍니다.
• 2xx: Success 200 OK → 요청이 성공적으로 처리되었음을 알려줍니다. 201 Created → 요청이 성공했고, 새로운 리소스가 생성됐음을 알려줍니다. 202 Accepted → 요청을 수락했으나, 아직 처리가 완료되지 않음을 알려줍니다. 204 No Content →요청은 성공했으나 보내줄 수 있는 리소스가 없음을 알려줍니다. PUT 결과가 없는 경우 204 상태를 반환합니다.
• 3xx: Redirectional 300 Multiple Choices → 요청한 리소스에 하나 이상의 응답이 가능함을 알려줍니다. 301 Moved Permanently → 요청한 리소스가 다른 URI로 변경되었음을 알려줍니다. 302 Found → 요청한 리소스가 일시적으로 URI가 변경되었음을 알려줍니다. 303 See Other → 요청한 리소스는 다른 URI에서 확인할 수 있음을 알려줍니다. 304 Not Modified → 캐시 목적으로 사용되며, 응답이 수정되지 않았음을 알려줍니다.
• 4xx: Client Error 400 Bad Request → 잘못된 요청 형식임을 알려줍니다. 서버가 요구하는 리소스 형식에 맞지 않는 경우에 발생합니다. 401 Unauthorized → 인증이 필요하거나, 인증이 실패했음을 알려줍니다. 403 Forbidden → 리소스에 접근할 권한을 가지고 있지 않음을 알려줍니다. 404 Not Found → 요청한 리소스를 찾을 수 없음을 알려줍니다. 405 Method Not Allowed → 요청된 HTTP 메서드가 허용되지 않음을 알려줍니다. 409 Conflict → 클라이언트 요청이 서버의 현재 상태와 충돌(리소스 중복, 버전 충돌 등)이 발생했음을 알려줍니다.
• 5xx: Server Error 500 Internal Server Error → 서버에 오류가 발생했음을 알려줍니다. 501 Not Implemented → 요청한 기능이 서버에서 지원하지 않음을 알려줍니다. 502 Bad Gateway → 게이트웨이, 프록시 서버가 잘못된 응답을 수신했음을 알려줍니다. 503 Service Unavailable → 서버 과부화 또는 유지보수 중으로 현재 요청을 처리할 수 없음을 알려줍니다. 504 Gateway Timeout → 게이트웨이가 요청을 처리하는데 시간이 초과됐음을 알려줍니다.

--

스프링 RestAPI 개발하기

REST API란?

• REST API는 API의 한 종류로, REST(Representational State Transfer) 아키텍처 스타일을 따르는 웹 API 즉, HTTP 프로토콜을 기반으로 리소스를 정의하고 조작하는 방식

( HTTP : Hyper Text Transfer Protocal 의 약자로, 웹에서 클라이언트와 서버 간 데이터를 주고받기 위한 통신 규약)

RestAPI 를 설계할 때 유용한 어노테이션

@PathVariable, @RequestParam, @RequestBody

@PatiVariable

URL 경로에 있는 변수를 메서드 파라미터로 바인딩할 수 있습니다.

@RestController
public class UserController {
        // http://localhost:8080/users/james
    @GetMapping("/users/{id}")
    public ResponseEntity<String> getUserById(@PathVariable String id) {
        return ResponseEntity.ok("User ID: " + id);
    }
}

@RequestParam 쿼리 스트링 또는 폼 데이터에 있는 요청 파라미터를 메서드 파라미터로 바인딩할 수 있습니다.

@RestController
public class SearchController {

    // http://localhost:8080/search?keyword=foo
    @GetMapping("/search")
    public ResponseEntity<String> search(@RequestParam String keyword) { 
        return ResponseEntity.ok("Searching for: " + keyword);
    }
}

@RequestBody HTTP 본문(Body)에 있는 데이터를 메서드 파라미터로 매핑할 수 있습니다. POST, PUT, PATCH 요청의 데이터를 객체로 변환할 때 사용됩니다.

@RestController
public class UserController {

        // {
        //  "username": "john",
        //  "email": "john@example.com"
        // }
    @PostMapping("/users")
    public ResponseEntity<String> createUser(@RequestBody User user) {
        return ResponseEntity.ok("User created: " + user.getUsername());
    }
}

JsonIgnore 해당 어노테이션이 붙은 필드는 요청/응답 데이터에서 제외시킬 수 있다.

import com.fasterxml.jackson.annotation.JsonIgnore;
import lombok.Data;

import java.time.LocalDate;


@Data
public class UserDto {
    private String id;

        // 비밀번호는 응답 데이터에서 제외
    @JsonIgnore
    private String password;

    private String username;
    private int age;
    private LocalDate createdAt;
}

ResponseEntity

HTTP Response 를 표현하는데 사용하는 클래스로, 단순 객체를 return 하는 것 보다 Header, Body, HTTP Status Code 를 직접 제어할 수 있어 유용하다.

import com.example.lecture014.user.dto.UserDto;
import com.example.lecture014.user.service.UserService;
import lombok.RequiredArgsConstructor;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import java.util.List

@RestController
@RequiredArgsConstructor
@RequestMapping("/api/v1")
public class UserController {
    private final UserService userService;

    @GetMapping("/users")
    public ResponseEntity<List<UserDto>> getAllUsers() {
        return ResponseEntity.ok(userService.getAllUsers());
    }
}

RestAPI 예시 시나리오

💡Resource 가 같아도 HTTP Method 가 다르면 같은 API가 아니다.

데이터 유효성 검증하기

Rest API 의 POST, PUT, PATCH 요청에 포함된 데이터가 유효한 값인지 검증하는 로직이 없을 경우 spring-boot-starter-validation 을 사용하여 데이터 유효성 검증을 통해 올바른 요청을 했는지 확인할 수 있다.

Validation Annotations 간단정리

• @Valid 선언된 매개 변수/객체에 대한 검증을 자동으로 트리거한다.

• @Validated 선언된 매개 변수/객체에 대한 검증을 자동으로 트리거하는데, 검증 그룹을 지정할 수 있다.

• @NotNull 값이 null 이 아니여야 한다.

• @Null 값이 null 이여야 한다.

• @Min(value), @Max(value) 숫자의 최소/최대 값을 제한한다.

• @Size(min, max) 문자열, 배열, 컬렉션의 크기의 범위를 제한한다.

• @Pattern(regex) 정규식을 사용하여 문자열 패턴을 검증한다.

• @Email 값이 이메일 형식이여야 한다.

• @Positive, @Negative 값이 양수/음수여야 한다.

• @Digits(integer, fraction) 소수점 자릿수나 정수부 자릴수를 제한한다.

• @Past, @Future 값이 현재 날짜보다 이전/미래여야 한다.

• @AssertTrue, @AssertFalse 값이 true/false 여야 한다.

import jakarta.validation.constraints.NotNull;
import jakarta.validation.constraints.Positive;
import jakarta.validation.constraints.Size;
import lombok.Data;


@Data
public class CreateUserDto {
    @NotNull
    @Size(max = 20)
    private String id;

    @NotNull
    @Size(max = 128)
    private String password;

    @NotNull
    @Size(max = 50)
    private String username;

    @NotNull
    @Positive
    private int age;
}

Mybatis ResultMap

Mybatis 의 기본적인 자동 매핑 기능으로 처리가 어려울 때, 복잡한 결과를 매핑할 때, 다양한 매핑 요구 사항을 처리할 때, ResultMap 을 사용하여 유연하게 처리할 수 있다. 객체 필드와 데이터베이스 컬럼 이름이 다른 경우 매핑. Mybatis 는 기본적으로 SQL 결과의 컬럼과 동일한 객체 필드에 자동으로 매핑해준다. 그러나 컬럼 이름이 객체 필드와 다를 때 자동 매핑이 불가하므로, ResultMap 을 사용하면 좋다.

@Data
class UserDto {
    private String userId;
    private String userName;
    private int userAge;
}
//객체 필드와 DB 컬럼이 다른 경우

<resultMap id="userResultMap" type="com.example.dto.UserDto">
    <id property="userId" column="id"/>
    <result property="userName" column="username"/>
    <result property="userAge" column="age"/>
</resultMap>

<select id="selectUser" resultMap="userResultMap">
    SELECT id, username, age FROM users WHERE id = #{id}
</select>

💡객체 필드와 DB 컬럼이 다른 경우, SQL 을 작성할 때, 컬럼에 Alias 를 지정해서 조회한다면, ResultMap 을 사용하지 않아도 구현이 가능합니다.

Pagination 이해하기

만약 A 라는 사용자의 게시물이 수천, 수만 건까지 쌓여있을 경우, API가 모든 데이터를 응답한다면 성능 이슈가 발생할 수 있다. 이를 Pagination 처리를 통해 데이터를 잘라서 보낼 수 있도록 한다.

Pagination 로직

페이징 처리의 핵심은 데이터를 어느 위치에서부터 가져올지를 구하는 것

offset = (page - 1) * size

예시) page=2, size=10 인 경우, offset 은 (2 - 1) * 10 = 10 이 되며, DB에서는 11번째 데이터부터 가져오게 됩니다.

Pagination 쿼리 예시(오라클 기준)

SELECT 
    T.*
FROM (
    SELECT
        ROW_NUMBER() OVER (ORDER BY order_column ASC) ROW_NUM,
        *
    FROM table_name
) T
WHERE ROW_NUM >= #{offset} AND ROW_NUM <= #{offset} + #{size}

방식1: 전통적인 방법

SELECT *
FROM table_name
ORDER BY order_column
OFFSET #{offset} ROWS FETCH NEXT #{size} ROWS ONLY;

방식2: Oracle 12c 버전 이상

💡OFFSET FETCH 를 사용하면 쿼리가 간결하지만, 레코드를 많이 건너뛸수록(페이지가 커질수록) 성능이 저하될 수 있다.

AOP(Aspect-Oriented Programming)

관점 지향 프로그래밍(Aspect-Oriented Programming)이란, 핵심 기능과는 별도로 분리된 관심사를 모듈화하여 코드 중복을 줄이고, 유지보수성을 높이는 프로그래밍 패러다임 로깅, 보안, 트랜잭션 등 비즈니스 로직에서 부가적인 기능을 분리하는데 중점을 둔다.

대표적인 자바기반 AOP 프레임워크

• Spring AOP

스프링 프레임워크에서 제공하는 경량 AOP 프레임워크로, 가장 인기가 많다. 프록시(Proxy) 패턴으로 AOP를 구현하며, 스프링 빈(Bean)을 대상으로만 AOP 기능을 제공하므로, 완전한 AOP 솔루션이라고 말할 수 없다.

• Aspect J

  스프링 AOP보다 더 강력하고 완전한 AOP 프레임워크지만, 거의 사용되지 않는다. 자바 언어 수준에서 직접 AOP를 구현할 수 있고, 모든 자바 객체에 AOP를 적용할 수 있다. AOP를 구현하기에 강력한 프레임워크지만, 설정이 복잡하고 비교적 무거운 프레임워크다.

트랜잭션(Transaction)

트랜잭션(Transaction)이란, 데이터베이스나 시스템에서 하나의 작업 단위를 의미하는데, 그 작업이 완전히 성공하거나, 완전히 실패하여 원래 상태로 돌아가야 하는 특성을 가진다 데이터의 일관성을 보장하기 위해 트랜잭션은 반드시 필요하며, 여러 작업을 하나로 묶어서 처리할 때 사용.

주요 속성(ACID)

• 원자성(Atomicity) 트랜잭션 내 모든 작업은 전부 성공하거나 실패해야 합니다(일부만 실행될 수 없음).
• 일관성(Consistency) 트랜잭션이 실행되기 전/후에 시스템은 항상 일관된 상태를 유지해야 합니다(트랜잭션 중간에 데이터가 불일치하면 안됨).
• 고립성(Isolation) 동시에 여러 트랜잭션이 실행되어도 각 트랜잭션은 독립적으로 실행되어야 합니다(트랜잭션의 중간 결과를 다른 트랙잭션이 참조하면 안됨).
• 지속성(Durability) 트랜잭션이 성공했다면, 그 결과는 시스템에 반영되어 오류나 장애가 발생해도 유지되어야 합니다.

처리 흐름

• BEGIN 트랜잭션 시작을 알립니다.
• COMMIT 트랜잭션이 성공했을 때, 변경된 사항을 확정하고 반영합니다.
• ROLLBACK 트랜잭션이 실패했을 때, 변경된 사항을 이전 상태로 되돌립니다.

@Transactional

스프링 프레임워크에서 제공하는 어노테이션으로, 메서드 또는 클래스 수준에서 트랜잭션 처리를 설정할 수 있도록 해준다. 어노테이션된 메서드 또는 클래스는 하나의 트랙잭션으로 처리되며, ACID 속성을 보장할 수 있다.

만약 @Transactional을 사용하지 않는다면?

import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.SQLException;

public class BankService {

    public void transferMoney(long fromAccountId, long toAccountId, double amount) {
        Connection connection = null;

        try {
            // 1. 데이터베이스 연결
            connection = DriverManager.getConnection("jdbc:mysql://localhost:3306/mydb", "user", "password");

            // 2. 트랜잭션 시작
            connection.setAutoCommit(false);

            // 3. A 계좌에서 출금
            try (PreparedStatement withdrawStmt = connection.prepareStatement(
                    "UPDATE account SET balance = balance - ? WHERE id = ?")) {
                withdrawStmt.setDouble(1, amount);
                withdrawStmt.setLong(2, fromAccountId);
                withdrawStmt.executeUpdate();
            }

            // 4. B 계좌에 입금
            try (PreparedStatement depositStmt = connection.prepareStatement(
                    "UPDATE account SET balance = balance + ? WHERE id = ?")) {
                depositStmt.setDouble(1, amount);
                depositStmt.setLong(2, toAccountId);
                depositStmt.executeUpdate();
            }

            // 5. 트랜잭션 커밋
            connection.commit();
        } catch (SQLException e) {
            // 6. 오류 발생 시 롤백
            if (connection != null) {
                try {
                    connection.rollback();
                } catch (SQLException rollbackEx) {
                    rollbackEx.printStackTrace();
                }
            }
            e.printStackTrace();
        } finally {
            // 7. 연결 닫기
            if (connection != null) {
                try {
                    connection.close();
                } catch (SQLException closeEx) {
                    closeEx.printStackTrace();
                }
            }
        }
    }
}

그렇다면 @Transactional을 사용하기 위해 @Transactional의 주요 속성을 알아보자.

• propagation 현재 트랜잭션이 이미 존재하는지 여부에 따라 새로운 트랜잭션을 생성할지, 아니면 참여할지 결정한다.

• Isolation 트랜잭션 격리 수준을 설정하며, 동시성 문제를 어떻게 처리할지 결정한다.

파일 업로드/다운로드 기능 구현하기

https://henrykim90.notion.site/018-12620a7966e780ecb7b0d1d2df180663

Spring Security

스프링 기반 웹 애플리케이션, REST API 개발 시 인증(Authentication)과 권한 부여(Authorization) 기능을 제공하는 보안 프레임워크로Spring Security 는 URL 및 메서드 단위로 접근을 제어할 수 있으며, 다양한 인증 및 권한 부여 방식(OAuth2, LDAP, JWT 등)을 지원하고, 요청이 애플리케이션 리소스에 접근하기 전에 여러 보안 필터를 통과하도록 할 수 있다.

주요 보안 원칙

1. 아무것도 신뢰하지 말고, 들어오는 모든 요청을 검증해야 한다.
2. 시스템 설계를 시작할 때부터 보안을 염두하여 설계하고, 사용자나 시스템이 필요한 최소한의 권한만을 부여받도록 해야한다.
3. 모든 사람이 통과하는 문은 하나여야 합니다. Spring Security Filter Chain 이 문(Door) 역할을 수행할 수 있다.
4. 심층적인 방어구조를 설계해야 합니다. 단일 보안 계층에 의존하지 않고, 공격자가 시스템에 침투하는 것을 어렵게 만들어야 한다(전송 레이어, 네트워크 레이어, 운영체제 레벨 등 심층적으로 보안을 구현).
5. 보안 아키텍쳐를 가능한 간단하게 설계/유지하는 것이 좋습니다. 시스템이 단순할수록 설계자가 의도한 대로 공격자가 행동할 가능성이 높아지고, 반대로 복잡한 시스템은 공격 표면이 넓어져 취약점이 많아질 수 있다.
6. 개방형 보안 설계를 구축하고, 개방형 보안 표준(OAuth, JWT, TLS 등)을 사용하세요. 표준화된 프로토콜 및 인증 방식이 아닌, 독자적인 보안 방식은 보안성, 호환성, 개발 속도 저하 등 다양한 문제가 발생할 수 있다.

forEach includes indexOf findIndex find

forEach

const numbers = [1, 2, 3, 4, 5];
numbers.forEach((v, i) => {
    console.log(`Index: ${i}, Value: ${v}`);
});

Index: 0, Value: 1
Index: 1, Value: 2
Index: 2, Value: 3
Index: 3, Value: 4
Index: 4, Value: 5

includes

const fruits = ['apple', 'banana', 'orange'];
console.log(fruits.includes('banana'));  // true
console.log(fruits.includes('grape'));   // false
// 배열에 특정 값이 포함되어 있는지 여부를 확인하는 메소드, boolean 값을 반환

indexOf

const colors = ['red', 'green', 'blue'];
console.log(colors.indexOf('green'));  // 1
console.log(colors.indexOf('yellow')); // -1

// 메소드는 배열에서 특정 값이 처음 등장하는 인덱스를 반환, 값이 배열에 없으면 -1을 반환.

findIndex

const numbers = [5, 12, 8, 130, 44];
const index = numbers.findIndex((num) => num > 10);
console.log(index);  // 1 (12가 첫 번째로 10보다 큼)


// 배열에서 주어진 테스트 함수를 만족하는 첫 번째 요소의 인덱스를 반환.
// 조건을 만족하는 요소가 없으면 -1을 반환.

find

const users = [
    { name: 'Alice', age: 25 },
    { name: 'Bob', age: 30 },
    { name: 'Charlie', age: 35 }
];

const user = users.find((user) => user.age > 30);
console.log(user);  // { name: 'Charlie', age: 35 }



//  배열에서 주어진 조건을 만족하는 첫 번째 요소를 반환.
// 조건을 만족하는 요소가 없으면 undefined를 반환.

배열순회

1.1 for...of 반복문 (from.ES6)

for (let item of arr) {
  //arr 배열을 item으로 반환
  console.log(item);
}

객체순회

2.1 Object.keys()

let person = {
  name: "이정환",
  age: 27,
  hobby: "테니스",
};

let keys = Object.keys(person);
//person의 key를 추출하여 배열로 반환


for (let key of keys) {
  const value = person[key];
//반환된 key를 이용하여 person객체의 값에 접근

  console.log(key, value);
}

2.2 Object.values()

let values = Object.values(person);
//person 객체의 value를 추출하여 배열로 반환

for (let value of values) {
  console.log(value);
}

2.3 for...in 반복문

• 객체의 모든 열거 가능한 속성 키를 순회, 이를 통해 키와 값 모두에 접근할 수 있다.

for (let key in person) {
  const value = person[key];
  console.log(key, value);
}

for...in 과 Object.keys() 는 둘 다 속성을 기준으로 순회하지만 Object.keys()는 배열을 반환하고 반환된 배열을 통해 다시 객체의 값에 접근하는 반복문이 한 번 더 사용되지만 for...in의 경우 한 번에 키와 값을 모두 순회 가능하다.

정리

• Object.keys()는 키 배열을 반환하고, 이 배열을 다룰 수 있는 추가적인 유연성을 제공.
• for...in은 배열을 반환하지 않고 객체의 키를 직접 순회하며, 간단한 반복 작업에 적합.

• 구조 분해 할당(Destructuring Assignment)은 배열과 객체에서 값을 추출하여 변수에 쉽게 할당할 수 있는 편리한 문법

1. 배열의 구조 분해 할당

let arr = [1, 2, 3];

let [one, two, three, four = 4] = arr;
// four = 4 는 값이 할당되지 않을 경우 초기값을 4로 할당하겠다는 뜻

console.log(one);   // 출력: 1
console.log(two);   // 출력: 2
console.log(three); // 출력: 3
console.log(four);  // 출력: 4 (기본값)

2. 객체의 구조 분해 할당

let person = {
  name: "이정환",
  age: 27,
  hobby: "테니스",
};

let { age: myAge, hobby, name, extra = "hello" } = person;

console.log(myAge); // 출력: 27
console.log(hobby); // 출력: 테니스
console.log(name);  // 출력: 이정환
console.log(extra); // 출력: hello (기본값)

3. 함수 매개변수에서 객체 구조 분해 할당 사용

const func = ({ name, age, hobby, extra }) => {
  console.log(name, age, hobby, extra);
};

let person = {
  name: "이정환",
  age: 27,
  hobby: "테니스",
};

func(person);
// 출력: 이정환 27 테니스 undefined

함수 매개변수에 구조 분해 할당을 해놓은 채 함수에 객체를 매개변수로 넣어주면 구조 분해를 통해 함수 내부 실행문에서 사용하여 log를 찍는 것을 확인할 수 있음 이때, extra는 존재하지 않기 때문에 falsy한 값인 undefined 가 출력됨.

이를 활용하여

배열 요소 스왑

let a = 1, b = 2;
[a, b] = [b, a];

console.log(a); // 출력: 2
console.log(b); // 출력: 1

기본값 설정

let options = { timeout: 100 };
let { timeout, retries = 3 } = options;

console.log(timeout); // 출력: 100
console.log(retries); // 출력: 3 (기본값)

함수의 리턴값 처리

function getUser() {
  return ["이정환", 27];
}

let [name, age] = getUser();
console.log(name); // 출력: 이정환
console.log(age);  // 출력: 27

다양한 상황에서 유용하게 활용될 수 있다.

Falsy한 값이란?

Falsy 값이란 Boolean 문맥에서 false로 평가되는 값들을 말한다. JavaScript에는** 총 7가지의 Falsy 값**이 있으며, 이 값들은 명시적으로 false로 변환되지 않더라도 논리 평가 시 거짓으로 간주된다.

1. undefined

undefined는 JavaScript에서 선언된 변수에 값이 할당되지 않은 상태를 나타낸다.

2. null

null은 의도적으로 비어 있는 값(값이 없음을 나타내는 값)으로 설정된 상태.

3. 0

숫자 0은 Falsy로 평가.

4. -0

-0 또한 0과 동일하게 Falsy로 평가됩니다. 0과 -0은 JavaScript에서 같은 값으로 간주.

5. NaN

NaN(Not-a-Number)은 숫자가 아닌 값 또는 계산이 실패했을 때 생성되며, Falsy로 평가됨.

6. 빈 문자열 ""

길이가 0인 빈 문자열은 Falsy입니다. 여기에는 큰따옴표("")와 작은따옴표('') 모두 포함.

7. (BigInt) 0n

BigInt 타입의 0n은 숫자 0처럼 Falsy로 평가됨.

Falsy가 아닌 Truthy 값은?

Falsy 한 7개의 값을 제외한 모든 값은 Truthy한 값이며 이를 활용하여

let username = "";
let defaultName = username || "Guest";
console.log(defaultName); // 출력: Guest

username이 Falsy 값("")이므로 defaultName에 "Guest"가 할당되도록 응용할 수 있다.

ISO 포맷팅을 사용하면 ISO 8601 형식으로 가져온 뒤 필요한 오늘 날자를 가져오기위에 split() 메서드를 사용하여 짤라 사용한다.

오늘 날짜 구하기

//오늘 날짜 구하기
const date = new Date();
const today = date.toISOString().split("T")[0];

console.log(today);  // 예: 2024-12-27

오늘 시간 구하기

// 오늘 시간 구하기
const time = date.toISOString().split("T")[1];

console.log(time);  // 예: 06:00:05.044629

오늘 시간 소수점버리기

// 오늘 시간 구하기 (소수점 이하 제거)
const time = date.toISOString().split("T")[1].split(".")[0];

console.log(time);  // 예: 06:00:05

검색 창이 하나 뜨는데 "javascript.json" 검색 들어가보면 아래와 같은 코드들이 주석처리되어있다. 사용법이 안내되어있고 Example : 아래부분부터 복사해서 입 맛에 맞게 셋팅한다.

     "Print to console": {
         "prefix": "cl",
         "body": [
             "console.log();"
         ],
         "description": "Log output to console"
     },

"prefix": "cl" 단축어 셋팅 (개인취향) "body": [ "console.log();" ] 단축어가 실행됐을 때 생성될 내용

cl로 셋팅하여 🥳 cl 이 정상적으로 셋팅 완료 🥳

간단한 form으로 유효성검사 진행하기.

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- 외부스타일 연결방식 -->
    <link rel="stylesheet" href="/자바스크립트설명/폼/폼문제.css" />
    <style>
      .flex {
        display: flex;
      }
      .justify-between {
        justify-content: space-between;
      }
      .confirm-btn {
        cursor: pointer;
        height: 2.5rem;
      }
      .color-orangered {
        color: orangered;
      }
      .hidden {
        display: none;
      }
    </style>
  </head>
  <body>
    <div class="demo-page">
      <main class="demo-page-content">
        <section>
          <form name="signForm">
            <div class="href-target" id="input-types"></div>
            <h1>회원가입</h1>
            <p>회원가입을 위한 정보를 입력해주세요</p>

            <div class="nice-form-group">
              <!-- label태그의 for와 input태그의 id값이랑 동일하게 설정하여 연결(아이디글씨 클릭해도 input이 선택되도록) -->
              <!--  id="userId" name="userId"  id 값와 name 값은 웬만해서 동일하게 설정한다. -->
              <label for="userId">아이디</label>
              <input type="text" id="userId" name="userId" placeholder="Your Id" />
            </div>
            <p id="w-userId" class="color-orangered hidden">아이디를 입력하세요.</p>

            <div class="nice-form-group">
              <label for="userPw">비밀번호</label>
              <input type="password" id="userPw" name="userPw" placeholder="Your Pw" />
            </div>
            <p id="w-userPw" class="color-orangered hidden">비밀번호를 입력하세요/</p>
            <div class="nice-form-group">
              <label for="userConfirm">비밀번호 확인</label>
              <input type="password" id="userConfirm" name="userConfirm" placeholder="Your Pw Confirm" style="width: 80%" />
              <div class="to-reset confirm-btn" onclick="goUserPwConfirm()">확인</div>
            </div>
            <p id="w-userPwConfirm" class="color-orangered hidden">확인할 비밀번호를 입력하세요.</p>

            <div class="nice-form-group">
              <label for="userPhone">전화번호</label>
              <input type="tel" id="userPhone" name="userPhone" placeholder="Your phone" />
            </div>

            <div class="nice-form-group">
              <label for="userName">이름</label>
              <input type="text" id="userName" name="userName" placeholder="Your name" />
            </div>
            <p id="w-userName" class="color-orangered hidden">이름을 입력하세요.</p>

            <div class="nice-form-group">
              <label for="userBirth">생년월일8자리</label>
              <input type="text" id="userBirth" name="userBirth" placeholder="Your birth" />
            </div>
            <p id="w-userBirth" class="color-orangered hidden"></p>

            <div class="nice-form-group">
              <label for="userRegion">사는 지역</label>
              <select id="userRegion" name="userRegion">
                <option value="">- 지역을 선택하세요 -</option>
                <option value="R001">서울</option>
                <option value="R002">경기</option>
                <option value="R003">대전</option>
                <option value="R004">부산</option>
              </select>
            </div>
            <p id="w-userRegion" class="color-orangered hidden">지역을 선택하세요.</p>

            <div class="nice-form-group">
              <label for="userPhoto">프로필 사진 등록하기</label>
              <input id="userPhoto" name="userPhoto" type="file" />
            </div>

            <fieldset class="nice-form-group">
              <legend>성별</legend>
              <!-- radio타입에서 name 을 동일하게 설정하여 둘 중 하나만 선택될 수 있게 설정 -->
              <div class="nice-form-group">
                <input type="radio" id="male" name="userGender" checked="checked" value="G001" />
                <label for="male">남자</label>
              </div>

              <div class="nice-form-group">
                <input type="radio" id="female" name="userGender" value="G002" />
                <label for="female">여자</label>
              </div>
            </fieldset>

            <fieldset class="nice-form-group">
              <legend>관심분야</legend>
              <div class="nice-form-group">
                <input type="checkbox" id="css" name="userField" value="F001" />
                <label for="css">CSS</label>
              </div>

              <div class="nice-form-group">
                <input type="checkbox" id="html" name="userField" value="F002" />
                <label for="html">HTML</label>
              </div>

              <div class="nice-form-group">
                <input type="checkbox" id="js" name="userField" value="F003" />
                <label for="js">Javascript</label>
              </div>

              <div class="nice-form-group">
                <input type="checkbox" id="java" name="userField" value="F004" />
                <label for="java">Java</label>
              </div>
            </fieldset>

            <details>
              <summary>
                <div class="toggle-code" onclick="goSignUp()">회원가입요청</div>
              </summary>
            </details>
          </form>
        </section>
      </main>
    </div>

    <script>
      /* 입력요소 */
      const userIdEl = document.getElementById("userId");
      const userPwEl = document.getElementById("userPw");
      const userPwConfirmEl = document.getElementById("userConfirm");
      const userPhoneEl = document.getElementById("userPhone");
      const userNameEl = document.getElementById("userName");

      const userBirthEl = document.getElementById("userBirth");
      //지역값 출력 수정필요(지역코드로 나옴)
      const userRegionEl = document.getElementById("userRegion");
      console.log(userRegionEl);
      const userPhotoEl = document.getElementById("userPhoto");

      /*경고문구요소*/
      const wUserPwEl = document.getElementById("w-userPw");
      const wUserPwConfirmEl = document.getElementById("w-userPwConfirm");
      const wUserIdEl = document.getElementById("w-userId");
      const wUserNameEl = document.getElementById("w-userName");
      const wUserRegionEl = document.getElementById("w-userRegion");
      const wUserBirthEl = document.getElementById("w-userBirth");

      /* 비밀번호 확인 function */
      let isConfirm = false;
      const goUserPwConfirm = () => {
        console.log(userPwEl.value);
        console.log(userPwConfirmEl.value);

        if (!userPwEl.value) {
          wUserPwEl.classList.remove("hidden");
          return;
        } else {
          wUserPwEl.classList.add("hidden");
        }

        if (!userPwConfirmEl.value) {
          wUserPwConfirmEl.classList.remove("hidden");
          return;
        } else {
          wUserPwConfirmEl.classList.add("hidden");
        }

        //2. 비밀번호 = 비밀번호 확인 일치여부
        if (userPwEl.value == userPwConfirmEl.value) {
          alert("확인 완료되었습니다.");
          isConfirm = true;
        } else {
          alert("비밀번호가 일치하지 않습니다.");
          isConfirm = false;
        }
      };

      /* 유효성검사 function */

      const validationCheck = () => {
        // Id유효성검사
        if (!userIdEl.value) {
          wUserIdEl.classList.remove("hidden");
          return false;
        } else {
          wUserIdEl.classList.add("hidden");
        }
        // Name유효성검사
        if (!userNameEl.value) {
          wUserNameEl.classList.remove("hidden");
          return false;
        } else {
          wUserNameEl.classList.add("hidden");
        }

        // 생년월일 유효성검사

        if (userBirthEl.value.length != 8) {
          wUserBirthEl.innerText = "생년월일은 8자리입니다.";
          wUserBirthEl.classList.remove("hidden");
          userBirthEl.value = userBirthEl.value.replace(/[^A-Z0-9+_.]/g, "");
          return false;
        } else {
          wUserBirthEl.classList.add("hidden");
        }
        if (isNaN(Number(userBirthEl.value))) {
          wUserBirthEl.innerText = "생년월일은 숫자만 입력하세요.";
          wUserBirthEl.classList.remove("hidden");
          userBirthEl.value = userBirthEl.value.replace(/[^A-Z0-9+_.]/g, "");
          return false;
        } else {
          wUserBirthEl.classList.add("hidden");
        }

        // Region유효성검사
        if (!userRegionEl.value) {
          wUserRegionEl.classList.remove("hidden");
          return false;
        } else {
          wUserRegionEl.classList.add("hidden");
        }

        if (!isConfirm) {
          alert(`비밀번호 확인을 먼저 진행해주세요.`);
          return false;
        }
        return true;
      };

      const goSignUp = () => {
        //유효성검사
        const res = validationCheck();

        console.log(res);

        if (res) {
          //성별, 분야 오류
          const userGenderEl = document.querySelector("[name='userGender']:checked");

          const userFieldEl = document.querySelectorAll("[name='userField']:checked");
          const list = Array.from(userFieldEl, (item) => item.value);

          //입력요소
          console.log(userPhotoEl.files);
          //옵셔널체이닝 ?. = ?앞의 내용들이 undifined라면 undefined로 변환해준다.
          // 없다면 오류가 발생하지만 옵셔널체이닝으로 undefined 라는 데이터 타입으로 리턴한다.
          const photoName = userPhotoEl.files[0]?.name || "파일없음";

          const resultObj = {
            id: userIdEl.value,
            pw: userPwEl.value,
            phone: userPhoneEl.value,
            name: userNameEl.value,
            birth: userBirthEl.value,
            region: userRegionEl.value,
            profile: photoName,
            gender: userGenderEl.value,
            field: list.join(),
          };

          console.log(resultObj);
        }
      };
    </script>
  </body>
</html>

CSS

@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap");
a,
abbr,
acronym,
address,
applet,
article,
aside,
audio,
b,
big,
blockquote,
body,
canvas,
caption,
center,
cite,
code,
dd,
del,
details,
dfn,
div,
dl,
dt,
em,
embed,
fieldset,
figcaption,
figure,
footer,
form,
h1,
h2,
h3,
h4,
h5,
h6,
header,
hgroup,
html,
i,
iframe,
img,
ins,
kbd,
label,
legend,
li,
mark,
menu,
nav,
object,
ol,
output,
p,
pre,
q,
ruby,
s,
samp,
section,
small,
span,
strike,
strong,
sub,
summary,
sup,
table,
tbody,
td,
tfoot,
th,
thead,
time,
tr,
tt,
u,
ul,
var,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: initial;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}
body {
  line-height: 1;
}
ol,
ul {
  list-style: none;
}
blockquote,
q {
  quotes: none;
}
blockquote:after,
blockquote:before,
q:after,
q:before {
  content: "";
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
.nice-form-group {
  --nf-input-size: 1rem;
  --nf-input-font-size: calc(var(--nf-input-size) * 0.875);
  --nf-small-font-size: calc(var(--nf-input-size) * 0.875);
  --nf-input-font-family: inherit;
  --nf-label-font-family: inherit;
  --nf-input-color: #20242f;
  --nf-input-border-radius: 0.25rem;
  --nf-input-placeholder-color: #929292;
  --nf-input-border-color: #c0c4c9;
  --nf-input-border-width: 1px;
  --nf-input-border-style: solid;
  --nf-input-border-bottom-width: 2px;
  --nf-input-focus-border-color: #3b4ce2;
  --nf-input-background-color: #f9fafb;
  --nf-invalid-input-border-color: var(--nf-input-border-color);
  --nf-invalid-input-background-color: var(--nf-input-background-color);
  --nf-invalid-input-color: var(--nf-input-color);
  --nf-valid-input-border-color: var(--nf-input-border-color);
  --nf-valid-input-background-color: var(--nf-input-background-color);
  --nf-valid-input-color: inherit;
  --nf-invalid-input-border-bottom-color: red;
  --nf-valid-input-border-bottom-color: green;
  --nf-label-font-size: var(--nf-small-font-size);
  --nf-label-color: #374151;
  --nf-label-font-weight: 500;
  --nf-slider-track-background: #dfdfdf;
  --nf-slider-track-height: 0.25rem;
  --nf-slider-thumb-size: calc(var(--nf-slider-track-height) * 4);
  --nf-slider-track-border-radius: var(--nf-slider-track-height);
  --nf-slider-thumb-border-width: 2px;
  --nf-slider-thumb-border-focus-width: 1px;
  --nf-slider-thumb-border-color: #fff;
  --nf-slider-thumb-background: var(--nf-input-focus-border-color);
  display: block;
  margin-top: calc(var(--nf-input-size) * 1.5);
  line-height: 1;
  white-space: nowrap;
  --switch-orb-size: var(--nf-input-size);
  --switch-orb-offset: calc(var(--nf-input-border-width) * 2);
  --switch-width: calc(var(--nf-input-size) * 2.5);
  --switch-height: calc(var(--nf-input-size) * 1.25 + var(--switch-orb-offset));
}
.nice-form-group > label {
  font-weight: var(--nf-label-font-weight);
  display: block;
  color: var(--nf-label-color);
  font-size: var(--nf-label-font-size);
  font-family: var(--nf-label-font-family);
  margin-bottom: calc(var(--nf-input-size) / 2);
  white-space: normal;
}
.nice-form-group > label + small {
  font-style: normal;
}
.nice-form-group small {
  font-family: var(--nf-input-font-family);
  display: block;
  font-weight: 400;
  opacity: 0.75;
  font-size: var(--nf-small-font-size);
  margin-bottom: calc(var(--nf-input-size) * 0.75);
}
.nice-form-group small:last-child {
  margin-bottom: 0;
}
.nice-form-group > legend {
  font-weight: var(--nf-label-font-weight);
  display: block;
  color: var(--nf-label-color);
  font-size: var(--nf-label-font-size);
  font-family: var(--nf-label-font-family);
  margin-bottom: calc(var(--nf-input-size) / 5);
}
.nice-form-group > .nice-form-group {
  margin-top: calc(var(--nf-input-size) / 2);
}
.nice-form-group > input[type="checkbox"],
.nice-form-group > input[type="date"],
.nice-form-group > input[type="email"],
.nice-form-group > input[type="month"],
.nice-form-group > input[type="number"],
.nice-form-group > input[type="password"],
.nice-form-group > input[type="radio"],
.nice-form-group > input[type="search"],
.nice-form-group > input[type="tel"],
.nice-form-group > input[type="text"],
.nice-form-group > input[type="time"],
.nice-form-group > input[type="url"],
.nice-form-group > input[type="week"],
.nice-form-group > select,
.nice-form-group > textarea {
  background: var(--nf-input-background-color);
  font-family: inherit;
  font-size: var(--nf-input-font-size);
  border-bottom-width: var(--nf-input-border-width);
  font-family: var(--nf-input-font-family);
  box-shadow: none;
  border-radius: var(--nf-input-border-radius);
  border: var(--nf-input-border-width) var(--nf-input-border-style) var(--nf-input-border-color);
  border-bottom: var(--nf-input-border-bottom-width) var(--nf-input-border-style) var(--nf-input-border-color);
  color: var(--nf-input-color);
  width: 100%;
  padding: calc(var(--nf-input-size) * 0.75);
  height: calc(var(--nf-input-size) * 2.75);
  line-height: normal;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  transition: all 0.15s ease-out;
  --icon-padding: calc(var(--nf-input-size) * 2.25);
  --icon-background-offset: calc(var(--nf-input-size) * 0.75);
}
.nice-form-group > input[type="checkbox"]:required:not(:placeholder-shown):invalid,
.nice-form-group > input[type="date"]:required:not(:placeholder-shown):invalid,
.nice-form-group > input[type="email"]:required:not(:placeholder-shown):invalid,
.nice-form-group > input[type="month"]:required:not(:placeholder-shown):invalid,
.nice-form-group > input[type="number"]:required:not(:placeholder-shown):invalid,
.nice-form-group > input[type="password"]:required:not(:placeholder-shown):invalid,
.nice-form-group > input[type="radio"]:required:not(:placeholder-shown):invalid,
.nice-form-group > input[type="search"]:required:not(:placeholder-shown):invalid,
.nice-form-group > input[type="tel"]:required:not(:placeholder-shown):invalid,
.nice-form-group > input[type="text"]:required:not(:placeholder-shown):invalid,
.nice-form-group > input[type="time"]:required:not(:placeholder-shown):invalid,
.nice-form-group > input[type="url"]:required:not(:placeholder-shown):invalid,
.nice-form-group > input[type="week"]:required:not(:placeholder-shown):invalid,
.nice-form-group > select:required:not(:placeholder-shown):invalid,
.nice-form-group > textarea:required:not(:placeholder-shown):invalid {
  background-color: var(--nf-invalid-input-background-color);
  border-bottom-color: var(--nf-valid-input-border-color);
  border-color: var(--nf-valid-input-border-color) var(--nf-valid-input-border-color) var(--nf-invalid-input-border-bottom-color);
  color: var(--nf-invalid-input-color);
}
.nice-form-group > input[type="checkbox"]:required:not(:placeholder-shown):invalid:focus,
.nice-form-group > input[type="date"]:required:not(:placeholder-shown):invalid:focus,
.nice-form-group > input[type="email"]:required:not(:placeholder-shown):invalid:focus,
.nice-form-group > input[type="month"]:required:not(:placeholder-shown):invalid:focus,
.nice-form-group > input[type="number"]:required:not(:placeholder-shown):invalid:focus,
.nice-form-group > input[type="password"]:required:not(:placeholder-shown):invalid:focus,
.nice-form-group > input[type="radio"]:required:not(:placeholder-shown):invalid:focus,
.nice-form-group > input[type="search"]:required:not(:placeholder-shown):invalid:focus,
.nice-form-group > input[type="tel"]:required:not(:placeholder-shown):invalid:focus,
.nice-form-group > input[type="text"]:required:not(:placeholder-shown):invalid:focus,
.nice-form-group > input[type="time"]:required:not(:placeholder-shown):invalid:focus,
.nice-form-group > input[type="url"]:required:not(:placeholder-shown):invalid:focus,
.nice-form-group > input[type="week"]:required:not(:placeholder-shown):invalid:focus,
.nice-form-group > select:required:not(:placeholder-shown):invalid:focus,
.nice-form-group > textarea:required:not(:placeholder-shown):invalid:focus {
  background-color: var(--nf-input-background-color);
  border-color: var(--nf-input-border-color);
  color: var(--nf-input-color);
}
.nice-form-group > input[type="checkbox"]:required:not(:placeholder-shown):valid,
.nice-form-group > input[type="date"]:required:not(:placeholder-shown):valid,
.nice-form-group > input[type="email"]:required:not(:placeholder-shown):valid,
.nice-form-group > input[type="month"]:required:not(:placeholder-shown):valid,
.nice-form-group > input[type="number"]:required:not(:placeholder-shown):valid,
.nice-form-group > input[type="password"]:required:not(:placeholder-shown):valid,
.nice-form-group > input[type="radio"]:required:not(:placeholder-shown):valid,
.nice-form-group > input[type="search"]:required:not(:placeholder-shown):valid,
.nice-form-group > input[type="tel"]:required:not(:placeholder-shown):valid,
.nice-form-group > input[type="text"]:required:not(:placeholder-shown):valid,
.nice-form-group > input[type="time"]:required:not(:placeholder-shown):valid,
.nice-form-group > input[type="url"]:required:not(:placeholder-shown):valid,
.nice-form-group > input[type="week"]:required:not(:placeholder-shown):valid,
.nice-form-group > select:required:not(:placeholder-shown):valid,
.nice-form-group > textarea:required:not(:placeholder-shown):valid {
  background-color: var(--nf-valid-input-background-color);
  border-bottom-color: var(--nf-valid-input-border-color);
  border-color: var(--nf-valid-input-border-color) var(--nf-valid-input-border-color) var(--nf-valid-input-border-bottom-color);
  color: var(--nf-valid-input-color);
}
.nice-form-group > input[type="checkbox"]:disabled,
.nice-form-group > input[type="date"]:disabled,
.nice-form-group > input[type="email"]:disabled,
.nice-form-group > input[type="month"]:disabled,
.nice-form-group > input[type="number"]:disabled,
.nice-form-group > input[type="password"]:disabled,
.nice-form-group > input[type="radio"]:disabled,
.nice-form-group > input[type="search"]:disabled,
.nice-form-group > input[type="tel"]:disabled,
.nice-form-group > input[type="text"]:disabled,
.nice-form-group > input[type="time"]:disabled,
.nice-form-group > input[type="url"]:disabled,
.nice-form-group > input[type="week"]:disabled,
.nice-form-group > select:disabled,
.nice-form-group > textarea:disabled {
  cursor: not-allowed;
  opacity: 0.75;
}
.nice-form-group > input[type="checkbox"]::-webkit-input-placeholder,
.nice-form-group > input[type="date"]::-webkit-input-placeholder,
.nice-form-group > input[type="email"]::-webkit-input-placeholder,
.nice-form-group > input[type="month"]::-webkit-input-placeholder,
.nice-form-group > input[type="number"]::-webkit-input-placeholder,
.nice-form-group > input[type="password"]::-webkit-input-placeholder,
.nice-form-group > input[type="radio"]::-webkit-input-placeholder,
.nice-form-group > input[type="search"]::-webkit-input-placeholder,
.nice-form-group > input[type="tel"]::-webkit-input-placeholder,
.nice-form-group > input[type="text"]::-webkit-input-placeholder,
.nice-form-group > input[type="time"]::-webkit-input-placeholder,
.nice-form-group > input[type="url"]::-webkit-input-placeholder,
.nice-form-group > input[type="week"]::-webkit-input-placeholder,
.nice-form-group > select::-webkit-input-placeholder,
.nice-form-group > textarea::-webkit-input-placeholder {
  color: var(--nf-input-placeholder-color);
  letter-spacing: 0;
}
.nice-form-group > input[type="checkbox"]:-ms-input-placeholder,
.nice-form-group > input[type="date"]:-ms-input-placeholder,
.nice-form-group > input[type="email"]:-ms-input-placeholder,
.nice-form-group > input[type="month"]:-ms-input-placeholder,
.nice-form-group > input[type="number"]:-ms-input-placeholder,
.nice-form-group > input[type="password"]:-ms-input-placeholder,
.nice-form-group > input[type="radio"]:-ms-input-placeholder,
.nice-form-group > input[type="search"]:-ms-input-placeholder,
.nice-form-group > input[type="tel"]:-ms-input-placeholder,
.nice-form-group > input[type="text"]:-ms-input-placeholder,
.nice-form-group > input[type="time"]:-ms-input-placeholder,
.nice-form-group > input[type="url"]:-ms-input-placeholder,
.nice-form-group > input[type="week"]:-ms-input-placeholder,
.nice-form-group > select:-ms-input-placeholder,
.nice-form-group > textarea:-ms-input-placeholder {
  color: var(--nf-input-placeholder-color);
  letter-spacing: 0;
}
.nice-form-group > input[type="checkbox"]:-moz-placeholder,
.nice-form-group > input[type="checkbox"]::-moz-placeholder,
.nice-form-group > input[type="date"]:-moz-placeholder,
.nice-form-group > input[type="date"]::-moz-placeholder,
.nice-form-group > input[type="email"]:-moz-placeholder,
.nice-form-group > input[type="email"]::-moz-placeholder,
.nice-form-group > input[type="month"]:-moz-placeholder,
.nice-form-group > input[type="month"]::-moz-placeholder,
.nice-form-group > input[type="number"]:-moz-placeholder,
.nice-form-group > input[type="number"]::-moz-placeholder,
.nice-form-group > input[type="password"]:-moz-placeholder,
.nice-form-group > input[type="password"]::-moz-placeholder,
.nice-form-group > input[type="radio"]:-moz-placeholder,
.nice-form-group > input[type="radio"]::-moz-placeholder,
.nice-form-group > input[type="search"]:-moz-placeholder,
.nice-form-group > input[type="search"]::-moz-placeholder,
.nice-form-group > input[type="tel"]:-moz-placeholder,
.nice-form-group > input[type="tel"]::-moz-placeholder,
.nice-form-group > input[type="text"]:-moz-placeholder,
.nice-form-group > input[type="text"]::-moz-placeholder,
.nice-form-group > input[type="time"]:-moz-placeholder,
.nice-form-group > input[type="time"]::-moz-placeholder,
.nice-form-group > input[type="url"]:-moz-placeholder,
.nice-form-group > input[type="url"]::-moz-placeholder,
.nice-form-group > input[type="week"]:-moz-placeholder,
.nice-form-group > input[type="week"]::-moz-placeholder,
.nice-form-group > select:-moz-placeholder,
.nice-form-group > select::-moz-placeholder,
.nice-form-group > textarea:-moz-placeholder,
.nice-form-group > textarea::-moz-placeholder {
  color: var(--nf-input-placeholder-color);
  letter-spacing: 0;
}
.nice-form-group > input[type="checkbox"]:focus,
.nice-form-group > input[type="date"]:focus,
.nice-form-group > input[type="email"]:focus,
.nice-form-group > input[type="month"]:focus,
.nice-form-group > input[type="number"]:focus,
.nice-form-group > input[type="password"]:focus,
.nice-form-group > input[type="radio"]:focus,
.nice-form-group > input[type="search"]:focus,
.nice-form-group > input[type="tel"]:focus,
.nice-form-group > input[type="text"]:focus,
.nice-form-group > input[type="time"]:focus,
.nice-form-group > input[type="url"]:focus,
.nice-form-group > input[type="week"]:focus,
.nice-form-group > select:focus,
.nice-form-group > textarea:focus {
  outline: none;
  border-color: var(--nf-input-focus-border-color);
}
.nice-form-group > input[type="checkbox"] + small,
.nice-form-group > input[type="date"] + small,
.nice-form-group > input[type="email"] + small,
.nice-form-group > input[type="month"] + small,
.nice-form-group > input[type="number"] + small,
.nice-form-group > input[type="password"] + small,
.nice-form-group > input[type="radio"] + small,
.nice-form-group > input[type="search"] + small,
.nice-form-group > input[type="tel"] + small,
.nice-form-group > input[type="text"] + small,
.nice-form-group > input[type="time"] + small,
.nice-form-group > input[type="url"] + small,
.nice-form-group > input[type="week"] + small,
.nice-form-group > select + small,
.nice-form-group > textarea + small {
  margin-top: 0.5rem;
}
.nice-form-group > input[type="checkbox"].icon-left,
.nice-form-group > input[type="date"].icon-left,
.nice-form-group > input[type="email"].icon-left,
.nice-form-group > input[type="month"].icon-left,
.nice-form-group > input[type="number"].icon-left,
.nice-form-group > input[type="password"].icon-left,
.nice-form-group > input[type="radio"].icon-left,
.nice-form-group > input[type="search"].icon-left,
.nice-form-group > input[type="tel"].icon-left,
.nice-form-group > input[type="text"].icon-left,
.nice-form-group > input[type="time"].icon-left,
.nice-form-group > input[type="url"].icon-left,
.nice-form-group > input[type="week"].icon-left,
.nice-form-group > select.icon-left,
.nice-form-group > textarea.icon-left {
  background-position: left var(--icon-background-offset) bottom 50%;
  padding-left: var(--icon-padding);
  background-size: var(--nf-input-size);
}
.nice-form-group > input[type="checkbox"].icon-right,
.nice-form-group > input[type="date"].icon-right,
.nice-form-group > input[type="email"].icon-right,
.nice-form-group > input[type="month"].icon-right,
.nice-form-group > input[type="number"].icon-right,
.nice-form-group > input[type="password"].icon-right,
.nice-form-group > input[type="radio"].icon-right,
.nice-form-group > input[type="search"].icon-right,
.nice-form-group > input[type="tel"].icon-right,
.nice-form-group > input[type="text"].icon-right,
.nice-form-group > input[type="time"].icon-right,
.nice-form-group > input[type="url"].icon-right,
.nice-form-group > input[type="week"].icon-right,
.nice-form-group > select.icon-right,
.nice-form-group > textarea.icon-right {
  background-position: right var(--icon-background-offset) bottom 50%;
  padding-right: var(--icon-padding);
  background-size: var(--nf-input-size);
}
.nice-form-group > input[type="checkbox"]:-webkit-autofill,
.nice-form-group > input[type="date"]:-webkit-autofill,
.nice-form-group > input[type="email"]:-webkit-autofill,
.nice-form-group > input[type="month"]:-webkit-autofill,
.nice-form-group > input[type="number"]:-webkit-autofill,
.nice-form-group > input[type="password"]:-webkit-autofill,
.nice-form-group > input[type="radio"]:-webkit-autofill,
.nice-form-group > input[type="search"]:-webkit-autofill,
.nice-form-group > input[type="tel"]:-webkit-autofill,
.nice-form-group > input[type="text"]:-webkit-autofill,
.nice-form-group > input[type="time"]:-webkit-autofill,
.nice-form-group > input[type="url"]:-webkit-autofill,
.nice-form-group > input[type="week"]:-webkit-autofill,
.nice-form-group > select:-webkit-autofill,
.nice-form-group > textarea:-webkit-autofill {
  padding: calc(var(--nf-input-size) * 0.75) !important;
}
.nice-form-group > input[type="search"]:placeholder-shown {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-search'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='M21 21l-4.35-4.35'/%3E%3C/svg%3E");
  background-position: left calc(var(--nf-input-size) * 0.75) bottom 50%;
  padding-left: calc(var(--nf-input-size) * 2.25);
  background-size: var(--nf-input-size);
  background-repeat: no-repeat;
}
.nice-form-group > input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  width: var(--nf-input-size);
  height: var(--nf-input-size);
  background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-x'%3E%3Cpath d='M18 6L6 18M6 6l12 12'/%3E%3C/svg%3E");
}
.nice-form-group > input[type="search"]:focus {
  padding-left: calc(var(--nf-input-size) * 0.75);
  background-position: left calc(var(--nf-input-size) * -1) bottom 50%;
}
.nice-form-group > input[type="email"][class^="icon"] {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-at-sign'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M16 8v5a3 3 0 006 0v-1a10 10 0 10-3.92 7.94'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
}
.nice-form-group > input[type="tel"][class^="icon"] {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-phone'%3E%3Cpath d='M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07 19.5 19.5 0 01-6-6 19.79 19.79 0 01-3.07-8.67A2 2 0 014.11 2h3a2 2 0 012 1.72 12.84 12.84 0 00.7 2.81 2 2 0 01-.45 2.11L8.09 9.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45 12.84 12.84 0 002.81.7A2 2 0 0122 16.92z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
}
.nice-form-group > input[type="url"][class^="icon"] {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-link'%3E%3Cpath d='M10 13a5 5 0 007.54.54l3-3a5 5 0 00-7.07-7.07l-1.72 1.71'/%3E%3Cpath d='M14 11a5 5 0 00-7.54-.54l-3 3a5 5 0 007.07 7.07l1.71-1.71'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
}
.nice-form-group > input[type="password"] {
  letter-spacing: 2px;
}
.nice-form-group > input[type="password"][class^="icon"] {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-lock'%3E%3Crect x='3' y='11' width='18' height='11' rx='2' ry='2'/%3E%3Cpath d='M7 11V7a5 5 0 0110 0v4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
}
.nice-form-group > input[type="range"] {
  -webkit-appearance: none;
  width: 100%;
  cursor: pointer;
}
.nice-form-group > input[type="range"]:focus {
  outline: none;
}
.nice-form-group > input[type="range"]::-webkit-slider-runnable-track {
  width: 100%;
  height: var(--nf-slider-track-height);
  background: var(--nf-slider-track-background);
  border-radius: var(--nf-slider-track-border-radius);
}
.nice-form-group > input[type="range"]::-moz-range-track {
  width: 100%;
  height: var(--nf-slider-track-height);
  background: var(--nf-slider-track-background);
  border-radius: var(--nf-slider-track-border-radius);
}
.nice-form-group > input[type="range"]::-webkit-slider-thumb {
  height: var(--nf-slider-thumb-size);
  width: var(--nf-slider-thumb-size);
  border-radius: var(--nf-slider-thumb-size);
  background: var(--nf-slider-thumb-background);
  border: 0;
  border: var(--nf-slider-thumb-border-width) solid var(--nf-slider-thumb-border-color);
  -webkit-appearance: none;
  appearance: none;
  margin-top: calc(var(--nf-slider-track-height) * 0.5 - var(--nf-slider-thumb-size) * 0.5);
}
.nice-form-group > input[type="range"]::-moz-range-thumb {
  height: var(--nf-slider-thumb-size);
  width: var(--nf-slider-thumb-size);
  border-radius: var(--nf-slider-thumb-size);
  background: var(--nf-slider-thumb-background);
  border: 0;
  border: var(--nf-slider-thumb-border-width) solid var(--nf-slider-thumb-border-color);
  -moz-appearance: none;
  appearance: none;
  box-sizing: border-box;
}
.nice-form-group > input[type="range"]:focus::-webkit-slider-thumb {
  box-shadow: 0 0 0 var(--nf-slider-thumb-border-focus-width) var(--nf-slider-thumb-background);
}
.nice-form-group > input[type="range"]:focus::-moz-range-thumb {
  box-shadow: 0 0 0 var(--nf-slider-thumb-border-focus-width) var(--nf-slider-thumb-background);
}
.nice-form-group > input[type="color"] {
  border: var(--nf-input-border-width) solid var(--nf-input-border-color);
  border-bottom-width: var(--nf-input-border-bottom-width);
  height: calc(var(--nf-input-size) * 2);
  border-radius: var(--nf-input-border-radius);
  padding: calc(var(--nf-input-border-width) * 2);
}
.nice-form-group > input[type="color"]:focus {
  outline: none;
  border-color: var(--nf-input-focus-border-color);
}
.nice-form-group > input[type="color"]::-webkit-color-swatch-wrapper {
  padding: 5%;
}
.nice-form-group > input[type="color"]::-moz-color-swatch {
  border-radius: calc(var(--nf-input-border-radius) / 2);
  border: none;
}
.nice-form-group > input[type="color"]::-webkit-color-swatch {
  border-radius: calc(var(--nf-input-border-radius) / 2);
  border: none;
}
.nice-form-group > input[type="number"] {
  width: auto;
}
.nice-form-group > input[type="date"],
.nice-form-group > input[type="month"],
.nice-form-group > input[type="week"] {
  min-width: 14em;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-calendar'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E");
}
.nice-form-group > input[type="time"] {
  min-width: 6em;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-clock'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 6v6l4 2'/%3E%3C/svg%3E");
}
.nice-form-group > input[type="date"],
.nice-form-group > input[type="month"],
.nice-form-group > input[type="time"],
.nice-form-group > input[type="week"] {
  background-position: right calc(var(--nf-input-size) * 0.75) bottom 50%;
  background-repeat: no-repeat;
  background-size: var(--nf-input-size);
  width: auto;
}
.nice-form-group > input[type="date"]::-webkit-calendar-picker-indicator,
.nice-form-group > input[type="date"]::-webkit-inner-spin-button,
.nice-form-group > input[type="month"]::-webkit-calendar-picker-indicator,
.nice-form-group > input[type="month"]::-webkit-inner-spin-button,
.nice-form-group > input[type="time"]::-webkit-calendar-picker-indicator,
.nice-form-group > input[type="time"]::-webkit-inner-spin-button,
.nice-form-group > input[type="week"]::-webkit-calendar-picker-indicator,
.nice-form-group > input[type="week"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  cursor: pointer;
  opacity: 0;
}
@-moz-document url-prefix() {
  .nice-form-group > input[type="date"],
  .nice-form-group > input[type="month"],
  .nice-form-group > input[type="time"],
  .nice-form-group > input[type="week"] {
    min-width: auto;
    width: auto;
    background-image: none;
  }
}
.nice-form-group > textarea {
  height: auto;
}
.nice-form-group > input[type="checkbox"],
.nice-form-group > input[type="radio"] {
  width: var(--nf-input-size);
  height: var(--nf-input-size);
  padding: inherit;
  margin: 0;
  display: inline-block;
  vertical-align: top;
  border-radius: calc(var(--nf-input-border-radius) / 2);
  border-width: var(--nf-input-border-width);
  cursor: pointer;
  background-position: 50%;
}
.nice-form-group > input[type="checkbox"]:focus:not(:checked),
.nice-form-group > input[type="radio"]:focus:not(:checked) {
  border: var(--nf-input-border-width) solid var(--nf-input-focus-border-color);
  outline: none;
}
.nice-form-group > input[type="checkbox"]:hover,
.nice-form-group > input[type="radio"]:hover {
  border: var(--nf-input-border-width) solid var(--nf-input-focus-border-color);
}
.nice-form-group > input[type="checkbox"] + label,
.nice-form-group > input[type="radio"] + label {
  display: inline-block;
  margin-bottom: 0;
  padding-left: calc(var(--nf-input-size) / 2.5);
  font-weight: 400;
  -webkit-user-select: none;
  user-select: none;
  cursor: pointer;
  max-width: calc(100% - var(--nf-input-size) * 2);
  line-height: normal;
}
.nice-form-group > input[type="checkbox"] + label > small,
.nice-form-group > input[type="radio"] + label > small {
  margin-top: calc(var(--nf-input-size) / 4);
}
.nice-form-group > input[type="checkbox"]:checked {
  background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' class='feather feather-check'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E")
    no-repeat 50%/85%;
  background-color: var(--nf-input-focus-border-color);
  border-color: var(--nf-input-focus-border-color);
}
.nice-form-group > input[type="radio"] {
  border-radius: 100%;
}
.nice-form-group > input[type="radio"]:checked {
  background-color: var(--nf-input-focus-border-color);
  border-color: var(--nf-input-focus-border-color);
  box-shadow: inset 0 0 0 3px #fff;
}
.nice-form-group > input[type="checkbox"].switch {
  width: var(--switch-width);
  height: var(--switch-height);
  border-radius: var(--switch-height);
  position: relative;
}
.nice-form-group > input[type="checkbox"].switch:after {
  background: var(--nf-input-border-color);
  border-radius: var(--switch-orb-size);
  height: var(--switch-orb-size);
  left: var(--switch-orb-offset);
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  width: var(--switch-orb-size);
  content: "";
  transition: all 0.2s ease-out;
}
.nice-form-group > input[type="checkbox"].switch + label {
  margin-top: calc(var(--switch-height) / 8);
}
.nice-form-group > input[type="checkbox"].switch:checked {
  background: none;
  background-position: 0 0;
  background-color: var(--nf-input-focus-border-color);
}
.nice-form-group > input[type="checkbox"].switch:checked:after {
  -webkit-transform: translateY(-50%) translateX(calc(var(--switch-width) / 2 - var(--switch-orb-offset)));
  transform: translateY(-50%) translateX(calc(var(--switch-width) / 2 - var(--switch-orb-offset)));
  background: #fff;
}
.nice-form-group > input[type="file"] {
  background: rgba(0, 0, 0, 0.025);
  padding: var(--nf-input-size);
  display: block;
  width: 100%;
  border-radius: var(--nf-input-border-radius);
  border: 1px dashed var(--nf-input-border-color);
  outline: none;
  cursor: pointer;
}
.nice-form-group > input[type="file"]:focus,
.nice-form-group > input[type="file"]:hover {
  border-color: var(--nf-input-focus-border-color);
}
.nice-form-group > input[type="file"]::file-selector-button {
  background: var(--nf-input-focus-border-color);
  border: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding: 0.5rem;
  border-radius: var(--nf-input-border-radius);
  color: #fff;
  margin-right: 1rem;
  outline: none;
  font-family: var(--nf-input-font-family);
  cursor: pointer;
}
.nice-form-group > input[type="file"]::-webkit-file-upload-button {
  background: var(--nf-input-focus-border-color);
  border: 0;
  -webkit-appearance: none;
  appearance: none;
  padding: 0.5rem;
  border-radius: var(--nf-input-border-radius);
  color: #fff;
  margin-right: 1rem;
  outline: none;
  font-family: var(--nf-input-font-family);
  cursor: pointer;
}
.nice-form-group > select {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-chevron-down'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-position: right calc(var(--nf-input-size) * 0.75) bottom 50%;
  background-repeat: no-repeat;
  background-size: var(--nf-input-size);
}
*,
:after,
:before {
  box-sizing: inherit;
}
html {
  font-size: 16px;
  box-sizing: border-box;
}
body {
  background: #f3f0e7;
  font-family: Roboto, sans-serif;
  color: #4b5563;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.demo-page {
  margin: 0 auto;
  display: -webkit-flex;
  display: flex;
  max-width: 55em;
}
.demo-page .demo-page-navigation {
  width: 18em;
  padding: 2em 1em;
}
@media only screen and (max-width: 750px) {
  .demo-page .demo-page-navigation {
    display: none;
  }
}
.demo-page .demo-page-navigation nav {
  position: -webkit-sticky;
  position: sticky;
  top: 2em;
  background: #fff;
  padding: 0.5em;
  border-radius: 0.75rem;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}
.demo-page .demo-page-navigation a {
  display: -webkit-flex;
  display: flex;
  padding: 0.75em 1em;
  text-decoration: none;
  border-radius: 0.25em;
  color: #374151;
  -webkit-align-items: center;
  align-items: center;
}
.demo-page .demo-page-navigation a:hover {
  background: #f3f4f6;
}
.demo-page .demo-page-navigation a svg {
  width: 1.25em;
  height: 1.25em;
  margin-right: 1em;
  color: #1f2937;
}
.demo-page .demo-page-content {
  padding: 2em 1em;
  max-width: 100%;
}
@media only screen and (min-width: 750px) {
  .demo-page .demo-page-content {
    width: calc(100% - 18em);
  }
}
footer {
  text-align: center;
  margin: 2.5em 0;
}
.href-target {
  position: absolute;
  top: -2em;
}
.to-repo,
.to-reset {
  display: -webkit-inline-flex;
  display: inline-flex;
  background: #24292e;
  color: #fff;
  border-radius: 5px;
  padding: 0.5em 1em;
  text-decoration: none;
  -webkit-align-items: center;
  align-items: center;
  transition: background 0.2s ease-out;
}
.to-repo:hover,
.to-reset:hover {
  background: #000;
}
.to-repo svg,
.to-reset svg {
  width: 1.125rem;
  height: 1.125rem;
  margin-right: 0.75em;
}
.to-reset {
  background: #3b4ce2;
}
.to-reset:hover {
  background: #2538df;
}
section {
  background: #fff;
  padding: 2em;
  border-radius: 0.75rem;
  line-height: 1.6;
  overflow: hidden;
  margin-bottom: 2rem;
  position: relative;
  font-size: 0.875rem;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}
section h1 {
  font-weight: 500;
  font-size: 1.25rem;
  color: #000;
  margin-bottom: 0.75rem;
}
section h1 svg {
  width: 1em;
  height: 1em;
  display: inline-block;
  vertical-align: -10%;
  margin-right: 0.25em;
}
section h1.package-name {
  font-size: 2rem;
  margin-bottom: 0.75rem;
  margin-top: -0.5rem;
}
section strong {
  font-weight: 500;
  color: #000;
}
section p {
  margin: 0.5rem 0 1.5rem;
}
section p a {
  text-decoration: none;
  font-weight: 500;
  color: #3b4ce2;
}
section p:last-child {
  margin-bottom: 0;
}
section code {
  font-weight: 500;
  font-family: Consolas, monaco, monospace;
  position: relative;
  z-index: 1;
  margin: 0 2px;
  background: #f3f4f4;
  content: "";
  border-radius: 3px;
  padding: 2px 5px;
  white-space: nowrap;
}
section ul {
  margin-top: 0.5em;
  padding-left: 1em;
  list-style-type: disc;
}
details {
  background: #f1f1f1;
  margin: 2em -2em -2em;
  padding: 1.5em 2em;
}
details .gist {
  margin-top: 1.5em;
}
details .toggle-code {
  display: inline-block;
  padding: 0.5em 1em;
  border-radius: 5px;
  font-size: 0.875rem;
  background: #10b981;
  top: 1em;
  right: 1em;
  color: #fff;
  font-weight: 500;
  -webkit-user-select: none;
  user-select: none;
  cursor: pointer;
}
details .toggle-code:hover {
  background: #0ea271;
}
details .toggle-code svg {
  display: inline-block;
  vertical-align: -15%;
  margin-right: 0.25em;
}
details summary {
  outline: none;
  list-style-type: none;
}
details summary::marker {
  display: none;
}
details summary::-webkit-details-marker {
  display: none;
}

CheckPoint.

옵셔널체이닝 : .? 앞의 내용들을 검사하여 undifined라면 undefined를 반환(오류방지, 유사 try catch) [^A-Z0-9+_.] : 정규화식 return; 으로 다음 함수가 진행되기전에 멈추기. checked radio타입에 checked 속성을 주입하여 undefind 방지하기. label for lavel 태그에 for을 사용하여 input태그의 id값과 동일하게 맞추어 label을 선택했을 때에도 작동할 수 있도록 사용자 편의성 개선.

사용예시

System.out.println(ANSI_RED_BACKGROUND + "This text is red!" + RESET); System.out.print(YELLOW_BOLD_BRIGHT + "complete!" + RESET);

RESET 을 사용하지 않으면 뒤에 오는 내용들까지 다 적용되니 RESET (String RESET = "\033[0m")을 통해 적용 범위를 통제할 것.

public class ConsoleColors {

    // Reset
    public static final String RESET = "\033[0m";  // Text Reset

    // backgroudColor
    public static final String ANSI_BLACK_BACKGROUND = "\u001B[40m";
    public static final String ANSI_RED_BACKGROUND = "\u001B[41m";
    public static final String ANSI_GREEN_BACKGROUND = "\u001B[42m";
    public static final String ANSI_YELLOW_BACKGROUND = "\u001B[43m";
    public static final String ANSI_BLUE_BACKGROUND = "\u001B[44m";
    public static final String ANSI_PURPLE_BACKGROUND = "\u001B[45m";
    public static final String ANSI_CYAN_BACKGROUND = "\u001B[46m";
    public static final String ANSI_WHITE_BACKGROUND = "\u001B[47m";

    // Regular Colors
    public static final String BLACK = "\033[0;30m";   // BLACK
    public static final String RED = "\033[0;31m";     // RED
    public static final String GREEN = "\033[0;32m";   // GREEN
    public static final String YELLOW = "\033[0;33m";  // YELLOW
    public static final String BLUE = "\033[0;34m";    // BLUE
    public static final String PURPLE = "\033[0;35m";  // PURPLE
    public static final String CYAN = "\033[0;36m";    // CYAN
    public static final String WHITE = "\033[0;37m";   // WHITE

    // Bold
    public static final String BLACK_BOLD = "\033[1;30m";  // BLACK
    public static final String RED_BOLD = "\033[1;31m";    // RED
    public static final String GREEN_BOLD = "\033[1;32m";  // GREEN
    public static final String YELLOW_BOLD = "\033[1;33m"; // YELLOW
    public static final String BLUE_BOLD = "\033[1;34m";   // BLUE
    public static final String PURPLE_BOLD = "\033[1;35m"; // PURPLE
    public static final String CYAN_BOLD = "\033[1;36m";   // CYAN
    public static final String WHITE_BOLD = "\033[1;37m";  // WHITE

    // Underline
    public static final String BLACK_UNDERLINED = "\033[4;30m";  // BLACK
    public static final String RED_UNDERLINED = "\033[4;31m";    // RED
    public static final String GREEN_UNDERLINED = "\033[4;32m";  // GREEN
    public static final String YELLOW_UNDERLINED = "\033[4;33m"; // YELLOW
    public static final String BLUE_UNDERLINED = "\033[4;34m";   // BLUE
    public static final String PURPLE_UNDERLINED = "\033[4;35m"; // PURPLE
    public static final String CYAN_UNDERLINED = "\033[4;36m";   // CYAN
    public static final String WHITE_UNDERLINED = "\033[4;37m";  // WHITE

    // Background
    public static final String BLACK_BACKGROUND = "\033[40m";  // BLACK
    public static final String RED_BACKGROUND = "\033[41m";    // RED
    public static final String GREEN_BACKGROUND = "\033[42m";  // GREEN
    public static final String YELLOW_BACKGROUND = "\033[43m"; // YELLOW
    public static final String BLUE_BACKGROUND = "\033[44m";   // BLUE
    public static final String PURPLE_BACKGROUND = "\033[45m"; // PURPLE
    public static final String CYAN_BACKGROUND = "\033[46m";   // CYAN
    public static final String WHITE_BACKGROUND = "\033[47m";  // WHITE

    // High Intensity
    public static final String BLACK_BRIGHT = "\033[0;90m";  // BLACK
    public static final String RED_BRIGHT = "\033[0;91m";    // RED
    public static final String GREEN_BRIGHT = "\033[0;92m";  // GREEN
    public static final String YELLOW_BRIGHT = "\033[0;93m"; // YELLOW
    public static final String BLUE_BRIGHT = "\033[0;94m";   // BLUE
    public static final String PURPLE_BRIGHT = "\033[0;95m"; // PURPLE
    public static final String CYAN_BRIGHT = "\033[0;96m";   // CYAN
    public static final String WHITE_BRIGHT = "\033[0;97m";  // WHITE

    // Bold High Intensity
    public static final String BLACK_BOLD_BRIGHT = "\033[1;90m"; // BLACK
    public static final String RED_BOLD_BRIGHT = "\033[1;91m";   // RED
    public static final String GREEN_BOLD_BRIGHT = "\033[1;92m"; // GREEN
    public static final String YELLOW_BOLD_BRIGHT = "\033[1;93m";// YELLOW
    public static final String BLUE_BOLD_BRIGHT = "\033[1;94m";  // BLUE
    public static final String PURPLE_BOLD_BRIGHT = "\033[1;95m";// PURPLE
    public static final String CYAN_BOLD_BRIGHT = "\033[1;96m";  // CYAN
    public static final String WHITE_BOLD_BRIGHT = "\033[1;97m"; // WHITE

    // High Intensity backgrounds
    public static final String BLACK_BACKGROUND_BRIGHT = "\033[0;100m";// BLACK
    public static final String RED_BACKGROUND_BRIGHT = "\033[0;101m";// RED
    public static final String GREEN_BACKGROUND_BRIGHT = "\033[0;102m";// GREEN
    public static final String YELLOW_BACKGROUND_BRIGHT = "\033[0;103m";// YELLOW
    public static final String BLUE_BACKGROUND_BRIGHT = "\033[0;104m";// BLUE
    public static final String PURPLE_BACKGROUND_BRIGHT = "\033[0;105m"; // PURPLE
    public static final String CYAN_BACKGROUND_BRIGHT = "\033[0;106m";  // CYAN
    public static final String WHITE_BACKGROUND_BRIGHT = "\033[0;107m";   // WHITE
}

📌 SQL 기본 문법 및 단어정리

SELECT 열_이름

FROM 테이블_이름

WHERE 조건식

GROUP BY 열_이름

HAVING 조건식

ORDER BY 열_이름

LIMIT 숫자

⚙ 연산자 종류

1. 관계 연산자

> , < , >= , <= , =

2. 논리 연산자
AND : 두 조건이 모두 만족하면 조회

SELECT mem_name,height, mem_number FROM member WHERE height >= 165 AND mem_number > 6;

OR : 둘 중 하나라도 만족하면 조회

SELECT mem_name,height, mem_number FROM member WHERE height >= 165 OR mem_number > 6;

BETWEEN ~AND : 범위 ~ 를 사용할 때 이용

SELECT mem_name,height, mem_number FROM member WHERE height BETWEEN 163 AND 165;

IN : in내에 들어있는 것들 중 하나라도 존재하면 조회.

SELECT mem_name, addr FROM member WHERE addr IN ('경기', '전남', '경남');

LIKE : 서울%, %민국 와 같이 %을 기준으로 앞 또는 뒤에 오는 문자열을 조회

SELECT * FROM member WHERE mem_name LIKE '우%';

_ : 글자와 매치하는 자료를 조회

SELECT * FROM member WHERE mem_name LIKE '__핑크';

3. ** **결과를 정렬하는 : ORDER BY

SELECT mem_id, mem_name, debut_date FROM member ORDER BY debut_date;

debut_date(데뷔 일자)를 늦은 순서대로 하려면 DESC(Descending)을 붙이면 됨.
** 오름차순 ASC(Ascending) 내림차순DESC(Descending)**

SELECT mem_id, mem_name, debut_date FROM member ORDER BY debut_date DESC, mem_id ASC ;

** 코드 분석 : debut_date 는 내림차순 , mem_id 는 오름차순 정렬.**

4. 출력의 개수를 제한하는 LIMIT

<span style="color: #FF0000">`SELECT`</span> mem_name, height

FROM member ORDER BY height DESC LIMIT 3, 2 ;

** 코드 분석 : height를 내림차순 즉, 큰 순으로 정렬하되 3번째부터 2건만 조회.**

5. 중복을 제거하는 DISTINCT SELECT DISTINCT addr FROM member

** 코드 분석 : addr 열의 조회되는 중복된 데이터를 모두 제거.**

6. 데이터를 그룹화하는 GROUP BY (집계함수와 주로 사용)

SUM() : 합계를 구합니다. AVG() : 평균을 구합니다. MIN(): 최소값을 구합니다. MAX() : 최대값을 구합니다. COUNT(): 행의 개수를 셉니다. COUNT(DISTINCT):행의 개수를 세며 중복은 1개만 인정됩니다.

SELECT member_id SUM() FROM buy GROUP BY member;

SELECT member_id "회원 아이디", SUM(price * amoount) "총구매액" FROM buy GROUP BY mem_id;

7. WHERE절 대신 사용하는 GROUP BY 의 친구 HAVING (HAVING 절은 꼭 GROUP BY 절 다음에 나와야한다.) 집계 함수에 대해서 조건을 제한하는 것.

SELECT member_id "회원 아이디", SUM(price * amoount) "총구매액" FROM buy GROUP BY mem_id; HAVING SUM(price * amoount) > 10

지금까지 다룬 내용은 쿼리에서 가장 많이 쓰이는 SELECT 문의 문법이고 고급 문법이나 함수 등 여러 활용 방안이 많다.

참고하기 좋은 사이트
https://suy379.tistory.com/107 - 함수정리 https://suy379.tistory.com/106 - 서브쿼리 사용법 https://mangkyu.tistory.com/25#google_vignette - 함수 및 고급문법

✅ for문

반복된 횟수를 알고있을 경우 사용하기 적합한 반복문

"for"라는 예약어를 만나는 경우 ( ) 안에 있는 조건이 참이면 반복실행하겠다. 라는 뜻

(1)

for(`초기화; 조건식; 증감식;) { // 조건식이 참일 때 수행될 문장들 }

초기화는

초기화; 변수를 초기화하는 부분이며 처음에 기준값이 된다.

조건식은

for(초기화; 조건식; 증감식;) { // 조건식이 참일 때 수행될 문장들 }

for의 뜻이 '~하는 동안' 이므로 조건식이 참인 동안 반복을 계속한다. 예를 들어 (int i=1; i<10; i++) 라고 가정한다면 i는 1을 초기값(i=1)으로 가지며 i가 10 보다 낮으면(i<10) 계속 반복하겠다 라는 뜻이다.

증감식은

for(초기화; 조건식; 증감식; ) { // 조건식이 참일 때 수행될 문장들 }

반복문에서 초기화에 사용한 변수를 증가 또는 감소시키는 식이다. 처음 초기화시킨 i=1 의 변수 값을 ++(증가) 점진적으로 증가시켜 결국 조건이 거짓이 되어 (i가 10보다 커졌을 때) for문을 벗어나게 된다.

for(int i =1; i<=10; i++) { ... } // 1부터 10까지 1씩 증가
for(int i =1; i<=10; i--) { ... } // 1부터 10까지 1씩 감소
for(int i =1; i<=10; i+= 2) { ... } // 1부터 10까지 2씩 증가
for(int i =1; i<=10; i*= 3) { ... } // 1부터 10까지 3배씩 증가

for( ) {

} for문에서 이 코드블럭( {} )이 한 범위이다. 그렇기 때문에 for문의 범위 내에서 사용된 지역변수는 for문이 종료되는 순간 소멸한다. 또한 범위가 끝나기 전에 만나는 코드들은 모두 실행시키고 다시 조건식으로 올라온다는 점을 꼭 기억하자 .

✏️구구단 2단에서 9단까지 생성하기.

// 구구단 example.

        for(int i= 2; i < 10; i++){
                System.out.println( "=== " + i + "단 ===" );
            for(int j= 1; j < 10; j++){
                int result = i*j;
                System.out.println( i + " * " + j + " = " + result);
            }
        }

👉첫번째 example 코드흐름

1. for(예약어)가 읽혀 ( ) 안에 식들을 참인지 거짓인지 확인함.
2. int i = 2; i 라는 변수에 2 라는 값을 초기값으로 셋팅함.
3. i < 10 라는 조건에 부합함으로 (2 < 10) 코드블럭실행 { }
4. 코드블럭 실행중 한 번 더 for등장 동일하게 조건을 확인하고 진행
5. 두 번째 for문에서는 System.out.println( i + " * " + j + " = " + result); } 를 마지막으로 코드블럭이 닫힌다. 코드블럭이 닫히기 전까지 모든 코드를 실행시켰고 더 이상 실행시킬 코드가 존재하지 않으니 다시 반복하기 위해 두 번째 for문으로 올라간다.
6. 두 번째 for문을 반복에 반복을 거쳐 조건이 부합하지 않을 경우 두 번째 for문을 탈출하게 되고 탈출한 뒤엔 원래 진행하던 첫 번째 for문의 흐름을 이어탄다.

-------------------------------------------------------------------------------

✏️1부터 10까지의 합을 구한 뒤 평균 구하기.

// 1부터 10까지의 합을 구한 뒤 평균을 구하는 Example
        int sum = 0; // 전역변수를 선언.
        for(int i=1; i<11; i++){
            sum = sum + i; 
            System.out.println(sum);
        }
        int avg = sum / 10;
        System.out.println(avg);

👉두번째 example 코드흐름

1. int sum = 0; 이라는 전역변수 선언
2. for가 읽혀 int i=1 라는 초기값을 가지고 i<11 을 만족할 때까지 증가하는 for문 실행
3. 전역변수를 끌어와 sum = sum + i 를 통해 기존의 값에 i를 더해가는 계산식을 실행 (for 내 존재하는 지역변수는 for문의 범위를 벗어나는 순간 폐기)
4. System.out.println(sum); 까지 실행 후 모든 코드를 실행시켰으니 다시 반복문으로 올라감.
5. 점진적으로 증가하다 조건식에 만족하지 못했을 때 탈출하게 되며 이때 전역변수에 저장된 값을 불러와 10으로 나누면서 avg 라는 변수에 담아 평균 값을 계산한 후 출력.

-------------------------------------------------------------------------------

✏️공백을 포함하여 피라미드모양 별찍기.

// for문의 꽃 별찍기

        for(int i = 1; i<6; i++){
            for(int j = 5; j>i; j--){
                System.out.print(" ");
            }
            for(int n=0; n<i; n++){
                System.out.print("*");
            }
            System.out.println();
        }

👉세번째 example 코드흐름

1. 첫번째 for문 실행
2. 두번째 for문 실행 -> System.out.print(" "); j>i (j>1)가 만족할 때 까지 반복 -> 탈출
3. 세번째 for문 실행 -> 동일하게 조건 만족할 때 까지 출력-> 탈출
4. 첫번째 for문에 해당하는 System.out.println(); 실행 후 다시 첫 번째 for문 타러 이동
5. i가 2를 가진 채로 2번과 3번 4번을 실행,i가 3를 가진 채로, i가 4를 가진 채 i가 5를 가진 채로 계속 반복하다 i가 6을 가지는 순간 i<6 인 조건과 부합하지 않아 (flase) 첫 번째 for문 탈출. 첫 번째 for문을 탈출한 순간 두 번째 세 번째는 자연스럽게 타지못하게 됨.

--작성중--

📂변수(variable)

하나의 값을 저장할 수 있는 메모리 공간(RAM) 어렵다면 " 물건을 담을 수 있는 상자 " 라고 생각해보자.

🔎상황 1. 핸드폰을 팔기로 했다. 핸드폰을 구매자에게 배송해야하는데 배송하기 전 포장에 단계에서 어떤 상자를 고를지 골라야한다. 그렇다면 당신은 두손에 들어오는 크기의 핸드폰을 냉장고나 들어갈 법한 상자에 포장을 할 것인가? 적당한 크기의 상자에 담는 것이 정상이다.

🔎상황 2. 냉동 식품을 포장하고자한다. 장시간 이동을 해야하며 이때 선택할 수 있는 선택지 중 제일 좋은 것은 보냉이 되는 포장용기에 하는 것이 가장 좋은 선택일 것이다.

이렇게 우리는 일상생활에서도 자연스럽게 적합한 용기 및 포장 방식을 택하고 물건을 담는다.

Java에서 변수도 그렇다.

값을 저장하기 위해 저장하고자하는 값에 걸맞는 타입을 선택해야한다.

내가 숫자 중 "정수"를 저장하고자 한다면 "정수"에 맞는 변수 타입을(상자)를 선택해야하며 저장하고자 하는 정수의 크기에 따라 상자의 크기를 선택하면 된다. "실수"를 저장하고자 한다면 "실수"에 맞는 타입, 문자라면 문자에 맞는 타입을 선택하면 된다.

int year = 2024;
System.out.println("올해:" + year);

2024 라는 숫자를 담기위해 정수형 int 타입 을 선택하고 변수명을 "year **"이라 짓고 값을 넣어줬다. 그 후 출력하는 메소드를 통해 "올해 : 2024" 라는 결과를 출력할 수 있다. 분명 나는 올해 : year 이라고 작성했지만 **year은 int year = 2024; 라는 초기화 과정을 통해 year 이라는 변수는 2024라는 값을 가지고있다. 그래서 컴퓨터에서는 올해 : year을 올해 : 2024로 출력하는 것이다.

쉽게 이해하자면 이런 과정이지만 ** 더 좋은 개발자가 되기 위해선 이것보다 세부적으로 컴퓨터의 시점에서 이해를 해야한다. **

심화(처음이면 건너뛰기)

1. 자바 소스코드(.java) 를 작성한다
2. 자바 컴파일러가 자바 소스코드(.java)파일을 읽어 바이트코드(.class)코드로 컴파일 한다.
3. 컴파일된 바이트코드(.class)를 JVM의 클래스로더(Class Loader)에게 전달한다.

JVM이란 자바 가상 머신 JVM(Java Virtual Machine)은 자바 프로그램 실행환경을 만들어 주는 소프트웨어

[출처 : https://blog.naver.com/chlwlstjd10/222239136195 ]

클래스 로더는 .class 파일을 묶어서 JVM이 운영체제로부터 할당받은 메모리 영역인 Runtime Data Area로 적재한다.

런타임 데이터 영역 (Runtime Data Area) 런타임 데이터 영역은 JVM의 메모리 영역으로 자바 애플리케이션을 실행할 때 사용되는 데이터들을 적재하는 영역이다.

앞서 변수에 저장한 값은 런타임 데이터 영역에 저장되어 있다가 클래스 로더가 클래스 파일을 로드하는 과정에서 저장된 변수 값을 가져오게 된다.

사용자 실행(run) -> 컴파일러가 클래스 파일로 변환 -> 클래스 로더가 클래스 파일을 메모리에 로딩하고, JVM이 이를 실행한다 JVM에서 실행되어 그 안에 있는 시스템 호출이 이루어지면서 우리에게 보여지게 되는 것이다.

시스템호출 예시) System.out.println()

자료형 사용 예시

byte age = 25;
short year = 2023;
int population = 1000000;
long universeAge = 13800000000L; // L을 붙여 long형임을 명시

float pi = 3.14f; // f를 붙여 float형임을 명시
double avogadro = 6.02214076e23;

char initial = 'A';

boolean isJavaFun = true;

변수사용 예시

// 변수 선언
int num; // 정수형 변수 num 선언
double price = 19.99; // 실수형 변수 price 선언과 초기화

// 변수 값 할당
num = 10;
price = 29.99;

// 변수 사용
System.out.println("숫자: " + num);
System.out.println("가격: $" + price);

// 연산
int result = num + 10;
System.out.println("결과: " + result);

컴퓨터는 왼쪽에서부터 한 줄 한 줄 읽기 때문에

  int box;
  System.out.println("변수는: " + box);
  box = 100;

  **Error**

왼쪽에서부터 읽어보자.

1. int 타입이라고 선언 후 변수 명을 box로 지었음
2. 컴퓨터는 int타입의 box라는 이름의 메모리를 할당 -> 공간은 만들어둿지만 아직 값은 할당받지 못했음.
3. System.out.println 메소드를 통해 출력하고자하는데 "변수는 :" 여기까지는 문자열이니까 그냥 출력, 그 이후 box가 읽힘
4. box를 읽은 컴퓨터는 box라는 변수가 있나 찾아봄. 그러나 box라는 공간은 찾았으나 값이 없음. 컴퓨터는 가져오지못했고 이 과정에서 에러 발생. --여기서 종료 --

• box = 100; 이 3번 째 줄에 나왔으나 이미 2번째 줄에서 오류로 인해 진행하지 못했음.

🖥연산자(Operator)

연산자 사용예시

    import java.util.Scanner;

    Scanner input = new Scanner(System.in);

    System.out.println("비교할 첫 번째 숫자를 입력하시오");
    int num1 = input.nextInt();

    System.out.println("비교할 첫 번째 숫자를 입력하시오");
    int num2 = input.nextInt();

    System.out.println("** 두 숫자를 비교하겠습니다 **");

    boolean result1 = num1 == num2;
    boolean result2 = num1 > num2;
    boolean result3 = num1 < num2;
    boolean result4 = num1 >= num2;
    boolean result5 = num1 <= num2;
    boolean result6 = num1 != num2;

    System.out.println("입력한 숫자가 같은지 확인하겠습니다. : " + result1);
    System.out.println("첫 번째 입력한 숫자가 더 큰 숫자인지 확인하겠습니다.: " + result2);
    System.out.println("첫 번째 입력한 숫자가 더 작은 숫자인지 확인하겠습니다.: " + result3);
    System.out.println("첫 번째 입력한 숫자가 크거나 같은지 확인하겠습니다.: " + result4);
    System.out.println("첫 번째 입력한 숫자가 작거나 같은지 확인하겠습니다.: " + result5);
    System.out.println("입력한 두 숫자가 다른지 확인하겠습니다.: " + result6);

연산자를 이용하여 변수끼리 간단한 비교를 할 수 있으며 추후 조건문이나 반복문 등에서 굉장히 많이 사용된다.

논리연산자 사용예시

// 논리연산자
    // or 연산자, 둘 중 하나라도 true 이면 true 반환.
    boolean ggg = 1 > 2 || 2 == 2;
    System.out.println(ggg);

    // and 연산자, 둘 다 true여야 true를 반환
    boolean hhh = 1 > 2 && 2 == 2;
    System.out.println(hhh);

    // xor 연산자, 둘 중 하나만 true이여야 true를 반환.
    boolean iii = 1 > 2 ^ 2 == 2;
    System.out.println(iii);

1. Spring Initializr 설정하기

1-1. Spring Initializr란?

• String initializr은 스프링부트를 기반으로 spring관련 프로젝트를 생성해주는 사이트로 프로젝트를 다운하여 쉽게 사용이 가능하도록 만든 사이트.
• IDE에서 직접 New Project를 생성할수도 있지만 과정이 귀찮기 때문에 Spring Iinitializr을 사용했다.

🔎주소: https://start.spring.io/

사이트에 접속하면 다음과 같은 화면이 나타난다.

Project Gradle VS Maven

Gradle 이 더 성능이 좋으나 아직 많은 사람들이 전통적인 Maven에 익숙한 점 때문에 협업을 위해 Maven을 택하기도 함. 이번 포스팅은 Maven으로 셋팅.

구조 설명

• Project: SpringBoot를 빌드하고 배포하는 방식이다.
• Language: 사용하고자하는 언어를 선택하면 된다. (일반적으로 Java가 사용됨)
• SpringBoot: 버전을 선택해 준다. SNAPSHOT은 데모버전이고 높은 버전은 높은 자바버전을 필요로 하므로 SNAPSHOT이 없는 낮은 버전을 선택하는 것이 좋다.
• Group: 기업 도메인명
• Artifact: 빌드되어 나올 결과물
• Name: 프로젝트명 (일반적으로 Artifact와 동일하게 사용함)
• Description: 설명Package name: 패키지이름(Group과 Artifact를 설정하면 자동으로 만들어 준다.)
• Packaging: 기본이 .jar이다. (spring framework와 model2는 .war를 사용한다.

2. Dependencies 추가하기

SpringWeb (중요) 웹 서비스를 만드는 데 가장 중요한 모듈이다. 내장 톰캣 뿐 아니라 Spring MVC 패턴을 구현하는 데 필요한 기능이 대부분 들어있다. REST API서버를 만든다면 필수이다. Lombok (추천, 거의 필수) Class에 getter, setter, toString, equals, constructor 등의 메소드들을 간단한 어노테이션(@)으로 지정해줄 수 있어 자바특유의 장황한 클래스를 줄여준다. Spring Data JPA ( 필수 ) JPA는 Java Persistence API라고 하는데 자바 ORM기술의 토대를 이루는 기술 명세이다. Spring에서 DB를 다루는 거의 표준 기술인 상황이다. Class Entity를 마치 DB처럼 사용할 수 있는 매우 유용한 도구이다. (학습량 또한 엄청나다.) MySQL Driver MySql의 드라이버를 자동으로 연결해준다. Spring Configuration Processor 스프링 개발을 하면서 application.yml 또는 application.properties를 작성할 때 추천을 받고 싶을 때 이 기능을 사용하면 된다. Spring Boot DevTools (취향에 따라 사용) DevTools는 스프링 어플리케이션을 띄웠을 때, 재시작하지 않고 코드의 변화를 반영시킬 때 사용한다. HTML 파일의 경우 LiveReload 기능을 제공하여 저장하면 그 변화가 페이지에 바로 나타나게 할 수도 있다. (참고 velog.io/@bread_dd/Spring-Boot-Devtools) Thymeleaf View 템플릿인 Thymeleaf를 사용할 수 있도록 하는 모듈이다. Spring에서 많이 사용하는 JSP는 Spring Boot에서는 잘 사용하지 않는다.

Add Dependencies 를 클릭하여 필요한 의존성을 추가.

3. IntelliJ 에서 Open

그럼 프로젝트 구조가 이렇게 생성되는 것을 볼 수 있다.

우측 상단에 Run을 실행시켜보면 콘솔을 통해 실행결과를 알 수 있다. 여기서 의존성에 외부 DB 의존성을 주입했다면 application.properties 또는 application.yml 에 외부 DB에 대한 정보들을 입력해줘야한다.

예시 ('application.properties')

spring.datasource.url=jdbc:mysql://localhost:3306/mydb
spring.datasource.username=myuser
spring.datasource.password=mypassword
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver

예시 ('application.yml')

spring:
  datasource:
    url: jdbc:mysql://localhost:3306/mydb
    username: myuser
    password: mypassword
    driver-class-name: com.mysql.cj.jdbc.Driver

4. src/main/java 폴더 내 TestController를 생성하여 "Hello, world!"

를 출력하는 코드를 작성하여 정상적으로 작동하는지 확인한다.

package com.StudySpringBoot.jojal;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

@Controller
public class TestController {

    @RequestMapping("/")
    @ResponseBody
    public String helloWorld() {
        return "Hello, world!";
    }
}

@Controller 어노테이션으로 Controller임을 명시하고 @RequestMapping("/") 어노테이션으로 기본 요청 ( / )을 받도록 함. @ResponseBody 어노테이션을 사용하게 되면 ViewResolver 대신에 HttpMessageConverter가 동작하여 view를 반환하는 게 아닌 문자 내용을 직접 반환.

IntelliJ에서 Run -> Web에서 http://localhost:8080/ 으로 접속하여 서버연결 확인!

Run 버튼이 비활성화 되어있을 때 해결방법

Run -> Edit Contfiguration 클릭

좌측 상단 +버튼 선택 후 서버 선택, Spring boot 내장 서버를 사용하기에 Application 선택.

Name 설정과 Main Class 를 선택해주면 Run 버튼이 활성화 될 것이다.

1. Maven 프로젝트 생성하기 2. pom.xml에 depency 설정으로 spring framework 추가하기 3. web.xml 설정 4. servlet-context.xml 설정 (intellij에서는 dispatcher-servlet.xml) 5. root-context.xml 설정 (intellij에서는 applicationContext.xml) 6. 서버 설정 (Tomcat) 7. Controller 생성 8. views 폴더 생성하여 jsp 파일 관리하기 9. 서버 실행 및 url 매핑에 따른 dispatcher Servlet 정상 동작 여부 확인

1. Maven 프로젝트 생성하기

Flie -> New -> Project 클릭

Name : 저장할 폴더명 Location : 저장할 위치 JDK : 사용하는 JDK 추가 (현 프로젝트는 Java 1.8 사용) *원하는 JDK 가 없을 때 JDK 부분 클릭 시 Add JDK 버튼이 있는데 다운 받은 JDK 폴더를 선택 후 OK 버튼 누르면 된다. Archetype : org.apache.maven.archetypes:maven-archetype-webapp 해당 주소 붙여넣기 Advanced Settings : 프로젝트에 맞게 변경해서 사용

2. pom.xml에 depency 설정으로 spring framework 추가하기

pom.xml 파일에 들어가서 코드 붙여넣기

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">
  <modelVersion>4.0.0</modelVersion>
  <groupId>org.example</groupId>
  <artifactId>spring_example</artifactId>
  <packaging>war</packaging>
  <version>1.0-SNAPSHOT</version>
  <name>spring_example Maven Webapp</name>
  <url>http://maven.apache.org</url>

  <dependencies>

    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-webmvc</artifactId>
      <version>4.0.4.RELEASE</version>
    </dependency>

    <dependency>
      <groupId>junit</groupId>
      <artifactId>junit</artifactId>
      <version>3.8.1</version>
      <scope>test</scope>
    </dependency>
  </dependencies>

  <build>
    <plugins>
      <plugin>
        <artifactId>maven-compiler-plugin</artifactId>
        <version>3.10.1</version>
        <configuration>
          <source>1.8</source>
          <target>1.8</target>
        </configuration>
      </plugin>
    </plugins>
  </build>


</project>

<version>4.0.4.RELEASE</version>

Version 태그는 4.0.4 이 사용되었지만 4.0.4 버전은 굳이 따라하지 않아도 된다. 본인이 원하는 버전을 선택할 것

3. web.xml 설정

프로젝트 폴더 / src / main / webapp / WEB-INF 폴더에 web.xml 파일에 아래 코드를 붙여넣자.

<!DOCTYPE web-app PUBLIC
        "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN"
        "http://java.sun.com/dtd/web-app_2_3.dtd" >

<web-app>
  <display-name>Archetype Created Web Application</display-name>
  <context-param>
    <param-name>contextConfigLocation</param-name>
    <param-value>/WEB-INF/applicationContext.xml</param-value>
  </context-param>
  <listener>
    <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
  </listener>
  <servlet>
    <servlet-name>dispatcher</servlet-name>
    <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
    <load-on-startup>1</load-on-startup>
  </servlet>
  <servlet-mapping>
    <servlet-name>dispatcher</servlet-name>
    <url-pattern>/</url-pattern>
  </servlet-mapping>
</web-app>

4. servlet-context.xml 설정 (intellij에서는 dispatcher-servlet.xml)

src/main/webapp/WEB-INF 폴더 내에 dispatcher-servlet.xml 파일을 생성 후 코드 넣기.

*파일 생성 방법: WEB-INF 폴더 우클릭 후 New->File 을 선택 후 dispatcher-servlet.xml 이라고 짓기.

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xmlns:context="http://www.springframework.org/schema/context"
       xmlns:mvc="http://www.springframework.org/schema/mvc"
       xsi:schemaLocation="http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc-4.0.xsd http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-4.0.xsd http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-4.0.xsd">

    <mvc:annotation-driven/>
    <context:component-scan base-package="controller" />

    <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
        <property name="prefix" value="/WEB-INF/views/" />
        <property name="suffix" value=".jsp" />
    </bean>
</beans>

5. root-context.xml 설정 (intellij에서는 applicationContext.xml)

src/main/webapp/WEB-INF 폴더 내에 applicationContext.xml 파일을 생성 후 코드 넣기.

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xsi:schemaLocation="http://www.springframework.org/schema/beans https://www.springframework.org/schema/beans/spring-beans.xsd">

    <!-- Root Context: defines shared resources visible to all other web components -->

</beans>

6. 서버 설정 (Tomcat)

shift 두번 누른후 All tap 에서 plugins 를 들어간다.

Tomcat 을 검색하여 Smart Tomcat 을 install.

톰캣 서버 다운로드,

원하는 위치에 압축을 풀고 IntelliJ에서 Run - Edit Configurations 선택

좌측 상단에 + 버튼 클릭 후 Smart TomCat 추가.

Name : 알아서 짓기! ( Tomcat {버전} 형식으로 지정했음 )

Tomcat Server : 아까 압축 푼 Tomcat 폴더 선택

Context path: 기본 셋팅주소 (프로젝트 명으로 자동 셋팅 됨) *기본 셋팅 요청 주소를 변경하고 싶으면 임의로 변경할 것

나머지도 다 자동 셋팅.

서버 준비는 완료가 되었고 이제 웹 브라우저의 요청을 받기만 하면 됨.

7. Controller 생성

src/main 아래에 "java" 디렉토리 생성.

java 디렉토리 즉, java 폴더 내에 controller 패키지 생성 -> MainController 클래스 생성 후 코드 넣기

package controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
public class MainController {
    public MainController() {
    }

    @RequestMapping({"/test"})
    public String main() {
        return "index";
    }
}

8. views 폴더 생성하여 jsp 파일 관리하기

WEB-INF 폴더 내 views 폴더를 생성하여 index.jsp 를 옮기기. 모든 jsp 파일은 views 폴더 내에서 관리

9. 서버 실행 및 url 매핑에 따른 dispatcher Servlet 정상 동작 여부 확인

주소창에 localhost:8080/기본 Context Path 주소 / 요청주소 를 입력하면 정상적으로 출력됨! 기본 Context Path 주소를 모르겠다면 위에 꼼꼼히 다시 읽어보기.

http://localhost:8080/SpringMVC/test 

localhost:8080 폼캣 포트 번호를 통한 서버 접근

/SpringMVC tomcat 서버 설정할 때 기본 요청주소 즉, Context Path: 에 적힌 요청 주소를 서버실행 시 무조건 실행.

/test Web Brower에 요청 주소, Main Controller 에서 @RequestMapping 으로 /test 요청을 받아서 index로 return

 @RequestMapping({"/test"})
    public String main() {
        return "index";
    }

index 만 붙여도 dispatcher-servlet.xml 에서 설정된 셋팅으로 views 폴더 내 .jsp 파일을 찾아준다.

<bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
        <property name="prefix" value="/WEB-INF/views/" />
        <property name="suffix" value=".jsp" />
    </bean>

그래서 index 만 요청하면 결국 /WEB-INF/views/index.jsp 을 자동으로 맵핑한다.

페이지가 404 Error 가 떠서 찾을 수 없을 경우 dispatcher-servlet.xml 에서 기본적으로 어느 루트를 요청하고 있는지, 그 요청한 루트에 return 하고자하는 .jsp 파일이 존재하는지 확인할 것.

1. 컨트롤러에서 요청받아 처리하기

@Controller
public class UserController {

    @PostMapping("/login")
    public String login(@RequestParam("user_id") String user_id, @RequestParam("user_pw") String user_pw, HttpSession session, Model model) {
        boolean success = userService.login(user_id, user_pw);
        if (success) {
            session.setAttribute("LoginUser", user_id);
            return "redirect:/index";
        } else {
            model.addAttribute("LoginError", "아이디 또는 비밀번호가 올바르지 않습니다.");
            return "Log_in";
            }
        }
    }

2. Service interfaceclass 에 메소드 선언

public interface UserService {
  boolean login(String user_id, String user_pw);
  }

3. ServiceImpl 에서 메소드 구현하기

@Service
public class UserServiceImpl implements UserService {

    @Autowired
    private UserMapper userMapper;

    @Override
    public boolean login(String user_id, String user_pw) {
        UserBean userBean = userMapper.findByUser_id(user_id);
        if (userBean != null && userBean.getUser_pw().equals(user_pw)) {
            return true;
        }
        return false;
        }
     }

4. Mapper.java 에서 메소드 선언

@Mapper
public interface UserMapper {
    UserBean findByUser_id(@Param("user_id") String user_id);
    }

5. Mapper.xml 에서 쿼리문 사용

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE mapper
  PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
  "http://mybatis.org/dtd/mybatis-3-mapper.dtd">

<mapper namespace="com.SharePlatformProject.mapper.UserMapper">

    <select id="findByUser_id" parameterType="String" resultType="com.SharePlatformProject.beans.UserBean">
        SELECT *
        FROM user
        WHERE user_id = #{user_id}
    </select>


</mapper>

login.jsp

<%@ page language="java" contentType="text/html; charset=EUC-KR" pageEncoding="EUC-KR"%>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>로그인</title>
  <link rel="stylesheet" href="${pageContext.request.contextPath}/resources/css/Log_in.css">
</head>
<body>
  <div class="container">
    <div class="login form">
      <header>로그인</header>
      <form action="${pageContext.request.contextPath}/login" method="post">
        <input type="text" name="user_id" placeholder="Enter your id">
        <input type="password"  name="user_pw" placeholder="Enter your password">
        <input type="submit" class="button" value="Login">

    <c:if test="${not empty LoginError}">
     <div style="color: red">${LoginError}</div>
    </c:if>

      </form>
      <div class="signup">
        <span class="signup">아직 회원이 아니신가요?
         <a href="${pageContext.request.contextPath}/Join">회원가입하기</a>
        </span>
      </div>
    </div>
  </div>
</body>
</html>

작동 과정

Web Browser 에서 ** /login 요청발생** --> Controller 에서 정의된 @Mapping 으로 /login 에 대한 요청처리 --> @Autowired private UserService userService; 로 Service를 자동연결 --> Service를 구현하는 Impl 에서도 @Autowired private UserMapper userMapper; Mapper를 자동연결 함으로 써 서로 유기적으로 연결되며 이는 Inversion of Control(IoC) 컨테이너의 한 형태인 Dependency Injection(DI) 패턴을 구현한 것.

코드 뜯어보기

Controller Code

1. @PostMapping("/login") 으로 /login에 대한 요청을 받는다.

2. public String login(@RequestParam("user_id") String user_id, @RequestParam("user_pw") String user_pw, HttpSession session, Model model) { }

   
   

(1) @RequestParam("user_id") String user_id 와 @RequestParam("user_pw") String user_pw 을 통해서 브라우저가 전송한 요청 중에서 user_id와 user_pw라는 이름의 파라미터를 각각 메소드 인자 user_id와 user_pw로 받아오도록 지정. 받은 걸로 boolean success = userService.login(user_id, user_pw); 에 전달하여 로그인 로직을 수행한다.

login.jsp 을 확인해보면 input 타입의 name 이 *user_id, user_pw** 로 설정되어있는데 이것을 받아오는 것.

(2) HttpSession session 으로 HttpSession타입의 session객체를 생성하고 boolean success = userService.login(user_id, user_pw); if (success) { session.setAttribute("LoginUser", user_id); return "redirect:/index"; }

boolean 타입으로 결과가 true or flase 가 success에 반환되는데 success가 참이면 session.setAttribute("LoginUser", user_id); 즉, user_id를 session에 setting 하게된다. *session은 브라우저가 종료되기전까지 메모리를 유지한다.

(3) Model model , Model 타입의 model 이라는 객체를 생성하고

else { model.addAttribute("LoginError", "아이디 또는 비밀번호가 올바르지 않습니다."); return "Log_in"; } boolean 타입으로 결과 즉, success에 담긴 결과가 거짓일 시 model 객체에 addAttribute("LoginError", "아이디 또는 비밀번호가 올바르지 않습니다."); "LoginError" 라는 이름으로 "아이디 또는 비밀번호가 올바르지 않습니다." 값을 저장 후 View 에서 "LoginError" 에 접근하여 사용할 수 있다.

Service Code, ServiceImpl Code

Service 에서 boolean타입의 login이라는 메소드를 선언하고 받을 파라미터 입력

boolean login(String user_id, String user_pw);

ServiceImpl 에서 Service에 선언된 메소드를 구현

 @Override
    public boolean login(String user_id, String user_pw) {
        UserBean userBean = userMapper.findByUser_id(user_id);
        if (userBean != null && userBean.getUser_pw().equals(user_pw)) {
            return true;
        }
        return false;
    }

@Override 로 구현했음을 명시적으로 표현하고 UserBean 타입의 userBean 객체를 생성하고 userBean에는 userMapper.findByUser_id(user_id); 이 값을 넣는다. if, 만약 findByUser_id(user_id) 이 null 이 아니면서 userBean.getUser_pw().equals(user_pw), user_pw가 getUser_pw() 와 일치하는 경우 true를 리턴하고 조건에 만족하지 못한다면 false를 반환한다.

Mapper.java, Mapper.xml

Mapper.java 에 xml과 연동할 메소드를 선언

 UserBean findByUser_id(@Param("user_id") String user_id);

Mapper.xml 에 id가 findByUser_id 인 user_id를 조회하는 select문을 사용

    <select id="findByUser_id" parameterType="String" resultType="com.SharePlatformProject.beans.UserBean">
        SELECT *
        FROM user
        WHERE user_id = #{user_id}
    </select>

본 과정은 MyBatis 연결이 된 상태를 가정하여 진행되었음.

아래 코드는 본 과정에서 사용된 UserBean 코드

package com.SharePlatformProject.beans;

import javax.validation.constraints.Max;
import javax.validation.constraints.Min;
import javax.validation.constraints.NotBlank;
import javax.validation.constraints.Pattern;
import javax.validation.constraints.Size;

public class UserBean {

    @NotBlank(message = "사용자 이름은 필수 입력 값입니다.")
    @Size(min = 2, max = 50, message = "사용자 이름은 2자 이상 50자 이하이어야 합니다.")
    private String user_name;
    //
    @NotBlank(message = "사용자 ID는 필수 입력 값입니다.")
    @Pattern(regexp = "^[A-Za-z0-9_]{5,20}$", message = "사용자 ID는 5-20자의 알파벳, 숫자, 밑줄(_)만 가능합니다.")    
    private String user_id;
    //
    @NotBlank(message = "비밀번호는 필수 입력 값입니다.")
    @Size(min = 8, message = "비밀번호는 최소 8자 이상이어야 합니다.")
    private String user_pw;
    //
    @NotBlank(message = "비밀번호 확인은 필수 입력 값입니다.")
    private String user_pw2;
    //
    @Min(value = 18, message = "최소 나이는 1살입니다.")
    @Max(value = 150, message = "최대 나이는 120살입니다.")
    private int user_age;

    //   ---getter and setter---


    public String getUser_name() {
        return user_name;
    }
    public void setUser_name(String user_name) {
        this.user_name = user_name;
    }
    public String getUser_id() {
        return user_id;
    }
    public void setUser_id(String user_id) {
        this.user_id = user_id;
    }
    public String getUser_pw() {
        return user_pw;
    }
    public void setUser_pw(String user_pw) {
        this.user_pw = user_pw;
    }
    public String getUser_pw2() {
        return user_pw2;
    }
    public void setUser_pw2(String user_pw2) {
        this.user_pw2 = user_pw2;
    }
    public int getUser_age() {
        return user_age;
    }
    public void setUser_age(int user_age) {
        this.user_age = user_age;
    }

}

로그인 기능 구현 끝!

1. 회원가입 html에서 form 태그를 사용하여 회원가입 구조를 만들어준다.

2. form 태그의 method를 post 방식으로 정의.

form 으로 작성하고 form에 작성된 내용을 post 메소드로 정의해주고 (method="post")
잠깐, post 방식이란?

<form> 태그를 사용할 때 데이터를 서버로 전송하는 방법 중 하나

POST 방식의 특징

1. 데이터 보안 : POST 방식은 데이터를 HTTP 메시지의 바디 부분에 포함시켜 전송하기 때문에 URL에 정보가 노출되지 않는다. 이는 보안상의 이점을 제공하고 데이터가 주소 표시줄에 표시되지 않기 때문에 비밀번호나 개인 정보 같은 민감한 데이터를 전송할 때 유용하다.

2. 데이터 크기 제한 없음 : POST 방식은 GET 방식과 달리 전송할 수 있는 데이터의 양에 대한 제한이 없다. 따라서 많은 양의 데이터를 전송해야 할 때 적합하다.

3. 데이터 타입 제한 없음 : POST 방식은 텍스트 데이터뿐만 아니라, 파일과 같은 바이너리 데이터도 전송할 수 있다.

본론으로 돌아와서, 이걸 DB에 저장하기 위해 저장소 역할로 먼저 VO 또는 Bean 클래스를 정의 하고 필요한 타입과 변수명을 선언 한 뒤 Getter and Setter(Source-Generate-getter and setter) 작업을 해준다.

*Mybatis 설정은 제외하였음, 설정 및 Mapper 연동은 다음 포스팅에서 다룰 예정.

3.Controller 에서 @PostMapping으로 요청 받기.

@PostMapping("/Join_Test")
public Stirng Join_Test(){
    //수행할 로직 작성
}

코드설명 :

JSP에서 회원가입 버튼을 눌렀을 때 발생하는 Join_Test 호출을 PostMapping으로 받은 다음 매서드를 실행시키게 된다. 메서드가 실행되면서 ( )안에 있는 파라미터 값들을 주입받게 되는데 UserBean 타입을 joinUserBean으로 바인딩하고 userBean이라는 이름의 모델에 추가한다. 그 후 @Valid으로 joinUserBean 객체의 검증을 수행한다. ( joinUserBean객체의 타입인 UserBean 클래스에 선언된 어노테이션을 기반으로 검사수행 ) BindingResult 타입을 result객체로 설정하고 검증 실패에 대한 결과가 이 BindingResult 객체에 저장된다. Model model에서 Model 객체를 model로 설정하고 model.addAttribute를 통해 데이터를 View로 전달하는 기능을 한다. model.addAttribute("idError", "이미 사용 중인 아이디입니다.") 를 통해 view에선 idError 이름으로 접근이 가능해진다.

@ModelAttribute("파라미터명") 주요 기능

요청 파라미터 바인딩 : HTTP 요청에 포함된 파라미터들을 자바 객체에 자동으로 바인딩한다. 이 때 @ModelAttribute가 붙은 파라미터는 요청 파라미터의 이름과 객체의 필드 이름이 매핑되어 자동으로 해당 필드에 값을 설정한다.

모델 데이터 추가 : 메소드가 호출될 때 @ModelAttribute 어노테이션으로 정의된 객체는 자동으로 모델에 추가된다. 이렇게 모델에 추가된 객체는 뷰에서 사용할 수 있게 되어, 폼 데이터의 입력, 검증 실패 시 재입력 등의 처리가 용이해진다.
즉, @ModelAttribute("userBean") UserBean joinUserBean에서 UserBean타입의 joinUserBean이라는 객체가 "userBean"이라는 이름으로 저장된다.

*JSP에서 modelAttribute로 접근한 모습

4. View에서 userBean이라는 파라미터명을 받아서 userBean에 저장되어있는 UserBean타입의 joinUserBean 객체를 사용한다.

view는 구현하고자하는 코드에 따라 입력 폼, UserBean에 쓰인 객체에 따라 입력이 달라지니 참고 정도로만 사용하자. 이 프로젝트에서 사용된 Bean은 간단하게 이름, 아이디, 비밀번호, 비밀번호 확인 나이이다.

    @NotBlank(message = "사용자 이름은 필수 입력 값입니다.")
    @Size(min = 2, max = 50, message = "사용자 이름은 2자 이상 50자 이하이어야 합니다.")
    private String user_name;
    //
    @NotBlank(message = "사용자 ID는 필수 입력 값입니다.")
    @Pattern(regexp = "^[A-Za-z0-9_]{5,20}$", message = "사용자 ID는 5-20자의 알파벳, 숫자, 밑줄(_)만 가능합니다.")    
    private String user_id;
    //
    @NotBlank(message = "비밀번호는 필수 입력 값입니다.")
    @Size(min = 8, message = "비밀번호는 최소 8자 이상이어야 합니다.")
    private String user_pw;
    //
    @NotBlank(message = "비밀번호 확인은 필수 입력 값입니다.")
    private String user_pw2;
    //
    @Min(value = 18, message = "최소 나이는 1살입니다.")
    @Max(value = 150, message = "최대 나이는 120살입니다.")
    private int user_age;

        //   ---getter and setter---

📌 MVC구조