본문 바로가기

JS

 (22)
(Javascript) 정규 표현식 메소드 정규 표현식에서 자주 사용되는 메소드는 test(), search(), replace()이다. test() - 찾는 문자열이 포함된 여부를 알려준다. 회원가입 할 때 아이디나 비밀번호 입력의 유효성 검사에 많이 사용된다. 문장안에서 찾으려는 문자가 들어 있으면 결과는 true이고 없으면 false 이다 search() - 검색된 문자열의 위치값을 반환한다. (전체 문자열에서의 순서이다.) 순서값을 계산할 때 공백은 제외하고 판단한다. 만일 해당 찾으려는 단어가 없으면 -1을 반환한다. replace() - 문자열의 일부를 다른 문자열로 바꾸어 준다. 교체하기 Please visit Tistory! 교체하기 Please visit Tistory! 참고: https://tonks.tistory.com/20
(Javascript) 크롬 개발자 도구 Local Storage 활용 구글 크롬 브라우저의 개발자 도구에서 Application 탭을 보면 왼쪽에 Local Storage라고 확인이 된다.로컬 스토리지는 쿠기나 세션과 같이 데이터를 저장하는 장소 중 하나이다. 로컬 스토리지의 데이터 저장 기간은 만료가 없고 항상 문자열로만 저장이 되어야 한다. 메소드 getItem : 로컬 스토리지에 저장되어 있는 데이터 값을 불러오는 메소드 setItem : 로컬 스토리지에 데이터를 저장하는 메소드 const greeting = document.querySelector("h1"); const yourName = localStorage.getItem("name"); if (yourName === null) { const name = prompt("이름을 입력해주세요."); localSto..
(Javascript) JSON 기본 1. 개념 Javascript(Javascript Object Notation)의 객체를 범용적으로 읽을 수 있는 문자열 형태로 변환 객체는 타입 변환을 통해 String 형 변환 할 경우 객체 내용이 포함되지 않기 때문에 JSON형태로 변환 필요 웹에서 데이터를 전송할 때 주로 사용 JSON에서 키와 속성은 오직 큰따옴표만 사용. 키와 값, 키-값 쌍사이에는 공백이 있으면 안됨 2. JSON.stringify let obj = { sender : 'holystory', receiver : 'KAKAO', date : '21.10.20', num : 1, } console.log(JSON.stringify(obj)) // '{"sender":"holystory","receiver":"KAKAO","dat..
(Javascript 에러) Uncaught SyntaxError: Failed to execute 'querySelector' on 'Document' 트위터 클론 코딩 중이다. 게시물은 태그의 후손 선택자 로 열거되어있다. 리액트 onClick 이벤트 핸들러를 활용한 해당 게시물 삭제 기능을 구현하고 있다. 이벤트 핸들러 handleDeleteTweet로 value값 tweet.id를 전달하고 tweet.id의 값과 동일한 id 값을 가진 게시물을 (여기서는 삭제버튼을 클릭한 게시물) 변수 selected에 할당하고 삭제해주는 것이다. 이때 querySelector의 인자로 id를 넣어주었는데 SyntaxError 발생하였다. 해결방법을 찾아보았다. querySelector는 인자값으로 숫자를 받지 않는다고 한다. id는 고유의 값인데 숫자를 고유의 값으로 인식하지 않는다는 이유다. 그래서 id의 값이 숫자로만 이루어져있고 그 id값으로 태그를 선별해..
(Javascript) 실행 컨텍스트, 어휘 환경, 클로저 클로저함수, 고차함수, 재귀함수들을 공부하다보니 다소 유사한 개념이 반복되고 있다. 동시에 해당 개념의 차이에 대하여 알아보니 자바스크립트의 실행 컨텍스트, 어휘 환경에 대한 개념을 먼저 알아야지 좀 더 정확한 이해가 가능하여 그 부분의 내용을 정리하려고 한다. 참고로 실행 컨텍스트는 scope, hoisting, this, function, closure 등의 동작원리를 담고 있기 때문에 JS에서 핵심적인 동작원리라고 할 수 있다. 1. 실행 컨텍스트란 무엇입니까? 우리는 일정한 공간에 코드를 작성한다. 그 공간을 실행 컨텍스트(Execution Context, 이하 EC)라고 한다. EC는 실행 가능한 코드가 실행될 수 있는 환경을 의미한다. 함수가 호출되면 새로운 EC가 생성되고 컨텍스트 스택에 쌓..
(Javascript) 정규표현식(regular expression; regex, 뢔젝스) 정규표현식은 텍스트에서 우리가 원하는 특정한 패턴을 찾을 때 요긴하게 쓰일 수 있다. 특별히 유효성 검사를 할 때 조건문을 써주기 보다 한 줄의 정규표현식으로 판별 함수를 처리할 수 있다. 연습용 사이트 https://regexr.com/5ml92 Group and ranges | 또는 ( ) 그룹 [ ] 문자셋, 괄호안의 어떤 문자든 [^] 부정 문자셋, 괄호안의 어떤 문자가 아닐때 (?:) 찾지만 기억하지는 않음 Quntifiers ? 없거나 있거나(zero or one) * 없거나 있거나 많거나(zero or more) + 하나 또는 많이(one or more) {n} n번 반복 {min,} 최소 {min, max} 최소, 그리고 최대 Boundary-type \b 단어 경계 \B 단어 경계가 아님..
(Javascript) DOM 이벤트 객체 코드 작성 3가지 예 어떤 버튼(btn)이 존재하고, 버튼을 클릭할 때 콘솔에 "버튼이 눌렸습니다!"가 출력되게 만들려고 하는 상황을 가정하고 이벤트 객체를 JS에 구현하는 코드 작성의 사례 3가지를 신속하게 알아보자. 1. on ~ 속성(onclick, onkeyup 등) 사용 btn.onclick = function() { console.log('버튼이 잘 눌려졌습니다!') } 2. addEventListener 속성 사용 btn.addEventListener('click', function()) { console.log('버튼이 잘 눌려졌습니다!') } 3. 함수 선언식 사용 function handler() { console.log('버튼이 눌렸습니다!'); } btn.onclick = handler; // 함수 그 ..
(Javascript) Math.random으로 범위 정하기 일반적으로 난수를 발생시켜야 하는 경우 Math.random() 함수를 사용하여 구현을 하는 경우가 많다. Math.random은 0 ~ 1 사이의 난수를 무작위로 생성을 한다. 오늘 다룰 주제는 무작위로 생성된 난수의 범위를 지정해주는 것이다. 흔히 최소값과 최대값을 지정해서 그 사이를 범위로 갖게 만든다. Math.random외에 알아두어야 할 것이 Math.floor()다. Math.floor()는 발생된 난수의 소수점을 없애고 정수를 추출하는데 사용된다. 범위를 정하는 방법의 순서이다. 1. Math.random의 최대값을 지정한다. 2. Math.random의 최소값을 지정한다. 3. 최소값 지정시의 문제점을 해소한다. 순서로 작성을 해놓았지만 최대값과 최소값은 동시에 지정되어야 범위가 정해진다..

티스토리툴바