24.04.16 화 TIL(Today I Learned)

TIL(Today I Learned)

: 매일 저녁, 하루를 마무리하며 작성 !
: ⭕ 지식 위주, 학습한 것을 노트 정리한다고 생각하고 작성하면서 머리 속 흩어져있는 지식들을 정리 !

TIL 작성 강의

• TIL은 무엇인가? : Today I Learned

• TIL을 써야 하는 이유
  - 기록 : 내가 무엇을 배웠는지 기록.

  • 성장 : 학습한 것을 정리하며 이해도를 높이고, 복습도 가능.
  • 활용 : 비슷한 문제 발생 시 활용할 수 있습니다.

• 🗒 TIL 작성법
  1. 강의 내용 정리하기 (초기)

  2. 개발 단계 정리
  3. 하루 회고
  4. 문제 해결 과정 (권장)

팀 소개 페이지 미니프로젝트 진행

Main.html

body {
            position: relative;
            width: 100%;
            height: 100vh;
            /* 화면 전체를 차지하도록 설정 */
            overflow: hidden;
            /* 움짤이 넘치는 경우를 방지하기 위해 숨김 처리 */
            background: url('https://post-phinf.pstatic.net/MjAyMTAyMjdfNTEg/MDAxNjE0Mzg2MTkwNzg5.eOSDaCM8M3bEjq2QLQx1Zhp8bA1ahXQTXy6IujxbXkIg.U2rySxw23rcIo3tTZqx7Dd3BfbkxGcG7Gj9Q0LMDnvMg.GIF/1590461435359_28129.gif?type=w1200') repeat;
            background-size: cover;
            /* 화면에 꽉 차도록 배경 이미지 크기 조절 */
        }

• 움직이는 이미지로 배경화면 구성
• repeat 이용해서 무한재생

Detail.html

 
 	.container-fluid .table th:first-child,
	.container-fluid .table td:first-child {
            white-space: nowrap;
            /* 줄바꿈 방지 */
        }

        /* 블로그 주소가 길 경우 줄바꿈 발생 */
        #UserVlogAddress {
            word-break: break-all;
        }

• table 안 요소들의 줄바꿈 조절하기

Detail.html

async function fetchData() {
            // URL에서 사용자 ID 가져오기
            const urlParams = new URLSearchParams(window.location.search);
            const userId = urlParams.get('userId');

            // Firebase에서 사용자 데이터 가져오기
            let docs = await getDocs(collection(db, "user"));

            // 사용자 ID에 해당하는 데이터 찾기
            docs.forEach((doc) => {
                let row = doc.data();
                let UserUniqueId = doc.id; // 유저의 고유 ID

                if (UserUniqueId === userId) {
                    let photo = row['photo'];
                    let name = row['name'];
                    let birth = row['birth'];
                    let mbti = row['mbti'];
                    let phone = row['phone'];
                    let blog = row['blog'];
                    let aboutMe = row['aboutMe'];
                    let myAdvantages = row['myAdvantages'];
                    let myWorkStyle = row['myWorkStyle'];

                    let UserInfoHTML = `
                <div class="container-fluid">
                    <!-- 이미지 + 제목 -->
                    <div class="row mt-5 align-items-start">
                        <div class="col-md-6">
                            <div class="thumbnail">
                                <img src="${photo}" style="height:450px; class="img-thumbnail" alt="이미지 준비중...">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="container-fluid py-3">
                                <h1 class="display-6 fw-bold">${name}</h1>
                            </div>
                            <table class="table table-bordered border-dark">
                                <thead>
                                    <tr>
                                        <th scope="col">이름</th>
                                        <th scope="col" id="UserName">${name}</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <th scope="row">생년월일</th>
                                        <td id="UserBirthDay">${birth}</td>
                                    </tr>
                                    <tr>
                                        <th scope="row">MBTI</th>
                                        <td id="UserMbti">${mbti}</td>
                                    </tr>
                                    <tr>
                                        <th scope="row">연락처</th>
                                        <td id="UserPhone">${phone}</td>
                                    </tr>
                                    <tr>
                                        <th scope="row">블로그 주소</th>
                                        <td id="UserVlogAddress">${blog}</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <!-- 나머지 내용 -->
                    <div class="row mt-4">
                        <div class="col-md-6">
                            <ol class="list-group list-group-numbered">
                                <li class="list-group-item">
                                    <div class="ms-2 me-auto">
                                        <div class="fw-bold">나에 대하여</div>
                                        ${aboutMe}
                                    </div>
                                </li>
                                <li class="list-group-item">
                                    <div class="ms-2 me-auto">
                                        <div class="fw-bold">나의 장점</div>
                                        ${myAdvantages}
                                    </div>
                                </li>
                                <li class="list-group-item">
                                    <div class="ms-2 me-auto">
                                        <div class="fw-bold">나의 협업 스타일</div>
                                        ${myWorkStyle}
                                    </div>
                                </li>
                            </ol>
                        </div>
                    </div>
                </div>`;
                    $('#UserInfo').html(UserInfoHTML);
                }
            });
        }
        fetchData();

• 다른 html page에서 값을 받아오는 패턴
• 받아와서 상황에 알맞게 출력하도록 코딩