군붕이의 메모장

● this 키워드? this 키워드는 자신이 속한 객체또는 생성자 함수를 통해 생성할 인스턴스 를 가르킨다. 예를 들어 메소드에서 this 키워드를 사용하면 어떤 객체에서 호출이 되었는지 확인이 가능하고 생성자 함수를 통해 생성될 인스턴스 또한 참조가 가능하다. ● 객체에서 재귀호출로 참조하기 const obj = { data: 10, getData() { return obj.data; } }; console.log(obj.getData()); 하지만 위 코드는 일반적이지 않고 바람직하지 않다고 한다. 객체에서는 재귀호출로 참조가 가능하지만 생성자 함수에서는 위 방법이 불가능하다. 그 이유는 생성자 함수의 경우 new 키워드로 인스턴스가 생성되어야 참조가 가능하기 때문이다. ● 메소드에서의 this 바..

● 자바스크립트 변수 우선 자바스크립트에는 변수를 선언하는 3가지의 방식이 존재한다. 1. var ES5 까지의 버전에서 변수를 선언할때 사용하는 키워드로 주요 특징으로는 아래와 같다. 변수의 중복 선언을 허용 var a = 1; var a = 2; console.log(a); // 2 이러한 특성은 중복된 이름의 변수를 또 선언하게 될 경우 의도치않은 값이 할당되는 부작용이 발생한다. 함수 레벨의 스코프를 가진다 var a = 1; if (a === 1) var a = 10; console.log(a); // 10 var b = 1; for (var b = 1; b < 10; b++) {} console.log(b); // 10 if문, for문 등 과 같이 함수 외부에서 선언한 변수는 코드블록 내에서..

중고나라 클론 프로젝트를 하면서 처음 해보는 이미지 업로드 기능에 부딪혔다. 여기저기 정보를 찾아보면서 공부한 내용을 정리해보려고 한다. 그리고 단순 input에 받는것이 아닌 다른 요소(div 등..)를 눌렀을 때 이미지 업로드와 동시에 preview 화면도 구현한다. 해당 포스트에 있는 코드는 이해를 돕기위해 코드를 모두 html 파일 내부에 작성했다. 실제 프로젝트에서는 html, css, js를 모두 나눠서 작업했다. ● HTML 에서 이미지를 업로드 받는방법 input type속성을 file로 정의하면 파일 업로드가 가능해진다. 또한 accept 속성을 img/*으로 지정할 경우 이미지 파일만 업로드가 가능해진다. ● 다른 요소(div 등..) 클릭시 input 이벤트가 발생하게 하는방법 내가 ..

● event.preventDefault() HTML 에서 a, submit 태그 등 고유한 동작을 가지고있다. a 태그의 경우 태그를 누르게되면 특정 경로로 이동하게 되고, submit 의 경우 form input 안에 데이터를 전송한다. 이러한 특정 동작을 막을때 event.preventDefault() 메소드를 사용한다. # 태그 구글로 이동 이때 event.preventDefault() 태그를 사용하여 이동하는것을 막아보겠다. 구글로 이동 a 태그를 클릭해도 이벤트가 실행되지 않는다. # 태그 2 + 2 = ? 전송 form 태그를 이용하여 전송 버튼을 누를경우 입력한 답이 출력되는 코드를 작성했다. submit 을 누르게 되면 0.1 초 정도 값이 보이고 바로 사라져 버린다. 이 때 event...