항해 사전준비 1일차 - JS, Python, Ajax, 종합반1주차 정리
오늘은 드디어 사전준비 1일차다.
Slack에 가입했고, 7기에 넣어달라고 댓글도 남겼다.
스파르타에서 시험이 있다고한다.
종합반 수업을 2번정도 마무리하고, 팀원을모아 토이프로젝트 하는걸 추천했다.
하지만 스파르타에서 추천하는 종합반2회 마무리보다 나는 더 많은것을 준비해 보고싶다.
팀원을 구해서 토이프로젝트를 진행할지, 혼자할지는 아직 고민중이다.
고민은 여기까지하고, 일단 공부계획과 공부를 시작해야겠다.
오늘 꼭 끝낼 공부는
스파르타에서 제공하는 인강중에서는
1. JavaScript 문법 뽀개기 - 약 2시간 반정도의 인강
2. 파이썬 문법 뽀개기 - 약 2시간정도의 인강
왜인지 모르게 둘다 '1주차' 라고 밖에 안되있다.
무료로는 1주차만 공개가 되는건지는 모르겠지만, 이정도가 입장조건이라고 생각된다.
3. 웹개발 종합반 1주차 - 약 2시간정도의 인강
3번은 예전에 수강했었기 때문에, 리캡의 느낌으로 하려고한다.
생활코딩에서는
4. JS 객체지향 - https://opentutorials.org/module/4047/24602
까지만 하려고 한다.
만약 시간이 남는다면
생활코딩의
5. Ajax - https://opentutorials.org/course/3281
까지가 한계이지 않을까 싶다.
Ajax는 길어야 1시간정도의 분량이고,
객체지향도 길어야 1시간정도로 예상된다.
스파르타에서는 배열까지만 인강을 제공하고,
생활코딩에서는 배열후의 객체지향 즉 클래스등을 제공한다.
이정도를 공부하고 나면 JS와 파이썬의 문법은 얼추 끝난다고 생각한다.
나머지는 실전을 통해 실력을 쌓거나 모르는 문제를 facing 했을때, 구글링을 통해서 배우게 될거라고 믿는다.
아래는 위의 1~5를 공부 후 정리한 내용을 쓰려한다.
---------------------------------------------------------------------- 공부시작 -------------------------------------------------------------
1. JavaScript 문법 뽀개기 - 인강은 다 보더라도 모든걸 정리하진 않고,
익숙하지 않거나 처음 접하는 부분만 정리하려고 한다.
node.js를 다운 받아야한다.
나는 이미 받았기 때문에
버젼 확인방법: 명령프롬프트 에서
노드- node -v
npm - npm -v
을 통해서 버젼 확인이 가능하다
Node.js 는 자바스크립트를 실행할수 있는 일종의 번역기
vscode에서 js파일 실행방법은 터미널 열고,
node 파일명
수정한 부분을 저장 안하고 다시 터미널로 실행하면, 저장 전의 것이 실행된다.
객체와 클래스 정리
//클래스 -> 객체를 만들수있는 템플릿 같은거
class noteBook {
constructor(name, price, company){ // 생성자
this.name = name;
this.price = price;
this.company = company;
}
print(){ // 메소드
console.log(`name: ${this.name}, price: $${this.price}, company: ${this.company}`)
}
}
const example = new noteBook('idk', 500, 'asus');
example.print(); // name: idk, price: $500, company: asus
//객체 리터럴 -> 클래스 같은 템플릿없이 빠르게 객체를 만들수 있는 방법
const noteBook2 = {
name: 'idk',
price: 500,
company: 'asus',
print: () => {console.log(`name: ${this.name}, price: $${this.price}, company: ${this.company}`)}, // 화살표 함수를 사용할경우
print2: function() {console.log(`name: ${this.name}, price: $${this.price}, company: ${this.company}`)}, // 화살표 함수를 사용 안할경우, name: idk, price: $500, company: asus
}
noteBook2.print2();위의 코드에서 화살표 함수를 사용해 보았다.
하지만, 결국 코드라는건 가독성이 좋고, 팀원들이 이해하기 쉽게 짜야한다고 생각되기 때문에,
만약 나와 같이 작업하는 팀원들이 화살표함수를 어려워하면 과감하게 버릴 생각도 있다.
다만, 지금은 혹시 다른사람들이 화살표함수를 사용할수도 있으니,
잊어버리지않게 기억할수있게 함수를 만들때 두가지로 만들어 보려한다.
2. 파이썬 문법 뽀개기
나는 파이썬도 이미 설치가 되어있기때문에 버젼확인만 해보았다.
파이썬 버젼확인 방법
명령프롬프트에서 python --version
vscode에서 파이썬 파일 실행방법은 터미널 열고,
python 파일명
List and Dictionary 정리
# List
a = [1, 3, [2, 0], 5]
print(len(a)) # 리스트의 총 길이 4
print(a[0]) # 1
print(a[1:3]) # 리스트 1번 index부터 3번 index까지 [3, [2, 0]]
print(a[-1]) # 리스트 마지막 index 5
a.append(5) # 리스트 add
b = [1, 7, 2, 5]
b.sort() # 리스트 정렬
b.sort(reverse=True) # 리스트 역정렬
print(1 in b) # 포함인지 검사 True
# dictionary - key, value **인덱스 사용불가.
person = {"name": "Bob", "age": 21}
print(person["name"])
print("name" in person) # 포함인지 검사 True
# 빈 딕셔너리 만들기
a = {}
a = dict()
# 리스트 안에 딕셔너리를 넣을 수 있다.
people = [{'name': 'bob', 'age': 20}, {'name': 'carry', 'age': 38}]
# people[0]['name']의 값은? 'bob'
# people[1]['name']의 값은? 'carry'
# 연습문제
people = [
{'name': 'bob', 'age': 20, 'score': {'math': 90, 'science': 70}},
{'name': 'carry', 'age': 38, 'score': {'math': 40, 'science': 72}},
{'name': 'smith', 'age': 28, 'score': {'math': 80, 'science': 90}},
{'name': 'john', 'age': 34, 'score': {'math': 75, 'science': 100}}
]
# smith의 science 점수를 출력해보세요
print(people[2]['score']['science'])
If elif else 조건문 정리
age = 27
if age < 20:
print("청소년입니다.")
elif age < 65:
print("성인입니다.")
else:
print("무료로 이용하세요!")
for 문 정리
# 일반 for문
for fruit in fruits:
print(fruit)
# enumerate & break
people = [
{'name': 'bob', 'age': 20},
{'name': 'carry', 'age': 38},
{'name': 'john', 'age': 7},
{'name': 'smith', 'age': 17},
{'name': 'ben', 'age': 27},
{'name': 'bobby', 'age': 57},
{'name': 'red', 'age': 32},
{'name': 'queen', 'age': 25}
]
for i, person in enumerate(people):
name = person['name']
age = person['age']
print(i, name, age)
if i > 3:
break반복문 연습문제
# 연습문제
num_list = [1, 2, 3, 6, 3, 2, 4, 5, 6, 2, 4]
# Q. 리스트에서 짝수만 출력하는 함수 만들기 - 나와 스파르타의 답이 일치
for i in num_list:
if i % 2 == 0:
print(i)
# Q. 리스트에서 짝수의 개수를 출력하기
# 내답 - 빈 리스트를 만들어서 거기에 짝수들을 넣고 리스트의 길이를 구함
empty_lsit = []
for i in num_list:
if i % 2 == 0:
empty_lsit.append(i)
print(len(empty_lsit))
# 스파르타 답 - 짝수를 셀때마다 count해서 count에 들어간 값을 구함
count = 0
for num in num_list:
if num % 2 == 0:
count += 1
print(count)
# Q. 리스트 안에 있는 모든 숫자 더하기 - 나와 스파르타의 답이 일치
addNumbers = 0
for i in num_list:
addNumbers = addNumbers + i # addNumbers += i
print(addNumbers)
# Q. 리스트 안에 있는 자연수 중 가장 큰 숫자 구하기
# 내답 - 리스트 sorting 해서 마지막 index 가져옴
num_list.sort()
print(num_list[-1])
# 스파르타답 - 모든 숫자 체크해서 그게 max_value보다 크면 서로 바꿔줌
max_value = 0
for num in num_list:
if num > max_value:
max_value = num
print(max_value)
함수 정리
def hello():
print("안녕!")
print("또 만나요!")
hello()
def call_names(*args): # 인자를 무제한으로 넣을수 있음
for name in args:
print(f'{name}야 밥먹어라~')
call_names('철수','영수','희재')
튜플&집합 정리
# tuple - 불변형, 즉 내부의 값을 변경 불가함. 그 외엔 그냥 dictionary와 같다.
a_tuple = [('bob', '24'), ('john', '29'), ('smith', '30')]
# set() - 중복제거
a = [1, 1, 1, 1, 2, 3, 3, 4, 5, 5, 6, 7, 7, 8, 9, 9, 9]
a_set = set(a)
print(a_set)
# print(a & b) # 교집합
# print(a | b) # 합집합
# print(a - b) # 차집합fstring & try, except 정리
people = [
{'name': 'bob', 'age': 20},
{'name': 'carry', 'age': 38},
{'name': 'john', 'age': 7},
{'name': 'smith', 'age': 17},
{'name': 'ben', 'age': 27},
{'name': 'bobby'}, # bobby가 age가 없다
{'name': 'red', 'age': 32},
{'name': 'queen', 'age': 25}
]
for person in people:
name = person['name']
try:
if person['age'] > 20:
print(f'{name} 은/는 20살이 넘는다')
except:
print(f'{name} - 는 에러입니다')다른 python 파일 불러오기
from 파이썬파일이름 import * #여기서 *은 전부 다 불러오는걸 의미
map, filter, lambda 정리
people = [
{'name': 'bob', 'age': 20},
{'name': 'carry', 'age': 38},
{'name': 'john', 'age': 7},
{'name': 'smith', 'age': 17},
{'name': 'ben', 'age': 27},
{'name': 'bobby', 'age': 57},
{'name': 'red', 'age': 32},
{'name': 'queen', 'age': 25}
]
def check_adult(person):
if person['age'] > 20:
return '성인'
else:
return '청소년'
# map - people을 하나하나 돌면서 check_adult 함수에 넣은다음 return 값을 모아서 list를 만든다
result = map(check_adult, people)
print(list(result))
# 위의 함수와, result를 한줄로 lambda식으로 쓰기
result = map(lambda x: ('성인' if x['age'] > 20 else '청소년'), people)
print(list(result))
# filter - 리스트의 모든 원소 중 특별한 것만 뽑기
result = filter(lambda x: x['age'] > 20, people)
print(list(result))Class 정리
class Monster():
hp = 100
alive = True
def damage(self, attack):
self.hp = self.hp - attack
if self.hp < 0:
self.alive = False
def status_check(self):
if self.alive:
print('살아있다')
else:
print('죽었다')
m = Monster()
m.damage(120)
m2 = Monster()
m2.damage(90)
m.status_check()
m2.status_check()
3. 종합반 1주차
기초 HTML,CSS,JS는 빠르게 리캡하고
1주차 숙제를 진행해 보았다.
구현에 어려움은 없었지만, 답안 코드와 비교해보니
내가 사용한 Bootstrap과 답안이 사용한 Bootstrap은 조금 달랐다.
하지만, 크게 상관은 없어보여서 card만 내꺼, 답안코드를 한개씩 넣고
나머지는 내가 짠 코드대로 내비려 뒀다.
새로 검색하며 배운점
1. Text에 테두리 추가하는법
- 텍스트에 그림자 넣듯이 하면 된다
text-shadow: -1px 0 #000, 2px 0 #000, 2px 0 #000, -1px 0 #000;
4. 생활코딩 JS 객체지향
클로저 정리
기억 안나면 아래 링크
// 클로저(closure)는 내부함수가 외부함수의 맥락(context)에 접근할 수 있는 것
var arr = []
for(var i = 0; i < 5; i++){
arr[i] = function(id) {
return function(){
return id;
}
}(i);
}
for(var index in arr) {
console.log(arr[index]());
}https://www.youtube.com/watch?time_continue=311&v=9A0pMrS6Bh0&feature=emb_title
Class 상속, new, prototype 정리
class Person{
constructor(name, first, second){
this.name = name;
this.first = first;
this.second = second;
}
sum(){
return this.first+this.second;
}
}
// 상속은 extends 키워드
class PersonPlus extends Person{
constructor(name, first, second, third){
super(name, first, second); // super로 부모의 constructor 접근 가능
this.third = third;
}
sum(){
return super.sum()+this.third; // super로 부모의 method 접근 가능
}
avg(){
return (this.first+this.second+this.third)/3;
}
}
// 컨스트럭터로 오브젝트를 만들면 그 안에 있는 메소드도 계속 새로 만들어진다.
// 이 객체가 많아질 수록 컴퓨터 메모리를 낭비하고 성능이 저하된다.
// 또한, 컨스트럭터로 만들어진 객체 중 일부만 내용을 바꾸고 싶을때 하나하나 객체마다 바꾸어줘야 한다. 재사용하기에 불편하다
Person.prototype.sum = function(){ // prototype을 사용할경우 객체가 이 prototype을 참조 할수 있다.*****
return 'prototype : '+(this.first+this.second);
}
var kim = new PersonPlus('kim', 10, 20, 30); // new 키워드로 객체 생성
5. 생활코딩 Ajax
fetch() 에 대해서 설명을 하고 있었고문득 ajax() fetch() 의 차이가 궁금해서 구글링을 해보기로 했다.그러던 도중 axios() 도 발견하였다.
// ajax()
// 장점- success, error, complete로 상태변화가 쉽다, Jquery로 구현이 쉽다, DataType 변환이 쉽다
// 단점- promise 기반이 아니라서 catch(), then()이 없다
// 기본 틀
$.ajax({
type: 'POST',
url: url,
data: data,
dataType: dataType,
success: function (res) {
console.log(res);
},
error: function (res) {
console.log(res);
}
});
// fetch()
// 장점- 별도의 import가 없다, promise 기반이라 사용이 쉽다
// 단점- response timeout이 없어서 네트워크 오류일경우 무한대기, Json으로 변환해줘야함
// 기본 틀
fetch(url, options)
.then((response) => console.log("response:", response))
.catch((error) => console.log("error:", error))
// 이렇게 사용
fetch(url, {
method: 'post',
headers: {
"Content-type": "application/x-www-form-urlencoded; charset=UTF-8"
},
body: JSON.stringify(data)
})
.then(response => {
console.log(response);
})
.catch(error => console.log(error));
// axios()
// 장점- promise 기반이라 사용이 쉽다, response timeout이 있다, 크로스브라우징이 우수함
// 단점- 모듈 설치
// 기본 틀
axios({
method: 'post',
url: '/user/12345',
data: {
firstName: 'Fred',
lastName: 'Flintstone'
}
}).then(function (response) {
console.log(response);
}).catch(function (error) {
console.log(error);
});
오늘의 느낌스파르타 JS에서는 어려웠던건 없고, 그냥 리캡하였다.
스파르타 파이썬은, 문법을 잘 몰라서 보는데 다른 언어와 흡사해서 어렵진 않았다.
다만 스파르타에서 제공하는 js와 파이썬은 1주차뿐이라서 배우다 만 느낌이다.
종합반 1주차에서는 빠르게 리캡하기 좋았다.
생활코딩의 객체지향에서는 스파르타에서 배우지 못한 js를 조금 더 배운 느낌이고,
ajax는 궁금한게 많아서 다른 부분을 더 찾아보았다.