[TIL] 내일배움캠프 1일차 - 웹 개발 기초

오늘의 학습 키워드📚

웹 배포

• 기존에 학습한 내용
  HTML과 CSS로 간단한 영화 소개 페이지, 앨범 페이지 등 만들기
  JavaScript를 통해 웹에 기능 만들기, HTML 동적 추가
  JQuery를 통해 JavaScript의 기능들을 편리하고 가독성 좋게 활용
  OpenAPI를 이용해 다양한 정보들을 활용하는 방법
  Firebase를 만들고 연동하여 FirestoreDatabase에서 데이터 CRUD
  

Input의 값들을 받아서 딕셔너리화하여 FirestoreDB에 저장하는 방법
** addDoc(collection(Firestore db, "컬렉션 이름"), 저장할 딕셔너리) **
** HTML에 id를 JQuery에서 $("#id")로 호출할 수 있다. **
** val()은 해당 값을 가져오기 때문에 Input이나 Select 등에서 활용할 수 있다. **

        // Firebase 인스턴스 초기화
        const app = initializeApp(firebaseConfig);
        const db = getFirestore(app);

	$("#postingBtn").click(async function () {
            let image = $('#imageInput').val();
            let title = $('#titleInput').val();
            let content = $('#contentInput').val();
            let date = $('#dateInput').val();

            let doc = {
                'image': image,
                'title': title,
                'content': content,
                'date': date
            }
            await addDoc(collection(db, "albums"), doc);

            alert('저장 완료!');
            window.location.reload();
        })

FirestoreDB에 있는 값들을 딕셔너리 배열로 가져와서 HTML에 추가하는 방법
**let docs = getDocs(collection(Firestore db, "컬렉션 이름")) **

        $('#cardsBox').empty();
        let docs = await getDocs(collection(db, "albums"));
        docs.forEach((doc) => {
            let row = doc.data();

            let image = row['image'];
            let title = row['title'];
            let content = row['content'];
            let date = row['date'];

            let cardHtml =
                `
            <div class="col">
                <div class="card h-100">
                    <img src="${image}"
                        class="card-img-top" alt="...">
                    <div class="card-body">
                        <h5 class="card-title">${title}</h5>
                        <p class="card-text">${content}</p>
                    </div>
                    <div class="card-footer">
                        <small class="text-body-secondary">${date}</small>
                    </div>
                </div>
            </div>
            `;

            $('#cardsBox').append(cardHtml);
        });

 

결과 화면

FirestoreDB에 이렇게 Key와 Value 형태로 저장된다

 

Git

• Git이란? 협업 또는 개인 프로젝트 저장 등을 위한 버전 관리 도구이다.
  작업한 프로젝트나 파일을 서버에 올려 저장하거나 서버에 저장된 프로젝트, 파일 등을 가져올 수 있다.
• GitHub란? Git에 올려진 레포지토리들을 웹 상에서 볼 수 있게 하는 사이트이다.
• Git을 사용하기 위한 여러 명령어들
  git init : 프로젝트에 Git을 사용하기 위한 초기 작업(한 번만 하면 됨)
  git add ** : 현재 디렉토리의 **이라는 이름의 파일을 추가
  git add . : 현재 디렉토리의 모든 파일을 추가
  git commit -m "메세지" : 추가된 파일들을 git에 "메세지"와 함께 올림
  git status : 현재 Git의 상태를 확인하는 명령어(add 안 된 파일, commit 안 된 파일 등)
  git log : Git의 로그를 확인하는 명령어
  
  ---------------------
  git remote add origin 레포지토리 주소 : 내 로컬과 GitHub 레포지토리를 연동
  git branch -M main : 마스터 브랜치의 이름을 main으로 변경
  git push -u origin main : git push origin main 명령어를 git push로 줄여 쓸 수 있게 해주는 명령어
  ---------------------
  
  git clone 레포지토리 주소 . : 내 로컬에 다른 사람의 레포지토리를 복사해오는 명령어(맨 뒤에 .을 빼먹지 말아야 현재 디렉토리에 깔끔하게 복사된다.)
  git push : 내 변경사항들을 레포지토리로 업로드하는 명령어
  git pull : 레포지토리에서 내 로컬로 변경사항들을 가져오는 명령어(git pull이나 git push를 자주 하지 않을 경우 충돌이 발생할 가능성이 높아진다.)
  
  ---------------------
  git pull을 했는데 충돌이 발생하는 경우
  <<<<<<< HEAD 내 변경사항
  =======
  가져온 변경사항
  >>>>>>>
  위와 같은 에러가 발생한다.
  <<<<, =====, >>>> 세 줄은 지우고 두 가지 변경사항 중에서 선택하거나 수정해서 충돌을 해결한 후 push 해준다.
  ---------------------

---

오늘의 회고💬

9to9 12시간 공부법은 처음이라 계속 집중하는게 쉽지는 않았다.
그래도 웹 개발이 생소하면서도 새롭고 재밌어서 지루하지는 않았다.

 

내일의 계획📜

추억 앨범 페이지를 수정할 예정이다.
앨범을 업로드할 때 닉네임이나 이름을 받아서 누가 앨범을 작성했는지 알 수 있게 하고
비밀번호 입력란을 만들어 해당 앨범의 비밀번호를 알고 있는 사람들만 수정, 삭제할 수 있는 기능을 추가하고자 한다.
또 가능하다면 해당 앨범에 추천이라던가 댓글을 남길 수 있는 기능도 만들 수 있다면 좋겠다.