01-16 TIL

거북·2024년 1월 16일

TIL 기술면접

TIL

목록 보기

22/22

요약

요즘은 최종 프로젝트의 프론트 부분을 수정 보완하는데 하루를 거의 다 쓰고 있다. 기존에 백엔드와 연동되는 것은 거의 확인하여서 UI등을 조금 더 보기좋게 만들어 보고 있다.

기술면접

GET,POST 개념과 데이터 흐름

GET

개념

GET은 요청하는 데이터가 HTTP URL의 일부로 포함되어 전송됩니다. 일반적으로 조회 작업에 사용됩니다.

데이터 흐름

사용자가 브라우저에서 URL을 입력하거나 링크를 클릭합니다.
브라우저가 해당 URL에 포함된 파라미터와 함께 서버에 요청을 보냅니다.
서버가 요청을 처리하고 필요한 정보를 응답으로 보냅니다.
브라우저가 응답을 받아 사용자에게 표시합니다.

POST

개념

POST는 요청 데이터를 HTTP 메시지 본문에 담아 전송하며, 서버의 상태를 변경하거나 데이터를 추가하는 작업에 사용됩니다.

데이터 흐름

사용자가 웹 폼에 데이터를 입력하고 제출 버튼을 클릭합니다.
브라우저가 데이터를 HTTP 본문에 담아 서버에 요청을 전송합니다.
서버가 요청을 처리하고, 결과를 확인하거나 필요한 정보를 응답으로 보냅니다.
브라우저가 응답을 받아 사용자에게 표시하거나 다른 동작을 수행합니다.

요약

GET은 주로 데이터 조회에 사용되며, URL에 파라미터를 포함합니다.
POST는 데이터를 생성하거나 변경하는 데 사용되며, HTTP 본문에 데이터를 포함합니다.
두 방식 모두 클라이언트에서 서버로 요청을 보내고 응답을 받는 과정을 거칩니다. 하지만 데이터의 위치와 사용 목적이 다릅니다.

OSI 7계층에 대해 설명

물리(Physical)
• 상위 계층에서 전송된 데이터를 물리 매체(허브, 라우터, 케이블 등)를 통해 데이터 전기적인 신호로 변환해서 주고받는 기능을 진행하는 공간
• 즉, 데이터를 전송하는 역할만 진행한다.
데이터 링크(Data Link)
• 물리적인 연결을 통하여 인접한 두 장치 간의 신뢰성 있는 정보 전송을 담당(Point-To-Point 전송)
• 신뢰성 있는 정보 전송: 오류나 재전송하는 기능이 존재
• Mac 주소를 통해 통신한다. 프레임에 Mac 주소를 부여하고 에러검출, 재전송, 흐름제어를 진행한다.
네트워크(Network)
• IP주소를 제공하는 계층
• 데이터를 목적지까지 가장 안전하고 빠르게 전달하는 기능을 담당한다.
• 라우터를 통해 최적의 경로를 선택하여 IP 주소를 지정하고, 해당 경로에 따라 데이터 전달
• 전송되는 데이터는 패킷단위로 분할하여 전송한 후 다시 합쳐진다.
전송(Transport)
• 양 끝단(End to End)의 사용자들이 데이터를 주고 받을 수 있게 하는 계층
• 데이터 전송을 위해서 Port 번호를 사용함.(대표적인 프로토콜로 TCP와 UDP가 있음)
• TCP와 UDP 프로토콜을 통해 통신을 활성화한다. 포트를 열어두고, 프로그램들이 전송을 할 수 있도록 제공해준다.
• TCP : 신뢰성, 연결지향적
• UDP : 비신뢰성, 비연결성, 실시간
• 발신지에서 목적지(End-to-End) 간 제어와 에러를 관리한다. 패킷의 전송이 유효한지 확인하고 전송에 실패된 패킷을 다시 보내는 것과 같은 신뢰성있는 통신을 보장
세션(Session)
• 통신 세션을 구성하는 계층으로, 포트(Port)번호를 기반으로 연결한다. 통신장치 간의 상호작용을 설정하고 유지하며 동기화한다.
• 연결 세션에서 데이터 교환과 에러 발생 시의 복구를 관리
• 데이터가 통신하기 위한 논리적 연결을 담당한다. TCP/IP 세션을 만들고 없애는 책임을 지니고 있다.
표현(Presentation)
• 송신측과 수신측 사이에서 데이터의 형식(png, jpg, jpeg...)을 정해준다.
• 데이터 표현에 대한 독립성을 제공하고 암호화하는 역할을 담당한다.
• 받은 데이터를 코드 변환, 구문 검색, 암호화, 압축의 과정을 통해 올바른 표준방식으로 변환
응용(Application)
• 최종 목적지로, 사용자와 바로 연결되어 있으며 응용 SW를 도와주는 계층
• 사용자로부터 정보를 입력받아 하위 계층으로 전달하고 하위 계층에서 전송한 데이터를 사용자에게 전달
• 파일 전송, DB, 메일 전송 등의 서비스를 제공한다.

