힘차게, 열심히 공대생

.attr(attributeName) 선택된 요소 집합에서 첫번째 요소의 attributeName에 해당하는 속성값을 반환한다. .attr(attributeName, value) 선택자에 의해 선택된 요소에 하나 이상의 속성을 부여할 수 있다. 여러 속성을 부여할 때, 속성명에 따옴표는 선택사항이다. 단, "class"속성을 세팅할 때는 반드시 따옴표를 사용해야 한다. Internet Explorer는 input이나 button요소의 type속성을 바꾸지 못한다. $('#go-map').attr("src",href) 참고 https://solbel.tistory.com/365

모달창안에 다른 html파일로 구현해 둔, 카카오 맵 api를 이용한 페이지를 불러오려고 했다. 1. 첫시도 ( 동적 스크립트 에러) - jquery.load() 접근 방법 모달 창 안의 안에 map id로 접근해 jquery.load(url)함수로 flask url로 랜더링 시켜줄려고 했다. 모달 창은 웹페이지가 로딩될 때 미리 생성되고 보였다, 안 보였다가 하는 거라고 하길래 doucment.ready를 이용해 주었다. $(document).ready(function () { let id = {{ id }}; //get url 에 id값 전달 -> locate map rendering {#$('#map-body').load('/map?id='+id)#} }); 결과 error code : Failed..

1. 템플릿 리터럴 타임어택 과제를 다시 해보다가, Jquery 로 자바스크립트 매개변수안에 변수값을 전달해주기위해 템플릿 변수를 사용하였다. 하지만 자꾸 매겨변수로 들어가는 문자열 코드 ex) 005975 가 앞에 0을 다 지워버린다. 알고보니 템플릿 리터럴은 들어오는 변수를 모두 문자열로 변화시키는데, 이때 정수로 인식해서 앞의 0을 없애버린것 같다. onclick="function('${code}')" 이렇게 매겨변수 값 자체를 문자열로 감싸주어 전달하니 해결했다 (ㄷㄷ ) 도와주신 내일배움 캠퍼 동민님 감사합니다.

django 는 탬플릿 변수와 url 태그를 html 파일에서 사용하는데 만약 html과 js파일이 분리되어있다면, 자바스크립트에서 탬플릿 변수를 사용할 수 없다. (django 태그를 먼저 처리하고, 그 후 스크립트 파일을 불러오기 때문이다.) 외부 자바스크립트에서 탬플릿 변수를 사용하기 위해서는 아래의 방법을 이용하여야 한다. 자바스크립트에 Django의 url 태그 사용 방법 외부 js 파일에서 장고 탬플릿 변수 or 탬플릿 태그를 사용하기 위해서는 자바스크립트 변수를 할당하는 방법이 있다. 무슨 말이냐면, 1. 먼저 스크립트를 불러오기 전에 html 부분에 자바스크립트 변수를 할당하여 변수에 탬플릿 변수, 혹은 url 태그를 할당해 준다. 2. 그 후 스크립트를 불러오고 3. 외부 js 파일안에서..

https://postcode.map.daum.net/guide Daum 우편번호 서비스 우편번호 검색과 도로명 주소 입력 기능을 너무 간단하게 적용할 수 있는 방법. Daum 우편번호 서비스를 이용해보세요. 어느 사이트에서나 무료로 제약없이 사용 가능하답니다. postcode.map.daum.net

자바스크립트나 css 파일이 수정 후 적용이 안되는 이유는, 브라우저에서 캐시메모리가 저장되어있어서 수정되기 전의 캐시 메모리를 사용하기 때문이다. 2가지 방법이 있다. 1. js,css 링크에 버전관리를 추가 간단하게 js,css 파일을 불러오는 링크 후면 부에 ?ver=1 이런 식 으로 버전관리를 함으로써 브라우저가 새로운 js파일로 인식하게 한다. static 파일 링크를 가져왔다면 똑같이 그 뒤에 작성하면 된다. ver 뒤에 숫자는 아무거나 상관없다. 2. Ctrl + F5 새로고침할 때 캐시까지 새로고침하는 방법이다 이게 제일 간편한 것 같다.

Promise Promise란, (약속) JavaScript에서 제공하는 비동기를 간편하게 처리할 수 있도록 도와주는 object이다. Promise 기능 프로미스는 정해진 기능을 수행하며, 이 수행을 성공하면 어떤 값을 Return 하고 문제가 발생하면 error를 Return 한다. Promise 객체의 interface를 보면, executor라는 콜백함수 안에 (reslove 와 reject 라는 2개의 콜백함수를 인자로 받는다) 여기서 Executor 콜백함수는 프로미스 객체가 생성되면 자동적으로 실행하는 콜백함수이다. (Automatically function) 따라서 사용자와 서버가 불필요한 통신을 수행할 수 있기때문에 사용에 유념하여햐한다. reslove 와 reject resolve와 r..

Json 이란 : https://thalals.tistory.com/32 이전에 JSON의 형태의 대해 Python으로 정리를 한 적이있다. Json의 개념과 형식(format)은 전에 공부하였고, 오늘은 자바스크립트에서 Json의 활용법을 정리하고자 한다. JSON 이란 JSON API 자바스크립트에서 JSON에 내장되어 API는 1. parse : JSON to object 2. stringify : object to JSON 이 2개임을 아래의 사진을 통해 확인 할 수 있다. Object to JSON stringigy API로 JavaScript object를 json으로 변환 시킬 수 있다. Stringify API Interface를 보면 2가지 타입으로 오버로딩 되어있는 있다. 1. 첫번째는..

1. head 태그 안에 삽입 보통 헤드안에 script태그를 많이 삽입하여 링크하는데 (나도 그랬다) html 문서를 파싱할 때 js를 가져오는 순서를 보면 아래의 그림과 같다. 1. 브라우저에서 html 문서를 한줄 씩 파싱하여 CSS파일과 병합하여 DOM요소로 변환한다. 2. 한줄씩 Parsing을 이어가다가 JS를 만나면, 파싱을 멈추고 JS파일을 다운로드 한다. 3. 다운로드가 완료되면 JS파일을 실행한다. [단점] 가장 일반적인 방법이지만 JS 파일이 크다면 페이지가 로딩되는데 너무 많은 시간이 걸린다는 단점이 있다. 2. body 태그 안에 삽입 다른 방법으로 js파일을 바다태그안에 삽입하는 방법이 있는데 이렇게 하면, html 파일을 모두 파싱 후 js 파일을 링크할 수 있다. [장점] H..

JavaScript를 공부하다가, 뜬금없이 DOM이 나오길래.. 뭐지 이녀석은.,, 하면서 글을 정리해본다. DOM 풀네임은 "Document Object Model" 이다. html을 작성하다 보면, html 파일안에 css 도 불러오고 js도 불러온다. html은 어떻게보면 하나의 확장자로고도 볼 수 있는데 ( .html / .css / .js / .img / .doc) 다른 파일( .css, .js)를 어떻게 쉽게 불러와서 사용할 수 있을까?? (극단적인 예로 한글파일에서는 워드 파일을 불러올 수 없으니까..) 이것을 가능하게 하는 것이 DOM이다. DOM의 역할 Document Oject Model 즉, (문서 객체 모델링인데) Document : html, 브라우저 Object : 자료형 (js..