2023.08.23.수.TIL

heeh·2023년 8월 23일

TIL

목록 보기

70/82

2023.08.23.수.TIL

할 것
- 12시 회의
- 개인(코멘트) 코드 작성
- 기술 문제 7번, 면접 단골 질문!

기능 구현 (댓글)

@ModelAttribute

컨트롤러 메서드에서 메서드의 매개변수나 리턴 타입에 사용되며, 주로 데이터를 모델에 바인딩하거나 화면에 전달하기 위해 사용됩니다.

주로 뷰와 컨트롤러 사이에서 데이터를 전달하고자 할 때, @ModelAttribute를 사용하여 데이터를 바인딩하고 이를 뷰에서 사용할 수 있도록 할 수 있습니다.

@ModelAttribute는 컨트롤러 메서드의 매개변수나 리턴 타입에 사용되어 데이터를 모델에 바인딩하거나 뷰로 전달하는 데 사용되는 스프링 프레임워크의 애노테이션입니다.

예제

데이터 클래스 만들기: 먼저 사용자의 이름과 나이를 담을 데이터 클래스를 만들어요.

javaCopy code
public class UserData {
    private String name;
    private int age;

    // Getter와 Setter 메서드도 추가합니다.
}

컨트롤러 만들기: 그 다음, 웹 페이지를 처리할 컨트롤러를 만들어요. 여기서 @ModelAttribute를 사용합니다.
```
javaCopy code
@Controller
public class UserController {

    @GetMapping("/user")
    public String showUserPage(@ModelAttribute("userData") UserData data) {
        return "user-page";  // user-page는 뷰 템플릿의 이름입니다.
    }
}
```
여기서 @ModelAttribute("userData")는 UserData 클래스의 객체를 만들어서 "userData"라는 이름으로 뷰 템플릿에 전달한다는 의미입니다.

뷰 템플릿 만들기: 마지막으로 뷰 템플릿을 만들어서 컨트롤러에서 전달한 데이터를 화면에 표시합니다.

```html
htmlCopy code
<!DOCTYPE html>
<html>
<head>
    <title>User Page</title>
</head>
<body>
    <form>
        <label for="name">Name:</label>
        <input type="text" id="name" name="name" th:value="${userData.name}" /><br>

        <label for="age">Age:</label>
        <input type="text" id="age" name="age" th:value="${userData.age}" /><br>

        <button type="submit">Submit</button>
    </form>
</body>
</html>

```

여기서 **`th:value="${userData.name}"`**와 같은 부분은 **`userData`**라는 이름으로 컨트롤러에서 전달된 데이터를 가져와서 입력 필드에 표시하는 역할을 합니다.

간단히 말해서, @ModelAttribute는 웹 페이지에서 데이터를 보여주고 받아올 때 사용하는 스프링 부트의 도구입니다.

빌더 패턴과 of 사용해보기

CommentResponseDto

public CommentResponseDto(Comment comment) {
        super();
        this.id = comment.getId();
        this.content = comment.getContent();
        this.username = comment.getAuthor().getUsername();
        this.createdAt = comment.getCreatedAt();
        this.modifiedAt = comment.getModifiedAt();
    }

Response도 Builder와 of를 쓴다!?
예제

바꿔주기

public static CommentResponseDto of(Comment comment) {
        return CommentResponseDto.builder()]
                .id(comment.getId())
                .content(comment.getContent())
                .username(comment.getAuthor().getUsername())
                .createdAt(comment.getCreatedAt())
                .modifiedAt(comment.getModifiedAt())
                .build();
    }

Service - public CommentResponseDto createComment

return new CommentResponseDto(savedComment);

바꿔주기

return CommentResponseDto.of(savedComment);

기술 문제 7

💡 브라우저의 작동 방식에 대해서 설명해주세요.

참고

브라우저의 작동 방식

