항해99 사전과정 웹개발종합반 회고록 #2

김춘복·2023년 2월 1일

웹개발종합

목록 보기

2/5

스파르타코딩클럽 웹개발종합반 강의 후기

본격적으로 항해99를 시작하기 전, 사전강의로 4종의 강의를 제공받았다.
그 중 2회독 필수인 '웹개발종합반'강의에 대한 회고록을 작성하려한다.
배운 것을 정리하는 위주로 글 작성.

2주차

2주차 강의에선 Javascript에 대해 배웠다.
1주차 강의 후반부에서 배운 Javascript에 대한 내용도 이 곳에 정리하고자 한다.
이것도 이미 아는 내용이 많았지만 복습하는 느낌으로 강의를 들었다.
실습은 제공해 준 Pycharm Professional 구버전을 사용했다.

JAVASCRIPT

Javascript : 브라우저가 알아들을 수 있는 프로그래밍 언어로 HTML이 뼈대, CSS가 꾸미기라면 Javascript는 웹페이지가 움직일 수 있게 기능하는 역할을 한다.
프로그래밍 언어 배울때는 변수, 자료형, 함수, 조건문, 반복문 이 기본이 된다.
let 으로 변수 선언

let a = 3     //변수 a에 3값 저장. 오른쪽에 왼쪽을 저장
let first_name = 'bob' // snake case로 변수명
let firstName = 'bob' // camel case로 변수명

리스트 : 순서를 지켜 가지고 있는 형태. 순서는 가장 왼쪽부터 0으로 시작한다.

let a_list = [‘수박’, ‘참외’, ‘배’]
a_list[1]			//참외
a_list.push('감')	// a_list 맨 오른쪽에 '감' 추가. 리스트에 다른 리스트도 넣을 수 있음.
a_list[4]			//감
a_list.length		// 5.  리스트의 길이를 출력.

딕셔너리 : Key:Value로 값들의 묶음.

let a_dict = {‘name’ : ‘bob’, ‘age’ : 27}
a_dict[name]				//bob. name과 age가 key고 bob과 27이 value.
a_dict[‘height’] = 180		// 이렇게 key:value를 추가 가능.

기본 함수 : 사칙연산 외에도 여러 함수들 존재. 구글링으로 찾아봐야.

let a = 20
let b = 7
a % b = 6  // %는 나누고 난 나머지

let myemail = 'KCB@naver.com'
let result = myemail.split('@') // 특정 문자로 문자열 나누기. ['KCB','naver.com']
result[0] // KCB
result[1] // naver.com

alert(알람 창으로 띄우는 함수)
console.log(콘솔창에 띄워 줌)

함수 : 원하는 함수를 만들어서 사용 가능.

// 만들기
function 함수이름(필요한 변수들) {
내릴 명령들을 순차적으로 작성
}
// 사용하기
함수이름(필요한 변수들);

조건문 if

If (age > 20){
	alert(‘성인입니다)
}else {
	Alert(‘청소년입니다’)}
is_adult(25) // 성인입니다.

반복문 for

for (1. 시작조건; 2. 반복조건; 3. 더하기) {
4. 매번실행
} // 시작조건에서 출발해 반복조건을 만족하면 4실행이 되고 3이 실행.
for (let i = 0; i < 100; i++) {
console.log(i);
} // i가 0에서 시작해 <100이 만족할때까지 콘솔창에 i를 띄우고 i를 1씩 늘림.

- 반복문 안에 조건문을 넣을 수도 있다.

JQuery

JQuery : Javascript로도 모든 기능을 구현할 수 있지만, 코드 길이와 브라우저 호환성 문제로 인해 Javascript를 편리하게 쓰도록 미리 작성해 둔 라이브러리가 JQuery다.
임포트 : 미리 작성된 Javascript 코드를 가져오는 것을 '임포트'라고 한다.
HTML의 <Head>안에 아래의 코드를 삽입하면 JQuery를 사용할 수 있다.
```
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
```
JQuery에선 이름표를 id로 짓는다. (cf. CSS에선 class로 이름표를 짓는다.)
$('#url') : id ‘url’에다가 jQuery를 먹인다.

$('#url').val('입력할내용') 		// id 'url'에 ()안에 든 밸류를 입력한다.
$('#url').val()  				// id ‘url’에 있는 밸류를 가져온다.
$('#post-box').hide() 			// id ‘post-box’를 숨긴다.
$('#post-box').show() 			// 숨은 id ’post-box’를 보인다.
$('#cards-box').empty()				// id cards-box의 내용을 지운다.
$("#아이디값").attr("src", 이미지URL)  // 이미지 바꾸기
$("#아이디값").text("바꾸고 싶은 텍스트")//텍스트 바꾸기

let temp_html = `이 안에 임시 html 작성`('아니고 백틱)
$('#cards-box').append(temp_html)  // id cards-box에 (temp_html)을 붙인다.
window.location.reload() 			//페이지 새로고침

// 아래는 화면 새로고침 하는 명령어
$(document).ready(function(){
  listing();
});

function listing() {
	console.log('화면 로딩 후 잘 실행되었습니다');
}

서버-클라이언트 통신

JSON

JSON : 데이터를 딕셔너리(Key:Value)와 리스트가 합쳐진 형태로 정리.
API가 제공하는 데이터를 크롬 익스텐션인 JSONView를 사용해 깔끔하게 볼 수 있다.
클라이언트가 서버에 요청할 때 GET과 POST 두가지 타입이 존재한다.
GET : 통상적으로 데이터 조회(Read)요청. 데이터 변경 안하고 그냥 읽을 때

GET 방식으로 데이터를 전달하는 방법
Https://google.com/search?q=아이폰&sourceid=chrome&ie=UTF-8
?를 기준으로 앞부분이 서버주소. 뒷부분이 전달할 데이터.
위 주소는 google.com의 search 창구에 다음 정보를 전달.
q=아이폰 (검색어)
sourceid=chrome (브라우저 정보)
ie=UTF-8 (인코딩 정보)

POST : 통상적으로 데이터 생성(Create), 변경(Update), 삭제(Delete) 요청할 때

AJAX

AJAX : Ajax는 jQuery를 임포트한 페이지에서만 동작 가능하다.

$ajax 기본골격
$.ajax({
type: "GET",
url: "여기에URL을입력",
data: {},
success: function(response){
console.log(response)
}
})
$ajax 코드 설명
type : "GET" → GET 방식으로 요청.
url: 요청할 url
data: 요청하면서 함께 줄 데이터 (GET 요청시엔 비워두고 POST요청시 넣는다)
success: 성공하면, response 값에 서버의 결과 값을 담아서 함수를 실행한다.