동현의 나불나불

homepage

Contact

Copyright © 2024 | Yankos
Contents

Home > Today I Learned > 2026_04_27~2026_05_01 > 2026-04-29 정리본

2026-04-29 정리본
Today I Learned 2026-04-29 - -
web spring html css

공부 키워드

반복자 패턴

컬렉션의 내부구조를 노출하지 않고도 요소를 순차적으로 탐색할 수 있게 해주는 디자인 패턴을 의미한다.

  • Iterator 객체
    • 실제로 순회하는 객체
    • hasNext() : 다음요소 있는지 확인
    • next() : 다음요소 반환

예시

List<String> list = List.of("A", "B", "C");

Iterator<String> it = list.iterator();

while (it.hasNext()) {
    System.out.println(it.next());
}

https를 쓰는 이유

method = GET
requestURI = /c01/03
authType = null
Host = localhost:8080
Connection = keep-alive
sec-ch-ua = "Google Chrome";v="147", "Not.A/Brand";v="8", "Chromium";v="147"
sec-ch-ua-mobile = ?0
sec-ch-ua-platform = "Windows"
Upgrade-Insecure-Requests = 1
User-Agent = Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/147.0.0.0 Safari/537.36
Accept = text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.7
Sec-Fetch-Site = none
Sec-Fetch-Mode = navigate
Sec-Fetch-User = ?1
Sec-Fetch-Dest = document
Accept-Encoding = gzip, deflate, br, zstd
Accept-Language = ko-KR,ko;q=0.9,en-US;q=0.8,en;q=0.7

위는 get메서드를 통해 받아온 http resquest 정보이다. 여기에는 사용한 브라우저, os등 개인정보가 포함되어 있어서 노출되면 취약점의 일부가 될 수 있다. 이러한 정보를 감추기 위해
암호화를 사용하고 확인시 인증서가 필요한 https를 http 대신에 사용하고 있는 것이다.

::연산자

String[] favorites = req.getParameterValues("favorite");
        System.out.println("favorites...");

//        Arrays.stream(favorites)
//                .forEach(thing -> System.out.println(thing));
        //::을 활용한 출력
        Arrays.stream(favorites)
                .forEach(System.out::println);

:: 연산자는 이미 존재하는 메서드를 람다식 대신 참조해서 사용하는 문법을 의미한다.
매개변수를 적지 않아도 되어서 가독성이 높아지는 장점이 있다. 이는 그래서 기존 메서드의 호출이나 추가 로직이 없는 경우에 사용하는 것을 추천한다.

표준입출력

Stream은 데이터 입출력시 모든 데이터를 형태와 관계없이 일관된 흐름으로 전송하는 것이다.

  • 프로그래밍에서의 스트림 종류
    • 파일데이터 : 파일의 시작과 끝의 데이터 스트림
    • http 송수신 데이터: http 헤더, 바디의 데이터들
    • 키보드 입력 : 사용자가 키보드로 입력하는 숫자 및 문자들

그 중 표준 입출력은 java에서는 흔히 System.in, System.out이라고 표시하는 것으로
사용하고 System.in은 InputStream, System.out은 PrintStream에서 담당한다.
OS가 기본으로 제공한다.

출력 연산자, 버퍼

표준입출력에서 사용한 System.out.println(), System.out.print()가 java에서 흔히 사용하는
출력연산자이다. 이러한 출력을 통해 데이터를 콘솔, 파일, 등으로 보내게 된다.
하지만 바로 출력을 하게되면 Interrupt에 의한 context switch가 자주 발생하게 되고 이러한 이유로 속도가 느려지게 된다.

이를 위해 데이터를 임시공간에 넣고 한번에 출력하는 쪽으로 방향이 바뀌게 되었다. 이때의 임시공간을 버퍼라고 하고 조건이 되면 한번에 출력하게 된다.

  • 버퍼가 출력하는 경우
    • 줄바꿈 발생
    • 버퍼가 꽉찼을 때
    • 명시적으로 flush()함수를 호춣한 경우
    • 프로그램을 종료하는 경우

