joo_scent.log

웹개발 2주차

Sun, 19 Jun 2022 08:13:10 GMT

Keep

[Javascript]

1. jQuery 사용하기 기초

1) jQuery import : < head> ~ 사이에 아래 코드 넣기 (링크:https://www.w3schools.com/jquery/jquery_get_started.asp)

2) jQuery 선택자는 id로 보통 제어함

3) input박스 값 가져오기

// 콘솔창에 입력
// id 값이 post-url인 곳 선택 후, val()로 값을 가져온다는 뜻
$('#post-url').val();

4) div 보이기&숨기기

// 콘솔창에 입력하기
$('#post-box').hide();
$('#post-box').show();

5) css값 가져와보기(ex. display속성 값을 가져올 때)

$('#post-box').css('display');

6) 태그 내 텍스트 입력하기(바꾸기)

// input box에 텍스트 입력하기
$('#post-url').val('여기에 텍스트를 입력하면!');

//버튼 내 텍스트 바꾸기
$('#btn-posting-box').text('포스팅 박스 닫기');

2. div~div내에 동적으로 html 넣기 : ex) 포스팅 되면 카드를 추가해라, 포스팅 되면 버튼을 추가해라

1) 포스팅 되면 버튼을 추가해라 ('~')

let temp_html = '';
$('#cards-box').append(temp_html); // cards-box라는 아이디값을 가진 컴포넌트에다가 temp_html을 append해달라

2) 포스팅 되면 카드를 추가해라 (~~~)

let img_url = 'https://www.eurail.com/content/dam/images/eurail/Italy%20OCP%20Promo%20Block.adaptive.767.1535627244182.jpg';
let link_url = 'https://naver.com/';
let title = '여기 기사 제목이 들어가죠';
let desc = '기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...';
let comment = '여기에 코멘트가 들어갑니다.';

let temp_html = `
                    
                    
                        ${title}
                        ${desc}
                        ${comment}
                    
                `;
$('#cards-box').append(temp_html);

3) temp_html 뒤에 javascript 변수가 오는 경우에는 ''(따옴표)말고, backtic사용해서 내용 묶어주기.

4) 변수 부분이 바뀌는 내용이면, 이미 짜둔 html에서 복사해와서, "${~}" 바꿔넣기

추가하고 싶은 카드의 형태


    
      
      
        여기 기사 제목이 들어가죠
        여기에 기사 내용이 들어가겠죠
        여기엔 코멘트가 들어갑니다

윗부분 복사후, 태그 내용들이 변수로 들어가서 바뀔 것이므로, ${~}으로 바꿔서 넣어주기

let img_url = 'https://www.eurail.com/content/dam/images/eurail/Italy%20OCP%20Promo%20Block.adaptive.767.1535627244182.jpg';
let link_url = 'https://naver.com/';
let title = '여기 기사 제목이 들어가죠';
let desc = '기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...';
let comment = '여기에 코멘트가 들어갑니다.';
let temp_html = `
                    
                    
                        ${title}
                        ${desc}
                        ${comment}
                    
                `;
$('#cards-box').append(temp_html);

3. 버튼으로 포스팅 박스 열고 닫기 만들기

1) 포스팅 박스에 id 값을 준다

2) 포스팅 박스 제어를 위한 javascript함수 만들기

function openclose() {
    // id 값 post-box의 display 값이 block 이면
    if ($('#post-box').css('display') == 'block') {
        // post-box를 가리고
        $('#post-box').hide();
    } else {
        // 아니면 post-box를 펴라
        $('#post-box').show();
    }
}

3) html에서 posting-box 초기값 세팅(인라인 스타일) - style = "display : none" 또는 css에서 class만들어서 적용해도 ok

4) 버튼에 id값 주기

5) 만들어 둔 함수에 버튼 글씨 바꾸는 코드 추가

function openclose() {
    // id 값 post-box의 display 값이 block 이면
    if ($('#post-box').css('display') == 'block') {
        // post-box를 가리고
        $('#post-box').hide();
                // 가렸으니까 이제 열기로 바꿔두기
        $('#btn-posting-box').text('포스팅 박스 열기');
    } else {
        // 아니면 post-box를 펴라
        $('#post-box').show();
                // 폈으니까 이제 닫기로 바꿔두기
        $('#btn-posting-box').text('포스팅 박스 닫기');
    }
}

