본문 바로가기
728x90

JavaScript97

[JavaScript] 고급 문법 Promise Promise ? 약속, 자바스크립트에서 제공하는 비동기를 간편하게 처리할 수 있도록 도와주는 오브젝트이다. State Producer(정보제공) vs Consumer(결과를 사용) promise의 상태 3가지 state : 1. (대기중)프로미스가 수행 중이면 pending 상태 -> 2. (이행됨)성공적으로 다 끝내게 되면 fulfilled 상태가 됨 , 3. (거부됨)네트워크 문제가 생기면 rejected 상태가 됨 이행,거부됨 상태를 처리됨(settled) 상태라고 한다. 대기 중 상태일 때만 이행됨,거부됨 상태로 변할 수 있다. 1. Producer 2. Consumers : then, catch, finally Promise의 장점 코드 가독성 향상 비동기 작업 처리 개선 비동기 로직에서 더 .. 2023. 3. 17.
[React] Redux 상태 관리 라이브러리 Redux ? Redux란 2015년에 Dan Abramov씨와 Andrew Clark씨에 의해 작성된 상태 관리 라이브러리이다. Flux 아키텍처 의 영향을 받아 프론트 엔드에서의 데이터 관리를 쉽고 견고하게 해준다. Store ：상태를 관리하는 곳 즉 저장소 Reducer ：상태를 변화 시키는 곳 , 즉 변수를 저장하는곳 Actions ：상태를 변화시키는 함수 , 이름처럼 뭔가 액션을 취하는곳 리액트에서 리덕스를 사용하려면 redux와 react-redux를 설치해야 한다. 또한 액션 생성 함수를 작성할 수 있도록 하기 위해 추가적으로 redux-thunk를 설치해야 한다. 상태 ? 상태 영어로 state. state는 유동적으로 변할 수 있는 데이터를 의미한다. 리덕스에서 사용되는 키워드 ? 액션 .. 2023. 3. 17.
[React] Link 페이지 이동 시 스크롤 맨 위로 오게 하기 React로 웹을 만들다 발견한 문제가 있었다. 그것은 Link to로 화면 전환을 할 때 Link to가 있는 버튼이 아래에 있으면 화면 전환시에도 그 위치인 아래로 이동하였다. 상단으로 페이지 이동이 되어야 하는데 버튼 누른 위치 그대로 넘어가기 때문에 UX상 좋지 않아 해결이 필요했다. 더보기 UX는 사용자 경험의 약자로, 사용자가 어떠한 서비스/ 제품을 직간접적으로 이용하면서 느끼는 종합적인 만족을 의미한다. 스크롤 컴포넌트를 만들고 컴포넌트를 index.js에 선언하여 문제를 해결하였다. index.js의 Router 안에 선언해야 pathname을 인식하므로 Router 안에 선언하였다. ScrollToTop.js 생성 index.js 이렇게 적용시키면 페이지 이동하여 화면 전환 시 스크롤이 .. 2023. 3. 15.
[JavaScript] 자바스크립트로 키보드 이벤트(keydown/keyup) 추가하기 키보드 이벤트 ? 사용자가 키보드를 작동했을 때 발생하는 이벤트 윈도우 단축키나 게임을 만들 때, 숫자 계산할 때 숫자나 방향키 등의 키보드 입력 이벤트를 지원한다. UX를 개선할 수 있다. keydown 사용자가 눌렀을 때 실행/ 눌린 키의 코드 제공/ 키보드를 누르고 있을 때 한번만 실행 keyup 사용자가 키를 눌렀다가 뗄 때 실행/ 눌려져있던 키가 놓아졌을 때 keypress 사용자가 눌렀던 키의 문자가 입력 되었을 때/ 키보드 버튼을 누르는 순간/ 키보드를 누르고 있을 때 계속 실행 Ctrl, Alt, Shift 키 등은 keydown에선 작동하지만 keypress에선 작동하지 않는다. 예전엔 keypress라는 이벤트도 사용되었지만 현재는 deprecated되어 권장되지 않는다. addEven.. 2023. 3. 12.
[React] 리액트 Swiper 사용하기 (리액트 터치 슬라이드) Swiper ? 우리들은 슬라이드를 만들 때 라이브러리를 많이 사용한다. 그 중 터치 슬라이드가 되는 라이브러리가 Swiper 이다. 적용하는 법 1. Swiper 설치 //terminal npm i swiper swiper npm을 설치한다. 2. 스와이퍼 슬라이드 사이트 : https://swiperjs.com/ Swiper - The Most Modern Mobile Touch Slider Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior. swiperjs.com 3. Get Started 클릭 --> React 연결하기 4. 상단 Demos.. 2023. 3. 11.
[JavaScript] DOM이벤트 - change이벤트(onchange) 사용법 change 이벤트 (onchange) ? - HTML 요소의 값이 변경될onchange 때 발생 - 이벤트가 발생하는 DOM 요소로는 , , , ,, , , , , , , , , , , , , and 가 있다. - 는 선택할 수 있는 여러 개의 옵션 중 하나 이상의 옵션을 선택할 때 사용하는 DOM 요소이다. 사용자가 선택하는 옵션을 바꿀 때마다 change 이벤트가 발생되고, 이벤트가 일어나는 시점에 특정 함수를 실행하려면 태그에 onchange 속성을 사용해 처리할 수 있다. -보기 중에 한 개가 선택 되었을 때 바로 이벤트가 발생 ! 즉 value값을 넘겨준다. JavaScript React TypeScript 2023. 3. 10.
[JavaScript] 정규 표현식 2)정규식 특수 문자, 자주 쓰는 정규식 정리 정규 표현식 특수 문자, 설명 자주 쓰는 정규식 정리 1. 공백없는 숫자와 대소문자 /^[a-zA-Z0-9]*$/ 2. 공백포함 숫자와 대소문자 /^[a-zA-Z0-9 ]*$/ 3. 한글포함 특수문자와 공백 /[^?a-zA-Z0-9/]/ 4. 한글제외 특수문자와 공백 /[^-가-?a-zA-Z0-9/ ]/ 5. 영문자, 소문자, 숫자, "-","_" 로만 구성된 길이 2~10자리 사이의 문자열 /^[a-z0-9_-]{2,10}$/ 6. 19자리 숫자와 "-"로 구성된 신용카드 번호 /^[0-9-]{19}$/ 7. 숫자로 구성된 4자리-4자리-4자리-4자리 유형 체크 (ex. 신용카드 번호) /^[0-9]{4}[-\s\.]?[0-9]{4}[-\s\.]?[0-9]{4}[-\s\.]?[0-9]{4}$/ 8. 영.. 2023. 3. 9.
[JavaScript] 자바스크립트 정규 표현식 1)정규식 함수 정규 표현식 (Regular Expression) ? 정규 표현식은 문자열에 포함된 특정 문자 조합을 찾기 위해 사용되는 패턴이다. 실무에서 많이 사용하는 사례로 사용자가 입력한 이메일 정보가 이메일 형식에 맞는지, 전화번호가 전화번호 형식에 맞는지 등 사용자로부터 입력받은 데이터가 프로그램에서 받고자 하는 데이터 형식과 일치하는지 체크할 때 등이다. 정규 표현식을 줄여서 정규식이라 하기도 한다. 정규식 만들기 1. 슬래시(/)로 감싸는 패턴인 정규식 리터럴을 사용하는 방법 const regexp = /World/; 2. RegExp 객체의 생성자 함수를 사용하는 방법 생성자 함수를 사용하면 정규식이 실행 시점에 컴파일된다. 정규식 패턴이 변경될 수 있거나 사용자 입력이나 데이터베이스 등 다른 출처로부터.. 2023. 3. 9.
[JavaScript] 자바스크립트 내장 객체 map()함수(배열 메소드) 배열 처리에서 자주 나오는 map과 filter 중 map에 대해 알아보자 map() ? map() 함수는 배열의 데이터가 Object형일 때, 배열에 담긴 Object를 새로운 형태의 Object로 변환해서 배열로 반환한다. 매번 사용하는 곳에서 자주 사용하게 되는 데이터를 다룰 때 map()을 통해 새로운 키(key)를 배열의 각 오브젝트 요소에 추가하여 필요한 곳에서 바로 사용할 수 있도록 한다. 또 서버에서 데이터베이스의 데이터를 가져왔을 때 배열에 담긴 각 오브젝트 요소에 데이터 필드, 즉 키-값 쌍이 많고, 이를 호출해서 사용하는 클라이언트의 배열에 담긴 각 오브젝트 요소의 데이터 필드 중 일부만을 사용할 때 서버에서 클라이언트로 데이터를 전송하기 전에 map()함수를 통해 클라이언트에서 사용.. 2023. 3. 8.
[JavaScript] 자바스크립트 내장 객체 ( String 객체 종류) 1. Object 객체 //빈 객체 생성 let person = new Object(); //멤버 설정 person.firstName = "John"; person.lastName = "Doe"; person.age = 1200; person.getFullName =function() { return this.firstName + " " + this.lastName; }; console.log(person.getFullName()); 2. String 객체 문자열을 다루기 위한 객체 length - 문자열 길이를 반환하는 함수 let txt = "ABCDEFG"; let sln = txt.length; length 함수 실무 사용 - 회원 가입 시 '비밀번호 길이가 최소 8자리 이상 16자리 이하'와 같.. 2023. 3. 6.
728x90

티스토리툴바