본문 바로가기

About coding/Weekly I learned

[WIL]2023년 2월 12일~18일: Jquery 기본코드 한 줄, 부트스트랩 기본코드

1. 폴더를 다른 곳으로 옮기려하거나 삭제하려고 할 때, 다른 프로그램에서 파일을 사용중이라면서 거절되는 경우가 있다.

그럴때 해결법: 윈도우 검색창에 > 리소스 모니터 > 연결된핸들 > 내가 이동/삭제 하려고 했던 폴더 명 검색 > 나오는 결과값을 우클릭 > 프로세스 끝내기

꿀 >_<

 

2. 웹개발종합반 다시 복습 중...

CSS는 head 안에 <style></style> 여기에 넣고

 

Javascript는 head 안에 <script></script> 여기에 넣고.

 

3. 자바스크립트에서 쓸 수 있는 것.

변수 let a = '사과'

자료형 중 리스트 let a = ['사과', '배', '감', '귤']         리스트에서는 순서가 중요함. 사과는 a[0]    배는 a[1]

자료형 중 딕셔너리 let a = {'name':'영수', 'age':24}      영수를 부르고 싶으면 a['name']      {키:밸류, 키:밸류}

딕셔너리 여러개를 또 리스트에 넣을 수도 있음.

let a = [

  {'name':'영수', 'age':24}

  {'name':'철수', 'age':15}

  {'name':'영희', 'age':30}

 ]

 