EL(Expression Language)

JSP 서버사이드에서 자바 코드를 직접 쓰지 않아도 데이터를 꺼내서 간단한 출력이나 연산을 할 수 있게 해주는 연산식
아래는 Jstl.jsp파일에서 일부 가져온 것이다.

<p>
    보내주신 값은?

    ${result}
</p>

jsp파일에 값을 넣기 위해 사용한 java코드이다.

req.setAttribute("result", result);
  • EL이 데이터를 찾는 순서
    1. pageScope
      현 JSP 페이지 안에서만 사용할 수 있는 영역
    2. requestScope
      하나의 http request에서 유지되는 영역, 컨트롤러에서 jsp로 데이터를 넘길때 사용
    3. sessionScope
      로그인 정보같은 데이터를 저장할 때 사용
    4. applicationScope
      웹 애플리케이션 전체에서 공유되는 영역, 모든 사용자가 같이 접근 가능하다.
      <%
  pageContext.setAttribute("name", "page");
  request.setAttribute("name", "request");
  session.setAttribute("name", "session");
  application.setAttribute("name", "application");
  %>

  ${name}

    위 코드에서 같은 변수를 여러 스코프를 주고 찾으려고 하면 가장 먼저 발견한 값으로 return을 한다.

Jstl

JavaServer Pages Tag Library의 약자 JSP에서 자바 코드를 직접 쓰지 않고도 반복, 조건문, 출력, 포맷들을 태그로 처리할 수 있게 하는 라이브러리

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

위 코드를 위에 선언해야지 사용이 가능하다

반복문 사용

<c:forEach var="item" items="${list}">
    ${item}
</c:forEach>

if-else문 사용

<c:choose>
    <c:when test="${score > 60}">합격</c:when>
    <c:otherwise>불합격</c:otherwise>
</c:choose>

EL과 함께 사용되고 java코드를 줄이고 가독성을 향상시키기 위해 사용했다고 볼 수가 있다.

DSL

Domain Specific Language의 약자로, 특정 분야를 쉽게 표현하기 위해 만든 전용언어를 의미한다.
c, java와 같은 프로그래밍 언어는 범용적이라서 비개발자가 이해하기 어렵다. 그래서 특정분야만 쉽게 표현하기 위해 사용한다.

  • 예시
    • sql : 데이터베이스 특화
    • html : 웹페이지 구조 특화
    • css : 스타일 표현 특화

이와 같은 DSL은 “도메인을 얼마나 잘 표현하는가”가 핵심이라고 볼 수가 있다.

랜더링

데이터나 코드로 작성된 내용을 실제 화면에 보이도록 그리는 과정을 의미한다.
대표적으로 서버 사이드 랜더링(SSR), 클라이언트 사이드 랜더링(CSR)이 존재한다.

  • SSR
    서버에서 html을 완성해서 보내준다
    대표적으로 jsp, thymeleaf가 존재한다.
  • CSR
    브라우저에서 JS로 화면을 생성한다.
    대표적으로 React가 있다.
    초기 로딩은 SSR에 비해 느리지만 이후는 빠르다

Postman으로 패킷받기 실습

postman은 API를 테스트하고 개발할 때 사용하는 대표적인 도구이다.
이것을 통해 아직 배포하지 않고 개발중인 서버에 httpRequest를 보내고 이에 대한 httpResponse를 받아와서 테스트를 진행할 수가 있다.
브라우저에 테스트하는 것은 GET은 쉽지만 POST,PUT, DELETE와 같은 테스트가 어려워서 이 도구를 통해 테스트를 한다고 한다.

