Today I Learned

2024 스파르타 내일배움캠프 Sping 트랙 참여 // day2

shinelee26 2024. 10. 1. 21:28

오늘 진행한 학습 요약

1. [왕초보] 코딩이 처음이어도 쉽게 배우는 웹개발 A to Z - 3주차

  • [스파르타플릭스] 제이쿼리 적용하기
  • 클라이언트 - 서버 개념 이해하기
  • fetch 연습하기
  • [추억앨범] 및 [스파르타플릭스] fetch 적용하기

2. [왕초보] 코딩이 처음이어도 쉽게 배우는 웹개발 A to Z - 4주차

  • FireBase, FireBase Database 시작하기
  • FireBase Database 데이터 넣거나 가져오기

3. [왕초보] 코딩이 처음이어도 쉽게 배우는 웹개발 A to Z - 5주차

  • Github 사용하기

4. TIL특강

  • TIL 적는 법

5. [1주차 프로젝트] 팀원 소개하기 홈페이지 만들기

  • 와이어프레임 작성 및 역할 분배 
  • HTML 작성 및 멤버추가 기능 담당

 

학습 정리

1. [왕초보] 코딩이 처음이어도 쉽게 배우는 웹개발 A to Z - 3주차

  • PostBox 열고 닫는 기능 추가하기
    1. <head></head> 태그 안에 <script></script> 태그만들기
    2. <script></scirpt> 태그 안에 function 함수 적기
    3. 열고 닫는 버튼이 되는 곳에 onclick 적기
    4. <div></div> 안에 id="변수" 가져오기
    5. .toggle() 메서드 작성하기
더보기 
<head>
	<script>
        function openclose() {
            $('#postingbox').toggle();
        }
    </script>
</head>

<body>
	<button onclick="openclose()" type="button" class="btn btn-outline-light">영화 기록하기</button>
    <div class="mypostingbox" id="postingbox">
        <div class="form-floating mb-3">
            <input type="email" class="form-control" id="floatingInput" placeholder="영화 이미지 주소">
            <label for="floatingInput">영화 이미지 주소</label>
	</div>
</body>
  • 데이터 넣고 카드 생성하기 (복습하기)
    1. <head></head> 태그 안에 <script></script> 태그만들기
    2. <script></scirpt> 태그 안에 function 함수 적기
    3. 기록하는 곳에 onclick 적기
    4. <div></div> 안에 id="변수" 가져오기
    5. var 메서드를 이용해 postbox에 값 변수 담기
    6. append 메서드 사용하기
더보기 
    <script>
        function openclose() {
            $('#postingbox').toggle();
        }
        function makeCard() {
            let image = $('#image').val();
            let title = $('#title').val();
            let comment = $('#comment').val();
            let star = $('#star').val();
            
            let temp_html = `           
            <div class="col">
                <div class="card">
                    <img src="${image}"
                        class="card-img-top" alt="...">
                    <div class="card-body">
                        <h5 class="card-title">${title}</h5>
                        <p class="card-text">${star}</p>
                        <p class="card-text">${comment}</p>
                    </div>
                </div>
            </div>`;
            $('#card').append(temp_html);
        }
    </script>
    
    
     <div class="mypostingbox" id="postingbox">
        <div class="form-floating mb-3">
            <input type="email" class="form-control" id="image" placeholder="영화 이미지 주소">
            <label for="floatingInput">영화 이미지 주소</label>
        </div>
        <div class="form-floating mb-3">
            <input type="email" class="form-control" id="title" placeholder="영화 제목">
            <label for="floatingInput">영화 제목</label>
        </div>
        <div class="input-group mb-3">
            <label class="input-group-text" for="inputGroupSelect01">별점</label>
            <select class="form-select" id="star">
                <option selected>별점선택</option>
                <option value="⭐">⭐</option>
                <option value="⭐⭐">⭐⭐</option>
                <option value="⭐⭐⭐">⭐⭐⭐</option>
                <option value="⭐⭐⭐⭐">⭐⭐⭐⭐</option>
                <option value="⭐⭐⭐⭐⭐">⭐⭐⭐⭐⭐</option>
            </select>
        </div>
        <div class="form-floating mb-3">
            <input type="email" class="form-control" id="comment" placeholder="추천 이유">
            <label for="floatingInput">추천 이유</label>
        </div>
        <button onclick="makeCard()" type="button" class="btn btn-danger">기록하기</button>
    </div>
  • API란?
    • 은행 창구(?) 같은거
      • GET : 데이터 조회 요청
      • POST : 생성, 변경, 삭제
  • Fetch 사용해서 미세먼지 OpenAPI 데이터 가져오기
