코딩에 대해서는 '코'도 아니고, 'ㅋ'정도 알고 있는 것 같다.
그 ㅋ도 흐리다...ㅎㅋ
대학 때 사이버 교양으로 들은 java... (사실 오래되어서 자바가 맞는지 확신도 없다) 가 전부이기 때문이다.
아무튼, 이번에 '코'까지는 배워봐야겠다 싶어서 코딩 강의를 신청했다.
내일배움카드로 신청할 수 있는 스파르타 코딩클럽의 웹개발반이다.
OT에서 개발일지 쓰는 걸 추천해주셔서 배운 걸 기록도 해보려고 한다.
'브라우저(ex크롬)'의 역할: 클라이언트가 '서버'에 요청(ex 주소창에 www.naver.com 입력) → '서버'가 준 것을 받아와서 보여줌 (ex 크롬에 네이버 홈페이지가 뜸) ※그래서 내 페이지만 수정, 인터넷 끊겨도 유지 가능, 이 준 것이 뜯어보면 데이터, 특수한 경우 데이터만 받아서 갈아 끼우기도 함 (ex극 예매시 업데이트)
서버가 전달하는 건 코드 (HTML, CSS, JS 등)
HTML: 뼈대 (ex 사전은 뉴스 옆에 있어)
CSS: 꾸미기 (ex 사전은 굵은 글씨야)
JS: 움직이는 것 (ex 클릭하면 이동하는 것 등)
메모장에 해도 되지만, 편하게 해주는 툴이 있음. 예를 들면 파이참이 있고, 파이썬을 쓰기에 가장 편한 툴임.
- 암기보다는 하면서 익히기
- 외우는 게 아니라, 가져다가 써서 만드는 것 (다 외우고 있는 개발자는 없음)
- 이번에 배운것 정도만 익숙해지고, 다른 건 외울 필요 없음.
- 거의 항상 같이 다니는 거
background-image: url("https://www.ancient-origins.net/sites/default/files/field/image/Agesilaus-II-cover.jpg(이미지는 강의 때 사용했던 것)");
background-size: cover;
background-position: center;
- 여백 개념: 맵 밖, 맵 안 (조금 헷갈릴 수 있으니 주의)
margin 위 오른쪽 아래 왼쪽 (시계방향)
padding, padding-top 등으로도 쓸 수 있음
css 중첩적용: "A명찰 B명찰"
폰트적용: 구글링
부트스트랩: 남이 만든 예쁜 CSS쓰기
기타 가능한 기능
기타 참고
- 변수 이름을 지을때는 남이봐도 알아보기 쉽게. 아니면 나중에 내가 봐도 이 변수가 뭐지?? 할 수 있음.
a라는 박스에 2를 담았다:
let a = 2 ▷ 이후 a+2를 입력하면 5가 나옴
문자열도 담을 수 있음 ('' 나 "" 사용):
let first_name = 'bumkyu'
- 구글링하기: ex '자바 스크립트 리스트 추가'로 구글링하면 나옴.
- 검사도구에서 키보드 '↑' 누르면 이전에 타이핑한 함수들 나옴.
- '리스트'와 '딕셔너리'는 서로의 요소로 쓰일 수 있음.
딕셔너리(dict)
너 이름이 뭐니? ▷ '이름'에 대응하는 값(value)을 말해달라는 것
let a_dict : {'name':'bob','age':27} ※순서는 안 중요함
key - value , key - value
▷ a_dict[name] = bob
%: 나머지
let a = 100
a%8 = 4 (a를 8로 나눈 나머지가 나옴)
let my email= 'abcde@gmail.com'
my email.split(@)
=값 ["abcde", "gmail.com"]
my email.split(@)[1]
= 값 "gmail.com"
my email.split(@)[1]('.')
= 값 ["gmail","com"]
my email.split(@)[1]('.')[0]
= 값 'gmail'
: (수학) 값을 넣으면 값이 나오는 것, (프로그래밍) 부르면 정해진 동작을 하는 것
- Shift+엔터: 줄 바뀜
funtion sum(num1, num2){ (Shift+엔터)
(tab) return num1+num2
}
위의 sum은 임의로 이름을 지정한 것
num1, num2라는 변수를 받아서 num1+num2로 return해라
return은 끝내고 나를 변신시켜줘! 하는 것
let result = sum(2+3)
▷ 이후 result 입력하면: 5가 나옴
funtion mysum(){
alert ('안녕!')
alert ('또 안녕!')
}
▷ 이후 mysum 입력했을 때: 알람창으로 '안녕!' '또 안녕!' 두 개 뜸.
let age ('24')
if (age > 20) {
console.log('성인입니다')
} else {
console.log('청소년입니다')
}
▷ 이러면 '성인입니다'가 뜸
if (age > 20) {
console.log('성인입니다')
} else if(age>10) {
console.log('청소년입니다')
} else {
console.log('아동입니다')
}
- console.log : console 창에 띄운다는 것
- && = and라는 뜻
- || = or라는 뜻 (엔터 위 키 쉬프트 누르고 나오는 거)
- and or 보다 if문을 가장 많이 쓰므로 if만 알아둬도 괜찮음.
- if else문을 가장 많이 씀.
모두 나열하기 너무 긴 것들을 짧게 요약 (요게 헷갈림)
for(let i = 0; i<10; i++){
console.log(i)
}
▷ 이 경우 1,2,3,4,5,6,7,8,9 가 인출됨
list 와 찰떡궁합
let people = ['철수','영희','민수','형준','기남','동희']
people. length 입력하면: 6이 나옴
for(let i = 0; i<people.length; i++){
console.log(people[i])
}
▷이 경우 철수, 영희, 민수, 형준, 기남, 동희 인출. (0부터 카운트)
let scores = [
{'name':'철수', 'score':90},
{'name':'영희', 'score':85},
{'name':'민수', 'score':70},
{'name':'형준', 'score':50},
{'name':'기남', 'score':68},
{'name':'동희', 'score':30},
]
socres 입력 ▷
[
{'name':'철수', 'score':90},
{'name':'영희', 'score':85},
{'name':'민수', 'score':70},
{'name':'형준', 'score':50},
{'name':'기남', 'score':68},
{'name':'동희', 'score':30},
]
인출
scores[0] 입력▷ '{'name':'철수', 'score':90}' 인출
scores[1]['score'] 입력▷ {'name':'영희', 'score':85} 에 해당하는 '85'인출
for(let i = 0; < scores.length; i++){
console.log(score[i])
}
▷scores와 같은 값 인출
for(let i = 0; < scores.length; i++){
console.log(score[i]['name'])
}
▷socres 내에서 이름만 인출 (철수, 영희, 민수, 형준, 기남, 동희)
for(let i = 0; < scores.length; i++){
let name = scores[i]['name']
let score = scores[i]['score']
console.log(name,score)
}
▷ 철수 90, 영희 85 ... 이런 식으로 인출
for(let i = 0; < scores.length; i++){
let name = scores[i]['name']
let score = scores[i]['score']
if (score<70) {
console.log(name,score)
}
▷ (조건에 맞는) 형준 50 기남 68 동희 30 세 명 인출
생각보다 어렵다.
그나마 다행인 건 얼마 전 컴활을 준비해서 좀 더 익숙한 느낌으로 배울 수 있었다.
그리고, 강의 중간중간 예제 할 때마다 10분 주시는데 10분 안에 절대 못함ㅠ
나만 그런가 했는데, 나만은 아니었다.
스터디(스온스)에서 같은 생각하는 사람들을 알게됨ㅠㅠㅋㅋㅋ
그래도 저게 대체 뭐야? 싶었던 프로그래밍 화면을 다루고,
내가 입력하는대로 결과값이 나오고, 화면이 만들어지는 게 재미있다.
예전부터 배우고 싶었던 것인 만큼 새롭게 알게되는 것들이 뿌듯하기도 하다.
똑같이 따라한 것 같은데 작동이 안 되면 답답하지만
코드 비교하고 다시해 보고, 그래도 안 되면 예시나 답 그대로 입력하거나 복붙.
복붙한 걸 뜯어보면 뭘 잘못 입력했는지 보이기도 하는 것 같다.
그리고 이번에 velog를 처음 써보는데, 글을 쓰는 방식이 (특히 꾸미거나 배치하는 게) 좀 잘 쓸 수 있는 방법을 찾아봐야겠다.
1주차 개발일지 겸 후기 끝!
아래 사진은 참여한 스온스~ 더 자주 가고 싶었는데 어쩌다보니 두 번 밖에 못 갔다ㅠ 다음 주는 더 열심히 참석해야지.
유령옷 입고 춤추는 거 귀여움ㅠㅠㅋㅋㅋ