[웹개발 종합반] 개발일지 #2

33163 단어 개발일지 개발하는디자이너 스파르타코딩클럽 개발일지

본 개발 일지는 스파르타 코딩클럽의 [왕초보] 비개발자를 위한, 웹개발 종합반을 수강하며 작성한 내용입니다.

Javascript 복습

count += 1; 는 count = count + 1 와 같다.

변수를 함수 안에 써주면 함수가 끝나면 그 값이 사라지므로 바깥에 써줄 것

letcount= 1;
function hey() {
    if (count% 2 == 0) {
        alert('짝수입니다!');
    }
    else {
        alert('홀수입니다!')
    }
count+= 1;
}

JQuery 시작하기

JS : HTML을 움직이게 하는 것 (e.g. 클릭하면 창이 떠라)
브라우저마다 코드를 다르고 길게 써주는 것을 줄이기 위해 라이브러리를 만든 것이 JQuery

Javascript로 길고 복잡하게 써야 하는 것을

document.getElementById("element").style.display = "none";

jQuery로 보다 직관적으로 쓸 수 있음
```
$('#element').hide();
```
JQuery = 미리 작성된 Javascript 코드
- 그러므로 반드시 쓰기 전에 '임포트'를 해야 사용할 수 있다!

JQuery 다뤄보기

JQuery CDN

부트스트랩은 JQuery를 쓰고 있기 때문에 부트스트랩 기본 세팅에 이미 임포트 되어있음

input 박스의 값을 가져와보기

// 크롬 개발자도구 콘솔창에서 쳐보기
// id 값이 post-url인 곳을 가리키고, val()로 값을 가져온다.
$('#post-url').val();

div 보이기/숨기기

// 크롬 개발자도구 콘솔창에 쳐보기
// id 값이 post-box인 곳을 가리키고, hide()로 안보이게 한다.(=css의 display 값을 none으로 바꾼다)
$('#post-box').hide();

// show()로 보이게 한다.(=css의 display 값을 block으로 바꾼다)
$('#post-box').show();

css의 값 가져와보기

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

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

태그 내 텍스트 입력하기

input box의 경우

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

다른 것들 - 예) 버튼의 텍스트 바꾸기

// 가리키고 싶은 버튼에 id 값을 준다음
<button id="btn-posting-box" type="button" class="btn btn-primary">포스팅 박스 열기</button>

$('#btn-posting-box').text('포스팅 박스 닫기');

태그 내 html 입력하기

버튼을 넣어보기

let temp_html = '<button>나는 추가될 버튼이다!</button>';
$('#cards-box').append(temp_html);

버튼 말고, 카드를 넣어보기

// 주의: 홑따옴표(')가 아닌 backtick(`)으로 감싸야 합니다.
// 숫자 1번 키 왼쪽의 버튼을 누르면 backtick(`)이 입력됩니다.
// backtick을 사용하면 문자 중간에 Javascript 변수를 삽입할 수 있습니다.
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 = `<div class="card">
                    <img class="card-img-top"
                        src="${img_url}"
                        alt="Card image cap">
                    <div class="card-body">
                        <a href="${link_url}" class="card-title">${title}</a>
                        <p class="card-text">${desc}</p>
                        <p class="card-text comment">${comment}</p>
                    </div>
                </div>`;
$('#cards-box').append(temp_html);

JQuery 적용하기

포스팅 박스 열기 버튼에 function을 달기

```jsx
<script>
function openclose() {
	// 여기에 jQuery를 이용해 코드를 짤 예정    
}
</script>

// onclick 속성(attribute)을 추가합니다.
<button onclick="openclose()" class="btn btn-primary btn-lg">포스팅박스 열기</button>
```

클릭 해서 포스팅 박스를 여닫게 하기

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

'포스팅박스 열기' 버튼의 글씨 바꿔주기

포스팅박스 열기 버튼에 id 값 주기

<button id="btn-posting-box" onclick="openclose()" class="btn btn-primary btn-lg">포스팅박스 열기</a>

버튼 텍스트를 바꿔주기

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('포스팅 박스 닫기');
            }
        }

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

요청하라고 열어놓은 창구 = API
서버 → 클라이언트 보내는 데이터 포맷 = JSON
- JSON → 딕셔너리와 리스트의 조합
클라이언트 → 서버
- API는 은행 창구와 같음
- 클라이언트의 요청 타입에 따라 다른 데이터를 제공
  - GET : 데이터 조회(Read) (e.g. 영화 목록 조회)
    - POST : 데이터 생성(Create), 변경(Update), 삭제(Delete) 요청할 때 (e.g. 회원가입, 회원탈퇴, 비밀번호 수정)

GET
- 브라우저에 주소를 입력해서 엔터를 치는 것 자체가 GET 요청

https://movie.naver.com/movie/bi/mi/basic.nhn?code=161967

위 주소는 크게 두 부분으로 쪼개집니다. 바로 "?"가 쪼개지는 지점인데요.
"?" 기준으로 앞부분이 <서버 주소>, 뒷부분이 [영화 번호] 입니다.

* 서버 주소: https://movie.naver.com/movie/bi/mi/basic.nhn
* 영화 정보: code=161967

GET 방식으로 데이터를 전달하는 방법

    ?  : 여기서부터 전달할 데이터가 작성된다는 의미입니다.
    & : 전달할 데이터가 더 있다는 뜻입니다.

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

    위 주소는 google.com의 search 창구에 다음 정보를 전달합니다!
    q=아이폰                        (검색어)
    sourceid=chrome        (브라우저 정보)
    ie=UTF-8                      (인코딩 정보)

Ajax 시작하기

Ajax는 jQuery를 임포트한 페이지에서만 동작 가능
Ajax 기본 골격

$.ajax({
type: "GET",
url: "여기에URL을입력",
data: {},
success: function(response){
console.log(response)
}
})

Ajax 연습하기 : 데이터 불러와서 추가 후 스타일 지정

function q1() {
$('#names-q1').empty()
$.ajax({
type: "GET",
url: "[http://spartacodingclub.shop/sparta_api/seoulbike](http://spartacodingclub.shop/sparta_api/seoulbike)",
data: {},
success: function (response) {
// 반복문 데이터 불러오기
let rows = response['getStationList']['row']
for (let i = 0; i < rows.length; i++) {
let name = rows[i]['stationName']
let rack = rows[i]['rackTotCnt']
let bike = rows[i]['parkingBikeTotCnt']


let temp_html = ``

// 조건문으로 자전거 개수에 따라 빨간색으로 표기하기
if (bike < 5) {
temp_html = `
<tr class="urgent">
    <td>${name}</td>
    <td>${rack}</td>
    <td>${bike}</td>
</tr>`
} else {
temp_html = `
<tr>
    <td>${name}</td>
    <td>${rack}</td>
    <td>${bike}</td>
</tr>`
}
// 불러온 데이터 추가하기
$('#names-q1').append(temp_html)
}
}
})
}

Ajax 연습하기 (2) : 이미지 변경

function q1() {
$.ajax({
type: "GET",
url: "https://api.thecatapi.com/v1/images/search",
data: {},
success: function (response) {
// 이미지 사진 변경하기
let imgurl = response[0]['url'];
$("#img-cat").attr("src", imgurl);
}
})
}

Author And Source

이 문제에 관하여([웹개발 종합반] 개발일지 #2), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@rino121/웹개발-종합반-개발일지-2

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

백준 14002 가장 긴 증가하는 수열 4

기존 테스트에 시큐리티 적용

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다