WakaraNai

확장자 검사 input 태그의 accept 속성으로 검사 이 방식은 브라우저마다 지원 여부가 달라서 더 많은 브라우저에서 동작하는 코드를 알아보자 file을 업로드하면, change 이벤트로 이를 감지. 그 후에 event 객체의 target으로부터 file 객체를 얻음. const elImage = document.querySelector("#reviewImageFileOpenInput"); elImage.addEventListener("change", (evt) => { const image = evt.target.files[0]; if(!validImageType(image)) { console.warn("invalide image file type"); return; } }) 실제로 File 객체..

File Upload form 처리 시 input type을 file로 설정함으롰 서버에 파일을 업로드할 수 있다. type을 file로 설정 name을 클라이언트/서버 간 보낼 데이터의 이름으로 지정 accept에서 허용 가능한 file type을 지정할 수 있음 id는 클라이언트에서 어떤 제어를 하는 경우에 사용 실습 Email Password Content-Type 설정 일반적인 form 데이터 전송 시에 HTTP Header에는 , 'application/x-www-form-urlencoded' 라는 정보로 노출된다. Content-Type:application/x-www-form-urlencoded 그런데, file 전송은 이와 다르다. 아래처럼 form 태그의 속성으로, enctype을 mul..

브라우저는 form 태그를 사용해서 사용자 입력을 받으면 이를 쉽게 전송해줍니다. Email Password form전송을 위한 html 태그는 딱 정해진 건 없습니다. 이를 찾아보면 여러 가지 형태로 form을 구성할 수가 있습니다. 위 예제코드처럼 input 태그를 사용해서 값을 입력받을 수 있으며, input 태그의 type에 따라서 다양한 입력을 받을 수가 있습니다. 어떻게 서버로 전송될까요? input type이 submit (혹은 button type이 submit) 인 엘리먼트가 있을 경우, 해당 엘리먼트를 클릭하거나 다른 폼 엘리먼트 요소에서 엔터를 치면 form에 입력한 정보가 자동으로 서버로 넘어갑니다. 그럼 어디로 전송될까요? form태그의 action속성에 적어주면 됩니다. 어떤 값..

정규 표현식 문자열의 특정 패턴을 찾을 수 있는 문법 패턴을 찾아서 추출, 삭제, 치환 등의 문자열 조작을 할 수 있다 몇 가지 유용한 사례 입니다. 회원가입 시 입력한 내용이 규칙을 따르고 있는지 확인할 때 이메일, 주소, 전화번호(숫자사이 - 기입 여부) 규칙 검증 신용카드 번호 패턴, 우편번호 textarea에 입력된 것 중 불필요한 입력값 추출 트랜스파일링 - 최근 문법으로 된 코드를 현재 지원되는 문법으로 치환해야할 때 개발 도구에서의 문자열 치환 간단한 사용법 숫자 하나 찾기 var result = "abc3zzz".match(/\d/)[0]; console.log(result);​ 숫자 두 개 찾기 var result = "abc32zzz".match(/\d/)[0]; console.log(..

자바스크립트의 객체 리터럴 var healthObj = { name : "달리기", lastTime : "PM10:12", showHealth : function() { console.log(this.name + "님, 오늘은 " + this.lastTime + "에 운동을 하셨네요"); } } healthObj.showHealth(); 이와 같은 객체가 여러 개 필요하다면? healthObj2, healthObj3 .. 중복하여 여러개를 만드는 방법 외에는? 객체를 동적으로 생성하는 방법 함수를 이용 h는 객체. h안에 Health 함수를 한 번 더 불러서 h2 객체를 만듦 function Health(name, lastTime) { this.name = name; this.lastTime = last..

클린 코드라는 것은 읽기 좋은 코드, 가독성 있는 코드를 말합니다. 사람마다 더 좋은 코드가 무엇인지는 조금씩 다를 수 있습니다. 클린코드 내용을 담고 있는 책이나 글을 많이 보면, 어떤 코드가 좋은지 점점 알 수가 있습니다. 더 좋은 방법은 많은 사람에게 코드리뷰를 받는 것입니다. 아래 몇몇 예시는 클린코드를 만드는 몇 가지 examples에 지나지 않습니다. 이를 참고로 클린코드가 어떤 것인지 알게 되길 바랍니다. 이름 (Conding Convention) 이름을 짓는 건 쉬운 일은 아니지만, 읽기 좋은 코드를 만드는데 필수 요소입니다. 이런 부분을 고려하세요. 함수는 목적에 맞게 이름이 지어져 있는가? 함수 안의 내용은 이름에 어울리게 하나의 로직을 담고 있는가? 함수는 동사 + 명사이며 함수의 의..

handlebar 대표적인 template 라이브러리 구글에 handlebar cdn을 검색하여 스크립트 태그 복사해오기 min은 mini file로 압축된 파일을 의미 min이 마지막에 붙은 것으로 복사해오기 https://cdnjs.com/libraries/handlebars.js handlebars.js - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers Handlebars provides the power necessary to let you build semantic templates effectively with no frustration - Simple. Fast. Relia..

$ == document.querySelector() Framework 웹에서 할 수 있는 것들이 많아지면서, Single Page Application이라는 서비스개념이 등장했습니다. (SPA는 페이지 갱신 요청 시, 갱신에 필요한 데이터만 전달받아 새로고침 없이 페이지를 갱신) 즉 웹에서 데이터처리나 복잡한 Ajax처리, routing처리 등이 많아지면서, 이를 편리하게 해주는 Framework가 나왔습니다. React, Angular, Vue, Ember와 같은 것들이 그런 것입니다. 이를 사용하면 좀 더 쉽게 DOM제어를 할 수 있고, Data조작을 View에서 분리해서 관리할 수 있습니다. 그리고 component방식으로 개발할 수 있어 재사용가 능한 코드를 만들 수도 있고요. 라이브러리가 유용..

객체 정의 var healthObj = { name : "달리기", lastTime : "PM10:12", showHealth : function() { console.log(this.name + "님, 오늘은 " + this.lastTime + "에 운동을 하셨네요"); } } healthObj.showHealth(); this 객체 안에서의 this는 그 객체 자신을 가리킴 ES6부터 객체에서 메소드를 사용할 때 function 생략 가능 const obj = { getName() { return this.name; }, setName(name) { this.name = name; } } obj.setName("crong"); const result = obj.getName(); 함수가 실행될 때, ..

var data = [{name : "corn", description : "초당옥수수", price : 5500}, {name : "beer", description : "캔맥주", price : 4500}, {name : "candy", description : "사탕", price : 350}]; for 와 forEach for(var i=0; i 5000; //5000원이상만 추출 }); var filteredData = data.filter(function(v) { return v.price > 5000; }).map(function(v) { v.price = (''+v.price).replace(/^(\d+)(\d{3})$/, "$1,$2원"); return v; }); immutable 원본..