웹 브라우저는 사용자가 인터넷을 통해 웹 페이지를 검색, 표시 및 상호 작용할 수 있도록 도와주는 소프트웨어 애플리케이션입니다. 브라우저는 웹 페이지의 HTML, CSS, JavaScript와 같은 리소스를 다운로드하고 해석하여 사용자가 이해할 수 있는 형태로 렌더링하는 역할을 합니다. 아래는 브라우저의 작동 방식을 간단히 설명한 것입니다.

사용자의 입력 및 URL 해석:
사용자가 주소 표시줄에 웹 페이지 주소(URL)를 입력하거나, 검색 엔진을 통해 검색을 실행하면 브라우저는 해당 URL을 해석하고 요청할 페이지의 위치를 결정합니다.
네트워크 요청:
브라우저는 결정된 URL에 대해 서버로 네트워크 요청을 보냅니다. 이 요청은 HTTP 또는 HTTPS와 같은 프로토콜을 사용하여 이루어지며, 서버는 요청된 리소스를 응답으로 보냅니다.
HTML 다운로드 및 파싱:
브라우저는 서버로부터 받은 HTML 문서를 다운로드하고, 문서를 파싱하여 페이지의 구조와 내용을 이해합니다. 이때 HTML은 웹 페이지의 구조를 정의하는 언어로, 요소와 태그로 구성되어 있습니다.
CSS 다운로드 및 해석:
브라우저는 HTML 파싱 후에 CSS(Cascading Style Sheets)를 다운로드하고 해석합니다. CSS는 웹 페이지의 스타일, 레이아웃, 디자인 등을 정의하는 언어로, HTML과 함께 사용자에게 보기 좋은 형태로 렌더링됩니다.
렌더링 트리 구성:
브라우저는 파싱된 HTML과 해석된 CSS를 기반으로 렌더링 트리(Rendering Tree)를 구성합니다. 이 트리는 화면에 표시될 요소들의 계층 구조를 나타냅니다.
레이아웃 및 페인팅:
렌더링 트리가 구성되면, 브라우저는 각 요소의 크기와 위치를 계산하여 페이지의 레이아웃을 형성하고, 화면에 내용을 그립니다(페인팅). 이 단계에서 GPU를 활용하여 성능을 향상시킬 수 있습니다.
자바스크립트 실행:
브라우저는 페이지에 포함된 JavaScript 코드를 실행합니다. 이를 통해 동적인 기능과 상호 작용이 가능해집니다. JavaScript는 DOM(Document Object Model)을 수정하여 페이지 내용을 동적으로 변경할 수 있는 스크립팅 언어입니다.
이벤트 처리 및 상호 작용:
사용자가 페이지에서 클릭, 입력 등의 이벤트를 발생시키면, 브라우저는 해당 이벤트를 감지하고 처리합니다. JavaScript 코드를 사용하여 이벤트에 대한 동작을 정의하거나, 페이지의 상호 작용을 관리할 수 있습니다.
메모리 관리 및 보안:
브라우저는 웹 페이지를 위해 메모리를 할당하고 관리하며, 보안 상의 이유로 독립된 환경(예: 샌드박스)에서 실행되도록 구성됩니다. 이렇게 함으로써 악의적인 코드로부터 사용자의 시스템을 보호합니다.
캐싱 및 저장:
브라우저는 이미 다운로드한 리소스를 캐싱하여 동일한 페이지를 다시 방문할 때 더 빠른 로딩을 제공할 수 있습니다. 또한 사용자가 페이지 내용을 저장하거나 북마크할 수 있도록 기능을 제공합니다.

이렇게 웹 브라우저는 다양한 단계를 통해 웹 페이지를 가져오고 렌더링하여 사용자가 웹을 탐색하고 상호 작용할 수 있는 환경을 제공합니다.

답

