웹 개발 종합

스파르타플릭스_프로젝트

환경 세팅

sparta 폴더 안에 spartaflix 폴더를 만든다!
spartaflix 안에 index.html을 만든 후 아래의 템플릿을 넣는다!

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <title>스파르타플릭스</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    
    <style>
    </style>

</head>

<body>
  
</body>

</html>

페이지 상단 만들기

다음과 같은 페이지를 만들 예정이다!
남이 만들어 둔 것을 쓸 때는 잘 찾아다가 조금씩만 고쳐서 쓰는 것이 답이다 😎

Bootstrap 사이트에서 Jumbotron 검색 후 추가하기
구글 폰트 적용하기
Bootstrap 사이트에서 Headers 찾아서 추가하기

위의 과정을 거치면 스파르타플릭스의 상단 부분이 완성된다!

카드 추가하기

Bootstrap 사이트에서 Cards 검색 후 추가하기
포스터 이미지 넣고, 개수 조절하기
카드 내용 변경 후 별점 추가하기
- 영화 제목, 영화 코멘트 변경
- 영화 제목, 영화 코멘트 사이에 <p> 태그를 활용하여 별 이모티콘 추가하기

위의 과정을 거치면 스파르타플릭스의 카드 부분까지 완성된다!

포스팅 박스 만들기

큰 박스 먼저 만들기
영화 이미지, 영화 제목, 추천 이유 추가하기
- Bootstrap - Forms의 Floating Labels 참고!
별점 선택 영역 추가하기
- Bootstrap - Input group의 Custom forms 참고!
기록하기 버튼 추가하기
- Bootstrap - Buttons의 Variants 참고!

모든 과정을 거치고 나면 스파르타플릭스 페이지가 완성된다.😎😎

Javascript

프로그래밍 언어 중 하나로, 브라우저가 알아들을 수 있는 언어이다.

✔️참고
그렇다면 왜 Javascript를 사용해야 하는가??

브라우저가 Javascript를 주로 사용하는 이유는 역사적으로 Javascript가 웹브라우저에서 실행되는 스크립트 언어로 사용되어 왔기 때문이다. 웹 페이지의 동적인 기능을 구현하기 위해 Javascript가 개발되었으며, 많은 웹 개발자들이 Javascript를 사용하여 웹 애플리케이션을 구축하고 유지 관리해 왔다. Javascript가 브라우저한테 명령을 내리는 표준이라고 생각하면 된다!

JavaScript의 범용성

Javascript를 통해서 서버도 만들 수 있다!
즉, Javascript 하나로 프론트엔드, 백엔드가 다 가능하다.
또한 IOS와 안드로이드 앱은 물론 게임 개발 엔진이나 IoT(사물인터넷) 애플리케이션 개발도 가능하다.

Javascript 기초문법

변수 & 기본연산

변수는 값을 담는 상자이다!
프로그래밍 언어에서는 = 가 같다의 개념이 아닌 오른쪽의 값을 왼쪽에 넣어줘의 의미이다.

let 으로 변수를 선언한다.

let a = 2;
a = 'Bob';  // 문자열은 작은 따옴표로 감싸준다!

// 처음 변수를 저장하려면, let을 앞에 붙여준다!
// 한 번 선언했으면, 다시 선언하지 않고 값을 넣는다.

사칙연산, 문자열 더하기가 기본적으로 가능하다.

let a = 2;
let b = 3;

console.log(a+b)  // 5;

let c = '대한';
let d = '민국';

console.log(c+d);  // 대한민국

리스트 & 딕셔너리

리스트 : 순서를 지켜서 가지고 있는 형태이다.

✔️참고
컴퓨터는 0부터 센다!! 리스트에 들어있는 첫 번째 값은 [0]으로 불러온다!

let a_list = []  // 리스트를 선언. 변수 이름은 아무렇게나 가능!

let a = ['사과','수박','딸기','감'];

console.log(a[1]);  // 수박
console.log(a[0]);  // 사과

//리스트 길이 구하기
console.log(a.length);

딕셔너리 : 키(Key) - 밸류(Value) 값의 묶음이다.

let a_dict = {};  // 딕셔너리 선언. 변수 이름은 아무렇게나 가능!

let a = {'name':'영수','age':27};

console.log(a);
console.log(a['name']);  // 영수
console.log(b_dict['age']);  // 27

✔️참고
리스트는 [ ]가 생겼으니까 [ ]로 가져오는데, 딕셔너리는 { }로 만들었는데 왜 { }로 안 가져오는가...

이런 규칙들은 프로그래밍 언어를 만든 사람이 그때그때 목적에 맞게 작성한 것이다!
있는 그대로! 받아들이기!! 😎
따라서 규칙을 설정하는 것도 전부 제각각이다!!

리스트와 딕셔너리의 조합

let a = [
	{'name':'영수','age':27},
	{'name':'철수','age':15},
	{'name':'영희','age':20}
];
console.log(a[0]['name']);  //영수
console.log(a[1]['age']);  //15

✔️참고

[ ] 와 Key-Value 두 가지로 이루어진 형태의 자료를 많이 사용한다!!
이게 기초가 되는 문법이다.

필요한 이유!!

순서를 표시할 수 있고, 정보를 묶을 수 있다.

앞에서 언급한 <스파르타과일가게>가 정말 잘 되어서 전국에서 손님이 찾아오고 있다. 대기표를 작성하기 위해서 온 순서대로 이름, 휴대폰 번호를 적도록 하였는데, 변수만을 사용한 모습은 다음과 같다.

