웹 개발 1주차
<배운 내용>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>스파르타코딩클럽 | HTML 기초</title>
</head>
<body>
<!-- 구역을 나누는 태그들 -->
<div>나는 구역을 나누죠</div>
<p>나는 문단이에요</p>
<ul>
<li> bullet point!1 </li>
<li> bullet point!2 </li>
</ul>
<!-- 구역 내 콘텐츠 태그들 -->
<h1>h1은 제목을 나타내는 태그입니다. 페이지마다 하나씩 꼭 써주는 게 좋아요. 그래야 구글 검색이 잘 되거든요.</h1>
<h2>h2는 소제목입니다.</h2>
<h3>h3~h6도 각자의 역할이 있죠. 비중은 작지만..</h3>
<hr>
span 태그입니다: 특정 <span style="color:red">글자</span>를 꾸밀 때 써요
<hr>
a 태그입니다: <a href="http://naver.com/"> 하이퍼링크 </a>
<hr>
img 태그입니다: <img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" />
<hr>
input 태그입니다: <input type="text" />
<hr>
button 태그입니다: <button> 버튼입니다</button>
<hr>
textarea 태그입니다: <textarea>나는 무엇일까요?</textarea>
</body>
</html>
배경관련 background-color background-image background-size
사이즈 width height
폰트 font-size font-weight font-family color
간격 margin padding
<소감>
-웹개발은 기본적인 내용을 배우는 것들이라 어려운 점이 없었다.
-HTML, CSS는 이미 알고 있는 부분이기도 했어서 빠르고 수월하게 넘길 수 있었다.
-JS는 앱 개발과 겹쳐서 앱 개발 파트에서 정리했다.
앱개발 1주차
<배운 내용>
1. 변수선언
let value_box = '값'
value_box = '변경한 값';
console.log(value_box) // 콘솔엔 '변경한 값'이 찍힙니다.
const value_fix = '값';
value_fix = '변경한 값';
console.log(value_fix) // const로 선언한 변수엔 새로운 값을 재 할당(다시 입력!) 할 수 없습니다.
2. 리스트
let a_list = [] // 리스트를 선언. 변수 이름은 역시 아무렇게나 가능!
// 또는,
let b_list = [1,2,'hey',3] // 로 선언 가능
b_list[1] // 2 를 출력
b_list[2] // 'hey'를 출력
// 리스트에 요소 넣기
b_list.push('헤이')
b_list // [1, 2, "hey", 3, "헤이"] 를 출력
// 리스트의 길이 구하기
b_list.length // 5를 출력
3. 딕셔너리
let a_dict = {} // 딕셔너리 선언. 변수 이름은 역시 아무렇게나 가능!
// 또는,
let b_dict = {'name':'Bob','age':21} // 로 선언 가능
b_dict['name'] // 'Bob'을 출력
b_dict['age'] // 21을 출력
b_dict['height'] = 180 // 딕셔너리에 키:밸류 넣기
b_dict // {name: "Bob", age: 21, height: 180}을 출력
4. 함수
// 두 숫자를 입력받으면 더한 결과를 돌려주는 함수
function sum(num1, num2) {
console.log('num1: ', num1, ', num2: ', num2);
//return 으로 값을 돌려주는, 뱉는 구조로 변수에 값을 전달 할 수도 있습니다.
return num1 + num2;
}
sum(3, 5); // 8
sum(4, -1); // 3
let result = sum(10,10)
console.log(result) // 20
5. 조건문
// AND 조건은 이렇게
function is_adult(age, sex){
if(age > 20 && sex == '여'){
alert('성인 여성')
} else if (age > 20 && sex == '남') {
alert('성인 남성')
} else {
alert('청소년이에요')
}
}
// 참고: OR 조건은 이렇게
function is_adult(age, sex){
if (age > 65 || age < 10) {
alert('탑승하실 수 없습니다')
} else if(age > 20 && sex == '여'){
alert('성인 여성')
} else if (age > 20 && sex == '남') {
alert('성인 남성')
} else {
alert('청소년이에요')
}
}
is_adult(25,'남')
6. 반복문
for (let i = 0; i < 100; i++) {
console.log(i);
}
for (1. 시작조건; 2. 반복조건; 3. 더하기) {
4. 매번실행
}
1 -> 2체크하고 -> (괜찮으면) -> 4 -> 3
-> 2체크하고 -> (괜찮으면) -> 4 -> 3
-> 2체크하고 -> (괜찮으면) -> 4 -> 3
-> 2체크하고 -> (괜찮으면) -> 4 -> 3
와 같은 순서로 실행됩니다.
i가 증가하다가 반복조건에 맞지 않으면, 반복을 종료하고 빠져나옵니다.
7. 최신방식
1)화살표함수
[기존 방식]
let a = function() {
console.log("function");
}
a();
[최신 방식]
let a = () => {
console.log("arrow function");
}
a();.
2)비구조할당
//객체
let blog = {
owner : "noah",
url : "noahlogs.tistory.com",
getPost() {
console.log("ES6 문법 정리");
}
};
//기존 할당 방식
let owner = blog.owner
let getPost = blog.getPost()
//비구조 할당 방식
let { owner, getPost } = blog;
//각각 blog 객체의 owner , getPost() 의 데이터가 할당
//blog의 키 값과 이름이 같아야 해요!
//(예 - owner가 아니라 owner2를 넣어보세요! 아무것도 안 들어온답니다.)
** 앞으로 리액트 네이티브 앱을 만들며 가장 많이 사용할 방식**
//함수에서 비구조 할당 방식으로 전달된 딕셔너리 값 꺼내기
let blogFunction = ({owner,url,getPost}) => {
console.log(owner)
console.log(url)
console.log(getPost())
}
blogFunction(blog)
3)줄바꿈
const id = "myId" ;
const url = `http://noahlog.tistory.com/login/${id}` ;
const message = "줄바꿈을 하려면 \n 이 기호를 써야 했죠!"
const message = ` 줄바꿈도 마음대로
사용이 가능합니다. `
4)객체 리터럴
[기존 방식]
var name = "스파르타";
var job = "developer";
var user = {
name: name,
job: job
}
console.log(user);
//{name: "스파르타", job: "developer"}
[최신 방식]
var name = "스파르타";
var job = "developer";
var user = {
name,
job
}
console.log(user);
//{name: "스파르타", job: "developer"}
5) map방식 반복문
[let 방식]
let numbers = [1,2,3,4,5,6,7];
for(let i=0; i<numbers.length; i++){
console.log(numbers[i]);
}
[map방식]
let numbers = [1,2,3,4,5,6,7];
numbers.map((value,i) => {
console.log(value,i)
})
// 아래와 같다는 점! 눈치 채셨나요?
numbers.map(function(value,i) {
console.log(value,i)
})
//1 0
//2 1
//3 2
//4 3
//5 4
//6 5
//7 6
<소감>
-한번 강의를 듣고 내용을 이해하기 어려웠다.
-반복해서 강의를 듣고도 과제를 도움 없이 작성하는 것이 불가능했다.
-과제의 답을 이해하는 것에 초점을 맞추지 않으면 주차별 진도를 따라갈 수 없겠다는 생각에 이해를 목표로 두고 공부했다.
-쉽지 않을 걸 알았지만 자신감이 사라지는 한주였다.