[Json]

1. JSONView 설치 : JSON을 더 가시적으로 볼 수 있음

임포트 링크 : https://chrome.google.com/webstore/detail/jsonview/gmegofmjomhknnokphhckolhcffdaihd/related?hl=ko

[Ajax]

1. Ajax는 jQuery를 임포트한 페이지에서만 동작 가능

2. Ajax 기본 골격

$.ajax({
  type: "GET", // GET 방식으로 요청한다.
  url: "http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99",
  data: {}, // 요청하면서 함께 줄 데이터 (GET 요청시엔 비우기, POST요청시에 들어있는 데이터를 가져감)
  success: function(response){ // 서버에서 준 결과를 response라는 변수에 담음
    console.log(response) // 서버에서 준 결과를 이용해서 나머지 코드를 작성 - 확인해볼 때 사용하고 앞줄 변수가 들어가면 거기까지 제대로 되고있는지 확인가능
  }
})

3. Ajax 이용해서 데이터 원하는 것만 불러오기

$.ajax({
  type: "GET",
  url: "http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99",
  data: {},
  success: function (response) {
    let mise_list = response["RealtimeCityAir"]["row"];
    for (let i = 0; i < mise_list.length; i++) {
      let mise = mise_list[i];
      let gu_name = mise["MSRSTE_NM"];
      let gu_mise = mise["IDEX_MVL"];
      console.log(gu_name, gu_mise);
    }
  }
});

Problem

데이터셋에서 column불러올 때 대소문자를 잘못쳐서 계속 오류가 뜸
인라인 스타일을 설정해주지 않았더니, 초기화가 안되고 자꾸 뒤에 그대로 붙어서 길어졌다

아래와 같이 했더니 오류남. 이유는 따옴표 통일 안해서.

     $(document).ready(function () {
         change_rate();
     });

     function change_rate() {
         $.ajax({
             type: "GET",
             url: "http://spartacodingclub.shop/sparta_api/rate",
             data: {},
             success: function (response) {
                 let now_rate = response['rate'];
                 $("#realtime-rate").text("now_rate");
             }
         })
     }

$(' 아이디값 ').text(' 변수값 ') // $(' 아이디값 ').append(' 변수값 ') 넣어야 하는데 거꾸로 넣어서 오류남

Try

console.log(변수) 로 계속 확인해보는 습관 가지기. 틀리면 어디서 틀렸는지 찾기 힘들다
따옴표 모양도 다 통일해줘야 함. 다르면 다른걸로 인식함

웹개발 1주차

Sun, 19 Jun 2022 07:43:57 GMT

Keep

[HTML]

1. 이미지(커버) 넣기

1) 들어갈 글을 적고, div로 묶어줌


    
        로그인 페이지
        아이디, 비밀번호를 입력해주세요

2) css로 이미지 cover 넣어주기

2.input box 넣기

1) P태그, input type 사용해서 input box 만들기

3.만들어둔 이미지를 화면 가운데로 가져오려면?

1) width를 주고, margin: auto를 사용하자!

2) 그래도 안되면? display:block을 추가! : 버튼의 경우 안되서, block을 만들어주니까 이동 가능했다.

4. 구글 폰트 넣기

1) link 태그를 복사해서 ~ 사이에, CSS를 복사해서 사이에 넣는다.



/* CSS에 이 부분을 추가하면 완성! */
* {
    font-family: 'Nanum Gothic', sans-serif;
}

5. bootstrap 시작 준비

1) 시작 템플릿





    
    
    

    
    

    
    
    
    
    

    스파르타코딩클럽 | 부트스트랩 연습하기



    이걸로 시작해보죠!

2) 부트스트랩 링크 : https://getbootstrap.com/docs/4.0/components/alerts/

[Javascript]

1. 자바스크립트 시작하기

1) ~ 안에 로 공간을 만들어 작성

2) 예시

function hey(){
    alert('안녕!');
}

3) 버튼에 함수를 연결하기. 버튼을 누르면 함수가 불러들어오는 것

2. 자바스크립트 - 변수&기본연산

