자바스크립트에서 파일이 이미지 일때만 등록이 가능하도록 구현을 해보자. 리액트라 구조가 아래와 같은데, 자바스크립트 함수로 작성해도 구현되는 구조이다. 파일의 타입은 'image/png' 이러한 방식으로 나타난다. 뒤의 모든 타입을 등록하는 것보다 Image 만 잘라오는 것이 나을 것 같아 들어오는 파일의 확장자는 substring 해줬다. fileTypes 변수에 image 를 등록하여 비교해줬다. 이렇게 구현하면, 나중에 타입 추가하는 것도 쉬울 것 같다. 파일명의 . 뒷자리부터 가져와도 되지만, 나는 파일 타입을 가져오는 것으로 구현했다. const fileTypes = [ 'image' ] const handleFileChange = (event) => { ..
LocalStorage 에 입력한 user_id 를 서버 단의 유효시간과 동일하게 하기 위해 아래와 같은 형태로 아이디, 만료시간을 등록하였다.{"value":"sylee","expireTime":1735917224128} 이 방법의 단점은 해당 localStorage 의 데이터에 접근하기 위해서는 아래 함수를 통해 JSON.parse 후 값을 꺼내줘야 한다는 거다. const getUserId = (key) => { const item = localStorage.getItem(key); if (!item) return null; const {value, expireTime} = JSON.parse(item); return value;} LocalSt..
this의 사용 this는 객체를 다시 호출할때 내가 호출하는 것이 이전에 정의되었던 '그' 객체를 호출하는 것이 맞다고 인식시켜주기 위한 것이다. 'this'의 값은 함수가 어떻게 호출되느냐에 따라 동적으로 결정된다. 함수가 객체의 메서드로 호출될 때: 'this'는 해당 메서드를 호출한 객체를 참조한다. 함수가 일반 함수로 호출될 때: 'this'는 전역 객체인 'window'를 참조한다. (브라우저 환경에서) 함수가 생성자 함수로 호출될 때: 'this'는 생성된 객체를 참조한다. 화살표 함수 내에서: 'this'는 주변 스코프의 'this' 값을 유지한다. 'this'를 사용하여 메서드 내에서 객체의 속성이나 메서드에 접근할 수 있다. this 아래의 예시에서 sayName function은 선언..
index.jsp에서 각각의 jsp 파일들을 출력해볼 것이다. 간단하게 임베드 기능을 구현한다고 생각하면 된다. header, menu, tail.jsp KOSTA 사이트 로그인 회원가입 메뉴 내 정보확인 로그아웃 탈퇴 게시판 이미지 게시판 kosta 협회 진흥원 copyrighted by 000 tel:02-1234-4567 주소: 경기도 성남시 분당구 판교동 include 지시자 변하지 않는 페이지는 include 지시자를 사용한다. 포함할 페이지가 고정으로 지정된다. 하나의 페이지에 다른 페이지들을 가져다 쓴다. 지시자 안에 EL표현식은 사용이 불가능하다. include 지시자를 사용하여 왼쪽의 빈 테이블에 include 지시자를 사용하여 내용을 넣어볼 것이다. 캡쳐에는 잘렸지만 밑에 tail.js..
JSON 자바 스크립트에서 객체를 배열하는 방법이다. JSONArray : [ ] 배열 배열은 대괄호를 사용한다. let arr = [ 'aaa', 'bbb', 'ccc' ]; JSONObject : { } 객체 객체는 중괄호를 사용한다. 이때 number와 boolean 은 ""로 묶지 않는다. let obj = { "name" : "aaa", "num" : 1, "tel" : "111", "flag" : true }; 문자열 타입을 객체로 변환 (파싱) 전체가 따옴표로 묶이면 문자열이다. 이러한 문자열 타입을 객체로 변환하는 것을 파싱이라한다. 파싱을 하지 않으면 문자열 하나씩 인식한다. let txt = '{"name":"aaaa","num":1}' //문자열 JSON.parse(txt); 아래 o..
방명록 만들기, 작성 기능을 구현해보자. 작성자, 글 비밀번호, 내용을 작성하고 작성 버튼을 누르면 새로운 영역에 글이 작성되는 기능이다. 방명록 작성자 글 비밀번호 내용 작성 바디에서 작성자, 비밀번호, 내용 의 값을 사용자에게 받아 "작성" 버튼을 이용해 함수 a() 를 불러낸다. (onclick = "a()") 에서 각 값의 이름으로 접근해 값을 받아 변수에 담는다. 값들을 파라메터에 담아 mkDiv 함수를 불러낸다 mkDiv 는 div 태그에 감싸서 내용을 프린트 하기 위해 만들었다. 새로운 div 태그를 만들어 영역을 추가한다. 새 div 태그에 id를 지정하고 비밀번호를 추가한다. 아이디가 겹치지 않도록 cnt 를 추가한다. 생성된 div 에 출력할 내용을 담은 변수 html 을 초기화해준다...
요소 추가/삭제 1) 요소 생성 document.createElement("태그"); // document.createElement("p"); 2) 요소 추가 document.appendChild(요소); 요소 생성/추가 3) 요소 삭제 document.removeChild(요소); 버튼 추가 삭제 4) 요소에 이벤트 핸들러 추가 요소.onclick = 함수
innerHTML 여는 태그와 닫는 태그 사이의 값이다. aaa 의 경우, 태그 사이의 aaa 의 값을 말한다. ⬇️ 예시는 아래 링크의 글들에서 확인할 수 있다. https://skylarcoding.tistory.com/search/innerHTML 코딩 학습 중 ... skylarcoding.tistory.com 요소 속성값 요소.attribute = 새값; 요소.setAttribute("속성명", "값"); 요소.getAttribute("속성명"); //속성값 반환
HTML DOM Documnet Object Model (문서 객체 모델) HTML DOM 모델은 HTML등의 문서를 위한 객체의 인터페이스라고 보면 된다. DOM은 아래와 같은 구조로 표현된다. DOM은 HTML의 요소를 받고, 변경하고, 추가하고, 삭제하는 방법 등을 제공한다. 1. 요소 추출 메서드 id를 받아오는 메서드는 아이디 한개만 받아오니 문법 사용에 주의해야한다. document.getElementById("아이디"); //요소 한개 (id) 반환 //아이디는 중복되지 않으니 element, s를 붙이지 않는다. document.getElementsByTagName("태그명"); // 등의 태그. 동일한 태그명을 찾아서 배열에 담아 반환 document.getElementsByClassNa..