웹 브라우저는 웹 페이지의 코드와 리소스를 다운로드하고 HTML, CSS, JavaScript를 해석하여 화면에 나타냅니다. 사용자 입력과 이벤트를 처리하며 페이지를 동적으로 만들어 상호 작용을 지원합니다. 페이지의 레이아웃과 스타일을 결정하고 내용을 화면에 렌더링하는 역할을 수행하며, 캐싱과 메모리 관리로 성능을 최적화합니다.
- 상호 작용 → 요청과 응답
- 렌더링하는 역할을 수행 → 렌더트리를 생성함으로서
  - 렌더트리 알아보기 렌더트리(Render Tree)는 웹 브라우저가 웹 페이지를 화면에 표시하기 위한 최종 단계 중 하나입니다. 웹 페이지를 렌더링하는 과정은 여러 단계로 나뉘어지며, 그 중 렌더트리 생성은 그 중요한 부분입니다. 렌더트리는 HTML 문서와 CSS 스타일 정보를 결합하여 실제로 화면에 표시될 요소들을 나타내는 트리 구조입니다. 이렇게 생성된 렌더트리를 바탕으로 브라우저는 화면에 요소를 배치하고 레이아웃을 계산하여 최종적으로 화면에 픽셀로 표시하는 작업을 수행합니다.
    1. DOM 트리(DOM Tree) 생성: HTML 문서를 파싱하여 문서 객체 모델(DOM)을 생성합니다. 이 DOM 트리는 HTML 문서의 구조와 요소들을 표현합니다.
    2. CSS 스타일 계산: 브라우저는 CSS 스타일 정보를 파싱하여 스타일 규칙을 계산합니다. 이 규칙은 어떤 요소가 어떤 스타일을 가져야 하는지를 정의합니다.
    3. 렌더트리 생성: DOM 트리와 CSS 스타일 규칙을 기반으로 렌더트리를 생성합니다. 렌더트리는 화면에 실제로 표시되는 요소들만을 포함하며, 레이아웃과 시각적인 속성을 가진 요소들로 구성됩니다.
    4. 레이아웃 계산: 렌더트리의 각 요소들의 크기와 위치를 계산합니다. 이 단계에서 요소들의 상대적인 배치와 화면 내에서의 위치가 결정됩니다.
    5. 페인팅(Paint): 브라우저는 렌더트리를 기반으로 화면에 요소들을 그립니다. 이 단계에서 실제로 화면에 픽셀이 그려지게 됩니다.
      
      이 중에서 렌더트리 생성 단계가 주로 '서버에서 HTML과 CSS를 합치는 것'으로 이해될 수 있습니다. 렌더트리는 실제로 화면에 표시되는 요소들로 이루어져 있기 때문에, 이 단계를 통해 어떤 내용이 화면에 보여지게 될지 결정됩니다.

CS 문제 1

CPU 와 메모리 💡 RAM은 DRAM과 SRAM이 있는데 주기억장치는 주로 무엇입니까?
질문 : RAM은 DRAM과 SRAM이 있는데 주기억장치는 주로 무엇입니까?
- 답변 : DRAM
- 꼬리질문 : RAM의 SRAM는 무엇입니까?
  - 답변 : SRAM(Random Access Memory)는 캐시메모리이며 컴퓨터의 전원이 꺼지면 삭제되는 데이터입니다. → **휘발성 메모리**
  - 꼬리질문 : DRAM과 SRAM 차이점은 무엇입니까?
    - 답변 : SRAM은 접근 속도가 빠르고 캐시 메모리나 레지스터에 사용되는 정적 메모리입니다. DRAM은 주로 대용량의 기억 장치에 사용되며 전원이 계속 공급되더라도 주기적으로 재충전되어야 기억된 내용을 유지할 수 있습니다. SRAM에 비해 상대적으로 접근 속도가 느린 동적 메모리입니다.

heeh

공부하자개발하자으쌰으쌰

이전 포스트

2023.08.22.화.TIL

다음 포스트

2023.08.23.수.TIL

TIL

2023.08.23.수.TIL

기능 구현 (댓글)

@ModelAttribute

빌더 패턴과 of 사용해보기

기술 문제 7

브라우저의 작동 방식

답

CS 문제 1

2023.08.22.화.TIL

2023.08.24.목.TIL

0개의 댓글