JSX(JavaScript XML)는 JavaScript와 HTML을 혼합하여 사용하는 문법으로, React와 같은 라이브러리에서 주로 사용됩니다. JSX를 사용하면 UI를 직관적이고 간편하게 작성할 수 있습니다. 아래에서는 JSX의 사용법과 주의사항을 예제와 함께 설명해드리겠습니다.

JSX 사용법

예제

import React from 'react';

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

function App() {
  return (
    <div>
      <Welcome name="Sara" />
      <Welcome name="Cahal" />
      <Welcome name="Edite" />
    </div>
  );
}

export default App;

위 예제에서는 Welcome이라는 컴포넌트를 정의하고, App 컴포넌트에서 여러 번 사용하고 있습니다. Welcome 컴포넌트는 props.name을 통해 전달된 값을 사용하여 인사말을 표시합니다.

사용법

1. JSX 구문 사용: JSX는 HTML과 매우 유사한 구문을 사용하여 직관적으로 UI를 구성할 수 있습니다.
2. jsx

   const element = <h1>Hello, world!</h1>;
   

3. 자바스크립트 표현식 포함: JSX 내부에서는 중괄호 {}를 사용하여 JavaScript 표현식을 포함할 수 있습니다.
4. jsx

   const name = 'Sara';
   const element = <h1>Hello, {name}</h1>;
   

5. 컴포넌트 사용: JSX에서는 사용자 정의 컴포넌트도 사용할 수 있습니다. 컴포넌트 이름은 항상 대문자로 시작해야 합니다.
6. jsx

   function Welcome(props) {
     return <h1>Hello, {props.name}</h1>;
   }
   

7. HTML 속성 사용: JSX에서 HTML 속성을 사용하여 요소의 속성을 설정할 수 있습니다.
8. jsx

   const element = <div tabIndex="0"></div>;
   

9. 자식 요소 포함: JSX 태그는 다른 요소를 자식으로 포함할 수 있습니다.
10. jsx

    const element = (
      <div>
        <h1>Hello!</h1>
        <h2>Good to see you here.</h2>
      </div>
    );
    

주의사항

1. 단일 부모 요소: 모든 JSX 표현식은 단일 부모 요소로 감싸야 합니다.
2. jsx

   return (
     <div>
       <h1>Hello, world!</h1>
       <h2>Good to see you here.</h2>
     </div>
   );
   

3. JavaScript와 HTML 혼합: JSX는 JavaScript와 HTML을 혼합하여 사용하므로, 중괄호 {}를 사용하여 JavaScript 표현식을 포함할 수 있습니다.
4. jsx

   const name = 'Sara';
   return <h1>Hello, {name}</h1>;
   

5. HTML 속성: JSX에서는 HTML 속성을 카멜 표기법으로 사용해야 합니다. 예를 들어, class 대신 className을 사용합니다.
6. jsx

   const element = <div className="container"></div>;
   

7. 컴포넌트 이름: JSX에서 컴포넌트 이름은 반드시 대문자로 시작해야 합니다. 소문자로 시작하는 이름은 HTML 태그로 인식됩니다.
8. jsx

   function Welcome(props) {
     return <h1>Hello, {props.name}</h1>;
   }
   

9. Self-closing 태그: 내용이 없는 요소는 반드시 self-closing 태그로 작성해야 합니다.
10. jsx

    const element = <img src="image.jpg" alt="description" />;
    

JSX를 사용하면 UI를 간편하고 직관적으로 작성할 수 있습니다. 

@RequestBody

기능: 클라이언트에서 전송한 JSON 데이터를 DTO (Data Transfer Object)로 변환하여 컨트롤러 메서드의 매개변수로 전달합니다. 사용 예:

@PostMapping("/api/v1/posts")
public void createPost(@RequestBody PostDto postDto) {
    // JSON 데이터가 postDto로 변환되어 전달됨
}

@PathVariable

기능: URL 경로의 일부인 값을 메서드의 매개변수로 전달합니다. 사용 예:

@GetMapping("/api/v1/posts/{id}")
public Post getPost(@PathVariable Long id) {
    // URL의 {id} 값이 매개변수 id로 전달됨
}

@RequestParam

기능: 쿼리스트링의 값을 메서드의 매개변수로 전달합니다. 사용 예:

@GetMapping("/api/v1/posts")
public List<Post> getPosts(@RequestParam(required = false) String category) {
    // 쿼리스트링의 category 값이 매개변수로 전달됨
}

맞습니다, @RequestParam은 쿼리스트링의 값을 가져올 때 사용됩니다.

@Required

기능: 특정 필드나 메서드 매개변수가 필수임을 명시합니다. Spring에서는 @Autowired와 같이 의존성 주입에 사용될 수 있습니다. 사용 예:

@Required
private PostRepository postRepository;

@RequestHeader

기능: HTTP 요청 헤더의 값을 메서드의 매개변수로 전달합니다. 사용 예:

