ChatGPT 웹개발 진행노트 - 3일차

2024. 1. 22. 18:28스파르타_부트캠프/웹개발

강의 자료 

1주차 강의 자료

2주차 강의 자료

1주차

멜로디쉐어 만들기 2

배경화면 적용

배경 화면 적용을 위해 <head> 태그 안에 다음 코드 추가

<style>
	.background-banner {
	    background-image: linear-gradient(45deg,
	            rgb(51 43 43 / 75%),
	            rgb(20 19 20 / 61%)), url("https://s3.ap-northeast-2.amazonaws.com/materials.spartacodingclub.kr/webjong/images/music_festival.jpg");
	    max-height: 100%;
	    background-position: center;
	    background-size: cover;
	    background-repeat: no-repeat;
	    background-attachment: fixed;
	}
</style>

 

<body> 태그 바로 밑에 div 태그를 생성 후 background-banner를 지정한 후 이전의 navbar, main, modal, cards 추가

background-banner 하위에 그동안 생성한 navbar, main, modal, cards 추가

Footer 만들기

링크에서 contianer 하위 footer 항목 복사

https://getbootstrap.com/docs/5.3/examples/footers/

 

<div class="row"> 태그 삭제 및 <footer class="py-5"> 에서 class="py-5" 제거

<div class="container">
  <footer>
    <div class="d-flex flex-column flex-sm-row justify-content-between py-4 my-4 border-top">
      <p>© 2023 Company, Inc. All rights reserved.</p>
      <ul class="list-unstyled d-flex">
        <li class="ms-3"><a class="link-body-emphasis" href="#"><svg class="bi" width="24" height="24"><use xlink:href="#twitter"></use></svg></a></li>
        <li class="ms-3"><a class="link-body-emphasis" href="#"><svg class="bi" width="24" height="24"><use xlink:href="#instagram"></use></svg></a></li>
        <li class="ms-3"><a class="link-body-emphasis" href="#"><svg class="bi" width="24" height="24"><use xlink:href="#facebook"></use></svg></a></li>
      </ul>
    </div>
  </footer>
</div>

 

다음과 같이 footer가 추가된다.

 

부트스트랩 아이콘 만들기

다음 부트스트랩 주소의 CDN을 사용한다. 

https://icons.getbootstrap.com/

 

다음 CDN을 사용한다.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css");

 

이제 아이콘을 가져와서 사용한다. 원하는 아이콘을 검색한 후

코드를 복사할 수 있다.

footer 태그에 다음과 같이 붙여넣는다.

<div class="container">
    <footer>
      <div class="d-flex flex-column flex-sm-row justify-content-between py-4 my-4 border-top">
        <p>© Sparta Company, Inc. All rights reserved.</p>
        <ul class="list-unstyled d-flex">
          <li class="ms-3"><a class="link-body-emphasis" href="#"><i class="bi bi-youtube"></i></a></li>
          <li class="ms-3"><a class="link-body-emphasis" href="#"><i class="bi bi-instagram"></i></a></li>
          <li class="ms-3"><a class="link-body-emphasis" href="#"><i class="bi bi-postcard"></i></a></li>
        </ul>
      </div>
    </footer>
  </div>

 

다음과 같이 icon이 추가된다.

 

 

Homework

화면을 다음과 같이 수정한다.

 

변경된 내용은 다음과 같다.

* navbar가 오른쪽 정렬

* 중앙의 텍스트 변경

* 앨범의 텍스트 변경

 

각각 다음과 같이 진행한다.

navbar 오른쪽 정렬

justify-content-center -> justify-content-end 로 변경한다.

<nav class="navbar border-bottom border-body d-flex justify-content-end" data-bs-theme="dark">

 

중앙의 텍스트 변경

다음 위치에서 텍스트를 변경했으며, br 태그를 사용하여 linefeed를 적용하였다.

<h1 class="display-5 fw-bold text-body-emphasis">멜로디쉐어</h1>
<br>
<div class="col-lg-6 mx-auto">
    <p class="lead mb-4">노래를 들으면 생각나는 누군가가 있으신가요?
    </p>
    <p class="lead mb-4">당신이 감성이 담긴 인생곡 플레이리스트<br>멜로디쉐어에서 소중한 사람과 함께하세요
    </p>
    <div class="d-grid gap-2 d-sm-flex justify-content-sm-center">
        <button type="button" class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#exampleModal">
            뮤직 추가
        </button>
    </div>
</div>

 

앨범의 텍스트 변경

다음과 같이 텍스트를 변경한다.