let customer_1_name = '김스파';
let customer_1_phone = '010-1234-1234';
let customer_2_name = '박르탄';
let customer_2_phone = '010-4321-4321';
...(알아보기 힘들다.)

딕셔너리를 활용한다면 다음과 같이 고객 별로 정보를 묶을 수 있다.
let customer_1 = {'name' : '김스파', 'phone' : '010-1234-1234'};
let customer_2 = {'name' : '박르탄', 'phone' : '010-4321-4321'};
그리고 순서를 나타내기 위해 리스트를 사용하면 더 깔끔해진다.
let customer = [
{'name' : '김스파', 'phone' : '010-1234-1234'},
{'name' : '박르탄', 'phone' : '010-4321-4321'}
]

보기에도 깔끔해지고, 다루기도 쉬워지고, 고객이 새로 한 명 오더라도 .push 함수를 이용해서 간단하게 대응할 수 있다.

사칙연산 외에도, 기본적으로 제공하는 여러 함수들이 존재한다.

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

let myemail = 'sparta@gmail.com';

let result = myemail.split('@');  // ['sparta','gmail.com']

result[0];  // sparta
result[1];  // gmail.com

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

result2[0];  // gmail -> 우리가 알고 싶었던 것!
result2[1];  // com

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

반복문

리스트 자료형의 데이터를 하나하나 뽑아서 쓰기엔 무리가 있다.

let fruits = ['사과','배','감', ... ,'귤'];
console.log('사과');
console.log('배');
console.log('감');
...
console.log('귤');

// 이렇게 100개 씩 쓰기엔 무리가 있다.. 그래서, 반복문이라는 것이 존재한다!

그중에서 forEach 라는 함수로 간단하게 뽑을 수 있다!!!

fruits.forEach((a) => {
	console.log(a);
}) 
// fruits 의 요소를 하나씩 확인하는데 이름은 a라고 한다.
// a는 b,c,zzz,fruit 어떤 걸로 해도 상관 없다!

조건문

반복문과 더불어 조건에 맞춰 실행을 다르게 해주는 조건문도 프로그래밍에서는 빼놓을 수 없다.

if (조건) {
	// 조건에 맞다면~
} else {
	// ~가 아니라면~
}

반복문 + 조건문 합치기!

let ages = [12,15,20,25,17,37,24]

ages.forEach((a)=> {
	if (a > 20) {
		console.log('성인입니다')
	} else {
		console.log('청소년입니다')
	}
})

Javascript 활용 문법

Javascript로 Alert 띄우기

함수를 만들어두기

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

버튼에 함수 연결하기

<button class="form-button" type="button" onclick="hey()">영화 기록하기</button>

✔️참고

1. 버튼을 클릭
2. hey를 불러라!
3. alert('안녕!')을 실행해라!

프로그래밍에서는 정해진 일을 반복하는 친구들을 함수라고 부른다!

function hey()라는 규칙으로 hey라는 함수를 만들었고, alert('안녕!')이라는 작업을 원할 때마다 반복적으로 수행하게 만들었다!

JQuery

HTML의 요소들을 조작하는 Javacsript를 미리 더 쉽게 작성해 둔 라이브러리이다.
순수 Javascript만 사용하면 길고 복잡하기 때문에 JQuery를 사용한다!

Javascript로 모든 기능을 구현할 수 있지만
1) 코드가 복잡하고, 2) 브라우저 간 호환성 문제도 고려해야 해서 JQuery라는 라이브러리가 등장하게 되었다.

JQuery와 Javascript 비교하기

JQuery는 Javascript와 다른 특별한 소프트웨어가 아니라 미리 작성된 Javascript 코드이다. 전문 개발자들이 짜둔 코드를 잘 가져와서 사용하는 것이다!

미리 작성된 Javascript 코드를 가져오는 것을 import 라고 부른다.
<head>...</head> 사이에 넣어주면 끝!

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

css의 class처럼 Javascript에서 HTML을 움직이게 하기 위해서는 id 값이 필요하다!

오늘 문제 해결했던 부분

자바 알고리즘 문제에서 형변환 해서 실수로 계산해야 하는 문제가 있었는데 형변환에 대한 개념이 잡혀있지 않아서 구글링을 통해 학습 후 문제를 해결할 수 있었다.
VS Code에서 Alt + B 단축키가 적용되지 않아서 확인했더니 open in browser 설치가 안되어 있어서 다시 설치해주었다...

'Today I Learned(TIL) > 스파르타 내일배움캠프' 카테고리의 다른 글

웹 개발 종합_4주차 (6)	2024.10.31
웹 개발 종합_3주차 (3)	2024.10.30
Spring 사전캠프 퀘스트_반복문 연습하기 (0)	2024.10.29
웹 개발 종합_1주차 (3)	2024.10.28
Java Handbook_Part 1✏️ (4)	2024.10.22

당근당근🥕

웹 개발 종합_2주차

스파르타플릭스_프로젝트

환경 세팅

페이지 상단 만들기

카드 추가하기

포스팅 박스 만들기

Javascript

Javascript 기초문법

Javascript 활용 문법

JQuery

오늘 문제 해결했던 부분

'Today I Learned(TIL) > 스파르타 내일배움캠프' 카테고리의 다른 글

티스토리툴바

웹 개발 종합_2주차

스파르타플릭스_프로젝트

환경 세팅

페이지 상단 만들기

카드 추가하기

포스팅 박스 만들기

Javascript

Javascript 기초문법

Javascript 활용 문법

JQuery

오늘 문제 해결했던 부분

'Today I Learned(TIL) > 스파르타 내일배움캠프' 카테고리의 다른 글

관련글

티스토리툴바