2024년 12월 17일 TIL

오늘의 이모저모

오늘도 하루가 지나갔다.

 

오랫만에 점심 때 밖을 나가보니 해 떠있을때 밖을 나간게 얼마만인가 싶더라.

 

 

지금을 투자하자

 

---

오늘 한 일

• SQL 문제풀기

문제

 

Exchange Seats - LeetCode

 

Write a solution to swap the seat id of every two consecutive students. 
If the number of students is odd, the id of the last student is not swapped.

Return the result table ordered by id in ascending order.

The result format is in the following example.

 

Example 1:

Input: 
Seat table:
+----+---------+
| id | student |
+----+---------+
| 1  | Abbot   |
| 2  | Doris   |
| 3  | Emerson |
| 4  | Green   |
| 5  | Jeames  |
+----+---------+
Output: 
+----+---------+
| id | student |
+----+---------+
| 1  | Doris   |
| 2  | Abbot   |
| 3  | Green   |
| 4  | Emerson |
| 5  | Jeames  |
+----+---------+
Explanation: 
Note that if the number of students is odd, 
there is no need to change the last one's seat.

 

---

풀이

1. case를 생성해 홀수 짝수를 가린다
2. 만약 id 가 홀수이고 id+1 이 max(id)보다 작거나 같은 경우, 현재의 id 를 +1 한다.
3. 만약 id 가 짝수인경우는 어짜피 마지막 숫자가 홀수인경우에만 변경을 하지 않으니 id 를 -1한다.
4. id를 오름순으로 정렬한다.

 

---

코드

select id,
case 
    when id % 2 = 1 and id + 1 <= (select max(id) from Seat)
        then (select student from Seat where Seat.id = s.id + 1)
    when id % 2 = 0 
        then (select student from Seat where Seat.id = s.id - 1)
    else student
end as student
from Seat s
order by id asc

 

 

---

링크

LeetCode/0626-exchange-seats at main · K-MarkLee/LeetCode

 

---

Django 정리하기

 

• Django Template System

---

Django Template System 에 대해서 알아보자

---

 

Template System

Template System 은 HTML 파일에 데이터를 결합하여 동적 페이지를 생성하거나 수정하는 시스템을 제공한다.

이를 통해 데이터가 HTML 구조에 결합되면서 사용자가 요청한 화면이 동적으로 업데이트된다.

 

 

---

DTL

Django Template Language 의 줄임말이다.

DTL은Django 의 템플릿 시스템에서 사용되는 전용 문법이다. Python의 문법과는 비슷하지만, Python코드는

템플릿 내에서는 실행이 되지 않는다.

 

DTL을 사용하면, HTML을 동적으로 제어하고 데이터를 표현 할 수 있으며, 보다 효율적으로 웹 페이지를 관리할 수 있다.

 

 

---

DTL의 구성을 알아보자

 

변수 Variable

 

변수는 템플릿에 데이터를 전달하고 표시하는 기능을 한다.

View에서 전달된 데이터를 템플릿에서 접근 할 때 사용한다.

 

형태는 {{ 변수 }} 로 작성이 된다.

 

 

 

---

필터 Filters

필터는 변수에 추가 작업을 할 때 사용된다. 필터를 통해 데이터를 가공하거나 형식을 변환할 수 있다.

 

형태는 {{ 변수 | 필터 }} 로 작성된다.

 

 

주로 사용되는 필터이다.

• lower - 소문자로
• upper - 대문자로
• default - 값이 없을 때 기본값
• length - 문자열이나 리스트의 길이 반환

 

---

태그 Tags

태그는 제어 흐름을 관리하는 데 사용된다. 예를들어 조건문, 반복문, 템플릿 확장 등에 활용이 된다.

 

형태는 {% 태그 %} 로 작성된다. 일부 태그는 {% if ~%} {% emdif %} 시작과 종료 지점이 있다.

 

 

 

 

---

주석 Comments

 

주석은 코드에 대한 설명을 작성하거나 실행되지 않도록 숨길 떄 사용된다.

 

형태는 {% 주석 내용 %} 으로 작성된다. 여러 줄의 주석은 {% comment %} 내용 {% endcomment %} 으로 작성된다.

 

{% comment %}
<p>이 코드는 주석 처리되어 보이지 않습니다.</p>
{% endcomment %}

 

 

 

• Django HTML Form

---

Django 의 HTML Form 에 대해서 알아보자