<div class="col">
    <div class="card h-100">
        <img src="https://s3.ap-northeast-2.amazonaws.com/materials.spartacodingclub.kr/webjong/ive.jpg"
            class="card-img-top" alt="...">
        <div class="card-body">
            <h5 class="card-title">러브 다이브</h5>
            <p class="card-text">IVE(아이브)</p>
            <p class="card-text">추천 by 최지웅</p>
        </div>
    </div>
</div>

 

 

다음과 같이 출력됨울 확인하였다.

 

2주차

JavaScript 맛보기

위의 내용을 개발자 도구 콘솔을 통해 수정할 수 있다.

 

JavaScript 기초 문법

리스트와 딕셔너리

names = [{'name':'bob','age':20},{'name':'carry','age':38}]

console.log(names[0]['name']) // 'bob'을 출력
console.log(names[1]['name']) // 'carry'을 출력 


new_name = {'name':'john','age':7}
names.push(new_name)

// names의 값은? [{'name':'bob','age':20},{'name':'carry','age':38},{'name':'john','age':7}]
console.log(names[2]['name']) // 'john'을 출력

JavaScript의 리스트, 딕셔너리는 python의 리스트, 딕셔너리와 거의 유사하다. '[]', '{}' 로 각각 리스트, 딕셔너리를 사용한다.

JavaScript & jQuery 연습하기 (1)

jquery 사용을 위해 다음 링크에 접속하여 해당 CDN을 가져온다. 

https://www.w3schools.com/jquery/jquery_get_started.asp

이후 head 태그에 다음과 같이 jQuery CDN 링크를 추가한다.

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

 

다음 코드를 직접 작성하며 jquery 및 javascript에 대한 기본적인 연습을 진행하였다.

<!DOCTYPE html>
<html>

<head>
    <title>자바스크립트 문법 연습하기!</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
</head>
<style>
    .button-part {
        display: flex;
        height: 50px;
    }
</style>

<body>
    <div class="top-part">
        <h1>자바스크립트 문법 연습하기!</h1>
    </div>
    <hr />
    <br>
    <h2>1. 함수</h2>
    <div class="button-part">
        <button onclick="checkResult()">결과 확인하기!</button>
    </div>
    <div class="list-part">
        <h2>2. 리스트</h2>
        <div id="q1"></div>
    </div>
    <div class="dict-part">
        <h2>3. 딕셔너리</h2>
        <div id="q2"></div>
    </div>
    <div>
        <h2>4. 리스트 딕셔너리</h2>
        <div id="q3"></div>
    </div>
</body>

<script>
    function checkResult() {
        let a = ['사과', '배', '감', '귤']
        $('#q1').text(a[1])

        let b = {
            'name': '영수',
            'age': 30
        }
        $('#q2').text(b['name'])

        let c = [
            { 'name': '영수', 'age': 30 },
            { 'name': '철수', 'age': 35 },
        ]
        $('#q3').text(c[1]['age'])
    }
</script>
</html>

jquery는 <div id="q1">에서 해당 값에 접근하기 위해 id값을 참조하여 $('#q1')을 사용한다.

이 후 리스트, 딕셔너리 등의 자료형을 사용하여 해당 태그의 텍스트를 변경해보았다.

JavaScript & jQuery 연습하기 (2)

다음 코드를 통해 jquery 기능 몇가지에 대해서 더 학습해본다.

<!DOCTYPE html>
<html>

<head>
    <title>자바스크립트 문법 연습하기!</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
</head>

<body>
    <div class="top-part">
        <h1>자바스크립트 문법 연습하기!</h1>
    </div>
    <hr />
    <br>
    <h2>1. 함수</h2>
    <div class="button-part">
        <button onclick="checkResult()">결과 확인하기!</button>
    </div>
    <div class="list-part">
        <h2>2. 붙이기</h2>
        <div id="q1">
            <p>사과</p>
            <p>귤</p>
            <p>감</p>
        </div>
    </div>
    <div class="list-part">
        <h2>3. 붙이기</h2>
        <div id="q2">
            <p>영수는 24살입니다.</p>
            <p>세종은 30살입니다.</p>
            <p>수영은 20살입니다.</p>
        </div>
    </div>
    <script>
        function checkResult() {
            let fruits = ['사과', '배', '감', '귤', '수박']
            $('#q1').empty()
            fruits.forEach((fruit) => {
                let temp_html = `<p>${fruit}</p>`
                $('#q1').append(temp_html)
            })

            let people = [
                { 'name': '서영', 'age': 24 },
                { 'name': '현아', 'age': 30 },
                { 'name': '영환', 'age': 12 },
                { 'name': '서연', 'age': 15 },
                { 'name': '지용', 'age': 18 },
                { 'name': '예지', 'age': 36 }
            ]

            $('#q2').empty()
            people.forEach((person)=>{
                let name = person['name']
                let age = person['age']
                let temp_html = `<p>${name}는 ${age}살입니다.</p>`
                $('#q2').append(temp_html)
            })
        }
    </script>
