Dev/JavaScript13 자바스크립트 File input 동적 추가, 삭제하기(이벤트 위임) 서론 💭 전에 진행했던 프로젝트에서 j쿼리를 이용해 작성한 코드를 자바스크립트로 바꾸는 과정을 진행하고 있는데 약간의 애를 먹었던 동적으로 input file 태그를 추가해주는 작업! 파일 추가 버튼을 누르면 input이 추가 되고 추가된 삭제 버튼을 누르면 해당 input이 삭제되는 기능이다. input 태그는 잘 늘어나는데 삭제가 뒤죽박죽으로 됨, 삭제는 되는데 파일 선택이 안 됨, 걍 삭제가 안 됨 등 다양했는데 어쨌는 해내었다 ㅎ JSP 일부 HTML 삽입 미리보기할 수 없는 소스 메인이미지는 이미지 한 장만 업로드 할 수 있도록 구현했기 때문에 상세이미지에만 기능을 적용했다. input 태그의 name 값으로 각각의 input을 구분하도록 했고 동적으로 input 태그가 추가될 곳은 div 태그.. 2023. 4. 29. jQuery를 자바스크립트로 바꾸기 프로젝트를 진행하면서 자바스크립트보단 j쿼리를 많이 썼었다. 이유는 단순히.... 코드의 생김새(?)가 자바스크립트보다 예뻐보였다. 더 간결해 보였고 있어 보였달까 ㅋㅋ 선생님도 j쿼리를 더 써보라고 하셨었다. 근데 알고보니 j쿼리는 너무나 무거운 라이브러리라 신문물을 받아들이지 않는 곳 제외하면 실무에서 거의 쓰지 않는다고!!!! 그리고 확실히 대세는 리액트나 뷰! 공부를 하면 할수록 성능 같은 것을 알아 가는 것도 큰 재미이다. 아무튼 그래서 신나게 j쿼리로 작성 했던 코드들을 자바스크립트로 바꿔보고 있다. 열심히 골머리 앓으면서 짠 코드가 있는데.. 그거도 j쿼리인데.. 눈물을 흘리며 진행중 ㅋㅋㅋ 이제 더 심화해서 타입스크립트로도 바꿔봐야지 이런 과정도 리팩토링이라고 할 수 있나 밑에는 몇 가지 .. 2023. 4. 11. 자바스크립트 프로토타입? 자바스크립트는 프로토타입 Prototype이라는 공간을 가지고 있다. 프로토타입은 생성자 함수를 사용해 생성된 객체가 공통으로 가지는 공간을 의미한다. //생성자 함수 만들기 function Student(name, korean, math, english) { this.이름 = name; this.국어 = korean; this.수학 = math; this.영어 = english; //메서드 this.getSum = function() { return this.국어 + this.수학 + this.영어; }; this.getAverage = function() { return this.getSum() / 3; }; this.toString = function() { return this.이름 + '\t' .. 2023. 4. 10. JavaScript 자바스크립트 시계 만들기 타이머 관련 예제를 보다가 급 티켓팅할 때 애용했던 네이비즘 서버시간 사이트가 떠올라 간단하게 시계를 만들었다 ㅋㅋㅋ HTML 삽입 미리보기할 수 없는 소스 코드 전문 Date의 getDate() 메서드는 요일을 0~6의 숫자로 표현해준다. 따라서 요일을 담는 배열을 생성해 가져다 쓸 수 있도록 작성 getFullYear() 메서드부터 getSeconds() 메서드를 이용, 문자열을 조합하여 시간을 표현해줌 처음에 setInterval 메서드에 Date 객체 뽑아오는걸 바로 작성 했었는데 그러면 시계가 바로 나오지 않고 1초 뒤에 나오게 된다. 그래서 함수를 따로 만들어 빼주고 그 함수를 호출 해준 뒤 setInterval()이 돌아가게 하면 끝! 재밌다 ㅎ 화면 디자인 완전히 따라 만들진 않았고 이렇게.. 2023. 4. 9. DOM(Document Object Model) 문서 객체 모델 문서 객체 모델(DOM: Document Object Model)은 넓은 의미로 웹 브라우저가 HTML 페이지를 인식하는 방식이고, 좁은 의미로는 document 객체와 관련된 객체의 집합이다. DOM을 사용하면 HTML 페이지에 태그를 추가, 수정, 제거할 수 있다. vellalog 위 코드는 아래와 같은 트리 모양으로 나타낼 수 있다. 위 그림 속의 각 요소들을 '노드'라고 부른다. 노드는 요소 노드(Element Node)와 텍스트 노드(Text Node)로 구분할 수 있다. 요소 노드는 html 태그를 의미하고 텍스트 노드는 요소 노드 안에 들어있는 글자를 의미한다. 1. 문서 객체 만들기 1-1. 동적으로 문서객체 만들기 💭 웹 페이지가 처음 HTML 페이지에 적혀 있는 태그들을 읽으며 생성하는.. 2023. 4. 8. 카카오맵 api 좌표와 마커 이동(수정)하기 https://tavi.tistory.com/110 다음 우편번호 api와 카카오 맵 api 사용기 프로젝트를 마무리 하고 쫌쫌따리 추가구현 중인 것들이 있는데 그중 하나인 카카오 map api '모임'이 주제인 프로젝트인만큼 모임 장소를 지도로 표시해주는게 좋을 것 같아 시작하게 되었다. 모 tavi.tistory.com 저번 글의 카카오 맵 api를 사용한 후 수정폼에서 다음 우편번호 api를 이용해서 주소 검색 시 검색 된 주소로 지도의 좌표와 마커가 이동되도록 구현 했다. 이동은 아니고 새로 map을 만들어서 새로 좌표를 찍어주고 새로 마커를 찍어준 거긴 하다 ㅎ.. 1. DB에 저장 시킨 주소 지도 띄우기 HTML 삽입 미리보기할 수 없는 소스 다음 우편번호 api를 이용해 검색 완료된 주소와 .. 2023. 3. 22. 이전 1 2 3 다음