---

HTML Form을 활용한 데이터 주고 받기

HTML Form은 사용자로부터 데이터를 입력받고 서버로 전송할 수 있도록 하는 웹 문서의 중요한 요소이다.

주로 로그인, 회원가입, 검색 과 같은 기능에 사용이 된다.

 

 

---

 

HTML Form 과 Input

Form 의 역활

• 사용자가 입력한 데이터를 서버로 전송한다.
• 인터랙티브 한 기능을 위한 공간을 제공한다.

 

 

---

Input

• Input 태그는 사용자의 입력을 받는 공간을 생성한다.
• 이때 태그마다의 특성이 다르며, type 속성에 따라서 다양한 방식을 지원하게 된다.

<form action="/submit" method="GET">
    <label for="username">이름:</label>
    <input type="text" id="username" name="username">

    <label for="birthdate">생년월일:</label>
    <input type="date" id="birthdate" name="birthdate">
    
    <button type="submit">제출</button>
</form>

 

 

---

Form 의 주요 속성

 

action

• 데이터가 어느 URL로 전송이 될지 정하는 역활.
• 지정되지 않는다면 현재 페이지의 URL로 전송한다.

 

이때 " location " 은 파일의 로케이션을 넣으면된다.

 

 

 

---

method

• 데이터를 전송하는 방식을 지정한다.
• GET 또는 POST방식을 사용한다.
  • GET은 데이터를 조회할 때 사용.
  • POST는 데이터를 서버에 등록할 때 사용.

 

 

 

---

for 과 id의 연동

위의 사진과 같이 label과 input의 for 과 id가 같다면, labe 을 클릭하더라도 input의 입력 창을 클릭한 것과 같은 효과를 준다.

 

 

 

---

GET 방식 데이터 전송

GET 방식이란?

GET방식의 데이터 전송이란 서버에 데이터를 조회하는 요청을 보내는 것이다.

이때 쿼리 스트링을 통해서 데이터를 URL에 포함시켜 같이 요청을 보내는것을 의미한다.

 

 

 

---

쿼리스트링의 구조

쿼리스트링은 URL뒤에 ?를 붙이고 key=value 즉 딕셔너리 형식으로 데이터를 전달을 한다.

 

여러개의 데이터는 & 를 사이에 두고 연결을 시킨다.

 

이때의 key = input의 name이고, value는 입력 값이다.

 

 

---

 GET 데이터를 View 에서 받기

서버에서 GET 요청과 함께 전송된 데이터를 처리한다.

Django에서 쿼리스트링으로 데이터를 보냈을 때 어떻게 처리하는지 보자.

 

 

---

View

우선 action 에서 어디로 데이터를 전송하게 설정했는지 파악한다.

 

이때 data-catch 란것을 확인하고 view 에서 data-catch를 호출하는 함수를 찾는다.

 

 

위와 같이 우선 data 변수에 GET.get(" name ")이 들어감으로 input 의 name즉 값을 받아온다.

 

context를 설정해줘서 실제로 형식을 지정해주고 render에 추가함으로써 view에서의 작업은 마무리 된다.

 

 

---

HTML

HTML에서는 크게 할 작업이 없다.

 

이미 값을 context로 입력을 해 줬기 때문에

 

{{ 변수 }} 를 이용해서 불러오기만 하면 된다.

 

 

 

 

 

---

과정

1. 사용자가 Form에 데이터를 입력하고 Submit버튼을 누르게 된다.
2. Form은 데이터를 action 에 지정된 location(URL) 로 method에 지정된 GET의 방식으로 전송한다.
   1. 이때 GET으로 데이터를 보냈으니 쿼리스트링으로 데이터를 포함하게 된다.
3. 서버의 View 함수가 요청을 처리하고, 이를 데이터 context에 담아서 template로 전송한다.
4. Template에서 {{ 변수 }} 를 사용하여서 데이터를 표시하게 된다.

 

 

 

 

 

 

오늘은 전반적으로 정리를 많이 하지 못했다.

 

우선 실습이 길기도 했고.. 정리할 부분이 좀 많더라..

 

어제 정리다 못한 HTML template  system 정리하고

오늘은 HTML form에 대해서 정리해봣다.

---

링크

https://github.com/K-MarkLee/LeetCode

GitHub - K-MarkLee/LeetCode: Collection of LeetCode questions to ace the coding interview! - Created using [LeetHub](https://git