</body>

</html>

``는 백틱 문자로 html 문자를 만들 때 사용하였다. 템플릿 리터럴(Template Literal)을 위해 사용하며, 위 코드상에서 ${fruit}, ${name}, ${age}에 해당하는 변수의 값을 문자열로 치환해준다. 

python으로 치면 일종의 포맷문자에 해당하는 것으로 html을 동적으로 생성할 때 주로 사용한다고 한다.

 

리스트, 딕셔너리의 값을 forEach 구문을 사용하여 순회하였고 id를 찾아 해당 div 태그 하위에 생성된 html 문자열을 추가하였다.

[데일리모토] 시간 기능 구현하기

ChatGPT를 사용하여 현재 시간을 표시하는 javascript 함수를 생성한다.

다음은 ChatGPT에게 질문한 내용과 결과이다.

 

[질문]

"현재 시간을 표시해주는 javascript 함수를 생성해줘"

 

[결과]

function displayCurrentTime() {
      // 현재 날짜와 시간을 얻어오기
      const now = new Date();

      // 시, 분, 초 추출
      const hours = now.getHours();
      const minutes = now.getMinutes();
      const seconds = now.getSeconds();

      // 출력 문자열 생성
      const timeString = `${hours < 10 ? '0' + hours : hours}:${minutes < 10 ? '0' + minutes : minutes}:${seconds < 10 ? '0' + seconds : seconds}`;

      // 결과를 HTML 요소에 표시
      document.getElementById('current-time').innerText = timeString;
    }

    // 1초마다 현재 시간을 갱신하기 위해 setInterval 사용
    setInterval(displayCurrentTime, 1000);

    // 페이지 로드 시 초기 시간 표시
    displayCurrentTime();

 

해당 코드를 script 태그에 추가한 후 시간 쪽 h1 태그 id에 "current-time" 을 추가한다.

<div class="greeting">
    <h1>Hello, My name!</h1>
    <h1 id="current-time"></h1>
</div>

 

화면에 다음과 같이 시간이 표시된다.

 

서버-클라이언트 통신 이해하기

클라이언트->서버 GET 요청 이해하기

웹에서 클라이언트가 서버에 요청 타입으로 GET, POST가 있다. 일반적으로 다음 상황 때 각 명령을 사용한다.

GET

통상적으로 데이터를 조회(Read)할 때

ex) 영화 목록 조회

POST

통상적으로 데이터 생성(Create), 변경(Update), 삭제(Delete)를 요청할 때

ex) 회원가입, 회원 탈퇴, 비밀번호 수정

 

이 중에서 GET 방식에 대해 정리해보면 다음과 같다.

위 URL은 "?"를 기준으로 두 부분으로 나눌 수 있다.
"?" 기준으로 앞부분이 [서버 주소], 뒷부분이 [전달 데이터]이다.

 

서버 주소

https://movie.daum.net/moviedb/main?

 

전달 데이터

movieId=161806

 

또 다른 예로 지금 작성하는 다음 URL을 분석해보면 다음과 같다.

더보기

google.com/search?q=아이폰&sourceid=chrome&ie=UTF-8

전달 데이터는 "&"로 나눠서 여러개의 데이터를 보낼 수 있다. 결과는 다음과 같다.

서버 주소

google.com/search

 

전달 데이터 

q=아이폰

sourceid=chrome

ie=UTF-8

진행사항 정리

[1주차]

배경화면 이미지 및 아이콘을 적용하여 웹페이지 작성을 마무리하였다. 배경화면만 잘 적용해도 웹페이지의 기본 분위기가 살아나는 것을 볼 수 있다. 화면 디자인 기법으로 잘 이해해둘 필요가 있을 것 같다.

 

[2주차]

javascript 및 jquery에 대한 전반적인 학습을 하였다. javascript의 기본적인 문법은 대략적으로 알고 있었으나 jquery를 사용해본 경험은 없었기 때문에 기본적인 사용법을 익힌 것은 많은 도움이 되었다. 특히 $('#id')를 통해 태그에 접근하는 것은 빈번히 사용될 것으로 보이니 숙지해둔다.

리스트, 딕셔너리는 파이썬과 거의 유사한 형태로 사용 가능함을 배웠다. 매우 빈번히 사용하는 자료구조이므로 사용법을 충분히 숙지할 필요가 있다.

``를 사용하여 템플릿 리터럴을 만든 후 동적으로 html을 생성하는 부분은 상황에 따라 종종 사용할 수 있을 것 같으니 기억해두어야겠다.