Study-Note

참고: [boostcourse full-stack] http://www.edwith.org/boostcourse-web * form 태그를 사용한 html- email 정보가 올바른지 유효성 검증하기 Email Password 이 부분처리를 서버에서 한다면 서버에 갈 때까지 email 정보가 틀렸는지 알 수가 없다.때문에 좀 더 좋은 UX를 제공하기 위해서는 에러 메시지를 더 빨리 사용자에게 노출해주는 것이 좋다. Join ! Join my website! Email Password var btn = document.querySelector(".sendbtn"); var result = document.querySelector(".result"); btn.addEventListener("click", f..

참고: [boostcourse full-stack] http://www.edwith.org/boostcourse-web * form 태그를 사용한 htmlform 태그를 사용해서 사용자 입력을 받을 수 있음! 브라우저는 form 태그를 사용해서 사용자 입력을 받으면 이를 쉽게 전송해준다. Email Password 위 예제코드처럼 input 태그를 사용해서 값을 입력받을 수 있으며, input 태그의 type에 따라서 다양한 입력을 받을 수가 있다. - 서버로 전송되는 방법input type이 submit (혹은 button type이 submit) 인 엘리먼트가 있을 경우, 해당 엘리먼트를 클릭하거나 다른 폼 엘리먼트 요소에서 엔터를 치면 form에 입력한 정보가 자동으로 서버로 넘어간다.- 어디로 전..

* 정규표현식 (regular expression) 문자열의 특정 패턴을 찾을 수 있는 문법패턴을 찾아서 추출, 삭제, 치환 등의 문자열 조작을 할 수 있다 코드 양을 줄이면서 빠르게 코딩할 수 있게 해주는 문법 - 정규표현식의 유용한 사례이메일, 주소, 전화번호 규칙 검증textarea에 입력된 것 중 불필요한 입력값 추출트랜스파일링 => 현재 지원되는 문법으로 변경해야 하는 경우개발 도구에서의 문자열 치환 - 정규표현식 실습\(function => (function 찾기(가 있거나 없거나 => \?function 처럼 ?를 넣을 수 있다공백은 s하나 이상임을 나타내고 싶을 때는 s+처럼 +를 붙여서 표현한다w는 대소문자 a부터 z까지찾아서 replace하고 싶은 경우에는 (\s?)(var)(\s+[$..

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105 h2 { text-align: center } h2, h4 { margin: 0px; } .tab { width: 600px; margin: 0px auto; } .tabmenu { background-color: bisque; } .tabmenu>div { display: inline-block; width: 146px; height: ..

* 자바스크립트 객체 - 객체 리터럴(Object literal)var healthObj = { name : "달리기", lastTime : "PM10:12", showHealth : function() { console.log(this.name + "님, 오늘은 " + this.lastTime + "에 운동을 하셨네요"); } } healthObj.showHealth();그런데 healthObj의 형태를 가진 여러개의 객체가 필요할 때 healthObj2, healthObj3... 와 같이 구현해도 되지만, 비슷한 객체가 중복되고 각 객체마다 showHealth라는 메서드는 중복으로 들어가 있다.이를 개선하기 위하여 아래와 같은 방법을 사용할 수 있다. - 객체를 동적으로 생성하는 방법아래에서 new ..

* 클린코드클린 코드라는 것은 읽기 좋은 코드, 가독성 있는 코드를 말한다. 1. 이름 (코딩 컨벤션)이름을 짓는 건 읽기 좋은 코드를 만드는데 필수 요소이다.함수는 목적에 맞게 이름이 지어져 있는가?함수 안의 내용은 이름에 어울리게 하나의 로직을 담고 있는가?함수는 동사 + 명사이며 함수의 의도를 충분히 반영하고 있는가? 동사에서 명사 순서로 가야한다. ex) addSemiColonStr함수는 카멜표기법(자바에서 사용) 또는 _를 중간에 사용했는가?변수는 명사이며 의미 있는 이름을 지었는가? 행위를 나타내는 것은 함수에만 사용하기 2. 의도가 드러난 구현패턴내 코드를 들여다보고 그 의도가 잘 보이는지 확인해보기예를 들어, var a = value * 19.2;가 있다면 도대체 19.2가 무엇을 의미하는..

* handlebar 자바스크립트 템플릿 라이브러리(설치 주소) https://cdnjs.com/libraries/handlebars.js/https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.12/handlebars.min.js 1. html에 다음과 같이 template코드를 만든다. 게시자 : {{name}} {{content}} 좋아요 갯수 {{like}} {{comment}} javascript에서는 replace로 치환하는 방법 말고, 라이브러리를 사용해서 결과를 얻을 수 있음 var template = document.querySelector("#listTemplate").innerText; var bindTemplate = Handlebars..

* jQuery지난 10년간, JS라이브러리는 jQuery가 그 인기를 독차지했으나 2018년 현재 그 인기는 많이 줄었들었음! - jQuery의 장점IE6,7,8를 포함해서 다양하게 동작하는 웹브라우저의 API 간의 차이를 줄여줌복잡하고 어려운 DOM APIs를 추상화해서 제공해서 쉽게 DOM 조작이 가능사고의 흐름에 맞춰 프로그래밍할 수 있음 - jQuery에서 DOM조작을 처리하는 방법//p1아이디를 가진 엘리먼트를 찾아서, color를 red 로 하고, slideup을 2초간, slideDown을 2초간 한다. $("#p1").css("color", "red").slideUp(2000).slideDown(2000); method chaining: 메서드를 연속적으로 부르는 방식이러한 방식은 jQu..

* this가 달라지는 경우showHealth는 어떤 이유인지 바로 출력하지 못하고, 1초 뒤에 결과를 출력하는 함수이다. this가 가르키는 것은?아래의 경우는 파라미터로 함수를 받는 경우이다. (자바스크립트는 이러한 경우가 많음) 여기서의 this는 setTimeout안에 있는 것이므로 healthObj를 가르키는 것이 아님, 따라서 출력했을 경우 undefined가 출력된다.(showHealth는 이미 반환이 되었고, 콜백함수가 가리키는 것은 window이다 그러므로 오류가 발생하는 것) 이를 해결하기 위해 추가하는 것이 바인드! function 뒤에 점을 찍고 bind(this)로 사용한다.var healthObj = { name : "달리기", lastTime : "PM10:12", showHe..

* 자바스크립트 객체의 활용자바스크립트에서는 객체 리터럴이라는 표현식을 이용해 객체를 쉽게 만들 수 있다.. notation 표기법은 자바스트립트에서 객체를 뜻한다 (객체.메서드)var healthObj = { name : "달리기", lastTime : "PM10:12", showHealth : function() { console.log(this.name + "님, 오늘은 " + this.lastTime + "에 운동을 하셨네요"); } } healthObj.showHealth();이와 같은 식으로 비슷한 기능을 묶어서 객체 리터럴로 코드를 만들고, 각 메서드를 실행해기여기에서 this는 healthObj를 가르킨다. (healthObj로 써도 되지만 this 키워드를 쓰는 것을 추천, 좀 더 유연해..