어제 하지 못했던 JQuery 부분부터 시작해야겠다.

 

  • JQuery란?
    자바 스크립트를 더욱 쉽게 사용하기 위해 만들어진 것으로, 보조 프로그램이 아닌
    미리 작성된 Javascript 코드 패키지 라고 할 수 있다.
    길고 복잡하게 쓸 수 밖에 없었던 코드들도 Jquery를 통해 줄여서 쓰는게 가능하다는것 !

이를테면

document.getElementById('hello').innerHTML = '안녕';

이런 코드를 Jquery를 이용하면

 

$('#hello').html('안녕');

이렇게 간단하게 쓸 수 있다.

 

 

 

사용법 또한 간단한데, 헤드 사이에

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

를 넣어주면 바로 사용 준비가 완료된다.

 

 

 

 

<script>
    function checkResult() {
            let people = [
                { 'name': '서영', 'height': 165 },
                { 'name': '현아', 'height': 170 },
                { 'name': '영환', 'height': 175 },
                { 'name': '서연', 'height': 162 },
                { 'name': '지용', 'height': 190 },
                { 'name': '예지', 'height': 168 }
            ]
    

        $('#q2').empty();

        people.forEach(a => {
            let name = a['name'];
            let height = a['height'];
            let temp_html = `<p>${name}의 키는 ${height}cm 입니다.</p>`;
            $('#q2').append(temp_html);
        });
    }
</script>

오늘 학습하면서 만든 코드이다.

 

하나씩 살펴보면, 위쪽 let people은 그냥 리스트 지정하는 구문이고

 

아래$('#q2').empty();  부분이 jquery가 사용된 부분으로, 