여기서 철수의 나이를 부르고 싶으면 console.log(a[1]['age])     꺽쇠 칠 때 마다 타고 타고 들어감 a의 [1]번째의 ['age']의값

결과값은 15.

 

2월 13일 월요일

1. SQL 처음 시작함

2. SQL 하는 도구: DBeaver

3. SQL 로 하는 일 CRUD. 데이터를 다루는 일인데

데이터를 Creat, Read, Update, Delete 하는 일.          코딩한 다음에 윈도우는 Ctrl+Enter 치면 결과 나온다.

오늘 배운 것은 가장 기본이 되는

select * from 테이블              모양.       테이블은 엑셀판 전체. 필드는 칸 하나 하나

where 필드 =

where 필드 !=

where 필드 between _____ and ______

where 필드 >= 5000

where 필드 like '%@.com'      and       name = '황**'

select count(distinct(필드)) from 테이블

카운트는 결과값이 몇개인지 세어 주는 거고, 디스팅트는 결과값 중에 중복되는 애들을 제거해서 모가모가 있나 종류를 한 눈에 보여줌.

4. 생활코딩 유튜브 처음 알았다. 유익하다. 들고 다니면서 계속 볼 예정.

 

2월 14일 화요일

1. 웹개발 종합반도 복습하는 중이다. 복습하길 잘했다. 스쳐지나갔던 것들을 외우고, 배우게 된다.

CSS에서 border-radius, .mytitle > button:hover { }, 주석 단축키 Ctrl+/

 

div 백그라운드 이미지 데려올땐 삼형제

back-ground image: url(' ');

back-ground position: center;

back-ground size: cover;

 

웹페이지 만들다 덩어리 가운데로 보내기. display: flex;

display: flex;

flex_direction: column;

align_items: center;

justify_content: center;

 

폰트 바꿀때는 구글폰트 들어가서 오른쪽 <style> 안에 있는 @import 내용 긁어오기 > 내 <style> 속 첫줄에 붙이고 > 그 아랫줄에 * { } > 안에다가 다시 구글폰트 사이트에 있는 폰트패밀리 긁어다 붙이기

 

부트스트랩 쓰려면 head 안에 부트스트랩 불러다 쓰는 코드 3줄 필요함.

 

2. 오늘 생활코딩에서 배운 것들

<a href="링크 주소">

<img src="이미지 주소" width=300px>

언스플래시에서 공짜 이미지 다운받은 다음에 그냥 코딩판 탐색기 부분에 드래그 하면 이미지 파일 옮겨짐. 그담에 그 파일이름 대로 src = " " 안에 긁어넣으면 바로 구현됨.

알트 누른채로 코딩판 클릭하면 여러 줄 동시에 선택가능. 커서가 깜빡깜빡

<br><p>

<ol><ul><li>

<h1~h6>

<!doctype html>

<html>

<head>

<title>

<meta charset="utf-8">

<body>

 

3. 오늘 SQL에서 배운 것들

한 시간이 다 걸릴지라도 에러메시지 혼자서 분석하면서 해결하려고 시도해보기. 그거 공부에 도움 된다.

select payment_method, max/min/avg/sum(count(*)) from orders           반올림 round(avg(user_likes), 2)

group by payment_method

order by count(*) desc

 

그룹바이

오더바이

맥스 민 에버리지 썸

 

2월 15일 수요일

1. SQL 에서 배운 것

Alias 하는 법. 별칭 붙이기.

테이블에 붙일 때는 select * from users u         이런식으로 테이블 이름 띄우기 한글자/두글자 알파벳이다.

그다음에 아랫줄에서 where u.payment_method     이런식으로 씀. 유저쓰에 있는 페이먼트 메쏘드. 이런식으로 지칭

group by랑 order by는 복수로 묶고 정렬할 수도 있다.

그냥

group by          c1.title, c2.week     이렇게 콤마로 더 붙여주면 됨

날짜값이 들어있는 필드 추릴때, 하는 방법. where 절에서

where o.created_at >= '2020-08-01'

 

2. 챗 지피티가 알려준 부트스트랩 기본 코드

<head>
  <title>My Bootstrap Website</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>

 

스파르타코딩클럽 강의에 사용된 부트스트랩 기본 코드

    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

둘이 왜 다른걸까? 스파르타에선 버전을 고정한 걸까? 어떤 설정값을 더 추가한 것 같다.

 

3. 웹개발종합반 복습 중 만난

JQuery 기본코드. 제이쿼리도 부트스트랩 쓸 때처럼 남이 만든 라이브러리를 쓰는거니까..

제이쿼리 왜 쓰냐면 그냥 자바스크립트로 웹페이지 코딩하면 너무 복잡함.

아무튼 <head></head> 태그 안에 기본코드를 넣어 주고 쓰면 된다.

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

요거다.

 

2월 16일 목요일

1. SQL 엄청나게 많은 걸 배워서 머리가 헝클어졌다 ㄷㄷ

 

(

)

union all

(

)

유니언 얼 쓰면 차트 두개를 이어서 볼 수 있음.

 

left join 이나 inner join 쓰지 않고도

다른 테이블에 있는 필드를 가져다 쓰는 () 문법

이걸 select에 쓸 때랑, from에 쓸 때랑, where에 쓸 때랑 모두 의미가 다르다.

 

아 배운 개념이 한번에 너무 많아서 다시 좀 복습해야겠다. 자기 전에 다시 돌려보기.

 

2. 웹개발 복습

서버에서 클라이언트에게 데이터 내려줄 때 딕셔너리 형태로 [ {'ㅇㅇ':'ㄷㄷ'}, {'ㅂㅂ':'ㅍㅍ'}] 내려주는 걸 Json이라고 한다.

fetch 해서 forEach문 돌리고 temp_html `` 해서 $('#').append(temp_html) 하는 것까지 다시 복습함.

function hey() {

     fetch("http://블라블라").then(res => res.json()).then(data => {

         let dictionaries = data['Realtimelists']['row']

        $('#names_q1').empty()

         dictionaries.forEach((a) => {

             let name = a['dic_name']

             let rack = a['dic-rack']

             let book = a['book-now']

 

             let temp html = ' '

             if (book < 5) {

                 temp_html = `<tr class="red">

                                             <td>${name}</td>

                                             <td>${rack}</td>

                                             <td>${book}</td>

                                       </tr>`

             } else {

                  temp_html = `<tr>

                                             <td>${name}</td>

                                             <td>${rack}</td>

                                             <td>${book}</td>

                                       </tr>`

             }

             $('#names_q1').append(temp_html)

         })

     })

}

 

이제 다 외운 듯!! 이걸 안보고 쓰다니! 장하다 내 자신.

 

2월 17일 금요일

1. SQL

어제 배운 부분이 서브쿼리부분부터 기억이 잘 안나서 다시 제대로 배우는 중.

서브쿼리: 쿼리문 안에 () 해놓고 들어가는 쿼리. 연산처리 순서는 서브쿼리가 먼저이다.

쿼리와의 연결 방법은, 서브쿼리와 쿼리의 공통되는 부분을 꼬랑지로 잡아서 이어붙이는 식.

where절에 서브쿼리: where 꼬랑지필드명 in (서브쿼리)

------------------------------------------------------------------------------------------------------

select절에 서브쿼리: select 필드명, 필드명, (서브쿼리) from 테이블

select가 실행될 때마다 서브쿼리도 새로 작동한다.

select c.checkin_id, c.user_id, c.likes,

(

select avg(likes) from checkins

 

where user_id = c.user_id

) as avg_likes_user

from checkins c

-------------------------------------------------------------------------------------------------------------

from절에 서브쿼리:

내가 방금 만든 셀렉트문을 마치 원래 있었던 테이블처럼 사용하는게 from절 서브쿼리.

inner join (

 

)

하는 식. 오른쪽으로 더 붙이기 하는 식.

---------------------------------------------------------------------------------------------------------------

실전에서 유용한 sql 쿼리문들

 

-문자열 데이터 요리법

SUBSTRING(created_at, 1,10)  의미: 크리에이티드앳 필드에서 첫번째 글자부터 열번째글자까지를 가져온다는 뜻. 날짜값 등을 보기 쉽게 뽑아올 때 유익하다. 그걸 가지고 또 날짜별로 count(*) 같은 거 하면 좋음

SUBSTRING_INDEX(email, '@', 1 또는 -1)           의미: 이메일 필드에서 @를 기준으로 골뱅이 앞에 있는것(1) 혹은 골뱅이 뒤에 있는 것(-1)만 가져온다는 뜻.

where 필드값 like '%화이팅%'

 

-조건문같은 case when ______>_______then '어쩌구'

case when point > 5000 then '잘했어요!'

         when point > 2000 then '그럭저럭'

else '더 노력하세요!' end