최근까지 코딩하는 것에 대해 흥미도 잃고, 의지도 떨어지고 그러는 바람에 수업일지도 띄엄띄엄 작성하다가 마지막 공개글이 한 달 전인 것 같다. 그래서 해야지, 해야지 하고 미뤄두던 개인 프로젝트를 STS4로 해보려고 잡았다가 무엇때문인지 자꾸 에러가 나서 다 포기하고 싶어져서 그만둘 뻔 했었다. 하지만 포기할 수는 없으니까 다시 마음잡고 모르겠으면 보고 따라하고 검색하고 그러는 것부터 차근차근 도전해보기로 했다.
회원가입 창 (현재 css가 전혀 없어서 거슬린다..테이블로라도 정렬하려고 했는데 테이블로 안 한다고 하길래 힘줘서 참는중 ㅠㅠ)
우선 뇌에 힘줘서 css는 안 넣었다. 회원가입에서 꼭 넣어서 연습하고 싶었던 것은 비동기 통신으로 아이디 중복 검사를 하는 것이었다. 그리고, 비밀번호 확인도 조금! 디테일하게 넣고 싶었다. (비밀번호 입력 전에 비밀번호 확인을 입력하려고 하거나 비밀번호 입력 후 비밀번호 확인을 눌렀다가 안 적는다던가 하는 그런 상황들) 게임 관련 사이트로 할 예정이었기 때문에 인게임 닉네임도 선택 사항으로 넣고, 회원가입 창에서 취소하고 뒤로 가고싶은 경우를 위해 뒤로가기도 넣었다. (사실 뒤로가기는 인터넷에 있으니 따로 필요없을 것 같지만..!)
2-1) body
form 태그
다른 홈페이지들의 회원가입 페이지를 많이 뜯어봐야 할 것 같다. 대충 구조는 알겠는데, 이것보다 나은 구조를 짤 수 있을 것 같은데 잘 모르겠다 ㅠㅠ
그리고 class가 box_tip_title인 div는 p태그로 적은 부분을 제목(선 사이에 있는)으로 해서 안에 있는 요소들을 선으로 감싸는 구조로 하고 싶었는데 찾을 수 없었다..나중에 다시 찾아봐야겠다.
<script>
//전개 연산자(Spread)const fruits = ['Apple', 'Banana', 'Cherry', 'Orange']
console.log(fruits)
console.log(...fruits)
//console.log('Apple','Banana', 'Cherry')와 동일하게 호출//c(last매개변수)는 ['Cherry','Orange'] 인자를 받는다 // function toObject(a,b,...c){ // return{// //a: a, b: b, c: c// a, b, c //키,값변수가 같으면 1번만 명시해도 됨 // }// }const toObject = (a, b, ...c) => ({
a,
b,
c
})
console.log(toObject(...fruits)); //호출 인자가 많을 때 유리함//console.log(toObject(fruits[0],fruits[1],fruits[2],fruits[3])); 와 동일하게 호출
</script>
4. 불변성
<script>
//데이터 불변성(Immutability)//원시 데이터 : String, Number, Boolean, undefined, null//(값이 같으면 같은 참조값을 갖는다.)//(결국, 원시 데이터는 참조값보다는 상수처럼 이해하면 된다.)//참조형 데이터: Object, Array, Function//(참조형은 불변성이 없다.)//(결국, 참조형의 새로운 객체는 새로운 참조값을 갖는다. )//----------------------------------------------//1번지: 2번지: 3번지: 4번지://----------------------------------------------// let a=1// let b=4// console.log(a,b, a===b)// b=a //참조값이 복사된다.// console.log(a,b, a===b)// b=7 //7의 참조값이 복사된다. // console.log(a,b, a===b)// let c=1// console.log(a,b, b===c)let a = {
k: 1
}
let b = {
k: 1
}
console.log(a, b, a === b)
a.k = 7
b = a //객체값복사가 아니라 참조값이 복사된다.(주의)console.log(a, b, a === b)
a.k = 2//b객체의 k속성값도 2로 변경되니 주의하자.console.log(a, b, a === b)
let c = b
console.log(a, b, c, a === c)
a.k = 9console.log(a, b, c, a === c)
</script>
<script>
//호이스팅(hoisting)이란//자바스크립트 함수는 실행되기 전에 함수 안에 필요한 변수값들을 모두 모아서 유효 범위의 최상단에 선언한다.//자바스크립트 Parser가 함수 실행 전 해당 함수를 한 번 훑는다.//함수 안에 존재하는 변수/함수선언에 대한 정보를 기억하고 있다가 실행시킨다.//유효 범위: if,for단위 블록{}내에 변수를 선언해도 유효범위는 function단위 블록 {}이다., //호이스팅의 대상//var 변수 선언과 함수선언문에서만 호이스팅이 일어난다. 함수 표현식은 호이스팅 안됨.//var 변수/함수의 선언만 위로 끌어 올려지며, 할당은 끌어 올려지지 않는다.//let/const 변수 선언과 함수표현식에서는 호이스팅이 발생하지 않는다.//java처럼 if, for단위 블록{}내에 변수를 선언하면 해당{}이 유효범위다. //지역변수>전역변수 const pi = 3.14; //전역 상수변수(global v)
fct1();
fct2(3,5);
functionfct1() {
//var a,b; 함수의 상단에 호이스팅//console.log('a: ',a) //var:undefined, let,const:error//console.log('b: ',b) //var:undefined let a = 100,b = 200; //지역변수(local variable)if (1) {
let a = 30,b = 40; //java error, 위의 const와 let을 var로 변경해 보자.console.log("1=" + a);
console.log("1=" + b);
}
console.log(a); //var는 마지막에 선언된 변수가 위의 변수를 덮어버린다.console.log(b); //let,const는 100, 200console.log('전역변수:' + pi)
}
functionfct2(a, b) { //함수정의부console.log('fct2 call:', a, b)
console.log('gv:' + pi);
}
//메소드 오버로딩은 없지만 유연하다.
fct2()
fct2(10)
fct2(10,20,30)
//함수선언부는 호이스팅 되지 않음// const fct=function(){ //익명 함수// console.log("함수 출력");// };// fct();// console.log(typeof fct);functiontest(show) {
show();
}
//ES6 화살표함수=> , 자바 람다(lambda) ->
test(() => {
console.log('function call');
console.log('second line');
});
// test(function() {// console.log('function call');// console.log('second line');// });
</script>
12. 타이머 함수
<script>
//타이머 함수: JS 전역함수(어디서든 호출가능한 함수)//setTimeout(함수, 시간): 일정 시간 후 함수실행//setInterval(함수, 시간): 시간 간격바다 함수 실행//clearTimeout(): 설정된 Timeout 함수를 종료//clearInterval(): 설정된 Interval 함수를 종료// setTimeout(function(){// console.log('hello!')// }, 3000)// const timer=setTimeout(()=>{// console.log('hello!')// }, 3000)console.log('비동기 처리')
const timer = setInterval(() => {
console.log('hello!')
}, 3000)
//h1태그를 클릭하면 const h1El = document.querySelector('h1')
h1El.addEventListener('click', () => {
//clearTimeout(timer) //setTimeout함수가 작동하지 않음clearInterval(timer) //setInterval함수가 작동하지 않음
})
</script>
13. 콜백
<script>
//콜백(Callback)//함수의 인수로 사용되는 함수//setTimeout(함수, 시간)// function timeout(){// setTimeout(()=>{// console.log('hello!')// },3000)// }// timeout()// console.log('Done!') //Done먼저 출력후 3초뒤 hello출력functiontimeout(cb){
//아래 익명함수는 setTimeout의 콜백함수임setTimeout(()=>{
console.log('hello!')
cb()
},3000)
}
//콜백 함수 사용 목적//1.익명함수가 timeout의 인자로 사용됨//2.timeout실행시 특정 위치 실행 보장하기 위해
timeout(()=>{
console.log('Done!')
})
</script>
14. 생성자 함수
<script>
//리터럴({},[],"") 방식의 객체 생성// const kim={// //필드// //property// firstName: 'kim',// lastName: 'dong',// //method// getFullName: function(){ //=>함수 금지(this가 상위객체를 의미함)// //this: 현재 소속된 객체데이터를 의미// return `${this.firstName} ${this.lastName}`// //return `${kim.firstName} ${kim.lastName}`// }// }// console.log(kim.getFullName())// const lee={// firstName: 'lee',// lastName: 'na',// getFullName: function(){// return `${this.firstName} ${this.lastName}` // }// }// console.log(lee.getFullName())//생성자 함수를 이용한 객체 생성//java의 클래스와 유사(?)//new와 사용하는 생성자함수는 대문자로 지정functionUser(first, last) {
this.firstName = first //this생략 안됨this.lastName = last
//메모리 비효율적(객체마다 함수객체를 생성함)// this.getFullName=function(){ // return `${this.firstName} ${this.lastName}`// }
}
//메모리 효율적//함수객체를 user함수의 prototype에 1번만 생성한다.
User.prototype.getFullName = function () {
return`${this.firstName}${this.lastName}`
}
//생성자 함수를 통한 kim인스턴스 생성 const kim = new User('kim', 'dong')
const lee = new User('lee', 'na')
console.log(kim)
console.log(lee)
console.log(kim.getFullName())
console.log(lee.getFullName());
//javaScript는 prototype(원형)기반 언어임const arr = [1, 2, 3];
console.log(arr)
//배열객체의 prototype의 includes메소드 확인console.log(arr.includes(4)) //falseconsole.log(arr.includes(2)) //true
</script>
15. this
<script>
//this//일반 함수는 (호출 위치!)에서 따라 this정의!//화살표 함수는 자신이 (선언된 함수 범위!)에서 this정의!const kim={
name: 'kim',
normal: function(){
console.log(this.name)
console.log(this) //kim객체
},
arrow:()=>{ //특정 함수범위에 선언되고 있지 않음console.log(this.name)
console.log(this) //window객체
}
}
kim.normal() //kim
kim.arrow() //'' or undefinedconst lee={
name: 'lee',
normal:kim.normal,
arrow: kim.arrow
}
//호출위치가 여기! 그래서 this는 lee객체 참조함
lee.normal();
//선언된 위치(범위)는 그대로임! this는 window객체 참조함
lee.arrow();
// 생성자 함수에서 getFullName을 화살표함수로// 만들어서 this값을 확인해보자const timer={
name: 'kim',
timeout: function(){
//setTimeout의 내부에서 콜백을 호출중이라서 name출력안됨//setTimeout(function(){// console.log('t:', this.name) //window 객체//}, 2000)//timer객체의 timeout메소드에 선언되었으므로 name출력됨 //setTimeout함수에서는 화살표함수를 쓰는것이 좋다.setTimeout(()=>{
console.log('t:', this.name) //timer객체
}, 2000)
}
}
timer.timeout()
</script>
16. ES6 Classes
<script>
const hong = {
name: 'hong',
//normal: function(){// console.log(this.name)// },//위 메소드의 간소화 표현normal() {
console.log(this.name)
},
//화살표함수 간소화 안됨arrow: () => {
console.log(this.name)
}
}
hong.normal()
hong.arrow()
////ES6 Classes//생성자 함수활용을 class로 간소화 할 수 있음//class는 react에서 많이 활용함classUser{
constructor(first, last) {
this.firstName = first //this생략 안됨this.lastName = last
}
//prototype에 1번만 생성한다.getFullName() {
return`${this.firstName}${this.lastName}`
}
} //end class//생성자 함수를 통한 kim인스턴스 생성 const kim = new User('kim', 'dong')
const lee = new User('lee', 'na')
console.log(kim)
console.log(lee)
console.log(kim.getFullName())
console.log(lee.getFullName());
</script>
