본문 바로가기

Javascript

Javascript 2023. 8. 21. [Javascript] .map() map() 이란 map() 메서드는 배열 안의 모든 요소들을 각각 순회하며 그 요소들에게 주어진 함수(callback 함수)를 호출한 결과를 모아 새로운 배열을 반환한다. const arr = [1, 3, 5, 10]; // arr 의 요소들을 각각 순회하며 * 2를 하여 반환한다. const map = arr.map((item) => item * 2); console.log(map); // Array [2, 6, 10, 20] 형태 arr.map(callback(currentValue[, index[, array]])[, thisArg]) callback: 새로운 배열 요소를 생성하는 함수 currentvalue: 처리할 현재 요소 index: 현재 요소 인덱스 [Optional] array: map(..
Javascript 2023. 8. 16. [Javascript] .substring() .split() 메서드는 String(문자열) 객체를 시작 index 부터 종료 index 전 까지 문자열의 부분 문자열을 반환한다. 형태 .substring(indexStart[, indexEnd]) .substring(뱐환문자열의 시작 인덱스[, 옵션. 반환문자열의 마지막 인덱스 (포함하지 않음.)]) 반환값은 기존문자열의 부분 문자열을 반환한다. 예시 indexStart와 indexEnd 값을 지정하여 문자열 반환하기 const str = '행복한 나날들의 연속'; // 2번째 index 부터 6번째 이전 index (5) 까지 반환 console.log(str.substring(2,6)); // '한 나날' indexStart만 지정하여 문자열 반환하기 const str = '행복한 나날들의 연속..
Javascript 2023. 8. 16. [Javascript] .split() .split() 메서드 사용해보기 .split() 메서드는 String(문자열) 객체를 지정한 구분자를 사용해서 여러개의 문자열로 나눈다. 형태는 .split(separator, limit) 형태이다. .split(문자열을 끊어야 할 부분을 나타내는 문자열, 반환 문자열의 마지막 인덱스(인덱스 )) 반환값은 잘라낸 문자열들을 담은 Array가 반환된다. 예시 공백(띄어쓰기 ' ')을 기준으로 문자열을 잘라내기 const str = '잘라낼 문자열을 테스트 해보겠습니다.'; //공백(띄어쓰기 ' ')을 기준으로 문자열을 잘라낸다. const str1 = str.split(' '); console.log(str1); // ['잘라낼', '문자열을', '테스트', '해보겠습니다.'] console.log(st..
Javascript 2023. 6. 17. [Javascript] 함수 선언식 & 함수 표현식 & 화살표 함수 함수 선언식: function helloA() {} 함수 표현식: let helloB = function() {} 화살표 함수: let hello = () ⇒ {} 함수 선언식 함수 이름을 선언해서 표현하는 방식 💡 호이스팅이 일어난다. // 호이스팅이 일어나 에러가 발생하지 않음 console.log(helloA()) // '안녕하세요.' function helloA () { return '안녕하세요.' } 함수 표현식 함수를 변수에 담아서 표현하는 방식, 호이스팅이 일어나지 않는다. // 호이스팅이 일어나지 않아 에러 발생 console.log(helloB()) // Error let helloB = function () { return '안녕하세요.'; } 화살표 함수 함수 표현식에서 functio..
Javascript 2023. 6. 15. [Javascript] 호이스팅(hoisting) 호이스팅 이란? Javascript 에서 호이스팅(hoisting)이란 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미한다. Javascript 매커니즘 상 변수와 함수 선언은 맨 위로 이동된다. 여기서 인터프리터란 뭘까 궁금하여 검색을 해봤다. 인터프리터란 코드를 위에서부터 한 줄씩 읽어 내려가며 실행하는 프로그램을 말하는데 Javascript 는 기본적으로 인터프리터 언어라고 한다. 변수 선언의 호이스팅 Javascript는 초기화를 제외한 선언만 호이스팅 한다. var 의 호이스팅 변수 선언시 var 로 선언한 경우 호이스팅 시 undefined 로 변수를 초기화 한다. 그러므로 호이스팅시 에러를 반환하지 않는다. console.log(num); // 호이스팅한 var..
Javascript 2023. 2. 10. [Javascript] Scroll Spy (스크롤 스파이) 적용하기 예전에 작업을 하면서 스크롤 스파이는 플러그인을 사용했었는데 그때 생각했던게 나중에는 직접 구현을 해봐야지! 라고 생각했어서 이번에는 직접 구현을 해보았다😎 Javascript 코드 // 윈도우 스크롤 이벤트 (스크롤을 했을 때 발생) window.addEventListener("scroll", () => { // 1. 섹션들을 querySelectorAll을 통해 변수에 담는다. const sections = document.querySelectorAll("section"); // 2. Gnb 메뉴들을 querySelectorAll을 통해 변수에 담는다. const gnbItems = document.querySelectorAll(".gnb__item"); // 3. forEach 문을 통해 섹션들을 ..
Javascript 2023. 2. 10. [Javascript] 메뉴 클릭시 네비게이션 높이만큼 띄우고 섹션으로 이동하기 네비게이션 메뉴를 눌렀을 때, 원하는 섹션으로 단순하게 이동하는 것은 간단하다. a 태그의 link 에 해당 섹션의 id 값을 넣는 것이다. 하지만 이렇게만 해주면 네비게이션을 fixed로 위치시켜준 경우 해당 섹션으로 갔을 때 네비게이션 높이만큼 섹션이 가려진다는 단점이 있다. 그 단점을 해결하기 위해 Javascript 를 이용하여 코드를 짜보았다. Javascript 코드 // 1. 네비게이션 메뉴들을 querySelectorAll을 통해 변수에 담는다. const gnbItems = document.querySelectorAll(".gnb__item"); // 2. 섹션들을 전부 querySelectorAll을 통해 변수에 담는다. const sections = document.querySelec..
Javascript 2023. 2. 9. [Javascript] 내 사이트에 구글 지도 사용하기 (Google map API) 🗺️ 일단 구글 지도를 사용하려면 구글 클라우드에서 발급하는 API를 발급받아야 한다. API 발급 방법 1. 아래 링크(구글 지도 플랫폼) 에 접속한 뒤, 시작하기 버튼을 클릭한다. https://developers.google.com/maps/gmp-get-started?hl=ko 2. 이후 나오는 화면에서 가입하여 API 키 받기 버튼을 클릭한다. 3. 결제 사용 설정이 안 되어있다면, 결제 계정 만들기 버튼을 눌러서 사용 설정을 해준다. (결제 계정 만들기 부분은 개인정보와 관련된 부분이므로 화면은 생략한다.) 4. 결제 계정 사용 설정을 한 뒤, 이런 창이 뜨면 선택들을 해준 뒤 제출 버튼을 눌러준다. 5. 그럼 이제 API 키 발급은 완료되었다. 이 키를 script 영역에 넣어야 하기때문에, 잘 ..

티스토리툴바