1) 변수 대입( a = 1 )의 의미: "오른쪽에 있는 것을 왼쪽에 넣는 것!" (1을 a라는 변수에 넣는다)

2) let으로 변수 선언을 한다.

3) 예시

let a = 1
let b = 2

a+b // 3
a/b // 0.5

3. 리스트 & 딕셔너리

1) 리스트 선언 - 순서를 지켜서 가지고 있음

let b_list = [1,2,'hey',3]

2) 딕셔너리 선언 - key:value

let b_dict = {'name':'Bob','age':21}

3) 리스트 길이 구하기

b_list.length

4. 자바스크립트 - 도메인 추출

1) 특정 문자로 문자열을 나누고 싶은 경우

let myemail = 'scent@naver.com'

let result = myemail.split('@') // ['scent','naver.com']

result[0] // scent
result[1] // naver.com

let result2 = result[1].split('.') // ['naver','com']

result2[0] // naver -> 내가 하고싶었던 도메인 추출
result2[1] // com

myemail.split('@')[1].split('.')[0] // naver -> 간단하게 쓸 수도 있다!

5. 자바스크립트 - 함수&조건문&반복문

1) 함수

만들때 function 함수이름(필요한 변수들) { 내릴 명령들을 순차적으로 작성 }

사용할때 함수이름(필요한 변수들);

2) 조건문

else 사용예시

function is_adult(age){
    if(age > 20){
        alert('성인이에요')
    } else {
        alert('청소년이에요')
    }
}
is_adult(25)

else if 사용예시

function is_adult(age){
    if(age > 20){
        alert('성인이에요')
    } else if (age > 10) {
        alert('청소년이에요')
    } else {
        alert('10살 이하!')
    }
}
is_adult(12)

3) AND 조건 Or조건

AND 조건 : &&

OR조건 : ||

function is_adult(age, sex){
    if(age > 20 && sex == '여'){
        alert('성인 여성')
    } else if (age > 20 && sex == '남') {
        alert('성인 남성')
    } else {
        alert('청소년이에요')
    }
}

4) 반복문

리스트 내의 딕셔너리를 하나씩 출력

let scores = [
    {'name':'철수', 'score':90},
    {'name':'영희', 'score':85},
    {'name':'민수', 'score':70},
    {'name':'형준', 'score':50},
    {'name':'기남', 'score':68},
    {'name':'동희', 'score':30},
]
for (let i = 0 ; i < scores.length ; i++) {
    console.log(scores[i]);
}

만약 조건을 넣고 싶다면, 아래처럼 조건문 한줄 추가하기

for (let i = 0 ; i < scores.length ; i++) {
    if (scores[i]['score'] < 70) {
        console.log(scores[i]['name']);
    }
}

Problem

margin : auto가 계속 안먹어서 보니까 width 주는 것을 빼먹음
워드프레스에 적용시에는 위에서 배운 방법으로는 구글폰트가 적용이 안되었고, 다른방법인 @import방법을 써야하는 것 같다.
span은 어떻게 지정하는 것인지 몰라서 못했는데, 그냥 원래 있던 h태그나 p태그 등 안에다가 해당 범위까지만 다시 span을 먹여주면 된다.


        양초를 팝니다 가격:3,000원/개
        이 양초는 사실 특별한 힘을 지니고 있어요!

그리고 css에서는 그냥 다른거랑 똑같이 .price (클래스)로 디자인해주면 된다.

javascript 사용시 괄호 짝이 안맞아서 실행이 안되었다. 꼭 짝을 잘 맞춰야겠다.

Try

css 연습할 때는 div에 색을 넣어서 확인하는 습관을 가져야겠다.
javascript 연습할 때는 한줄한줄 계속 실행하고 체크해보는 습관을 가져야겠다.(console.log) 뭐가 잘못된건지 찾기가 매우 힘들기 때문
javascript 는 사칙연산 외에도 기본적으로 제공하는 함수가 많이 존재하는데, 왠지 이건 있을 것 같다 싶으면 구글에 먼저 찾아봐야겠다.
javascript 사용시, 변수명을 snake case나 camel case중 선택하여 통일해서 다른 사람들도 쉽게 알아볼 수 있게 쓰는 습관을 들여야겠다.
javascript 사용시, 콤마 잊지말고 체크해야겠다.