개발자 박가나

[241002 TIL] 본캠프 3일 차 ('팀 소개 페이지 만들기' 프로젝트 3일차) 본문

내일배움캠프/본캠프

[241002 TIL] 본캠프 3일 차 ('팀 소개 페이지 만들기' 프로젝트 3일차)

gnchoco97 2024. 10. 2. 17:15

 Today 1. [팀 소개 페이지 만들기] 프로젝트 3일차 

  • Git으로 코드 병합
    • Github에 Repository 생성
    • 각자 로컬에서 코딩 진행할 수 있도록 clone 진행
    • 각자 코딩한 내용 push하여 하나의 프로젝트로 병합 
  • 코딩
    • [방명록 Section] 말풍선에 실제 데이터 반영
    • [방명록 Section] 말풍선을 최근 등록 순으로 정렬

/* JavaScript 코드 */

// 데이터베이스 초기화
const commentDB = firebase.database().ref('comment');

// 데이터 읽어오기
commentDB.on('child_added', (data) => {
    const commentData = data.val();

    // 이전 내역 임시 저장
    let prev_comment = document.getElementById('guestbook').innerHTML;

    // 새로 입력한 방명록 붙이기
    document.getElementById('guestbook').innerHTML = `
        <div class="guestbook-container">
            <img class="guestbook-profile" src="./images/comment-profile.png" />
            <div>
                <div class="guestbook-user">
                    <p class="guestbook-name">방문자</p>
                    <p class="guestbook-date">${commentData.createAt}</p>
                </div>
                <p class="guestbook-comment">${commentData.comment}</p>
            </div>
        </div>
    `;

    // 신규 방명록 아래에 이전 내역 붙이기
    document.getElementById('guestbook').innerHTML += prev_comment;
});

 

Github에 Repository를 생성함으로써 본격적인 협업이 시작되었다. 하나의 HTML 파일에 6명이 같이 push를 하고 pull을 받다보니 처음에는 충돌도 많이 일어나고 코드도 꼬이고 했었지만, 자신의 진행 상황에 대해서 적극적으로 공유해주고 다른 사람이 반영한 내용을 즉각적으로 적용하면서 점차 자연스럽게 협업이 이루어지는게 신기했고, 협업 상황에서는 무엇보다 소통이 중요하다는 것을 다시 한 번 깨닫게 되었다.

 

 

 Today 2. 개인 공부 - [CSS] 말풍선 만들기 

 

  • 시행착오
    • 처음에는 <div> 태그 안에 또다른 <div> 태그를 만들어서 구현
    • 추후 HTML 코드를 봤을 때 내부에 존재하는 <div> 태그의 역할을 순간적으로 파악하기 힘들 것이라고 판단
  • 해결
    • :after 속성을 이용함으로써 HTML 코드를 보다 간결하게 수정
<!-- HTML 코드 -->

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>
    <body>
        <!-- ＊＊ 시행착오 ＊＊
            <div class="container full">
                <div></div>
                말풍선
            </div>
            <div class="container empty">
                <div></div>
                말풍선
            </div>
        -->
        
        <div class="container full">말풍선</div>
        <div class="container empty">말풍선</div>
    </body>
</html>
/* CSS 코드 */

.container {
    width: 100px;
    position: relative;
    border-radius: 10px;
    text-align: center;
    margin: 20px;
    padding: 10px;
}

.container:after {
    content: '';
    position: absolute;
}

.container.full {
    background-color: black;
    color: white;
}

.container.full:after {
    top: -18px;
    left: 40px;
    border-top: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid black;
    border-left: 10px solid transparent;
}

.container.empty {
    border: 2px solid black;
    background-color: white;
    color: black;
}

.container.empty:after {
    width: 10px;
    height: 10px;
    top: -7px;
    left: 45px;
    background-color: white;
    border-top: 2px solid black;
    border-left: 2px solid black;
    transform: rotate(45deg);
}

 

진실님께서 말풍선 부분 퍼블리싱에 대해서 도움을 요청하셔서 시간적으로 여유가 있을 때 시도를 해보았다. 처음 시도한 방법으로도 구현 자체는 성공했지만 HTML 부분이 맘에 들지 않아서 구글링을 해 본 결과 after라는 속성을 알게 되었다. 구현되기만 하면 코드가 어떻든 그냥 넘어가는 식의 코딩을 하는 습관이 들어가고 있었는데 오랜만에 여러 방법으로 고민을 해보는 시간을 가짐으로써 코드에 대한 이해도를 높일 수 있었다.

 

'내일배움캠프 > 본캠프' 카테고리의 다른 글

[241008 TIL] 본캠프 6일차  (1) 2024.10.08
[241007 TIL] 본캠프 5일차 ('팀 소개 페이지 만들기' 프로젝트 5일차)  (0) 2024.10.07
[241004 TIL] 본캠프 4일 차 ('팀 소개 페이지 만들기' 프로젝트 4일차)  (0) 2024.10.04
[241001 TIL] 본캠프 2일 차 ('팀 소개 페이지 만들기' 프로젝트 2일차)  (0) 2024.10.01
[240930 TIL] 본캠프 1일차 ('팀 소개 페이지 만들기' 프로젝트 1일차)  (2) 2024.09.30
'내일배움캠프/본캠프' Related Articles more