250814 TIL

📖 학습 계획, 배운 것

• 웹개발 A to Z

• 3주차 실습내용 기반 셀프 피드백
  • 3주차 실습내용은 화면을 유사하게 구성하는데 성공했지만, 스타일 태그 부분의 jumbotron 클래스 선택자를 확인하지 못함
    > 이로 인해 불필요하게 header 클래스에 개별적인 여백 명령어를 추가하게 되어 번거롭게 됨
    
    
  • 위의 문제점은 무엇이었는가?
    > 이후 글씨 내용에 따라 margin(여백) 명령을 또 일일히 수정해줘야 하는 번거로움이 발생함
• Firebase 학습하기 
  • 3주차(3일차) 까지의 실습 내용은 프론트엔드에 맞는 내용들을 학습
  • 백엔드 관련 내용들을 학습하는 계획 
    • 파이어스토어(Firestore)는 구글의 클라우드 기반 NoSQL 데이터베이스
  • Firebase 에 생성한 프로젝트 설정을 기반으로 SDK 라이브러리를 가져오고 인스턴스를 초기화 하는 작업을 진행
    • 이후 데이터 추가 스켈레톤 문구를 통하여 올바르게 데이터가 잘 전송되고 저장되는지 확인함
      • 아래의 코드는 '기록하기' 버튼을 눌렀을 때 잘 저장되는지 확인하는 용도
        
                $("#postingbtn").click(async function () {

                    let doc = {'name' : 'bob', 'age' : 30 };

                    await addDoc(collection(db, "albums"), doc);

                })
  • 구성한 화면에서의 내용들이 잘 저장되는지 확인하기 위해 아래와 같이 코드를 변경 후 저장내용을 확인
    
            $("#postingbtn").click(async function () {

                let image = $('#image').val();

                let title = $('#title').val();

                let content = $('#content').val();

                let date = $('#date').val();

                let doc = {

                    'image' : image,

                    'title' : title,

                    'content' : content,

                    'date' : date

                };

                await addDoc(collection(db, "albums"), doc);

            })
    
    

    

    
    
     
    

    

    Firestore Database에 잘 저장되고 있는 부분을 확인할 수 있었음.
    이와 같이 여러 기능을 통하여 추가적인 변화를 줄 수 있는데, 새로고침과 알림을 주는 기능까지 구현해보는 연습을 진행함
  • module 환경으로 바꾸게 되면 .onclick , .openclose와 같은 명령어 실행에 변화가 필요함
    • $('선택자').명렁어를 통해 기능을 재구성해야함

---

• Java 변수와 자료형 & 조건문,반복문 기초 공부

• 변수와 자료형의 기본 개념
  • 변수(Variable): 데이터를 저장하는 메모리 공간의 이름
  • 자료형(Data Type): 변수에 저장될 데이터의 종류를 지정
• 변수와 자료형 선언을 통해 입력해놓은 값을 println으로 노출시킬 수 있었음
  
  
• 조건문과 반복문
  • 조건문과 반복문은 아래와 같이 활용할 수 있음
    • 조건문 
      if (조건) {
          // 조건이 참일 때 실행
      } else if (다른조건) {
          // 다른조건이 참일 때 실행
      } else {
          // 모든 조건이 거짓일 때 실행
      }
      
      
    • 반복문
      // for문
      for (int i = 0; i < 5; i++) {
          System.out.println(i);
      }
      
      // while문
      int i = 0;
      while (i < 5) {
          System.out.println(i);
          i++;
      }

---

📝 학습 간 궁금한 부분

• 프론트엔드와 백엔드의 차이점은 정확히 어떤 부분일까?
  • 아래의 예시 이미지로 설명할 수 있음
  • 250811 ~ 250813의 TIL 에 있었듯 HTML, CSS, js를 활용한 프론트엔드 기반의 결과물을 만들어내는 과정을 경험했음
    

    

• 데이터베이스란 무엇이고 왜 데이터베이스가 필요할까? 
  • 데이터베이스는 데이터를 잘 찾기위해 존재하는 것
    • 정보를 쉽게 찾거나 업데이트를 할 수 있고, 많은 양의 정보를 효율적으로 관리할 수 있음
  • 데이터베이스는 크게 두가지로 구분할 수 있음
    

    

 

 

 

---

📚진행 결과물

• Firebase에 저장된 내용을 기반으로 내용을 저장하고, 가져오는 결과를 확인할 수 있었음

 

---

💡느낀점 및 보완 필요사항

• Firebase 활용 간 입력값에 대한 데이터가 저장되고, 그 데이터를 다시 구현된 화면으로 가져오는 절차까지 확인
  • module 환경에서 구현되지 않는 명령들을 확인하고 변경할 줄 알아야 함
  • module 환경이 되는 경우는 script의 내용들이 가장 마지막에 진행되기 때문에 ready 명령어로 굳이 지정해줄 필요가 없음을 인지할 것
• Java 기초
  • 변수의 경우는 같은 이름을 한 블록 안에서 중복 선언할 수 없음
    금일 진행했던 반복문 안에서 변수를 선언하거나, 변수 선언 및 초기화를 진행한 이후 반복문 내의 선언 부분을 비워두고 활용하는 방법으로 구성할 필요가 있음
    
    
  • 기초 예제 추가 활용을 통하여 지속적인 반복학습 필요
  • Java와 Javascript의 차이점을 확실히 하고 코딩 간 혼선 없도록 확실히 해야 함

 

---