코딩 어렵다 그런데 포기하기 싫다

변수를 함수안에 선언하면 
함수 끝나면서 자동으로 사라지니 
함수 밖에서 선언! 
let count = 1;

jQuery

jQuery란 미리 작성된 JS코드로 쓰기 전에 임포트 해야함

코드가 복잡하고 브라우저 간 호환성 문제도 고려해야해서
jQuery라는 라이브러리가 등장

부트 스트랩에 이미 제이쿼리가 사용되고 있기 때문에
부트 스트랩 템플릿 가져다가 썼으면 이미 임포트 된 상태로 별도로 임포트 하지 않아도 되지만 부트 스트랩 템플릿으로 시작하지 않았으면 임포트 해줘야함 !

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

지칭할 땐 id값 지정

input박스의 값 가져와보기
1) input박스에 id값 지정하기 id="article-url"_
2) $('#article-url').val();

div 보이기, 숨기기
$('#post-box').show( ) 
$('#post-box').hide()

css값 가져와보기

$('#post-box').css('display')
"block" - 보이는 것

$('#post-box').hide()
$('#post-box').css('display')
"none" - 안보이는 것

태그내 텍스트 입력하기
$('#btn-posting-box').text('랄라')

버튼 붙이는 방법

let temp_html = `<button>나는 버튼이다</button>`

temp_html 
html처럼 생긴 문자열, html로 변환시키는 마법 
$('#cards-box').append(temp_html)
'나는 버튼이다'라는 버튼이 생김

칼럼 붙이는 방법
1)

let temp_html = `<div class="card"> ~~ </div>`

$('#cards-box').append(temp_html)

버튼 클릭으로 열고 닫기
1. 오픈 클로즈라는 함수 만들어 둠

<onclick="openclose()" ~~>

스크립트 작성

<script>
 function openclose() {
  }
  </script>

지금 보이는지 안보이는지 확인하려면?

$('#post-box').css('display')
"block" - 보인다는 것

<script>
 function openclose() {
  let status = $('#post-box').css('display');
  if (status == 'block') {
  	$('#post-box').hide();
  	$('#btn-posting-box').text('포스팅박스 열기');
	} else { 
  		$('#post-box').show();
  		$('#btn-posting-box').text('포스팅박스 닫기');
  		}
  }
  </script>

포스팅 박스가 처음부터 닫혀있게 하려면? - css 설정 이용

.posting-box {                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 
display : none;
}

css에서 class를 사용했다면
jquery에선 id값을 사용한다.

서버-클라이언트 통신 이해하기
Ajax - Asynchronous Javascript And XML
자바스크립트를 이용해서 비동기식으로 서버와 통신하는 방식
페이지 전환없이 서버에서 값을 받아올 수 있는!
비동기식이란? 여러가지 일이동시적으로 발생한다는 뜻으로
서버와 통신하는 동안 다른 작업을 할 수 있다는 의미.
웹페이지를 리로드하지 않고 데이터를 불러오는 방식
Ajax를 통해서 서버에 요청한 후 멈추어 있는 것이 아니라 그 프로그램은 걔속 돌아간다는 의미

비동기 방식의 장점
필요한 부분만 불러와 사용할 수 있으므로 불필요한 리소스 낭비가 발생하지 않음.

서버통신은 백그라운드로 이루어지고 사용자는 여러 작업을 할 수 있음

*동기식 : 신용카드같은 걸 결제할 때 , 결제모듈에서 결제버튼 누르면 웹페이지 전체가 프리징되는 경우가 있음- 서버와 웹브라우저가 통신하는 동안은 어떠한 작업도 사용자는 할 수 없게 됨.

기본적으로 HTTP 프로토콜은 클라이언트쪽에서 Request를 보내고 서버쪽에서 Response를 받으면 이어졌던 연결이 끊기게 되어있다. 그래서 화면의 내용을 갱신하기 위해서는 다시 request를 하고 response를 하며 페이지 전체를 갱신하게 된다. 하지만 이렇게 할 경우, 엄청난 자원낭비와 시간낭비를 초래하고 말 것이다.

AJAX는 HTML 페이지 전체가 아닌 일부분만 갱신할 수 있도록 XMLHttpRequest객체를 통해 서버에 request한다. 이 경우, JSON이나 XML형태로 필요한 데이터만 받아 갱신하기 때문에 그만큼의 자원과 시간을 아낄 수 있다.

클라이언트가 서버에게 요청함 나 뭐 데이터 줄 것 없니?
서버가 데이터를 줌 / 이 포맷은 json
https://chrome.google.com/webstore/detail/jsonview/chklaanhfefbnpoihckbnefhakgolnmc?hl=ko
추가 !

json형식은 딕셔너리{}와 리스트[] 조합

API
클라이언트가 요청할 때도 '타입'이라는 것이 존재함

GET - 데이터 조회(Read) 요청할 때
예) 영화 목록 조회

POST - 데이터 생성(Create), 변경(Update), 삭제(Delete)요청할 때
예) 회원가입, 회원탈퇴, 비밀번호 수정

GET방식으로 데이터 전달하는 방법
? : 여기서부터 전달할 데이터가 작성된다는 의미
& : 전달할 데이터가 더 있다는 뜻

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

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

요령이 없다보니 코드가 체계적이지도 않고
해설 영상을 보면 내 코드 작성 순서가 맥락이 없어 보인다.
그리고 무엇보다 작동하는 코드를 완성하는데 어려움을 느낀다는 것.
확실히 본 수업외에도 공부가 필요하다는 것을 여실히 느끼는 중.

Author And Source

이 문제에 관하여(코딩 어렵다 그런데 포기하기 싫다), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@miniso/코딩-어렵다-그런데-포기하기-싫다

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

코딩 어렵다 그런데 포기하기 싫다

Author And Source

좋은 웹페이지 즐겨찾기