JS Ecosystem (44) 썸네일형 리스트형 (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. 최소값 지정시의 문제점을 해소한다. 순서로 작성을 해놓았지만 최대값과 최소값은 동시에 지정되어야 범위가 정해진다.. TIL 22일 - (JS기본기) My Shopping List JS 기본기 확인 중 문제 설명 아래 이미지처럼 상품을 추가하고 삭제할 수 있는 기능을 javascript만으로 구현해보세요. 우선 HTML 파일 handleClick 함수를 달아주어서 input 태그에 입력된 값을 에 리스팅해준다. My shopping list Enter a new item: Add item 다음은 JS function handleClick() { const myShopList = document.querySelector("ul"); const oneList = document.createElement("li"); const inputValue = document.querySelector("input").value; const input = document.querySelector(".. (React 오류) Assign array to a variable before exporting as module default HA(Hire Assesment) 1차 리액트로 간단한 썸네일 뷰와 라우터 기능을 구현하는 것이다. 결과는 사실 좋지 않다. 1. 정상적인 작동 기능을 구현하였어도 컴포넌트를 통해서 썸네일 이미지를 map함수를 사용 해서 보여줘야 하는데 자바스크립트와 html 지식이 혼재되고 props으로 무엇을 받아야 하는지 감을 잡지 못해서 그냥 바로 return 안에서 썸네일 이미지를 map함수로 표시해 주었다. 2. 자정을 40분 넘긴 지금. 여전히 테스트 결과는 100%로 나오지 않지만 테스트 기준에 어느정도 부합하게 컴포넌트도 사용했다. =========== 리액트 에러메세지가 많이 나와서 그 부분을 정리해 두려고 한다. Assign array to a variable before exporting as mo.. Fontawsome in React 폰트어썸을 리액트에서 사용하는 방법 import 하는 방법과 script 로 연결하는 방법, 작업 컴퓨터에 다운로드 받는 방법 등이 있다. 폰트어썸에서는 script 연결을 권장한다. 그래서 script로 연결하는 방법을 알아보자. React을 설치하고 생성된 폴더를 보면 public이라고 있다. 해당 폴더는 reate-react-app이 만들어낸 파일로 npm이나 yarn start으로 사용이 가능하다. 이 public 폴더에 index.html 파일에 를 설치해주면 된다. src안에 들어갈 폰트어썸 kit 주소는 폰트어썸에 가입하고 나면 여기서 알려준다. "https://kit.fontawesome.com/14d687cae1.js" crossorigin="anonymous" 해당 주소는 가입자 마다 .. 정규표현식을 통한 문자 공백 제거 자주 쓰이는 정규표현식 기호 $ : 끝나는 점 ^ : 시작하는 점 * : 뒤에 이어지는 문자까지 모두 선택 d : 숫자 s : 공백 문자열의 모든 공백을 제거할 때 replace 메소드를 이용한다. str_text.replace("찾을 문자열", "변경할 문자열") 찾을 문자열에 정규표현식의 모든 공백을 표현하는 기호를 넣어주고 변경할 문자에는 '' 빈문자열을 넣어준다. let newStr = str.replace(/(\s*)/g,'').split(''); parseInt 의 특이한 점 parseInt javascript를 검색하면 대다수의 함수 기능은 문자열을 숫자로 변환한다는 내용이다. MDN에도 해당 내용으로 나오고 있다. 그런데 parseInt에 소수점이 있는 수를 넣어주면 소수점을 버리고 정수만 반환해준다는 내용은 찾을 수가 없다. 언젠가는 찾겠지... 이전 1 2 3 4 5 6 다음