@GetMapping("/api/v1/posts")
public List<Post> getPosts(@RequestHeader("Authorization") String token) {
    // 요청 헤더의 Authorization 값을 매개변수로 전달함
}

웹 개발 및 인증 절차와 관련된 다양한 기술과 개념이 손글씨로 적혀 있습니다. 주요 내용은 다음과 같습니다:

• React: 사용자 인터페이스를 구성하는 프론트엔드 라이브러리입니다.
• Nginx: 고성능 웹 서버 및 리버스 프록시 서버로 사용됩니다.
• 4요 웹서버: 네 개의 주요 웹 서버를 의미하는 것 같습니다.
• Http 요청하고/Http 응답하기: HTTP 요청과 응답을 처리하는 과정입니다.
• Http 요청 body: 요청 본문에 대한 내용입니다.
• "Authorization...": 인증 헤더를 사용한 요청입니다.
• JWT 토큰: JSON Web Token으로, 인증 및 권한 부여에 사용됩니다.
  • typ JWT: JWT 타입을 지정하는 클레임입니다.
  • claim: JWT에 포함된 정보입니다.
  • Signature: JWT의 무결성을 검증하는 서명입니다.
• App Server: 애플리케이션 서버를 의미합니다.
• Tomcat: Java 서블릿 및 JSP를 실행하는 애플리케이션 서버입니다.
• WAS: Web Application Server, 즉 웹 애플리케이션 서버를 의미합니다.

JWT 동작 방식

1. JWT 생성: 사용자가 로그인하면 서버는 사용자 정보를 기반으로 JWT를 생성합니다. JWT는 헤더(header), 페이로드(payload), 서명(signature)로 구성됩니다.
   • 헤더: 토큰 타입과 알고리즘 정보를 포함합니다.
   • 페이로드: 사용자 정보(클레임)를 포함합니다.
   • 서명: 비밀키를 사용하여 JWT의 무결성을 검증합니다.
2. JWT 전송: 생성된 JWT는 클라이언트(브라우저)에 전송되고, 클라이언트는 이를 저장(예: 로컬 스토리지)합니다.
3. JWT 사용: 클라이언트는 이후의 요청에 JWT를 포함하여 서버에 보냅니다. 주로 Authorization 헤더에 Bearer 토큰 형식으로 전송됩니다.
4. JWT 검증: 서버는 요청을 받을 때마다 JWT의 서명을 검증하여 토큰의 유효성을 확인합니다. 유효한 경우, 페이로드에 포함된 사용자 정보를 통해 권한을 부여하거나 거부합니다.

예제 시나리오

1. 사용자가 로그인합니다.
2. 서버가 JWT를 생성하여 클라이언트에 전송합니다.
3. 클라이언트가 JWT를 저장합니다.
4. 이후의 모든 요청에 클라이언트가 JWT를 포함하여 서버에 보냅니다.
5. 서버가 JWT를 검증하고 요청을 처리합니다.

SecurityContextHolder는 Spring Security 프레임워크에서 사용자 인증과 권한 관리를 위해 중요한 역할을 합니다. 이 포스팅에서는 SecurityContextHolder의 사용목적, 기능, 그리고 사용방법을 설명하겠습니다.

1. 사용목적

SecurityContextHolder는 현재 요청의 컨텍스트에서 인증 정보를 쉽게 가져올 수 있도록 해줍니다. 이를 통해 애플리케이션에서 사용자의 ID나 권한 정보를 확인할 수 있습니다1.

2. 기능

• 현재 사용자 인증 정보 관리: 현재 요청의 컨텍스트에서 인증 정보를 쉽게 가져올 수 있습니다.
• 요청 스레드 기반의 보안 처리: 요청 스레드의 메모리에 인증 정보를 저장하여 무상태 환경에서도 사용할 수 있습니다.
• 스프링과의 통합: 다양한 보안 작업을 수행하며, 인증 및 권한 관리를 일관되게 처리할 수 있습니다.

3. 사용방법

SecurityContextHolder는 기본적으로 ThreadLocal을 사용하여 현재 스레드의 메모리에 인증 정보를 저장합니다. 이를 통해 각 요청은 독립적인 인증 정보를 가질 수 있습니다1.

예제 코드

import org.springframework.security.core.Authentication;
import org.springframework.security.core.context.SecurityContextHolder;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;
import com.example.demo.dto.UserDTO;

@RestController
public class UserController {
    @GetMapping("/api/current-user")
    public UserDTO getCurrentUser() {
        Authentication authentication = SecurityContextHolder.getContext().getAuthentication();
        if (authentication != null && authentication.getPrincipal() instanceof UserDTO) {
            return (UserDTO) authentication.getPrincipal();
        } else {
            throw new RuntimeException("인증된 사용자가 없습니다.");
        }
    }
}

이 코드는 컨트롤러에서 현재 인증된 사용자의 정보를 가져오는 방법을 보여줍니다. SecurityContextHolder.getContext().getAuthentication()을 통해 인증 정보를 가져와서 사용자 정보를 반환합니다.