더보기 
<!doctype html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <title>미세먼지 API로Fetch 연습하고 가기!</title>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

    <style type="text/css">
        div.question-box {
            margin: 10px 0 20px 0;
        }
    </style>

    <script>
        function q1() {
            let url = 'http://spartacodingclub.shop/sparta_api/seoulair';
            $('#names-q1').empty();

            fetch(url).then(res => res.json()).then(data => {
                let rows = data['RealtimeCityAir']['row'];
                rows.forEach(a => {
                    let gu_name = a['MSRSTE_NM'];
                    let gu_mise = a['IDEX_MVL'];
                    
                    let temp_html = `<li>${gu_name} : ${gu_mise}</li>`;
                    $('#names-q1').append(temp_html);
                });
            })
        }
    </script>

</head>

<body>
    <h1>Fetch 연습하자!</h1>

    <hr/>

    <div class="question-box">
        <h2>1. 서울시 OpenAPI(실시간 미세먼지 상태)를 이용하기</h2>
        <p>모든 구의 미세먼지를 표기해주세요</p>
        <p>업데이트 버튼을 누를 때마다 지웠다 새로 씌여져야 합니다.</p>
        <button onclick="q1()">업데이트</button>
        <ul id="names-q1">
        </ul>
    </div>
</body>

</html>

 

2. [왕초보] 코딩이 처음이어도 쉽게 배우는 웹개발 A to Z - 4주차

  • FireBase 사용하기
    • 웹서버를 대신 만들어줌
    • 서버 개발 없이 제작할 수 있음
    • 백엔드 지식 없이도 사용 가능
  • 데이터베이스란?
    • 데이터를 저장하고 여러사람들이 관리하는 데이터의 모음
    • 데이터 베이스이 종류
      • 관계형 데이터 베이스 (SQL) : 정리된 정보를 다룰 때 사용
      • 비관계형 데이터 베이스 (NoSQL) : 복잡하거나 유연한 정보를 다룰 때 사용
  • [추억앨범] 데이터를 Firestore Database에 저장하기
    • !주의 : script type을 module로 지정하게 되면 이전에 사용했던 Jquery가 작동하지 않음
더보기 
  <script type="module">
        // Firebase SDK 라이브러리 가져오기
        import { initializeApp } from "https://www.xxx";
        import { getFirestore } from "https://www.xxx";
        import { collection, addDoc } from "https://www.xxx";
        import { getDocs } from "https://www.xxx";

        // For Firebase JS SDK v7.20.0 and later, measurementId is optional
        const firebaseConfig = {
            apiKey: "xxx",
            authDomain: "xxx",
            projectId: "xxx",
            storageBucket: "xxx",
            messagingSenderId: "xxx",
            appId: "xxx",
            measurementId: "xxx"
        };

        // Firebase 인스턴스 초기화
        const app = initializeApp(firebaseConfig);
        const db = getFirestore(app);
        
        
        $("#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);
            alert('저장완료!');
            window.location.reload();
        })
        
         function openclose() {
            $('#postingbox').toggle();
        }
        function makeCard() {
            let image = $('#image').val();
            let title = $('#title').val();
            let content = $('#content').val();
            let date = $('#date').val();

            let temp_html = `
            <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-muted">${date}</small>
                    </div>
                </div>
            </div>`;
            $('#card').append(temp_html);
        }
    </script>
  • [추억앨범] 데이터를 Firestore Database에서 가져오기
더보기 
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 temp_html = `            
            <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>`;
            $('#card').append(temp_html);
        });

3. [왕초보] 코딩이 처음이어도 쉽게 배우는 웹개발 A to Z - 5주차

  • 배포란?
    • 소프트웨어 개발 과정에서 개발한 AP, Website, Service 등을 실제 사용자들에게 제공하는 과정
  • Github란?
    • 인터넷에서 개발자들이 자신의 코드를 저장하고 다른 사람들과 공유하는 곳

4. TLI 특강

  • 작성에는 특별한 방법이 없음
    • 그러나! 자기가 느낀점이나 트러블 슈팅한 점을 적으면 좋음
      • (앞으로 적도록 노력해야지)

5. [1주차 프로젝트] 팀원 소개하기 홈페이지 만들기

  • 15조 팀원 소개하기 홈페이지 만들기 위해 팀 역할 분배
    • 와이어 프레임을 회의때 작성해봄
      • (발그림)

  • 나는 HTML이랑 CSS 맡음
  • 거기서 팀원 추가하기 부분 맡음

'Today I Learned'의 다른글

  • 현재글2024 스파르타 내일배움캠프 Sping 트랙 참여 // day2

티스토리툴바