부트캠프 - precamp 3일차
발받침이 없으니까 불편해~
웹앱 서비스 기본구조에 대해 배웠다.
프론트엔드는 데이터 생성 및 사용을하고 백엔드는 데이터 검증과 보완, 데이터 저장과 관리를 한다.
프론트엔드는 DL, Data Logic/Biding / 백엔드는 BL, Business Logic
자바스크립트 데이터 타입과 연산자
Object 배열도 객체 타입 중 하나. 객체에서 타생된 것임
문자열 + 문자열 : 문자열 합쳐짐
숫자 + 문자열 : 계산 안되고 문자열로 합쳐짐
어제 피어싱 끼우면서 봤던 자바 스크립트 안 쓰는 이유가 생각났다. 너무 많은 것을 허용해주기는 한다 싶었다. (근데 내가 쓸 때는 편함ㅎㅎ)
싸이월드 게임 부분 만들기 css를 끝내놓고 기능도 구현해보고 싶어서 js를 좀 만져봤다.
일단 로또에서 숫자 바꾸는 기능. c++ 배울 땐 난수 뽑아서 그거 나머지 연산자로 다듬어서 스왑 이용해서... 등 많은 과정을 거쳤던 것 같은데, 자바 스크립트는 그런 거 필요없었다! 일단 숫자 하나하나에 기능을 적용시킨다는 느낌이기도 하고...
function change() {
for(let i = 0; i < 6; ++i) {
let number = []
number[i] = Math.floor(Math.random()*100)
if(number[i]>=46) {
number[i] -= 45
}
else if(number[i] === 0) {
number[i] += 1
}
document.getElementById(i).innerText = number[i]
}
}
// number 배열 만듦
// random생성하고 두자리수로 만든 뒤 소수점 뒤 다 버림
// 두 자리 수가 46와 같거나 클 경우 -45를 함 이거 왜 안되지지금 헷갈리는건 innerText랑 value ... 언제언제 써야할지 잘 감이 안온다.
document.getElementById(이 부분에 "i"라고 썼다가 그건 문자열이니까... 안되고 i 라고 하니까 됨!)
HTML 파일에도 0~5로 지정해놓았다.
<div class="lotto__number">
<div id="0" class="number">2</div>
<div id="1"class="number">17</div>
<div id="2"class="number">22</div>
<div id="3"class="number">27</div>
<div id="4"class="number">33</div>
<div id="5"class="number">37</div>
</div>더 좋은 방법이 있는진 모르겠지만... 아무튼 이렇게 했다.
지금 문제는 숫자가 1-45만 나오게 하고 싶은데, 왜 46넘으면 -45를 안해주는거지?
일단 끝말잇기부터 다시 해보았다.
// 제시어 : 와 바나나나를 분리한다.
// 바나나나의 마지막 글자를 가져오기 위해 그 문자열의 길이를 구한다.
// 길이-1 의 인덱스로 charAt() 사용한다.
function chain() {
let first__word = document.getElementById("first__word").innerText
let first__index = first__word.length - 1
let first__end = first__word[first__index]
let re__word = document.getElementById("re__word").innerText
let re__first = re__word[0]
if(first__end === re__first) {
document.getElementById("word__result").innerText = "대단해요!😊🤗"
}
else {
document.getElementById("word__result").innerText = "다시 해봐요😙"
}
}엄청 헤맸던 것.... length() 라고 써서 거기서 계속 막혀서 안 떴었다.
이런 걸 안 알려주니까^^ㅠㅠ오타 하나하나에 진짜 신중하게 된다. c++ 할 때는 변수 이름을 길게 지어도 명확히 어떤 것을 하는 앤지를 알리도록 했는데, 자바스크립트에서는 변수명은 짧게...짓는 것 같다. re__word도 received__word에서 줄였다. 남들도 알아볼 수 있고 짧게 지을 수 있는 머리를 키워야할 것 같다..!!^ㅁ^
문제는 내가 나비를 넣어도 다시해봐요!가 뜬다는 것. 그니까 first__end 랑 re__first가 일치하지 않는다는 건데ㅠㅠ
뭘까, 뭘 잘못했을까. 바나나나의 길이는 4, 4-1 = 3, 바나나나의 [3]은 나.
나비의 0번은 나. 같은 거 아닌가? 혼란이 온다... 바나나나의 나 나비의 나 왜 같다고 하지않지? 내일 vscode 켜서 변수타입도 확인해봐야겠다.
수업은 잘못따라가더라도 멘토님들이 계셔서 수시로 질문할 수 있어서 좋다! 난 자습시간에 질문을 드렸다. 오늘도 자습시간에 css 숙제는 다 끝냈다! 훠우... 아 근데 깃 안 깔았네... 내일 깔련다...