method = GET
requestURI = /c01
authType = null
Authorization = Bearer SUPER_SECRET_KEY
User-Agent = PostmanRuntime/7.53.0
Accept = */*
Postman-Token = 22b1ba7b-5cbe-49bc-84d8-b08caa80b47b
Host = localhost:8080
Accept-Encoding = gzip, deflate, br
Connection = keep-alive
Cookie = Cookie_1=value
key= key1value = [val1]
key= key2value = [val2]
key= key3value = [val3]

쿠키까지 만들어서 테스트를 해본 결과이다. Authorization 관련은 임의의 키를 만들었지만 이후 JWT를 다루면서 생성해볼 것이다.

참고: http를 공부할 때 도움되는 사이트들

**MDN**
파이어폭스를 만든 제단인 모질라에서 웹에 관련된 교육을 운영중인 사이트로 js, http status등 신뢰도 있는 여러정보들을 담고 있다.
[MDN 링크](https://developer.mozilla.org/ko/)

**w3 school**
www를 만든 재단에서 운영하고 있는 사이트이다.
웹과 관련된 여러 교육을 하고 있다.
[w3 school 링크](https://www.w3schools.com/)

템플릿 엔진

데이터 + 미리 만들어진 template를 결합하여 html과 같은 결과 문서 등을 만들어주는 도구이다.
위에서 언급한 웹에 대한 랜더링을 시행하는 프로그램이라고 봐도 된다.

  • 서버 사이드 랜더링, SSR
    • JSP
      • 오래된 java기반의 템플릿 엔진
      • html안에 java코드 삽입하여 사용
      • EL, JSTL과 함께 사용한다.
    • Thymeleaf
      • HTML 친화적인 템플릿엔진
      • 자연스러운 템플릿 개념 활용
        th:와 같은 html 속성을 기반으로 한다.
      • Spring boot에서 표준으로 사용

html

Hyper Text Mark Language, 웹페이지를 구조화하기 위해 사용한 언어이다.

웹 브라우저가 사용자에게 정보를 어떻게 표기할 지를 정하는 기능을 수행한다.

  • 문서나 데이터의 현실을 분리
  • 컴퓨터가 쉽게 인식할 수 있도록 구조화 된 표현을 사용
  • 텍스트의 표식을 더하거나 의미를 더하기 위해 사용
  • hirachy라는 계층적 구조를 가진다.
    html구조

계층을 가지면 웹 페이지의 구조를 논리를 더해 표현할 수가 있다.

  • 들여쓰기 : indentation, 관행적으로 indent를 부여함으로써 어떤 계층을 갖는지를 시각적으로 표현, 하는 것이 좋다.
    같은 계층에 있는 친구를 형제라고 부른다. 위 아래에 있는 계층을 부모라고 부른다. 더 위는 그냥 조상이라고 한다.

CSS

선언

실제 css에 있는 스타일을 의미한다. 스타일과 관련된 친구들이 포함된다. 문서중에 어떤 요소를 바꿀 것인지 기록했다면 어떻게 되는지를 보여준다.

p {
  color(속성): blue(속성 값);
}
  • 속성: 스타일링을 하려는 대상
  • 속성 값: 속성에서 가질 수 있는 값들을 부여한다.

선택자

*은 전체 선택자를 의미한다. 모든 요소 전부에 { }안에 있는 것을 선택하겠다는 것을 의미한다.

p{

}

p를 갖는 모든 태그에 적용을 하겠다는 것을 의미 → 태그 선택자

h1 {
  color: blue;
}

p {
  color: blue;
}

.a{

}

. 이 클래스 .뒤는 클래스 이름 special을 클래스로 갖는 모든 것에 대한 선언

h1 {
  color: blue;
}

.special {
  color: blue;
}

아이디 선택자

#b{ 

}

#위에 있는 아이디에만 적용을 하겠다는 의미
문서에서 유일하게 식별해야 할때 아이디를 부여하게 된다.

결합자

여러 html 사이의 관계를 적용해서 특정 html에 정밀하게 선택을 하겠다는 것을 의미한다.

자손결합자

div p {
  color: red;
}

<div>
  <p>선택됨</p>

  <section>
    <p>이것도 선택됨</p>
  </section>
</div>
  • div안에 있는 모든 p를 선택

자식 결합자

div > p {
  color: blue;
}

<div>
  <p>선택됨</p>

  <section>
    <p>선택 안 됨</p>
  </section>
</div>
  • div의 바로 아래 자식인 p만 선택한다.

인접 형제 결합자

h2 + p {
  color: green;
}

<h2>제목</h2>
<p>선택됨</p>
<p>선택 안 됨</p>
  • h2바로 다음에 오는 첫 번째 형제 p만 선택한다.

박스모델

css에서 위치를 어떻게 놓을까라는 것에 대해 어떻게 놓을지 설계를 하는 것이다.
html의 모습을 표현하기 위해서 box 모델을 활용하게 된다.
box의 위치를 잡아가는 것을 layout이라고 한다.
css-box

  • 박스의 동작
    • 인라인 방향으로 연장되어 상위 컨테이너에서 사용가능한 공간을 채운다
    • 새 줄로 행갈이를 한다. 이때 width, height는 존중된다.
    • padding, margin과 같은 요소로 다른 요소들이 밀려난다.

Display

브라우저가 박스를 어떻게 보여줄 것인가에 대한 기준을 의미한다

  • 블록 : 박스가 하나의 페이지를 가져가는 것이다.
  • inline : 그 컨텐츠의 다른박스가 남는다면 온 것을 허용한다
  • inline-block : 공백이 있어도 허용하지 않는 것이다.
  • display : none 태그는 분명 존재하나 시각적으로는 절대 보이지 않는다.
    css-3

Flex

동적으로 layout을 관리할 수 있는 box
하나의 레이아웃 박스가 동적으로 돌아간다. 2개의 축 axis(main, cross)를 가지는 것으로 보이지만 실제로 1차원 위에 돌아가게 된다.

주축과 교차축을 중심으로 박스를 왼,오로 옮기거나 아래로 밀거나 퍼트릴 것인가를 결정하게 된다.
새로운 html 박스를 줄 수 있게 되는데 가장 바깥의 개념을 container이라고 하고 실제로 움직이는 것을 item이라고 한다.

css-flex

  • 교차축 정렬 : 세로방향 정렬 
    .container {
display: flex;
align-items: center;
}
  • 줄바꿈 : 아이템이 많으면 자동으로 줄바꿈 
    .container {
display: flex;
flex-wrap: wrap;
}

.container {
  display: flex;
  flex-direction: row;        /* 방향 */
  justify-content: center;    /* 가로 정렬 */
  align-items: center;        /* 세로 정렬 */
  flex-wrap: wrap;            /* 줄바꿈 */
}

