js

1. 정규표현식 코드를 작성할 때 문자열의 패턴일 일정한 경우가 있다. 나 같은 경우에는 실전프로젝트에서 회원가입 폼에 있는 회원의 휴대전화 번호를 입력받을 때 모두 "010-0000-0000"과 같은 패턴으로 받고 싶었다. 01012345678이 모두 010-1234-5678로 입력되게 바꾸고 싶었다. 나의 경우에는 전화번호가 "XXX-XXXX-XXXX"라는 일정한 패턴으로 이루어져 있다. 이러한 경우에 저 패턴을 표현하는 방식을 정규표현식이라고 한다. 정규표현식은 특정 패턴의 문자열을 찾기 위한 표현 방식이다. 이것을 형식 언어, formal Language라고 한다. 참고하면 좋은 블로그는 링크로 걸어놨다. 더보기 https://inpa.tistory.com/entry/JS-%F0%9F%93%9A-..

객체 리터럴을 이용해 객체를 만들 때 key에 대괄호를 사용하는 이유와 용도에 대해 배우다. 0. 글 작성 이유 프로젝트를 진행하던 도중 구글링하다 본 코드에서 객체 리터럴 방식으로 객체를 만들 때 key에 대괄호([key])를 씌우는 것을 봤다. 보통 같으면 이유없이 따라쳐서 코드가 잘 작동 되는지 확인하고 넘길텐데 내 성격은 그렇지않다. 나는 코드를 쓸 때 이 코드를 사용한 이유, 코드의 원리, 의도를 파악해야 직성이 풀린다. 그렇기때문에 key에 대괄호를 씌워서 사용하는 것에 대해 궁금해지기 시작했다. 1. 객체 리터럴 let object = { key1 : 'value', key2 : 'value2' } 객체 리터럴이란 객체를 표현할 때 중괄호 ( { } )를 사용하여 나타내는 방식이다. 객체를 ..

배열 함수의 한 종류인 reduce함수를 배우다. reduce함수는 배열내 요소들로 누적되는 특정 행위를 한다. 특정 행위는 reduce함수 내 괄호안에 함수로 정의할 수 있다. 대표적으로 배열 안의 모든 수의 합을 구할 수 있다. reduce함수의 진행과정은 위의 이미지를 참고하면 된다. 들어간 함수에 따라 배열의 요소에 적용되는 것이 바뀐다. reduceRight는 배열의 가장 뒷부분부터 reduce함수가 진행되는 것이다.

배열 함수의 한 종류인 filter함수를 배우다. 배열내 요소를 filter 조건에 true인 경우만 필터링하는 filter함수이다. Case 1은 함수를 따로 만들어서 filter 함수로 배열 내 각각의 요소들이 조건이 충족하는지 확인한다. Case 2는 filter 함수에서 화살표함수를 사용한 방법이다.

배열함수의 한 종류인 map함수를 배우다. 배열의 모든 요소에 map 괄호 안의 함수를 적용한다. 화살표 함수를 사용해도 되고 따로 함수를 생성해서 함수이름을 적어도 된다. 화살표 함수를 사용할 경우 return 값 반환해야한다. 배열 내의 객체에 map을 쓸 때 특정 key값에만 함수를 적용하고 싶다면 나머지 key값들은 건들 필요가 없으니까, obj(매개변수)가 객체 형태로 함수에 들어가는데 ...obj(매개변수)를 쓰면 나머지 key값들은 그대로 유지된다.

To do List를 HTML, CSS, JavaScript를 이용해서 만들어보다. HTML, JS Todo List 추가 CSS body{ background-image: url(https://img.freepik.com/free-vector/hand-painted-watercolor-pastel-sky-background_23-2148902771.jpg?w=2000); background-repeat: no-repeat; background-size: cover; font-family: "Nanum Gothic"; } .container{ background-color: white; /* vh: viewport height로 현재 브라우저 높이를 꽉 채울 때 100vh를 사용 */ height: 10..

숫자 맞추기 실습을 선생님 코드로 알아보다. 선생님 코드에 내가 생각한 사용자의 편의를 더한 코드이다. 숫자 맞추기 게임 결과값이 여기 나옵니다! 남은 기회:5번 확인 초기화 1. 변수 선언 및 DOM으로 가져오기 let computerNum = parseInt(Math.random()*100)+1; let userInput = document.getElementById("user-input"); let playButton = document.getElementById("play-button"); let resultArea = document.getElementById("result-area"); let chanceArea = document.getElementById("chance-area"); let..

DOM을 활용하여 HTML태그에 스타일을 적용해 보다. DOM 스타일 속성 실습 스타일 변경 Case 1) 자바스크립트 코드로 스타일 직접 작성하기 // + 버튼에 클래스속성 추가하기 btn.addEventListener("click", () => { // 간단한 스타일 변경은 자바스크립트 코드로 구현 let h1Tag = document.getElementsByTagName("h1")[0]; let btn = document.getElementsByTagName("button")[0]; h1Tag.style.color = "yellow"; h1Tag.style.background = "black"; 간단한 스타일을 적용할 때 사용하는 방법이다. DOM으로 태그네임을 통해서 가져온 태그는 유사배열이니까 ..