군붕이의 메모장

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

중고나라 클론 프로젝트를 하면서 처음 해보는 이미지 업로드 기능에 부딪혔다. 여기저기 정보를 찾아보면서 공부한 내용을 정리해보려고 한다. 그리고 단순 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...