출처: https://turtledeveloper.tistory.com/38 [turtleDeveloper:티스토리]

최종 프로젝트

오늘 한 것

게시판 페이지 정렬

위 화면처럼 스포츠 종목별로 공모양 이미지를 넣어주고 정원 및 지역 정보를 보기좋게 처리했다.

게시글의 스포츠 목록별로 이미지를 다르게 가져오는데 이와 관련된 코드는 다음과 같다.

<img th:if="${board.boardSport eq '축구'}" th:src="@{/image/sports/축구공.png}" alt="Soccer" width="50">
<img th:if="${board.boardSport eq '풋살'}" th:src="@{/image/sports/축구공.png}" alt="Football" width="50">
<img th:if="${board.boardSport eq '농구'}" th:src="@{/image/sports/농구공.png}" alt="Basketball" width="50">
<img th:if="${board.boardSport eq '야구'}" th:src="@{/image/sports/야구공.png}" alt="Baseball" width="50">

이를 위해서 게시글을 생성할 때 스포츠 종류를 직접 작성하는 것이 아닌 선택을 하여 입력하도록 수정하였다.
게시글 생성 화면

<label for="boardSport">Sport:</label>
    <select id="boardSport" name="boardSport" required>
        <option value="축구">축구</option>
        <option value="축구">풋살</option>
        <option value="야구">야구</option>
        <option value="농구">농구</option>
</select>

게시글 단건 조회 화면
또한 다른 사이트들을 보니 수정/삭제를 버튼보다 텍스트 형식으로 두는 곳이 많아서 이를 따라서 텍스트 형식으로 처리해주었다.

현재 게시판에 참여한 사람 목록은 참여자 확인 버튼을 누르면 볼 수 있고 다시 누르면 보이지 않도록 해주었다.

<!--board.html-->
<p class="attendance" onclick="toggleAttendance()">참여자 확인</p>
                <div class="attendanceCheck" id="attendanceCheck">
                    <ul class="list-group">
                        <li class="list-group-item" th:each="userNickname : ${boardResponseDto.userNickNameList}"
                            th:text="${userNickname}"></li>
                    </ul>
                </div>

<script>
let isAttendanceCheckVisible = false;
    function toggleAttendance() {
        const attendanceCheckElement = document.getElementById("attendanceCheck");
        // 번갈아가면서 가시성을 변경
        isAttendanceCheckVisible = !isAttendanceCheckVisible;
        if (isAttendanceCheckVisible) {
            attendanceCheckElement.classList.add("show");
        } else {
            attendanceCheckElement.classList.remove("show");
        }
    }
</script>

이렇게 전반적으로 편의성과 관련된 부분을 작업해 주었다.

해야 할 것

예외처리
현재 서비스에서 예외가 발생하는 경우에

이런식으로 화면이 넘어가는데 이를 alert창으로 띄워주고 화면은 기존 창으로 돌아가도록 해주는 기능을 추가해야 한다.
리팩토링

보다시피 프론트쪽 html들을 죄다 templates디렉토리에 넣어놓았다.. 이를 각 기능에 맞게 잘 분류하여 주어야 한다. 파일 하나의 경로를 바꿀때마다 코드를 여러줄씩 바꾸어 주어야 하다보니 귀찮더라도 처음부터 나누어서 시작을 했어야 한다는 것을 깨달았다..ㅠㅠ 그땐 프론트에 이렇게 많은 파일이 필요할거라 생각도 못했었다.
페이징
게시판 및 댓글이 일정 개수이상 이면 페이지를 나누어 출력하도록 해주어야 한다.