Grid

제일 큰 컨테이너 박스를 두고 지역을 나누고 들어가는 방식을 grid라고 한다.
이를 응용한 galary 방식이 쇼핑몰에서 많이 활용된다.
css-grid

.container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
}

flex는 한 줄에서 어떻게 정렬할지에 대해 특화되어 있고 grid는 페이지를 어떻게 나눌지에 대해 특화되어 있어서 실무에서는 Grid를 큰 틀을 정렬하는데 활용하고 Flex를 내부 졍렬하는데 사용한다.

CSS에 익숙해지기 위해 하기 좋은 게임들

css의 내용을 잘 몰라도 활용해도 좋다.

Emmet 활용

html을 작성하는데 도움을 주고 특정 키워드만 있으면 긴 html문을 자동 완성시켜준다.

리스트안의 리스트 구현

<!-- div>ul>li^h2+span -->
    <div>
        <ul>
            <li></li>
        </ul>
        <h2></h2>
        <span></span>
    </div>

반복자를 사용하고 싶을 때 활용하면 좋을 것 같다.

<!-- ul>li*5 -->
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>

리스트안의 리스트와 반복문 혼합 사용

<!-- div>(nav>ol>li*3)+div -->    
    <div>
        <nav>
            <ol>
                <li></li>
                <li></li>
                <li></li>
            </ol>
        </nav>
        <div></div>
    </div>

참고 : html 기본양식 자동완성 : !넣고 tab
<!DOCTYPE HTML>만 출력하고 싶은 경우 : !!! 넣고 tab