id 가 q2 로 지정해놓은 대상을 empty 처리해달라는 구문이다.

 

  people.forEach(a => {

people의 요소를 하나씩 배열해라

            let name = a['name'];
            let height = a['height'];
            let temp_html = `<p>${name}의 키는 ${height}cm 입니다.</p>`;

 

temp_html 은,   people 안에있는 name 과 height 를 각각 넣어서 문장으로  이뤄진다. (`` 사용)

(let name height 지정 없이 바로 ${a['name']} 로 작성해도 동일하게 작동하지만, 써먹기 좋지 않을거란 예감이 든다)

 

$('#q2').append(temp_html);

마지막으로 q2에  해당 내용을 추가하는 구문으로 마무리된다. 

 

간단히 정리하면,
 

q2 부분을 empty 해버리고  temp_html 내용을 추가한다 라고 보면 된다.

 

 

결과는

 

이름과 나이가 적혀있던 q2에 해당하는 부분이

checkresult 트리거가 적용되면

 

 

 

이전 내용은 empty 처리가 되고

키와 나이 temp_html의 내용이 추가되는것을 확인 할 수 있다.  

 

 

TIL을 정리하면서 보니

복잡한거 같으면서도 간단한듯 하고... 계속 하다보면 익숙해질 것 같은 느낌은 든다.

 

 

꼭,

강의 영상을 보면서...  '복잡하다.. 어떻게..?  어....?'  라고 생각 될 때 쯤

강사님이 어김없이

' 복잡하게 생각 안하셔도 돼요. 지금 전부 이해하고 암기할 필요 없어요' 

라는 말을 귀신같이 하시는데,  정말 괜찮을걸까 하다가도

 TIL 에 학습내용을 정리하는것 만으로

'이해한걸까?' 라고 의심되던 부분이 

'어느정도 이해가 되었다' 로 바뀌게 된다.

(의심).empty

(의심).append(안심)  라고 할 수 있겠다 !!

 

 

학습 목표
- Javascript의 사용 방식에 대해 이해하고, 문법에 익숙해진다.
- JQuery를 활용하여 HTML을 조작할 수 있다.

 

 

오늘의 목표는 익숙해지기

 

시작은 저번에 배운것을 복습하는 것 부터

 

주요 복습 내용은

  • Bootstrap 활용
  • Google-font 활용
  • <style> 에서 본문내용의 위치와 크기, 모양을 조정
더보기
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>스파르타플릭스</title>
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <style>


        * {
            font-family: 'Jua', sans-serif;
        }

        .main {
            color: white;

            background-position: center;
            background-size: cover;
        }

        body {
            background-color: black;
        }

        .mycards {
            width: 1200px;

            margin: 20px auto 20px auto;
        }

        .mypostingbox {

            width: 500px;
            margin: 20px auto 20px auto;

            border: 1px solid white;
            padding: 20px;
            border-radius: 5px;


        }

        .form-floating>input {
            background-color: transparent;
            color: white;

        }

        .form-floating>label {
            background-color: transparent;
            color: white;
        }

        .input-group>label {
            background-color: transparent;
            color: white;
        }

        .mypostingbox>button {
            width: 100%;
        }
    </style>
    <script>
        function hey() {
            alert('안녕하세요') ;

        }
    </script>
</head>

<body>
    <header class="p-3 text-bg-dark">
        <div class="container">
            <div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start">
                <a href="/" class="d-flex align-items-center mb-2 mb-lg-0 text-white text-decoration-none">
                    <svg class="bi me-2" width="40" height="32" role="img" aria-label="Bootstrap">
                        <use xlink:href="#bootstrap"></use>
                    </svg>
                </a>

                <ul class="nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0">
                    <li><a href="#" class="nav-link px-2 text-danger">spartatlix</a></li>
                    <li><a href="#" class="nav-link px-2 text-white"></a></li>
                    <li><a href="#" class="nav-link px-2 text-white">시리즈</a></li>
                    <li><a href="#" class="nav-link px-2 text-white">영화</a></li>
                    <li><a href="#" class="nav-link px-2 text-white">내가 찜한 콘텐츠</a></li>
                </ul>

                <form class="col-12 col-lg-auto mb-3 mb-lg-0 me-lg-3" role="search">
                    <input type="search" class="form-control form-control-dark text-bg-dark" placeholder="Search..."
                        aria-label="Search">
                </form>

                <div class="text-end">
                    <button type="button" class="btn btn-outline-light me-2">Login</button>
                    <button type="button" class="btn btn-danger">Sign-up</button>
                </div>
            </div>
        </div>
    </header>
    <div class="main">
        <div class="p-5 mb-4 bg-body-tertiary rounded-3">
            <div class="container-fluid py-5">
                <h1 class="display-5 fw-bold">Custom jumbotron</h1>
                <p class="col-md-8 fs-4">병든 왕을 둘러싸고 흉흉한 소문이 떠돈다. 어둠에 뒤덮인 조선, 기이한 역병에 신음하는 산하. 정체 모를 악에 맞서 백성을 구원할 희망은 오직
                    세자뿐이다.</p>
                <button onclick="hey()" type="button" class="btn btn-outline-light">영화 기록하기</button>
                <button type="button" class="btn btn-outline-light">상세정보</button>
            </div>
        </div>
    </div>
    <div class="mypostingbox">
        <div class="form-floating mb-3">
            <input type="email" class="form-control" id="floatingInput" placeholder="영화 이미지 주소">
            <label for="floatingInput">영화 이미지 주소</label>
        </div>
        <div class="form-floating mb-3">
            <input type="email" class="form-control" id="floatingInput" 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="inputGroupSelect01">
                <option selected>별점 선택</option>
                <option value="1"></option>
                <option value="2">⭐⭐</option>
                <option value="3">⭐⭐⭐</option>
                <option value="4">⭐⭐⭐⭐</option>
                <option value="5">⭐⭐⭐⭐⭐</option>
            </select>
        </div>
        <div class="form-floating mb-3">
            <input type="email" class="form-control" id="floatingInput" placeholder="추천 이유">
            <label for="floatingInput">추천 이유</label>
        </div>
        <button type="button" class="btn btn-danger">기록하기</button>
    </div>
    <div class="mycards">
        <div class="row row-cols-1 row-cols-md-4 g-4">
            <div class="col">
                <div class="card h-100">
                        class="card-img-top" alt="...">
                    <div class="card-body">
                        <h5 class="card-title">영화 제목</h5>
                        <p class="card-text">⭐⭐⭐</p>
                        <p class="card-text">영화 코멘트</p>
                    </div>
                </div>
            </div>
            <div class="col">
                <div class="card h-100">
                        class="card-img-top" alt="...">
                    <div class="card-body">
                        <h5 class="card-title">영화 제목</h5>
                        <p class="card-text">⭐⭐⭐</p>
                        <p class="card-text">영화 코멘트</p>
                    </div>
                </div>
            </div>
            <div class="col">
                <div class="card h-100">
                        class="card-img-top" alt="...">
                    <div class="card-body">
                        <h5 class="card-title">영화 제목</h5>
                        <p class="card-text">⭐⭐⭐</p>
                        <p class="card-text">영화 코멘트</p>
                    </div>
                </div>
            </div>
            <div class="col">
                <div class="card h-100">
                        class="card-img-top" alt="...">
                    <div class="card-body">
                        <h5 class="card-title">영화 제목</h5>
                        <p class="card-text">⭐⭐⭐</p>
                        <p class="card-text">영화 코멘트</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>

복습 강의를 바탕으로 만든 스크립트

복잡하고 길어 보이지만, bootstrap 에서 코드 뭉치를 복붙 하는것이 90% 이고 

나머지는 원하는 내용으로 수정하면 된다. 

중요한 것은 내가 원하는 것을 bootstrap 에서 찾아 오는것과

어느 부분에 붙여 넣어야 하는지만 잘 기억하면 된다.

 

 

다음 내용으로 Javascript 에 대해

  • 프로그래밍 언어 중 하나로, 브라우저가 알아들을 수 있는 언어이다.
더보기

브라우저가 JavaScript를 주로 사용하는 이유는 역사적으로 JavaScript가 웹 브라우저에서 실행되는 스크립트 언어로 사용되어 왔기 때문입니다. 웹 페이지의 동적인 기능을 구현하기 위해 JavaScript가 개발되었으며, 많은 웹 개발자들이 JavaScript를 사용하여 웹 애플리케이션을 구축하고 유지 관리해왔습니다. 결국, Javascript가 브라우저한테 명령을 내리는 ‘표준’이라고 생각하시면 됩니다 !

 

자바스크립트를 통해서 서버도 만들 수 있습니다! 즉, 자바스크립트 하나로 프론트엔드, 백엔드를 다 가능하다는 거죠. 또한 IOS와 안드로이드 앱은 물론 게임 개발 엔진이나 IoT(사물 인터넷) 애플리케이션 개발도 가능합니다. 웹 개발을 위해서는 거의 필수적이며 다양한 분야에서 널리 사용되고 있는 자바스크립트 본격적으로 배우러 가시죠 !

 

라고 소개가 되어있는데,

이전에 7일차에 미리 배웠던 Javascript 톺아보기 와 거의 동일한 설명이었다.

당장은 html과 css로 만들어 놓은 내용에 '작동, 움직임' 을 더해주는 언어 라고 이해를 하면 될 듯 하다.

 

 

 

가장 처음 배운 것은 펑션과 콘솔

 

<script>

   function hey() { console.log('안녕하세요') }

</script>

 

 

그리고 웹 페이지에는 이러한 script 구문이 연산되는 console 부분이 존재하고

이 부분은 개발자가 확인하기 위해 있다는것을 알았다.

 

다음으로

 

let a = 2
let b = 3

console.log(a+b) // 5

let c = '대한'
let d = '민국'

console.log(c+d) // 대한민국

변수의 선언과 console.log 로 확인하는 내용이다. 기본적인 사칙연산과 문자열 더하기 또한 가능

 

 

let a_list = []  // 리스트를 선언. 변수 이름은 역시 아무렇게나 가능!

// 또는,

let a = ['사과','수박','딸기','감'] // 로 선언 가능

console.log(a[1]) // 수박
console.log(a[0]) // 사과

//리스트 길이 구하기
console.log(a.length) //4

리스트는 순서를 갖는다는게 중요하다 !  (0 부터 시작)

 

 

 

 

  • 딕셔너리: 키(Key)-밸류(Value) 값의 묶음
let a_dict = {}  // 딕셔너리 선언. 변수 이름은 역시 아무렇게나 가능!

// 또는,

let a = {'name':'영수','age':27} // 로 선언 가능

console.log(a)
console.log(a['name']) // 영수
console.log(a_dict['age']) // 27

 

활용 부분은 내용이 약간 복잡해 보이기 때문에 다음 시간에 학습 하도록 해야겠다 !

복습 부분에서 시간을 너무 쓰기도 했고 ,

오늘 사전캠프 면담도 진행하느라 시간이 부족했다.

 

 

 

오늘은 다시 SQL을 학습하기로 했다.

 

시작은 간단한 복습 부터 !

마침 저번 강의 내용이 희미해져 가고있었다.

 

    1. 문자변경과 조건문
    👉 문자 변경
    1. REPLACE : 지정한 문자를 다른 문자로 변경
    2. SUBSTRING : 특정 문자만 추출
    3. CONCAT : 여러 문자를 합하여 포맷팅
    👉 조건문
    1. IF : if(조건, 조건을 충족할 때, 조건을 충족하지 못할 때)
    2. CASE WHEN END : case when 조건1 then 값(수식)1
                                                when 조건2 then 값(수식)2
                                                else 값(수식)3 end

 

오늘 학습 내용

  • Subquery 를 활용하여 복잡한 연산을 수행한다
  • Join 을 활용하여 여러개의 테이블에 있는 데이터를 한 번에 조회하고 연산한다

Subquery 는 한 번에 하기 힘든 여러 연산을 차근 차근 풀어서 쓸 때 사용한다고 이해했다.

컬럼의 평균값(AVG) 을 구한다음에 조건에 따라 해당 평균값에 추가로 연산해야 하는 경우 라던지, 

조건 자체를 연산의 결과로 하고 싶을 때 사용한다.

select restaurant_name,
       case when sum_of_quantity<=5 then 0.1
            when sum_of_quantity>15 and sum_of_price>=300000 then 0.005
            else 0.01 end ratio_of_add
from 
(
select restaurant_name,
       sum(quantity) sum_of_quantity,
       sum(price) sum_of_price
from food_orders
group by 1
) a

 

이 경우는,

restaurant_name 별로 quantity의 합, price의 합계를 먼저 구한다음

Subquery를 활용하여 추가로 합계된 값을 조건에 따라 case 로 나눠 표시해주도록 한 내용이다.

 

꽤 복잡하고 실습 과정에서 생각을 정리하는 시간이 길어졌다.

이해는 됐지만 정리가 제대로 안되었기 때문인데,

우선도를 파악하는 것이 중요했다.

 

제시된 문제에 따라 가장 먼저 mainquery에 기재할 내용과 이후 subquery 를 통해 마무리할 최종결과값을 나누어 생각해야한다.

그렇기 때문에, subquery를 잘 활용하기 위해선 문법보다는 우선 문제 자체를 해석하는 능력이 중요하다.

식당별 평균 음식 주문 금액과 주문자의 평균 연령을 기반으로 Segmentation 하기
- 평균 음식 주문 금액 기준 : 5,000 / 10,000 / 30,000 / 30,000 초과
- 평균 연령 : ~ 20대 / 30대 / 40대 / 50대 이상

 

위 문제를 보고 나는 10분 가량은 아무것도 할 수 없었다. 

문제 자체를 이해를 못했기 때문이다...

(문제가 다소 불친절한 감도 있지만)

 

어디서 부터 시작해야 하지? 

식당별 이니까, restaurant_name 을 group by 해야하고,

평균 음식 주문 금액은 avg(price), 평균 연령은 avg(age) 로 구해놓고 subquery 로 넘어간다.

subquery 에서 나머지 조건에 해당하는 부분을 case when 구문으로 나누어 표시되도록 하면 끝 !

SELECT restaurant_name,
	   avg_price,
	   avg_age,
		case when avg_price <= 5000  then 'price_group1' 
	        when avg_price  >  5000 and avg_price <= 10000 then 'price_group2'
	        when avg_price  > 10000 and avg_price <= 30000 then 'price group3'
	        when avg_price  > 30000 then 'price group4' end 'price group',
	    case when avg_age < 30 then 'age_group1'
	         when avg_age >= 30 and avg_age < 40 then 'age_group2'
	         when avg_age >= 40 and avg_age < 50 then 'age_group3'
	         else 'age_group4' end 'age group'
FROM
(
SELECT f.restaurant_name ,
	   f.price,
	   c.age,
	   AVG(f.price) avg_price ,
	   avg(c.age) avg_age
from food_orders f inner join customers c on f.customer_id =c.customer_id
group by 1
order by 1
) T

위와 같이 풀이 해 보았다. 잘 작동하는 듯 하다.



추가로, 
Join  에 대해서도 학습했는데, 

한 테이블 내에서가 아닌, 여러 테이블에서 데이터를 가져와야 하는 경우 사용한다.

 

따라서 테이블을 불러오는 From 뒤에 사용되며, 

from food_orders a left join customers b on a.customer_id=b.customer_id

위와 같이 From 메인 테이블 left join 불러올 테이블 on 메인 테이블.기준컬럼 = 불러울테이블.기준컬럼 

이라고 할 수 있다.

기억해야할 점은 두 테이블에 공통된 데이터가 있어야 한다는 것이다.

당연히, 기준도 없이 아무 테이블이나 마구잡이로 합칠 수 없다는 것

추가로
Left join의 경우 테이블에 빈 데이터가 있는 경우에 공백으로 불러오며

Inner join의 경우 두 테이블 모두 데이터가 있는 경우만 조회한다.

 

1. Javascript 이란?

  • Java 와는 별개의 언어로,  ‘웹페이지에 생동감을 불어넣기 위해’  만들어진 프로그램 언어이다.

    • HTML/CSS와 완전히 통합할 수 있음
    • 간단한 일은 간단하게 처리할 수 있게 해줌
    • 모든 주요 브라우저에서 지원하고, 기본 언어로 사용됨
    마치 가장 널리 쓰이는 언어인 '영어' 처럼, 최초로 만들어진 언어도 아니고, 
    독보적으로 우수한 언어인것도 아니지만, 현대 사회에서 가장 보편적이는 언어 라는 느낌이다.

 

2. Javascript 프레임워크 알아보기

  • Express.js
    • Express.js의 특징은 무엇인가요?
      Node.js 를 통해 서버를 구축할 때, 가장 보편적으로 사용되는 프레임 워크로서 
      가볍다는 특징이 있다.

    • 장점
      가장 많은 관련 커뮤니티를 가지고 있고, 앞서 말한것 처럼 가벼운 프레임 워크이기 때문에
      아이디어를 빠르게 검증하는데 유리하고 자유도가 높다.
    • 단점
      Express 특유의 유연함이 협업에 있어서는 불리하게 작용할 수 있다.
      데이터 유효성 등의 테스트는 직접 구현하여야 하고 테스트하여야 한다.
  • Nest.js
    • Nest.js의 특징은 무엇인가요?
      Java Spring 구조를 참고하여 만들어진 Node.js 환경의 새로운 프레임 워크로,
      MVC 디자인 패턴을 기본으로 하기 때문에 협업시 효율적으로 작업할 수 있다.
    • 장점
      Express에 비하여, 정해진 디자인 패턴이 있기 때문에 협업에 유리하다.
      Typescript 를 기본으로 적용하기 때문에 오류 발생을 줄일 수 있다.
    • 단점
      Typescript를 기본 언어로 제공하므로 정적 타입에 대한 이해 필요.
      Java Spring의 구조를 토대로 한 프레임워크이다보니, DI, IoS 등의 OOP 개념 습득이 필요함.

 

오늘은 본격적인 내용에 앞서 간단히 Javascript 에 대해 알아보는 시간을 가졌다.

지금까지 배운 내용들 중 목표가 되는 Node.js 에 가까운 부분이고,  

그렇기에 가장 중요한 부분이라고 생각된다.

 

Html, SQL, Javascript 의 학습을 동시에 진행해도 될까 하는 걱정이 있지만, 

최대한 나의 템포에 맞춰 이해될 정도 까지만, 너무 급하지 않게 진행 할 생각이다.

학습 목표
- 웹의 작동 원리와 웹을 개발하기 위해 배워야 할 것을 알 수 있다.
- 웹의 뼈대인 HTML과 꾸미기인 CSS를 이해하고 사용할 수 있다.
- 부트스트랩을 활용하여 웹을 다양하게 구현할 수 있다.

 

 

오늘 배운 내용의 핵심은,

HTML은 웹페이지의 뼈대를 담당하고,

CSS는 뼈대인 HTML을 꾸며주는 역할을 한다는 것.

 

 

더보기

 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .mytitle {
            width: 300px;
            height: 200px;

            color: white;
            text-align: center;

            padding-top: 30px;
            border-radius: 8px;

            background-position: center;
            background-size: cover;
        }
        .wrap {
            width: 300px;
            margin: 50px auto 0px auto
        }
    </style>
</head>

<body>
    <div class="wrap">
        <div class="mytitle">
            <h1>로그인 페이지</h1>
            <h5>아이디, 비밀번호를 입력해주세요</h5>
        </div>
        <p>I D : <input type="text"></p>
        <p>PW : <input type="text"></p>
        <button>로그인 하기</button>
    </div>
</body>

</html>

 

강의 중 배운 내용을 토대로 뼈대와 이미지, 위치 정렬 등의 기능을 사용 해 보았다.

 

강의의 템포가 빠르다고 느껴져서 중간중간 일시정지를 하는 일이 잦았다.

이해하는 과정과 코드를 써보는 과정이 동시에 진행 하기엔 다소 힘들었다.

 

짚고 넘어가야 할 부분을 체크하면,

 

<div class="ABC"> </div> 를 활용하여 html body에 해당하는 일정한 범위에 임의 변수를 지정하여,

해당 범위에 주고싶은 변화를 <head> 부분 <style> 에서 불러와서 여러가지 태그들로 시각적 변화를 줄 수 있다.

 

사용된 모든 태그를 머리속에 집어넣고 암기하는것은 불가능에 가깝기 때문에 

영상에서 말해준 것 처럼, 필요한 태그를 구글 검색을 통해 찾아내거나, 

이미 사용했던 자료에서 응용하는것을 잘 기억해야 할 것이다.

 

 

 

●부트 스트랩

다음 배운것은 부트 스트랩을 활용하는 내용이다.

쉽게 설명하면 미리 만들어놓은 베이스  같은 것으로, 기본적으로 어느정도 사용할 수 있는 형태의 

소스 뭉치라고 할 수 있다.

 

다른 강의에서도 많이 들었던 말이 기억 나는데, 

최고의 개발자는, 모든 코드를 완벽하게 직접 짜는 개발자가 아니라

적절한 코드를 빠르게 가져와서 원하는대로 조립하는 개발자라고 하였다.(물론 분야별로 다르겠지만)

 

그런 의미에서 공유되는 부트 스트랩들은 잘 퍼와서 적용하는것이 굉장히 중요하다고 할 수 있다.

 

https://getbootstrap.com/

 

Bootstrap

Powerful, extensible, and feature-packed frontend toolkit. Build and customize with Sass, utilize prebuilt grid system and components, and bring projects to life with powerful JavaScript plugins.

getbootstrap.com

↑ 엄청나게 많은 부트 스트랩을 무료로 공유하는 웹 사이트가 있다.

 

 

 

부트 스트랩을 통해 버튼과 카드 베이스를 가져와서 활용해 보았고,

강의 내용을 토대로 간단한 웹 페이지를 만들 수 있었다. 

(사실 거의 따라 쓰는데 급급했다)

 

어제에 이어서 SQL 강의를 계속해서 들었다.

 

SQL 내에서 사용되는 명령어들을 '함수' 라고 부른다는것을 배우고

어제 배웠던 내용을 상기해보면,

Select *
From table
where 조건
		between A and B  사이  
        in (A, B, C)     하나라도 포함
       	like '%A%'		 A가 있는 
        
      필터링
        A and B          A B 전부 만족
        A or  B          A 이거나 B 일 때
        not A            A 가 아닐 때

간단한 내용들이었고

 

 

오늘 배운 내용은

	sum(컬럼)   전부 더하기
	avg(컬럼)   데이터 평균값
    count(컬럼)    데이터의 갯수 
    
	group by (컬럼)  컬럼내 데이터 종류별로 나열
    Order by (컬럼)  오름차순으로 컬럼 데이터 정렬  
    				 desc 내림차순

 

해당 칼럼 내의 데이터를 방법에 따라 계산한 결과를 표시하거나,

데이터의 표시 방법 등에 관한것을 배웠다.

 

조금 복잡하긴 했지만 이해하기에 어려운 수준은 아니었다.

 

추가로,

 replace(컬럼, 현재 값, 바꿀 값)
 		 컬럼 내의 현재 값과 일치하는 데이터를 바꿀 값으로 변경
        
 substring(컬럼, 시작점, 읽을 수)
 		   컬럼 내 데이터의 일부만 표기

 concat(값1, 값2, 값3)
 		임의의 값을 하나로 붙여서 표기

슬슬 어렵다는 느낌이 들었지만 여기까진 괜찮다.

 

IF(조건, 조건충족시, 불충족)

Case when 조건1 then 값(수식)1
     when 조건2 then 값(수식)2
     else 값(수식)3
     end

조건 지정의 대명사인 if 와 case를 배우면서 두뇌 회전이 지연되는듯 한 현상을 겪었다.

보는것만으로 이해되던것들이 잘 되지 않기 시작했다.

 

그래도 강의 영상을 멈춰두고 잠시 생각하는 것으로 이해하려고 노력했고 

시간이 좀 걸려도 이해하는데 무리는 없었다.

 

단순히 함수의 용도에 대한 이해도 중요하지만,

실질적인 활용 방법에 대해 생각할 수 있는 지능(?) 이 약간 별개라고 느껴진다.

 

이해했다고 생각한 부분도, 직접 써보려고 하니 버벅거리며 잘 되지 않았다.

 

 

머리속에서 날아가지 않게 주기적으로 직접 사용하는 복습이 중요 할 것 같다.

 

더보기
문제
다음의 조건으로 배달시간이 늦었는지 판단하는 값을 만들어주세요.
 

1. 다음의 조건으로 배달시간이 늦었는지 판단하는 값을 만들어주세요.

  • 주중 : 25분 이상
  • 주말 : 30분 이상

오늘 강의에서 제공한 문제를 풀어 보았는데, 

	   case when delivery_time >= if (day_of_the_week = 'weekend',30, 25) then 'Late'  
	   else 'On-time' end  "지연여부"

와 같은 case, if 구문을 이용해서 풀이 해 보았다.

late 표기 조건으로 주말은 30 이상, 그 외는 25 이상 인 경우, Late

나머지의 경우 On-time 으로 표기 하도록 해 보았다.

 

위 문제의 경우 주말과 주말 이외의 경우 밖에 없기 때문에 저런 식으로 사용 할 수 있었다.

사전캠프 2주차가 되었다.

 

등록이 조금 늦어졌기 때문에 오늘부터 강의를 지급받아 학습할 수 있었다.

첫 주차에는 강의가 없다보니 붕 뜬 것 같은 기분이었는데, 오늘부터는 본격적인 학습 진행이 가능할 듯 하다.

 

오늘 배운것은 SQL 기초 부분이다.

 

학습 이전에는 SQL  이 뭔지 아예 모르는 상태였다.

데이터 베이스 관리에 주로 쓰이는 언어.. 정도의 지식 뿐이었다.

(꽤나 정확했을지도)

 

다른 강의영상들과 마찬가지로, SQL 이 무엇인지,

  1. SQL 이란 무엇일까요?
      ❓ SQL 이 무엇이고 왜 필요한가요?
  • SQL 은 데이터베이스와 대화를 하기 위한 언어입니다.
  • 옆의 사람에게 필요한 것을 요청할 때 ‘A 를 주시겠어요?’ 와 하는 것과 같이 데이터베이스에게도 ‘A를 주겠니?’ 라고 이야기할 때 사용하는 언어라고 할 수 있습니다.

   

그리고  코딩에 대한 두려움을 줄여주는 응원문구 와 같은 것으로 시작했다.

 

 

본격적으로 강의에 들어가서,

 

DBeaver 를 설치하고, 강의에서 제공하는 Database Server에 연결한 뒤에 

해당 Database 내의 필요한 항목만을 불러오는 명령에 대한 내용을 배웠다.

  • select 
     - 테이블의 어떤 항목을 표시할지 (주로 열 로 구분된) 작성하는 부분
     - *  을 사용한다면 테이블 내의 항목을 전부 표시
  • from
     - 데이터를 가져올 테이블을 지정

이 두 가지가 SQL 에 아주 가장 대단히 기초적인 구문이라고 할 수 있다.

 

여기에 where 을 사용하여 테이블의 데이터 중 원하는 것만 가져올 수 있는데,

 

통상적으로 사용하는 것에는

where 테이블 between A and B  ---  A 와 B 사이의 값

                      in ( A, B, C)  --- A B C 하나라도 포함하는것

                      like '%A'   ---  A로 끝나는 값

 

 

추가로 조건을 추가하여 (논리연산)

필터링 조건을 더 할 수 있는데,

 

and  그리고    --- 모든 조건을 만족해야함 

or    또는        --- 하나라도 만족해야함

not   아닌       ---  해당값을 제외한

세 가지로 조건을 추가 할 수 있다.

 

예를 들어,

데이터 베이스 내의 음식목록(food)에서 가격(price)이 15000원 이상이면서 한국(cuisine)음식인 경우를 불러오고 싶다면

select *
from food
where price >= 15000 and cuisine = 'korean'

위 와 같이 사용할 수 있다.

 

사실 상 거의 따라했을 뿐인데 잘 작동하니 신기했다.

 

 

 

 

 

내일배움캠프 사전캠프 3일차

내일배움캠프 사전캠프 3일차

HTML 기초

오늘은 인생 최초 '코딩' 이라고 불리것을 직접 해보았다.
비교적 쉬운 언어이기도 하고, 코딩이라고 하기 부끄러운 수준이지만
제로베이스였던 나에게는 코딩에 처음 발을 딛는 역사적인 날이라고 할 수 있다.

 

본문은 배운 내용을 토대로 html로 작성을 해 보았다.

간단히 Hello world 텍스트를 표시하는것 부터 시작하여 <h1> ~ <h6>태그
그리고 <!doctype html>로 시작하여 <head> <body>를 포함하는 보편적인 html의 구성,
이미지와 링크 첨부방법 등등을 배웠다.

사실 위의 텍스트를 적는 와중 문제가 발생했는데, 그것은 텍스트로 표시하고 싶은 <h1>가 태그로 인식되지 않게 하기위해&lt;h1&gt;와 같은 방식으로 적어야 한다는 것이다...

를 쓰는 와중에도 문제가 생겼는데 &lt; 또한 텍스트로 표현하기 위해 <xmp> 태그 란 것을 알아야 한다는 것 결과적으로 xmp 태그를 사용하면 전부 텍스트로 출력이 가능하지만, xmp태그 내의 텍스트들이 폰트가 다른것과
줄바꿈을 기본적으로 포함하고 있다는점도 알게됐다.

xmp내의 폰트 수정도 아무튼 가능하다

시청한 영상은 유튜브- 생활코딩으로 초보자 친화적인 설명이 좋았다.

정말 간단하고 기초적인 내용같지만, 개발자가 되기 위한 성공적인 출발이라는 느낌이 든다.

24- 06 - 20 

 

오늘 공부한 내용은 게임 서버의 역사에 관한 것이다.

 

게임 서버의 종류를 가장 크게 분류하면

리슨 서버 / 데디케이티드 서버가 있고 추가로 P2P 서버 까지 세 종류로 나눌 수 있다.

 

 

리슨 서버

클라이언트로 접속한 유저 중 한명이 호스트가 되는 방식이다.

흡사 '방장' 과 같은 느낌

최근에 플레이 한 게임 중 '팰 월드' 라고 하는 게임에서 이러한 서버 방식의 멀티 플레이를 지원한다.

유저 개인이 호스트가 되어 작은 서버를 만들면 다른 유저가 접속 가능한 방식이다.

팰 월드의 특이한 점은 호스트가 게임을 종료하면 서버 또한 종료되기 때문에, 접속중이던 다른 유저도 

모두 게임이 종료되어 당황했던 기억이 있다.
보통 다른게임의 경우, 호스트가 연결이 끊어지면 접속중인 다른 유저가 호스트가 된다.

 

데디케이티드 서버

우리가 흔히 말하는 '서버' 그 자체라고 할 수 있다.

게임 서버 전용 컴퓨터가 별도로 존재하고, 이는 게임사에서 관리한다.

원리 자체는 리슨 서버와 어느정도 비슷한 듯..?

다만, 고정적인 하나의 서버만이 존재하게 되기 때문에

서버의 성능만 보장된다면 다른 방식보다 훨씬 안정적이며 절대적인 서버라고 할 수 있다.

 

P2P 서버는 

세션에 접속한 모두가 호스트가 되는 서버 방식이다.

해당부분에 대해서는 별도의 서버가 필요 없기 때문에 비용적인 측면에서 유리하고
별도의 서버 없이 접속자간 상호작용이 즉각적으로 이루어져서 반응속도가 빠르다.

하지만 세션에 접속한 인원이 많아질 수록 필요 연산량이 급증하기 때문에

다수 인원의 연결이 필요한 방식에는 적합하지 않고 

소규모의 유저간의 통신이 필요할 때 적합한 방식이다.

(대표적인 예시로 던전 앤 파이터의 파티플레이가 있다.)

 

 

 

오늘은 게임 서버의 역사와 종류에 대해 알아보았는데,

개인적으로 느낀 점으로는

명확하게 구분되어진다는 느낌보다는 그때 그때 어떤 게임이 사용한 방법을 정리한 내용 이라는 느낌이 들어

조잡하고 잘 이해되지 않는 부분도 있지만, 그래도 몰랐던 것들은 알아가는 과정이 의미가 있다고 생각한다.

 

 

    1. 게임 서버와 게임 클라이언트의 개념을 학습하고, 각각의 역할과 기능을 정확하지는 않더라도 자신이 좋아하는 게임을 바탕으로 설명해주세요.

      이해한 바로는,
      게임 클라이언트란 유저 개인이 특정 게임 서버에 접속하여 유저와 서버간 통신을 가능하게 해주는 프로그램
      그 외에 그래픽, 사운드, 렌더링 등 서버가 그때 그때 송신하기 어려운 무거운 정보들을 미리 개인의 디스크에 
      저장시키는 일종의 패키지 라고 할 수 있다.

      게임 서버는 각각의 클라이언트를 통제하여 하나의 온라인 환경을 만들어주는 역할을 하며
      클라이언트에서 실행된 동작을 계산하여 결과를 출력하거나, 
      보관이 필요한 데이터를 저장하는 심장의 역할을 한다.

      게임 '블루 아카이브' 의 경우 앱 스토어에서 다운받는 앱 자체가 클라이언트 라고 할수 있으며
      해당 블루 아카이브 앱을 실행하는 것으로 블루 아카이브(넥슨)의 서버에 접속 할 수 있게 된다.

        
    2. 자신이 조사한 게임 서버의 역할/기능 중 가장 흥미롭다고 생각한 것이 무엇인지 설명해주세요.

      통신의 속도에는 분명히 한계가 있다고 생각한다. 특히나 과거에는 그 환경이 더 열악했다.
      하지만, 대전게임이나 RTS 게임에서는 즉각적인 반응속도가 중요했기문에
      과거에 이를 어떻게 극복했는지 궁금했는데,
      P2P 라는 서버 방식을 사용하여 클라이언트 간의 직접적인 정보 전달로
      핑의 한계를 극복해 게이머를 만족시켰던 내용이 흥미로웠다.

      문득, 과거에 스타크래프트를 플레이 할 때
      상대의 통신환경이 안좋다면 나 까지 게임이 느려져서 답답했던 기억이 있는데,
      그 이유도  P2P의 통신 방식 특성 때문이라는걸 알게되었다.

 

 

 

  1. 내가 게임서버(Node) 트랙에 참여한 계기는 무엇인가요?

    이전부터 게임 업계에서 일하고 싶다는 생각을 하고 있었는데, 막연한 생각 뿐이었습니다.
    그러던 중에 스파르타 내일배움캠프를 알게 되었고, 좋은 시작점이 될 것이라 생각되어 참여하게 되었습니다.

  2. 내가 이해한 개발자는 어떤 역할을 하는 사람인가요?

    프로그램 언어를 통해 크고 작은 소프트웨어를 만드는 사람입니다.
    그러기 위해 끊임없이 배우고, 학습하여 실행할 능력을 만들어야 한다고 들었습니다.

  3. 개발을 경험해보셨나요? 해보셨다면 어떤 경험을 하셨는지를 작성해주시고, 아니라면 개발에 대해 찾아본 것을 작성해주세요.

    개발 경험은 없습니다. 유튜브를 통해서 그 유명한 'Hello, world!  출력하기' 같은걸 몇 번 본 적이 있지만,
    그 다음 단계부터 이해할 수 없는 내용들이 쏟아져서 독학은 힘들구나 생각했습니다. 😂

  4. 개발자의 역할을 수행하는 데에 있어 나의 강점과 연관된 부분은 무엇이라고 생각하나요? 혹은 보완, 개선하고 싶은 개인 역량이 있나요 ?

    컴퓨터 앞이라면 무엇을 하던지, 하루 종일도 앉아 있을 수 있다
    역량은 이제부터 채워나갈 예정입니다 !!

  5. 본 코스 수료 후, 어떤 개발자로 성장하고 싶나요?

    최종적으로 기업에서 원하는 개발자가 되는것이 목표입니다.
    주어진 프로젝트를 잘 수행하며, 팀원과의 화합에도 적극적인 개발자가 되고싶습니다.
    코스 수료 직후에 가능할지는 모르겠습니다만, 이후로도 계속 노력해봐야겠죠 

  6. 그 외에 개발 트랙에 기대하는 것이 있다면 자유롭게 작성해 주세요.

    전공도 아니고 관련 경험도 없는지라 걱정이 되네요. 게다가 평균나이를 훨씬 상회하고 있는듯 합니다
    잘 따라갈 수 있도록 도와주셨으면... !
    저도 노력하겠습니다 😉

+ Recent posts