본문 바로가기
728x90

frontend67

[JavaScript] 웹표준, ECMAScript (ES5, ES6, ES2024), JavaScript 최신 문법, JavaScript 버전 개요웹 표준이 도입된 이후, 프로그래밍 언어와 라이브러리 개발 시 대부분 웹 표준을 따르게 되어 한 번 작업으로도 많은 시간과 노동력을 절약할 수 있게 되었습니다.따라서 HTML, CSS, JavaScript와 같은 웹 표준을 준수하며 개발하는 습관을 가지는 것이 중요합니다. 웹 표준이란 ?**웹 표준(Web Standards)**은 W3C(World Wide Web Consortium) 표준화 단체에서 권고하는 기술과 규칙을 의미합니다.다양한 운영체제(OS), 브라우저, 디바이스에서도 웹페이지가 동일한 모양과 기능으로 작동하도록 보장합니다.신체적, 환경적 제약이 있는 사용자도 웹에 접근성을 가지고 원활히 이용할 수 있도록 설계된 원칙입니다https://www.w3.org/ W3CThe World Wid.. 2024. 1. 8.
[WEB] Warning: Don’t paste code into the DevTools Console that you don’t understand or haven’t reviewed yourself. This could allow attackers to steal your identity or take control of your computer 오류 내용Warning: Don’t paste code into the DevTools Console that you don’t understand or haven’t reviewed yourself. This could allow attackers to steal your identity or take control of your computer. Please type ‘allow pasting’ below to allow pasting. 경고: 이해하지 못하거나 직접 검토하지 않은 코드를 DevTools 콘솔에 붙여넣지 마세요. 이로 인해 공격자가 귀하의 신원을 도용하거나 컴퓨터를 제어할 수 있습니다. 붙여넣기를 허용하려면 아래에 '붙여넣기 허용'을 입력하세요. 해결 방법콘솔창에 'allow past.. 2024. 1. 4.
[React] TypeError: Cannot read property 'map' of undefined 발생 이유 - .map(...) 실행 시 앞 데이터가 없어서 나는 타입 오류 - array.map() 인경우 array를 확인해보면 undefined으로 되어 있을 것이다. 해결 방법 1. 렌더링 상태에서 return 할 경우 && 을 사용하여 값 여부를 체크한다. import React from 'react'; const UserList = () => { ... return ( {dataList && dataList.map((item, index) => ( {item.name} ))} ); }; 2. 스크립트에서 return 할 경우 if 문을 사용하여 값 체크를 해준다. import React from 'react'; const UserList = () => { if(dataList){ const r.. 2024. 1. 3.
[CSS] hover style 효과 삭제하기 :hover:not(.class) See the Pen Untitled by 우세림 (@yrrzbplw-the-builder) on CodePen. css 문법이라 sass 에서도 가능하다.export const Button = styled.button` background-color: #ccc; &:focus:not(.empty) { background-colo: #0090ff; }; &:hover:not(.empty) { background-colo: #0090ff; } &.user_button:not(.empty) { background-colo: #0090ff; }`; 2024. 1. 2.
[JavaScript] 배열 합집합, 교집합 반환 / Set, filter, include 합집합const arrA = [1, 4, 3, 2]; const arrB = [5, 2, 6, 7, 1];const result = [...new Set([...arrA, ...arrB])]; // [1, 4, 3, 2, 5, 6, 7]  교집합const arrA = [1, 4, 3, 2]; const arrB = [5, 2, 6, 7, 1];const result = arrA.filter(it => arrB.includes(it)); // [1, 2] 2023. 12. 30.
[JavaScript] 배열 중복 제거 / set, map, reduce, filter Set숫자/문자열 const values = [3, 1, 3, 5, 2, 4, 4, 4];const uniqueValues = [...new Set(values)]; // [3, 1, 5, 2, 4] mapconst list = [3, 1, 3, 5, 2, 4, 4, 4]; const result = [...new Map(list.map(item => [item, item])).values()];console.log(result); // [3, 1, 5, 2, 4] reduceconst list = [3, 1, 3, 5, 2, 4, 4, 4];const result = list.reduce((accumulator, currentValue) => { if (!accumulator.includes(curr.. 2023. 12. 30.
[JavaScript] 특정 위치 문자 찾기 / charAt() const str = 'qwertyuiasdfghjk'console.log(str.charAt()); // qconsole.log(str.charAt(0)); // qconsole.log(str.charAt(5)); // yconsole.log(str.charAt(-1)); //''console.log(str.charAt(a)); // error 2023. 12. 27.
[JavaScript] 대문자, 소문자 변경 / toUpperCase(), toLowerCase() 대문자 -> 소문자toLowerCase()const str = 'hello World';console.log(str.toUpperCase()); // 'HELLO WORLD'  소문자 -> 대문자toUpperCase()const str = 'hello World';console.log(str.toLowerCase()); // 'hello world'   값 비교하기- 값 비교 시 대소문자를 통일하여 비교한다. 예를 들면1) 검색창 키워드 검색2) 대소문자 구분없는 아이디var string='UPPER lower';string=string.toUpperCase();console.log(string); //UPPER LOWERstring=string.toLowerCase();console.log(string.. 2023. 12. 27.
[JavaScript] 문자열 앞, 뒤 자르기 / substring() 앞에서 자르기const str = "helloworld";console.log(str.substring(0)) // 'helloworld'console.log(str.substring(0, 0)) // ''console.log(str.substring(0, 4)) // 'hello'console.log(str.substring(0, str.length)) // 'helloworld'  뒤에서 자르기const str = "helloworld";console.log(str.substring(str.length)) // ''console.log(str.substring(str.length-1)) // 'd'console.log(str.substring(str.length-5)) // 'world' 2023. 12. 27.
728x90

티스토리툴바