p-lani 님의 블로그

오랜만에 웹개발 강의를 이어서 들었다.

주제는 

Fetch  이다.

Fetch란, Javascript 에서 백엔드 서버의 데이터 베이스를 긁어오는것 이라고 할 수 있다.

여기서 말하는 데이터 베이스는 api 이며, api는 주로 json의 서식으로 쓰여진다.

fetch("여기에 URL을 입력").then(res => res.json()).then(data => {
		console.log(data)
})

간단히 말해, url 을 통해 api에 접속해서,  json 형태로 불러온 뒤 data 라는 이름을 붙여준다.

그렇게 data 라는 변수 안에  api 내에 데이터가 전부 들어가게 된다.

강의속 api

http://spartacodingclub.shop/sparta_api/seoulair

서울의 각 자치구, 위치, 미세먼지 수치 등이 기록되는  openapi 

이 api를 활용해 

기존에 만들었던 스파르타 플릭스 html에 활용하는 내용의 강의였다.

 $(document).ready(function () {

document.ready를 통해  페이지가 준비 완료되었을 때 실행되도록 하고

    let url = "http://spartacodingclub.shop/sparta_api/weather/seoul";
            fetch(url).then(res => res.json()).then(data => {

api url을 불러와서 data 에 입력해주고

        let temp = data['temp'];
        $('#temp').text(temp);

data 내에서 'temp' 로 지정된  값을  temp 라는 변수에 대입시키고 

 id =  #temp 로 지정된 값을  temp 변수에 담긴 값으로 span 해준다...

하필 다 temp 로 써놓아서 헷갈리지만,

let temp 는 변수인 temp

data['temp'] 는 데이터 내에서 temp로 지정된 항목을 말하고

#temp 는 id를  temp 로 준 구간을 말한다.

맞나..? 

이렇게 하는것으로 spartaflix 에

api 에서 얻은 서울의 기온을 표기할 수 있게 된다.

오늘 배운 내용은 

api 의 데이터를 불러와서 원하는 정보를 띄운다는 점에서

기존에 배웠던 SQL 의 주 기능이

Javasript 에서도 가능하다 ! 라는 느낌이 들었다.

다만 sql 은 데이터 베이스를 다루는 데 특화된 언어이니 만큼,

SQL 의 언어가 훨씬 간결하고 직관적이었고 

JS는 복잡하고 이해가 힘든 코드뭉치로 보인다는 점이 다르다.

        $(document).ready(function () {
            let url = "http://spartacodingclub.shop/sparta_api/weather/seoul";
            fetch(url).then(res => res.json()).then(data => {
        let temp = data['temp'];
        $('#tempo').text(temp);
        })

외워서 쓰는건 힘들고, 형식이라도 기억이 나면 다행일듯 

전반적으로 SQL을 배울 때에 비해서 속도가 나질 않는다. 

내일은 다시 js 기초강의 영상을 학습해야겠다.

오늘은~~~~~~~

저번에 수업에 이어서 생활코딩의 

함수 !

에 들어가기 앞서서, 

알고리즘 문제 하나를 풀고 시작하도록 하겠다

제일 바보같고 멍청하고 단순하고 무식한 방법으로 시작한다.  

경악 을 금치 못하는 코드를 완성했다.

50조가 될지 모르는 n을 제곱근을 찾을 때 까지  i+=1 씩 증가시키며 찾는 코드가 되었다.

심지어 제곱근이 정수가 아닌 n의 경우는 무조건 i == n 이 될 때 까지 계산을 해야한다.

실무에서 이런 코드를 짰다면  머지않아 직장을 잃게 될 것이다.

근속을 위해 15일차에 잠깐 배웠던 내용중에 위 함수를 활용 해 보자.

Math.sqrt(n) 이 정수일 때와 그 외만 구분하면 훨씬 그럴싸한 코드가 될듯하다.

추가로, 값이 정수인지를 판별하기 위해 Number.isInteger() 함수를 급조해왔다.

function solution(n) {
    var answer = 0;
    if (Number.isInteger(Math.sqrt(n)) == true ) {
        answer = (Math.sqrt(n)+1)*(Math.sqrt(n)+1)
    }
    else { answer = -1}

    return answer;
}

n 의 제곱근 을 구해서, 그 값이 정수인 경우와 그렇지 않은 경우만 구분하면 되기 때문에 

불필요한 연산이 사라지고 코드도 그럴싸 해졌다.

생활 코딩에서 자주하는 말이 있다.

늘, 극단적인 상황에 대비해야 한다.

입문자임에도 분명하게 느껴진다.

그러기 위해선 알아야 한다.

그럼 다시 함수 학습을 시작하자.

함수란 ,

하나의 로직을 재실행 할 수 있도록 하는 것으로 코드의 재사용성을 높여준다 

여기서 중요한것은 재사용성 이다.

여기저기 퍼져있는 동일한 부류의 코드를 함수로 묶으면서

쓰기도 편하고, 수정하기도 편하고 보기에도 좋아지는 것이다. 

이론적으로 보면 약간 복잡한데,

function 의 기본 내장형 변수 라고 생각하면 될 듯 하다.

같은 function 이라도 인자의 값을 다르게 받는다면 다른 결과를 만들어 낼 수 있다.

쉽게 말해, 기본적인 가공 방법이 있지만 ' 어떻게 해드릴까요? '  정도의 변칙을 줄 수 있다는것

위의 예시 처럼, get_arguments 함수의 인자를 어떻게 입력하는지에 따라

다른 결과가 나올 수 있다.

반복문

반복문은 사용빈도가 높은 코드 종류로 반드시 숙지해야한다.

조건 설정이나 내용을 조금이라도 잘못 쓴다면

'  어?  '    를 하게 될 것이므로

많은 주의가 필요한 코드이기도 하다.

시작은 while 로 , () 조건이 만족하는 동안  { }  코드를 무한 반복한다

조건을 적절히 설정하지 않는다면 반드시 무한 루프에 걸리게 된다.

break 와 continue 를 사용한다면 더 유연한 반복문 사용이 가능하다.

break;

해당 반복문을 즉시 종료한다. 

조건없이 break; 만 덩그러니 들어있다면 반복문이 아니게 되기 때문에 

항상 조건문과 같이 쓰인다.

if(~~) { break;}

continue 의 경우는 반복문을 전체종료하는 break와는 다르게

continiue 위치에서->  반복문 시작점으로 '되돌아가는' 함수이다.

물론, 이때 i의 값은 보존되기 때문에 

주로 반복문 내의 일정 구간을 건너뛰고 싶을때 사용된다.

for

for 문은 쉽게 말해 보다 깔끔해진 while 이라고 할 수 있다.

조건문에 거의 필수로 사용되는 초기값, 조건, 증감값 을 미리 쓰고 시작하는 것이다.

이것은 13일차에 알고리즘 풀이에서 학습한 부분이기도 하다.

반복문의 중첩

당연하게도 반복문 내에서 또 반복문을 사용할 수 있다.

위는 반복문의 중첩 예시로,  00 ~ 99 까지의 모든 숫자를 나열하는 반복문이다. 

처음 봤을 땐 전혀 이해가 되지 않았다.

어떻게 저게 00~ 99 가 되는것일까?

강의 영상에서는 이것을 이해시키기 위해 Debuger 기능을 소개했다.

Debuger 에서 breakpoints 를 설정해서 해당 코드가 어떻게 동작하는지 볼 수 있다.

그 결과,

var i = 0   실행

조건을 확인하여 만족하기 때문에 for ~j~ 에 해당하는 반복문이 실행

00~ 09 까지 표기하게 되고 j 가 10이 되는순간 다시 for ~i~ 의 구문으로 돌아오면서 i ++1 이 적용된다.

이렇게 i가 1이 되었기 때문에

1+j 부터 다시 for ~j~ 코드가 반복된다. 

여기서 중요한것은  for (var j = 0; 또한 다시 실행 된다는 것이다. 

따라서, 10이 되어 정지했던 for~j~ 구문이 다시  var j = 0 이 되었기 때문에 j<10 을 만족하는 한 계속된다.

확실히, Debuger를 통해 코드가 실행되는 상황을 순차적으로 보니까 이해가 빠르게 되었다.

추가적으로, 해당 코드에서 숫자+숫자의 결과가 표기되는걸 막기위해

i 와 j 에 해당하는 숫자가 문자열로 표기되도록  String() 을 사용해 주었고, (대문자 S로 해야되더라)

만약, "coding"+i+j+ "<br/>"  과 같이, 

문자열과 문자열 사이에 들어있는 숫자열은 자동으로 문자열로 사용되도록 되어있다는 것도 알게 되었다.

꽤 난이도가 있는 수업이었다.

한번에 이해가 되지 않아 여러번 보았고, 유연하게 활용할 수 있을지도 미지수 이다.

하지만, 알고리즘의 기본이 이 조건문과 반복문이라고 생각하고 있기 때문에,

결국 숙달될 때 까지 학습해야 할 것이다.

오늘은~~~~

Javascript 초보입문기초를 배워보는 시간을 가졌다.

기존에 듣고있던 웹개발 종합반의 내용은

웹페이지, html 위주로 진행이 되고 있었고, 

일반적으로 종합강의에선 이론적인 부분은 가볍게 짚고 넘어가는 경우가 많기 때문에

이론적인 부분과 기초적인 부분을 따로 학습하는것이 좋다고 판단했다.

생활 코딩 

은 유튜브 채널중 하나로, 공개된 채널중 상당히 양질의 정보를 제공하고

목소리 또한 듣기 편하며...아무튼 구독

학습내용

1. Javascript 오리엔테이션

2.                   실행과 실습

3.                   숫자와 문자

4.                   주석 / 줄바꿈 / 여백

5.                   비교 연산자

6.                   조건문

까지가 오늘 학습한 내용이다.

숫자와 문자

기본적으로 1  은 숫자일 수도 문자일 수도 있다.

숫자일 경우 1 + 1 = 2 가 될것이고

문자일경우  1 + 1 = 11 이 된다.

따로 지정해주지 않는경우 기본적으로 숫자는 숫자열이 되고 

'1'  "2" 와 같이 따옴표/큰따옴표를 사용해서 문자열로 사용 될 수 있다.

기본적으로 사칙연산 + - * / 를 지원하며,

좀더 복잡한 연산도 자바스크립트에서는 가능하다.

변수

변수는 값이 변할수 있는 숫자를 말하며, 문자 또한 가능하다.

var a

을 통해 a 라는 변수를 지정할 수 있고,

var a = 0; 

a라는 변수에 0 이라는 값을 입력 할 수 있다.

이런 변수는 연산에서도, 조건문에서도, 반복문에서도, 어디든지 사용할 수 있다.

비교 연산자

이미 알고있는 내용이라고 생각했는데, 처음보는 녀석이 등장했다.

===

해당 연산자는  == 와 비슷한 기능을 하지만, 

데이터 타입까지 일치해야 하며

어차피 값이 없는건 마찬가지인 null 과 undefined 를 구분하고

 true === 1 또한 false로 다루기 때문에

==와 비교하여 훨씬 엄격한(strict) 비교 연산자 라고 할 수 있다.

해당 강의에서는  == 보다는 === 을 사용할 것을 강력히 추천하고 있다.

추가적으로 not 의 의미를 가지는 ! 도 익숙하지는 않기 때문에 따로 적어 보았다.

조건문 

오늘 학습한 내용중 가장 중요한 내용이라고 할 수 있다.

많은 데이터 형식 중

boolean (불린) 은   true  또는 false 를 값으로 갖는 데이터 이다.

수없이 사용하게될  조건문은 

if(boolean) 형태로 작동하게 된다.

if(true) {

  code

}

if 는 기본적으로 boolean 에 해당하는 값이 true 혹은 false 일때 '만' 해당 

코드를 실행하게 된다.

else 를 주는것으로  그 외의 경우를 만들 수 있으며,

else if를 사용하는것으로  if구문 이후로 

" 그러면 이거는? " 라는 형태로 계속해서 조건을 이어갈 수 있다.

조건문 안에 조건문이 들어가는 것 또한 가능하고,

논리 연산자를 사용한다면 약간 더 간결하게 코드를 짤 수 있다.

and 에 해당하는 논리 연산자로,  A && B   일때 ,     A =true , B= ture 일 경우에만  A && B = true  를 출력한다.

or 에 해당되는 논리 연산자로,  A || B  일 때,  A 와 B 중 하나라도 true 라면  A || B = true 를 출력한다.

다음은 반복문 인데, 

전에 알고리즘 문제풀이를 위해 학습했던  ' for ' 가 등장할 것으로 예상된다.

반복문의 경우  내용이 많기 때문에 오늘은 이것으로 마무리해야 겠다.

오늘도 SQL 학습이다.

아무래도 java와 매일 왔다갔다 하면서 배우기 보다는

주 간격으로 따로 학습하는것이 조금 덜 헷갈리지 않을까 싶다.

액셀보다 쉽고 빠른 SQL

엑셀보다 쉽다는 생각이 잘 들지 않음

이것은 바로 어제 SQL 문제풀이에서 봤던 내용이다.

본의 아니게 예습을 해버림

어제 놓쳤던 부분이 있는데, date_format 함수를 사용하려면

해당 컬럼이 날짜 형식의 데이터 서식으로 되어 있어야 한다.

DBeaver 에서는 시계모양으로 데이터의 서식을 알 수 있으며, 

만약 문자열(ABC) 서식일 경우 

date(칼럼명) 으로 날짜형식의 서식으로 변경할 수 있다.

당연하지만 이 때, 칼럼내 데이터가 날짜에 관련된 내용이어야 한다.

select date(date) date_type,
       date_format(date(date), '%Y') "년",
       date_format(date(date), '%m') "월",
       date_format(date(date), '%d') "일",
       date_format(date(date), '%w') "요일"
from payments

date() 와  date_format 함수를 적용한 모습

어제 학습한 내용처럼, 다른 내용들 또한 표시 할 수 있다.

어떤 데이터든 간에, 데이터가 기록된 시간은 굉장히 중요하고 항상 필요로 하기 때문에

date_format 은 꼭 알아둬야 할 것 같다.

어김없이 돌아온 숙제 시간

아쉽게도 date 에 해당하는 내용은 아니다.

우선, 음식 타입별, 연령별 주문건수 를 구하고 서브쿼리를 활용해

pivot view 를 구성하면 될 것 같다.

(사실 처음 봤을땐 역시나 뇌가 정지했지만, 어제 미리 해봤기 때문에 오늘은 다르다 !)

우선, 음식 타입의 내용은 food_orders  table에 있고

age 내용은 customers  table 에 있기 때문에 

SELECT * 
from food_orders fo inner join customers c on fo.customer_id = c.customer_id

두 table을 join 해준다

customers 의 내용이 null이라면 카운트할 이유가 없기 때문에 inner join을 써줌

10~59세만 해당하기 때문에 where 에서 걸러주고, 

나이대를 case when  으로 나눠준다

SELECT cuisine_type,
		case when age between 10 and 19 then '10'
		     when age between 20 and 29 then '20'
		     when age between 30 and 39 then '30'
		     when age between 40 and 49 then '40'
		     when age between 50 and 59 then '50'		
		end sage
from food_orders fo inner join customers c on fo.customer_id = c.customer_id 
where age >= 10 and age <= 59

when ~ 복붙을 할 때는 언제나 꼼꼼히 수정해야함

(case 도 같이 복사하면 즉시 에러)

그 다음  group by 1,2 로 음식별, 나이대별로 그룹정렬을 해준 뒤

count(1) 을 추가해서 음식점별, 나이대 별 주문 수량을 count 

이후 서브쿼리로 넘어가서 pivot view를 구성해주면 마무리인데

이 부분에서 에러가 계속 나와서 엄청 헤맸다  

메인쿼리 끝에 명칭지정을 안해주면 에러가 나는것임.. 왜 그런지는 모르겠지만

(메인쿼리 ) a   이 a가 꼭 필요

SELECT cuisine_type,
		max(if(sage='10', count_order, 0)) "10대",
		max(if(sage='20', count_order, 0)) "20대",
		max(if(sage='30', count_order, 0)) "30대",
		max(if(sage='40', count_order, 0)) "40대",
		max(if(sage='50', count_order, 0)) "50대"		
from
(
SELECT cuisine_type,
		case when age between 10 and 19 then '10'
		     when age between 20 and 29 then '20'
		     when age between 30 and 39 then '30'
		     when age between 40 and 49 then '40'
		     when age between 50 and 59 then '50'		
		end sage,
		count(1) count_order
from food_orders fo inner join customers c on fo.customer_id = c.customer_id
where age >= 10 and age <= 59
group by 1, 2
) a
group by 1

복붙신공 max  if절로 pivot view 를 구성한다.

그다음 음식별로 묶기 위해 다시 group by 1 을 해주면 완성

order by 에 대한 내용은 없기 때문에 여기서 마무리 !!

잘 잘동한다. 예습하길 잘했다 !

엑셀보다 쉽고 빠른 SQL

사전캠프 강의 부분은 이것으로 마무리가 되었다.

기초적인 부분이었으나 아직 활용 부분에서 많이 서투르고 기억이 나지 않을 때가 있다.

그래도, 이해가 안되는 부분은 없기 때문에 다행인것같다.

강의 속 튜터님은

완전히 이해하고 외우는것보다 조금씩 익숙해는것이 중요하다고 하셨지만,

아무래도 기초에 해당하는 내용은 어느정도 완벽에 가까워야 하지 않을까?

남은 사전캠프 기간동안 다른 유튜브 영상이나 SQL 문제풀이 를 통해

SQL 의 기초적인 부분을 계속 학습해야 할 것 같다.

주말간 이사 때문에 정신이 없었다.

정신을 가다듬기 위해 알고리즘 문제를 푸는게 좋은것 같다.

오늘은 SQL 문제

뭔가 쉬워보이는듯한 문제이다.

SELECT animal_id,
	name,
	substr(datetime,1,10)
from animal_ins
order by 1

간단한 문제 !

라고 생각했지만,  문제의 제목이 눈에 띈다

딱 봐도 substr 말고 다른 함수를 쓰라고 하는듯한 눈빛이 느껴짐

물론 substr 을 써도 눈에 보이는 결과는 같아서 정답으로 처리되지만

소위 '가라' 에 가까운 방법이기 때문에,

정석의 방법을 찾아보기로 했다.

date_format 이라고 하는 날짜 포맷을 사용하여 원하는 표시형식으로 변경할 수 있다고 한다

date_format() 에 순서에 맞춰 (바꿀대상, 순서에 맞게 포맷문자, 문자열도 입력 가능 )

무려 '대소문자' 를 구분하기 때문에 주의

0000년-00월-00일 을 표기하고 싶다면

select date_format(datetime, '%Y년-%m월-%d일')  

라로 적어주면 된다. 

그럼 다시 위의 문제를 풀어보자.

select animal_id,
        name, 
        date_format(datetime, '%Y-%m-%d')
from animal_ins
order by 1

완성 !  

한 가지 문제를 더 풀어보자.

++ 주의사항으로 날짜 컬럼은 아래 예시와 같은 이름이어야한다.

천천히 배운걸 써보자

SELECT dr_name, dr_id, mcdp_cd, date_format(hire_ymd, '%Y-%m-%d') as 'HIRE_YMD'
from doctor
where mcdp_cd = 'CS' or mcdp_cd = 'GS' 
order by 4 desc, 1

바로 앞에서 배운 date_format 만 사용하면 된다 

딱히 어려운 점은 없었다.

하나만... 더 풀어볼까

이 내용은 강의에서 본 적이 있다.

order by , limit 를 사용하는 방법과

RANK 를 사용하는 법

뒤에껀 기억이 잘 나지 않음

select *
from food_product
order by price desc limit 1

이렇게 하면 price 의 내림차순으로, 1개 까지만 표시해준다.

다시 기억이 잘 나지 않는 RANK 를 학습해보자

RANK ()  over(order by 칼럼명 asc/desc) 

아앗.. 이제보니 rank 는 순서 정렬 보다는 등수를 매기는데 쓰는 함수였다.

다시 학습했으니 다음부턴 헷갈리지 말자 !

[수업 목표]

• 데이터에서 예상하지 못한 값이 나왔을 때 (이상한 값, 값이 없음 등), 분석에 적절하에 처리한다
• SQL 로 엑셀에서 자주 사용하는 형태로 데이터를 만든다
• 업무에 활용할 수 있는 다양한 SQL 심화 문법을 익힌다

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

시작은 복습부터

저번 시간에, 배웠던 내용은 Subquery 와 Join 이다.

Subquery는 

한번의 select from 문으로 나온 결과에 이어서  추가적인 연산을 하거나 재 활용할 때 사용한다.

Select ****
from
(
selct *
from  **
) main_query

와 같이 쓰여진다.

Join은

두 개 이상의 테이블을 결합 할 때 사용하며, 형태에 따라 Left join / Inner join 을 사용할 수 있다.

select ABC
from table1 t1 left join (또는 inner join)  table2 t2 on t1.공통컬럼 = t2.공통컬럼

오늘 새로 배울 내용은

1. 조회한 데이터 값이 이상하다? 

rating 컬럼에 Not given 이라는 어울리지 않고 연산에 방해되는 데이터가 존재한다.

(이러면 데이터 베이스부터 고쳐야 하는게 아닐까 라는 생각이 문득..)

만약 avg 를 이용하여 평균값을 구해야 하는 경우, not given 을 0으로 계산하여 전부 나누기 때문에

의도하지 않는 계산 결과가 나올 수 있다. 

만약, not given 으로 표기된 데이터를 제외하고 나머지만의 평균을 구하고 싶다면,

avg(if(rating <> 'Not given', rating, null)) not_given_del

위처럼 if 구문으로 rating 내의 Not given을 null 처리 해줄 수 있다.

값이 null 인 경우 연산에 포함하지 않는다

2. 다른 값으로 대체하기

데이터를 조회했을 때, 원하지 않는 데이터를 대체하여 사용하는 방법이 있다.

1) null 을 다른 데이터로 대체

이 경우엔 coalesce 문이 사용된다.

coalesce(컬럼명, 대체값)

위 방법으로 컬럼내의 null 값을 전부 대체값으로 대신할 수 있다.

2) 조건문을 이용하여 대체

if 문은 슬슬 익숙 해 질 때가 됐다.

if(age < 50 , age, 대체값)

if문을 사용하여 원하지 않는 값 (특히 일정 범위를 벗어난 값)을 대체 표시 할 수 있다.

3) 위와 비슷하게 사용할 수 있는 것으로, 

case when 구문이 있다. 마찬가지로 이전에 봤던 함수다.

select customer_id, name, email, gendor, age,
       case when age<15 then 15
            when age>80 then 80
            else age end "범위를 지정해준 age"
from customers

상식적이지 않은 데이터를 수정할 때, 특히 데이터의 상, 하한을 임의로 지정하고 싶을 때 사용하면 좋다.

다음은. SQL 로 Pivot Table 만들어보기

액셀에서 자주 봤던 형태의 table 로 

데이터를 집계하여 기준에 따라 보기 쉽게 배열하는것이 목적인 테이블이다.

위와같은 형태의 Pivot table 을 만들어 보자.

우선, 음식점별, 시간별 주문건수를 집계한다

select a.restaurant_name,
       substring(b.time, 1, 2) hh,
       count(1) cnt_order
from food_orders a inner join payments b on a.order_id=b.order_id
where substring(b.time, 1, 2) between 15 and 20
group by 1, 2

이전에 배운 내용으로 작성이 가능

select restaurant_name,
       max(if(hh='15', cnt_order, 0)) "15",
       max(if(hh='16', cnt_order, 0)) "16",
       max(if(hh='17', cnt_order, 0)) "17",
       max(if(hh='18', cnt_order, 0)) "18",
       max(if(hh='19', cnt_order, 0)) "19",
       max(if(hh='20', cnt_order, 0)) "20"
from 
(
select a.restaurant_name,
       substring(b.time, 1, 2) hh,
       count(1) cnt_order
from food_orders a inner join payments b on a.order_id=b.order_id
where substring(b.time, 1, 2) between 15 and 20
group by 1, 2
) a
group by 1
order by 7 desc

작성한 내용을 pivot table 형태로 바꿔주는 구문이다.

기본적으로 이전 데이터를 활용하여 subquery를 만들어주고

hh로 명명한 주문시간 (substr 로 시간에 해당하는 앞의 두자리만 추출)별로 cnt_order의 숫자를 카운트  ... 하고 !

subquery 에서 다시 가져와서 restaurant_name ,  hh 시간별로 추출한 것을 각각  표기... 하고 !

restaurant_name 을 그룹화 해서 정렬 ... 을!

hh='20' 기준으로 역순나열  이라고 해석 할 수 있다

사실 좀 실망인데, 

Pivot table 을 위한 함수가 있는게 아니라

수동으로 pivot table이 되도록 때려박는 것이었다.

Pivotmax cnt_order, hh(15, 16, 17, 18, 19, 20)  이런걸 기대했는데

혹시 나중에 알려주실려고 그런지 모른다.

남은 시간은 다른 pivot table 을 보면서 자습해야겠다.

각도기

오늘은 알고리즘에 대한 풀이를 해보았다.

java 강의를 본 게 있어서 쉽게 풀 줄 알았지만,

알고리즘 풀이에 관한 지식이 없었기 때문에 사실상 새로 배워야했다.

딱 보기에도 조건이 들어가기 때문에 IF() 를 사용해야할 듯 하다.

else if 를 사용하면

 이렇게 될 가능성이 높아서

    if(angle < 90 , angle > 0) answer = 1;
    if(angle == 90) answer = 2;
    if(angle > 90 , angle < 180) answer = 3;
    if(angle == 180) answer = 4;

이런식으로 적어 보았다.

그러나  IF 사이에  ' , ' 로 and 와 같은 기능을 주는것이 안되는 듯 하다..

(아직 기초도 없고, SQL과 헷갈리기도 하는 상태인 듯)

에러가 나는것은 아니지만 원하는 방식으로 작동하지 않는다.

해결을 위해 IF에 주로 사용되는 논리 연산자 사용법에 대해 알아보았다.

애초에 논리 연산자로 콤마(,) AND를 사용하는 것이 아니었다

그러면 && 를 사용하면 되겠지?

int solution(int angle) {
    int answer = 0;
    if(angle < 90 && angle > 0) answer = 1;
    if(angle == 90) answer = 2;
    if(angle > 90 && angle < 180) answer = 3;
    if(angle == 180) answer = 4;
    return answer;
}

정답인지는 모르겠으나 잘 작동한다.

다음 문제는, 짝수의 합

수학도 모르고 코딩도 모르기에

일단 짝수의 합에 대해 알아본 결과

n * (n/2+1) / 2;

공식을 어디선가 구해올 수 있었다.

n이 10 이라고 했을때

10x (10/2+1) /2 

10x 6 / 2 = 30

맞는 공식인 듯 하다. (갑자기 분위기 수학)

    int answer = n * (n/2+1) / 2;
        return answer;

하면 끝일까?

문제는 n은 홀수도 포함이 되어있다.

첫번째 방법으로 모든 정수를 더하고, 홀수의 합을 빼는 방법이 있고,

두번째 방법으로 n이 홀수인 경우 -1을 해줘서 짝수로 만들어버리는 수를 생각했다.

두번째 방법을 사용해보자.

int solution(int n) {
    int C=0;
    if(n % 2 == 0) C=0;
    else C=1;
    int answer = (n-C) * ((n-C)/2+1) / 2;
    return answer;
}

아직 알고있는 함수가 별로 없지만, 두뇌를 풀 가동 해서 써보았다.

그냥 보기에도 엄청 초보자스러운 코드이다...

놀랍게도 잘 작동하는 듯

다른 사람의 풀이를 보니, 나처럼 공식으로 때려막은 사람은 거의 없었다.

위가 가장 정석적인 풀이인 듯 하다.

for 는 조건이 만족하는동안 반복수행하는 반복문 이라고 한다.

for(초기치 , 조건식, 증감식) 으로 구성이 되어있고 

초기치에서 시작해서, 조건식을 만족하는동안 증감식을 계속 수행하는 함수이다.

위의 경우를 해석하면

i=2 로 시작해서, n 이하가 될때 까지, i 값에 2를 더하는것 (i=i+2)

그렇게 answer = answer +i  를 반복하게 된다. i 가 n 이하가 될때까지 

2 -> 6 -> 12 -> 20 -> 30 -> 42 -> ... answer 값이 늘어나게 된다 

i 가 2씩 늘어나기 때문에, n이 홀수인 경우는 자연스럽게 이전 짝수까지만 계산하게 된다.

문제를 풀면서 뭔가 이상하고 낯설다 라는 생각을 했는데

지금까지 풀이했던 문제들이 c언어 베이스로 되어있었다.

오늘 배운건  사실 c 언어 였던 것이다.

내일부터는 javascript  로 설정하고 풀이해야겠다.

어제 하지 못했던 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의 요소를 하나씩 배열해라

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

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

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

간단히 정리하면,
 

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

결과는

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

checkresult 트리거가 적용되면

이전 내용은 empty 처리가 되고

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

TIL을 정리하면서 보니

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

꼭,

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

강사님이 어김없이

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

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

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

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

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

(의심).empty

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

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

오늘의 목표는 익숙해지기

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

주요 복습 내용은

• Bootstrap 활용
• Google-font 활용
• <style> 에서 본문내용의 위치와 크기, 모양을 조정

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

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

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

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

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

다음 내용으로 Javascript 에 대해

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

라고 소개가 되어있는데,

이전에 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

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

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

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