'📃 Front-End' 카테고리의 글 목록

JavaScript 문자열 관련 정리

2023.01.05

문자열을 배열 형태로 변환 ➡ .split() const word = 'apple' word.split('') // ['a','p','p','l','e'] 배열의 요소를 하나의 문자열로 변환 ➡️ .join() 매개변수 자리에 구분자를 넣지 않으면, 배열의 요소들이 쉼표로 구분이되고, 구분자가 빈 문자열이면 공백 없이 연결 됩니다. const animals = ['rabbit', 'gorilla' , 'lion', 'bear'] animals.join() // 'rabbit,gorilla,lion,bear' animals.join('') // 'rabbitgorillalionbear' animals.join(' ') // 'rabbit gorilla lion bear' animals.join(' & ')..

📃 Front-End/Next.js

Next.js - 뒤로가기 할 때 이전 스크롤 위치 유지

2022.12.21

_app.tsx const router = useRouter() useEffect(() => { window.history.scrollRestoration = 'auto' const cacheScrollPositions: Array = [] let shouldScrollRestore : null | {x: number; y: number} router.events.on('routeChangeStart', () => { cacheScrollPositions.push([window.scrollX, window.scrollY]) }) router.events.on('routeChangeComplete', () => { if (shouldScrollRestore) { const {x, y} = shouldScr..

📃 Front-End/JavaScript

replace 사용해서 문자열 치환(RegExp 객체 사용)

2022.12.12

알고리즘 공부 하던 중 정규식을 사용해서 문자열을 치환하는 방법을 새로 알게 되었습니다. 우선 replace() 메서드는 특정 문자열을 치환 할 때 사용 합니다. ✔ 하지만, 문자열에서 변경하려는 문자가 여러 번 반복될 경우 첫 번째로 발견한 문자열만 치환 합니다. 사용법 replace('찾을 문자열 or 정규식', '변경하는 문자열') 예시 let str = "사과, 배, 수박"; let strChange = str.replace("배", "오렌지"); console.log(strChange); // 사과, 오렌지, 수박 정규식 ❓ ✔ 정해진 규칙을 사용해 모든 문자를 변환할 수도 있고 숫자,번호나 맨 처음, 맨 뒤만 변환할 수 있습니다. 정규식 옵션 옵션 g 모든 패턴 체크(global) i 대소문자..

📃 Front-End/JavaScript

모듈화

2022.11.17

다른 파일에 있는 자바스크립트의 기능을 특정 파일에서 사용할 수 있는 것을 의미합니다. Import & Export 임포트(Import)와 익스포트(Export)는 자바스크립트의 코드를 모듈화 할 수 있는 기능 기본 문법 export 변수, 함수 다른 파일에서 가져다 쓸 변수나 함수의 앞에 export 라는 키워드를 붙입니다. 익스포트된 파일은 임포트로 불러와 사용할 수 있습니다. import { 불러올 변수 또는 함수 이름 } from '파일 경로'; 예제 math.js export let pi = 3.14; export function sum(a, b) { return a + b; } app.js import { pi } from './math.js'; console.log(pi); // 3.14 i..

📃 Front-End/JavaScript

브라우저 객체 모델(BOM, Browser Object Model)

2022.11.17

자바스크립트를 이용하면 브라우저의 정보에 접근하거나 브라우저의 여러 기능들을 제어 할 수 있습니다. 이때 사용할 수 있는 객체 모델이 바로 브라우저 객체 모델(BOM, Browser Object Model)입니다. BOM window Global Context(전역 공간)이자 브라우저 창을 나타내는 객체 navigator 브라우저와 운영체제 대한 정보 screen 사용자 환경의 디스플레이(모니터) 정보를 가지는 객체 location 현재 URL 에 대한 정보, 브라우저에서 사용자가 요청하는 URL history 현재 브라우저가 접근했던 URL history document 현재 문서에 대한 정보 참고 http://www.tcpschool.com/javascript/js_bom_window https://..

📃 Front-End/JavaScript

문서 객체 모델(DOM, Document Objects Model)

2022.11.17

XML이나 HTML 문서에 접근하기 위한 일종의 인터페이스입니다. 이 객체 모델은 문서 내의 모든 요소를 정의하고, 각각의 요소에 접근하는 방법을 제공합니다. 넓은 의미 웹 브라우저가 HTML 페이지를 인식하는 방식 좁은 의미 Document 객체와 관련된 객체의 집합 DOM 안에는 우리가 정의한 요소들이 Tree 형태로 구성되어 있습니다. 이것을 이용하여 JS로 웹페이지를 제어할 수 있습니다. HTML의 , 그리고 의 안에 각각의 tag 들을 요소(element)라고 부르고, JS에서는 문서 객체라고 부릅니다. DOM을 이용하면 HTML 태그를 추가, 수정,삭제 등 할 수 있습니다. DOM Tree 정리 브라우저가 HTML 파일을 읽을 때 브라우저가 이해할 수 있는, 메모리에 보관할 수 있는 objec..

📃 Front-End/JavaScript

==(동등 연산자)와 ===(일치 연산자)

2022.11.17

동등연산자(==)는 피연산자들의 값만 비교합니다. 즉, == 연산자는 타입 변환이 필요한 경우 타입 변환을 한 후에 동등하지 비교한다. 일치연산자(===)는 피연산자들의 값과 타입을 모두 비교합니다. 즉, === 연산자는 타입 변환을 하지 않고 두 값이 같은 타입이 아닌 경우 ===는 false를 반환한다. 예시 console.log('01' == 1) // true, 문자열 '01'이 숫자 1로 변환된 후 비교 진행 console.log(true == 1) // true, true 는 1, false 는 0으로 변환된 후 비교 console.log(false == 0) // true console.log(0 === false) // false null이나 undefined와 비교 변수에 값이 null ..

📃 Front-End/JavaScript

엄격모드(use strict)

2022.11.17

ECMAScript5 부터 도입된 기능으로 기존에 무시되던 에러들로 하여금 에러를 발생 시킵니다. 사용하는 이유 자바 스크립트는 기존 기능을 변경하지 않으면서 새로운 기능을 추가해왔기 때문에 호환성 문제가 없었습니다. 하지만 ES5부터 새로운 기능이 추가되고 기존 기능의 일부가 변경 되었습니다. 그에 따라 기존 기능이 변경되어 호환성에 문제가 생기게 되었고, 이를 방지하기 위한 것이 엄격 모드(strict mode) 입니다. 사용하는 방법 "use strict"; // 이 코드는 모던한 방식으로 실행됩니다. ... 최상단에 선언 합니다. 위에 처럼 사용하면 파일 전체에 적용이되고, 원하는 함수 스코프에만 적용이 가능 합니다. 참고 MDN, use strict https://ko.javascript.inf..

티스토리툴바