본문 바로가기

Front-End: Web

 (163)
Incognito Mode란? (+Next.js에서 query 값이 아직 없을 때) Incognito Mode(인코그니토 모드) Incognito Mode란? =프라이빗 브라우징 사용자들이 원치 않는 쿠키가 저장되는 일이나, 온라인 추적이 이뤄지는 것을 걱정치 않고 인터넷 서핑을 할 수 있도록 해주는 기술 크롬의 경우 '시크릿 브라우징(시크릿 모드)' 기능이 이것이다! 크롬 시크릿 모드 사용하기 오른쪽 상단에 더보기 > 새 시크릿 창 클릭 크롬 시크릿 모드에서 userRouter()에 접근하기 코드 import { useRouter } from "next/router"; export default function Detail() { const router = useRouter(); const [title, id] = router.query.params; return ( {title} )..
[js] '?.' : 옵셔널 체이닝(optional chaining) 옵셔널 체이닝 '?.' 스펙에 추가된 지 얼마 안된 문법. 따라서 구식 브라우저는 폴리필이 필요함. 옵셔널 체이닝이 필요한 이유 (with 예제) ex 1) 사용자가 여러 명 있는데, 그 중 몇 명은 주소 정보를 가지고 있는 경우를 생각하자. 이 때, user.address.street로 접근하면 에러가 발생한다. let user = {}; // 주소 정보가 없는 사용자 alert(user.address.street); // TypeError: Cannot read property 'street' of undefined ex 2) 브라우저에서 동작하는 코드를 개발할 때 문제가 발생하는 경우도 있다. 자바스크립트로 페이지에 존재하지 않는 요소(Element)에 접근하여 요소의 정보를 가져오려고 하는 경우다..
[작성중] [js] 정규표현식 알기 정규표현식 문자열에서 특정 문자를 찾기 위한 패턴 ReqExp의 exec(), test(), 그리고 String의 match(), matchAll(), replace(), replaceAll(), search(), split()과 함께 사용 가능 사용 방법 1. 정규 표현식 리터럴 슬래시로 패턴을 감싸서 작성 스크립트를 불러올 때 컴파일됨. 그래서 바뀔 일이 없는 패턴일 때 사용하면 성능이 향상됨 const re = /ab+c/ 2. RegExp 객체의 생성자 호출 런타임에 컴파일됨. 그래서 바뀔 수 있는 패턴이나, 사용자의 입력과 같이 외부 출처에서 가져오는 패턴일 때 사용함 const re = new RegExp('ab+c') 작성하기 단순 패턴 사용 문자열을 있는 그대로 탐색할 때 사용 ex. /a..
[js] Set Set 객체에 사용 중복을 허용하지 않는 데이터 집합 1(숫자)와 '1'(문자열)을 다른 것으로 간주한다. 즉, 중복을 확인하기 위해서 강제로 자료형을 변형하지 않는다. forEach나 for of로 값에 접근 가능 ⭐배열 내 중복 원소를 제거하고 싶을 때, 배열을 Set으로 바꿨다가 배열로 다시 바꾸면 쉽게 해결된다. const mySet = new Set(); // {} mySet.add(1); // {1} mySet.add(2); //{1,2} mySet.size; //2 mySet.delete(1); //{2} mySet.has(2); //true mySet.has(1); //false myset.clear(); // {} let arr = [...mySet]; //Spread 연산자를 이용해 a..
[js] sort() vs sort((a,b) => a - b) [ 1, 2, 10, 3, 4, 23] 이 있을 때, sort() : [ 1, 10, 2, 23, 3, 4] sort((a,b) => a - b) : [1, 2, 3, 4, 10, 23] ➡️ 그냥 sort()는 문자열로 정리한다! 그래서 숫자별로 정리하고 싶을 땐 무조건 sort((a,b) => a - b)로 작성해야 한다. https://school.programmers.co.kr/questions/28509 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr
[js] NaN(Not A Number)이란? (+isNaN, Number.isNaN) 정의 NaN은 Not a Number, 즉 숫자가 아닌 모든 것을 의미한다. 특징 1. 모든 NaN은 같지 않다. NaN은 비교연산자를 사용하면 모두 같지 않게 나온다. 오직 NaN만이 자기 자신과 비교했을 때 같지 않음이 나온다. NaN === NaN; // false Number.NaN === NaN; // false isNaN(NaN); // true isNaN(Number.NaN); // true function valueIsNaN(v) { return v !== v; } valueIsNaN(1); // false valueIsNaN(NaN); // true valueIsNaN(Number.NaN); // true 2. 숫자를 표현하는 문자열도 숫자다. 그러면 숫자로만 구성된 것만 해당되지 않느냐..
[js] parseInt vs plus(+) 공통점 문자열 숫자를 정수 숫자로 만들어준다. (string -> int) 숫자로 이뤄지지 않은 문자열이라면 NaN을 반환한다. 차이점 parseInt('') ➡️ NaN +'' ➡️ 0 https://stackoverflow.com/questions/17106681/parseint-vs-unary-plus-when-to-use-which parseInt vs unary plus, when to use which? What are the differences between this line: var a = parseInt("1", 10); // a === 1 and this line var a = +"1"; // a === 1 This jsperf test shows that the unary opera..
[js] Math - ceil, floor, round (+ trunc) 소수점 고려 1) ceil 반환: 올림한 값 천장! 2) floor 반환: 내림한 값 바닥! 3) round 반환: 반올림한 값 그 중간! 공통점 null 넣으면 0 반환함 숫자 아닌 값 넣으면 Nan 반환함 소수점 고려X trunc 반환: 소수점 버리고 숫자의 정수부분만 위의 셋과 달리 소수점과 상관없이 단순하게 동작함 https://stackabuse.com/rounding-numbers-in-javascript-using-ceil-floor-and-round/ Rounding Numbers in JavaScript using ceil(), floor() and round() In this guide, we'll take a look at how to round a number to an intege..
반응형

티스토리툴바