[왕초보] 웹개발 종합반 2주차 정리
웹개발 1주차 에 이어서 웹개발 2주차 마무리까지 정리한 글이다.
1. Javascript 알아보기
🤔 자바스크립트란?
- 브라우저가 알아들을 수 있는 프로그래밍 언어!
- 정적인 웹 브라우저를 움직이게 하고 사용자와 상호작용할 수 있게 만드는 언어!
- 브라우저에 명령을 내리는 표준!
- Node.js, Nest.js 등 js가 있는 것처럼 백엔드 개발에도 사용하는 언어!
- 동적 브라우저, IOS와 안드로이드 앱, 게임 개발 엔진, IoT 애플리케이션 등 다양한 곳에서 사용!
그리고, Java와 Javascript는 아무 관련이 없다 😏
2. Javascript 사용해보기
웹 브라우저에서 자바스크립트를 사용하려면 <script> ~ </script> 태그를 별도로 생성해야 한다.
동적인 것을 만들기 위해서는 script 태그 안에 내용을 채워넣으면 되는데 알아야 할 몇가지가 있다.
👉🏻 자바스크립트 기초 문법
1. 자료형 - 데이터 타입
2. 변수 - 데이터를 담는 공간
3. 연산 - 어떠한 데이터를 계산하는 식
4. 조건문 - 어떠한 데이터를 구별하기 위한 식
5. 반복문 - 어떠한 로직을 반복적으로 수행하기 위한 식
📃 자료형
자바스크립트는 동적 언어이기 때문에 자료형을 구분해야 하는 다른 언어와 다르게 let 이라는 자료형으로 모든 타입의 값이 자동으로 할당 및 재할당이 된다.
즉, 정수 / 실수 / 문자 / 문자열 / 불리언 이러한 데이터타입이 변수를 선언하고 할당할 때 자동으로 분류가 된다.
사용 예시)
let a = 12; / 정수
let b = 5.6; / 실수
let c = 'a'; / 문자
let d = "하이"; / 문자열
let e = true; / 불리언📃 변수
변수는 데이터를 담는 공간이다.
위 자료형 예시에서 본다면 a, b, c, d, e 처럼 어떠한 데이터를 담을 수 있는 공간이다.
사용자가 직접 선언하여 할당할 수 있다.
💡 리스트
리스트는 어떠한 데이터가 순서에 맞춰 담겨있는 형태이다.
변수를 선언하고 단일 데이터가 아닌 여러 데이터를 담고 싶을 때 사용할 수 있다.
리스트를 선언하고 할당하는 예시)
let a = [1,2,3,4,5]
let b = ['a','b','c','d','e']이렇게 꺽쇠안에 데이터를 담아 할당해주면 리스트 형태로 변수가 선언 및 할당이 된다.
💡 딕셔너리
딕셔너리는 리스트와 마찬가지로 변수에 여러 키값이 있지만 키 안에 다른 밸류값을 지정해주고 싶을 때 사용한다.
예를 들어, 사람의 정보를 담고싶다고 한다면 나이, 키, 성별 등 여러가지가 있는데 이런 정보를 한 번에 담을 수 있는 것!
딕셔너리를 선언하고 할당하는 예시)
let a = {'name':'영수', 'age':24, 'height':180}이렇게 중괄호 안에 묶인 데이터들을 담아주면 딕셔너리 형태로 변수가 선언 및 할당이 된다.
💡 리스트와 딕셔너리 조합
리스트와 딕셔너리를 같이 사용할 수도 있다.
예를 들어, 어떤 객체의 정보를 여러 개 담고싶을 때 사용할 수 있다.
리스트와 딕셔너리 선언하고 할당하는 예시)
let a = [
{'name':'영수', 'age':24, 'height':180},
{'name':'철수', 'age':30, 'height':170},
{'name':'진수', 'age':26, 'height':176}
]이렇듯 꺽쇠를 열어 중괄호로 정보를 여러 개 담고 꺽쇠를 닫아주면 된다!
리스트와 딕셔너리 안에 담긴 데이터를 다루기 위해서는 데이터의 순서가 정말 중요하다.
이 부분은 연산에서 자세히 다루도록 하겠다!
📄 연산
연산은 기본 사칙연산(+, -, /, *)을 주로 이용한다.
또한, 문자나 문자열을 붙이는것도 + 연산을 통해 쉽게 사용이 가능하다.
ex)
let a = '대한'
let b = '민국'
console.log(a+b)
=> 대한민국💡 리스트 연산
리스트와 딕셔너리 연산은 데이터가 담긴 공간을 알아야하기 때문에 순서를 아는 것이 중요하다.
예를 들어 let mylist = ['a', 'b', 'c'] 리스트가 있다고 가정했을 때,
a의 순서는 1번째다. 하지만 mylist의 첫번째에 있는 데이터를 쓰고 싶다고 한다면 0번부터 시작해야한다.
리스트에서 특정 순서의 데이터를 불러오는 방법은
mylist[0] 가 된다. 앞에 변수의 이름을 넣어주고 뒤에 꺽쇠안에 불러올 데이터의 순서를 넣어주면 된다.
만약 문자열을 합치고 싶다면 아래처럼 사용하면 된다.
console.log(mylist[0]+mylist[1])
=> ab💡 딕셔너리 연산
이제 딕셔너리를 알아보자
let mydictionary = {'name':'영수', 'age':24, 'height':180}
위 처럼 딕셔너리가 선언 및 할당되어 있을 때 가져오는 방법은 앞에 변수 이름을 넣고 꺽쇠안에 Key 값을 넣어주면 된다.
여기서 Key와 Value 는 딕셔너리에 담긴 하나의 정보에서 앞에 있는 부분 name이 key가 되고, 영수가 value가 된다.
즉,
console.log(mydictionary['name'])
=> 영수💡 리스트와 딕셔너리 연산
그렇다면 리스트와 딕셔너리가 같이 있는 변수의 연산은 어떻게 할까?
let mylist = [
{'name':'영수', 'age':24, 'height':180},
{'name':'철수', 'age':30, 'height':170},
{'name':'진수', 'age':26, 'height':176}
]위 리스트에 각 사람의 정보가 담겨있다.
리스트는 담긴 순서를 알아야 했고, 딕셔너리는 key값을 알아야 했다.
철수라는 데이터를 불러오고 싶다면 철수의 순서는 두번째로 1을 철수는 name 값이니까
mylist[1]['name'] 으로 불러올 수 있다.
불러올 값의 순서 다음에 키값을 넣어주면 된다.
리스트와 딕셔너리는 추후 데이터를 다룰 때 많이 쓰이게 된다.
고객들의 정보, 유저들의 정보, 무기의 정보 등 여러 상황에서 쓰이고 데이터를 전송하고 처리하는데 매우 효율적이다.
📌 사칙연산 말고도 추가적으로 제공하는 함수(메서드)가 여럿 있다.
예를 들어,
- 나눗셈의 나머지를 구하고 싶을 때 : %
let mylist = ['a', 'b', 'c'] 에서
- 리스트에 담긴 데이터 개수를 알고싶을 때 :
mylist.length() - 리스트에 담긴 뒷부분 값을 삭제하거나 추가하고 싶을 때 :
mylist.pop(),mylist.push('d')
이렇게 문자열 함수, 리스트 함수 등 여러 함수가 존재하기 때문에 찾아 보고 공부하면 스크립팅 시간을 줄일 수 있다. (제공된 함수들의 기능을 직접 구현하는 것도 가능)
📄 조건문
조건문은 말그대로 조건을 주어 실행되는 로직을 나누고 싶을 때 사용한다.
사용 예시)
if (조건식) {
...
}이렇게 if 와 (조건식)을 주고 {} 중괄호로 묶어주면 된다.
if 말고도 switch case문도 있다.
사용 예시)
switch(x) {
case 'value1': // if (x === 'value1')
...
break
case 'value2': // if (x === 'value2')
...
default:
...
}switch case 문의 특징은 각 분기점을 나누고 case 안에 break 문이 없다면 다음 분기로 넘어가 또 다른 case문을 실행할 수 있다는 점이다.
만약 'value2' 케이스에서 조건이 부합하여 실행이 되어도 break문이 없기 때문에 다음 case -> default로 실행이 가능하다는 점이다.
📄 반복문
특정 로직을 반복하여 실행하고 싶을 때 사용한다.
자바스크립트에서 사용하는 반복문은 여러가지가 있다.
- 반복문의 종류
- for
- for...in
- for...of
- forEach() - (Array 메서드)
- while
- do...while
forEach()의 경우 배열 함수로 연속적으로 데이터가 담겨있는 변수에 사용할 수 있다.
예를 들어, let mylist = ['a', 'b', 'c'] 로 리스트를 선언 및 할당하고 리스트의 개수만큼 반복하고 싶을 때 사용할 수 있다.
사용 예시)
mylist.forEach(element => {
console.log(element);
})
=> a
b
c이렇게 mylist에 담긴 element 값들이 반복되어 출력이 되는것을 볼 수 있다.
3. Javascript를 활용하여 html에 적용하기
미리 만든 웹 브라우저에 Javascript를 사용하려면 <script> ... </script> 태그를 넣어야 한다.
html 스크립트에 <script> 태그를 넣어준 뒤,
원하는 기능을 넣기 위해 function 이라는 함수형 타입을 선언해주고 기능을 담을 함수 이름을 지정한다.
📌 함수 선언의 위치 (body, head)에 따라 호출할 수 있는 여부가 다르다.
사용 예시)
function myfunc()이제 이 함수의 기능을 넣어줘야 하니 중괄호를 추가해준다
function myfunc() {
}이제 중괄호 안에 원하는 기능을 넣으면 된다.
📄 버튼에 함수 기능 넣기
<button>버튼</button> 버튼태그에서 버튼을 누르면 함수가 작동하게끔 하고싶다.
그러면 버튼 태그안에 onclick과 함께 선언한 myfunc() 함수를 넣어주면 된다.
<button>버튼</button>
이렇게 하면 onclick 입력이 발생하면 myfunc() 함수가 실행이 된다.
📄 웹에서 요소의 아이디를 가져오기
웹 브라우저에서 특정 요소의 아이디를 가져오고 싶을 때는
document.getElementById() 함수를 사용한다.
요소를 가져와 해당 요소에 기능을 더하거나 스타일을 바꾸는 등 제어가 가능하다.
4. JQuery 사용하기
JQuery는 자바스크립트를 더 쉽게 작성할 수 있도록 만든 라이브러리이다.
웹을 조작할 때 JQuery를 통해 쉽게 기능 구현이 가능하다.
왜?? 우리가 기능을 구현하면 되지 않는가??
- 코드가 복잡
- 브라우저간 호환성 문제
의 이유로 JQuery가 등장하였다.
📄 JQuery 사용법
📌 일단 사용하기 전에 @import 하여 내 html 스크립트에서 사용이 가능하도록 해야한다!
JQuery 스크립트 태그 : <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
사용 예시)
document.getElementById('hello').innerHTML = '안녕'; 이라는 코드가 있다.
이는 'hello' 라는 요소의 텍스트를 '안녕'이라고 변경하는 기능의 구문이다.
하지만 코드가 길고 복잡하기 때문에 JQuery를 사용하여 간단하게 작성할 수 있다.
JQuery 활용 : $('#hello').html('안녕');
이렇게 JQuery를 통해 더 많은 기능을 쉽고 간단하게 구현할 수 있다.
JQuery로 복잡한 기능의 코드도 구현할 수 있을까? 의문이 들지만 기대된다
