본문 바로가기
728x90

JavaScript97

[JavaScript] append(), prepend() 요소 추가 메서드 append() - 컨텐츠를 선택된 요소 내부의 끝 부분에서 삽입 prepend() - 콘텐츠를 선택한 요소 내부의 시작 부분에서 삽입 after() - 선택한 요소 뒤에 컨텐츠 삽입 before() - 선택된 요소 앞에 컨텐츠 삽입 '내용' 이렇게 태그가 있을경우 append() 는 '내용' 여기에 값이들어감 prepend() 는 여기에 값이들어감 '내용' after() 는 '내용' 여기에 값이들어감 before() 는 여기에 값이들어감 '내용' 2023. 7. 21.
[JavaScript] String.prototype.padStart() , padEnd() padStart() 메서드는 현재 문자열의 시작을 다른 문자열로 채워, 주어진 길이를 만족하는 새로운 문자열을 반환한다. 채워넣기는 대상 문자열의 시작(좌측)부터 적용된다. 메소드에 원하는 문자열과 길이를 매개변수로 전달하기만 하면 된다. 그러면 전달받은 길이를 만족할 때 까지 문자열이 채워진다. padStart() 메소드를 사용하여 이를 시작 부분에 적용하고, padEnd() 메소드를 사용하여 문자열 끝 부분에 적용한다. const padded = '15'; padded.padStart(4, '0'); // "0015" const string = 'hi'; string.padStart(3, 'c'); // "chi" string.padEnd(4, 'l'); // "hill" 문법 아래 코드는 메소드를 .. 2023. 7. 20.
[JavaScript] Math객체, parseInt 올림, 내림, 반올림과 같은 수학적 처리를 위하여 Math 내장 객체를 사용한다. Math.ceil(x) x보다 크거나 같은 수 중에서 가장 작은 정수를 반환한다. (올림 처리) Math.ceil(1.234) // 2 Math.ceil(1.567) // 2 Math.floor(x) x보다 작거나 같은 수 중에서 가장 큰 정수를 반환한다. (버림 처리) Math.floor(1.234); // 1; Math.floor(1.567); // 1; Math.max([x[, y[, …]]]) 0개 이상의 인수에서 제일 큰 수를 반환한다. Math.max(-3, 2); // 2 Math.max(1, 2); // 2 Math.max(1, 2, 3, 6); // 6 Math.random() 0과 1 사이의 난수를 반환한.. 2023. 7. 18.
[JavaScript] 유용 라이브러리 1. Chart.js 웹페이지 차트만들기에 유용하다. 관리자 페이지 만들 때 통계를 이쁘게 보여준다. https://cdnjs.com/libraries/Chart.js js 파일 다운받거나 cdn 버전으로 구해서 html 파일에 넣으면 설치 끝. https://www.chartjs.org/docs/latest/ Chart.js 홈페이지 예제 코드 아무데나 붙여넣기 하면 차트 나온다. 2. Animate On Scroll 스크롤 내리면 요소가 서서히 등장하는 애니메이션을 만들 수 있다. https://github.com/michalsnik/aos 여기서 css파일, js 파일 cdn버전 찾아서 html 파일에 넣고 그 다음에 밑에 https://michalsnik.github.io/aos/ 위 사이트에서 .. 2023. 7. 3.
[JavaScript] function(e), 이벤트 버블링, 브라우저 이벤트 addEventListener("click", function (e) { ... }); function (e)는 event 관련 object를 받는 argument다. 'click'이라는 이벤트가 발생했을 때 이벤트에 관한 정보가 담기는 이벤트 객체가 생성된다. 이때 유일한 매개변수로 이벤트 객체가 전달되는데, 'e'라고 이름을 붙여준 바로 이것이다. 이벤트 객체에는 발생한 이벤트에 대한 여러 정보값이 담긴다. (ex 마우스 이벤트 -> 마우스의 위치 정보 등) 이를 활용하기 위해 'e'로 이벤트 객체를 받아줘야 한다. 이벤트 객체 e 이벤트 객체는 이벤트가 발생했을 때 이벤트를 발생시킨 요소와 발생한 이벤트에 대한 정보가 담겨있다. 이벤트 객체는 이벤트 핸들러의 첫 번째 인자로 받는다. 위치는 첫 번째.. 2023. 6. 30.
[React] Modal창 띄워졌을 때 body 스크롤 안되게 하기 modal이 떠 있을 때 스크롤에 대한 설정을 따로 하지 않으면 뒷쪽 화면이 움직일 수 있다. 뒷면이 움직이지 않도록 모달이 떠 있을 땐 스크롤을 금지하고, 모달이 사라지면 가능하도록 설정해주어야 한다. eventListener를 사용하는 방법 화면을 움직이는 이벤트에 대해 모두 반응하지 않게 설정한다. function Modal(props) { useEffect(() => { // modal이 떠 있을 땐 스크롤 막음 disableScroll(); // modal 닫히면 다시 스크롤 가능하도록 함 return () => enableScroll(); }, []); // 생략 } export default Modal; useEffect를 사용해 component가 생성될 때 disableScroll이 실행.. 2023. 6. 29.
[React] 리액트훅스 - useReducer React에서 컴포넌트의 상태 관리를 위해 기본적으로 가장 많이 쓰이는 hook은 setState() 함수이다. 좀 더 복잡한 상태 관리가 필요한 React 컴포넌트에서는 setReducer() hook 함수를 사용할 수 있다. Redux 패턴 const [, ] = useReducer(, , ) reducer 함수는 현재 상태(state) 객체와 행동(action) 객체를 인자로 받아서 새로운 상태(state) 객체를 반환하는 함수다. dispatch 함수는 컴포넌트 내에서 상태 변경을 일으키기 위해서 사용되는데, 인자로 reducer 함수에 넘길 행동(action) 객체를 받는다. 행동(action) 객체는 관행적으로 어떤 부류의 행동인지를 나타내는 type 속성과 해당 행동과 괸련된 데이터를 담고 .. 2023. 6. 28.
[React] useState,Props로 장바구니 기능, 상태관리 쇼핑몰 장바구니 app.js, ItemList.js, Cart.js 파일 1. 장바구니의 기능 구현하기 - [장바구니 담기] 버튼을 이용해 장바구니에 해당 상품이 추가되도록 구현 - 장바구니 내 [삭제] 버튼을 이용해 장바구니의 상품이 제거되도록 구현 - 장바구니의 상품 갯수의 변동이 생길 때마다, 상단 내비게이션 바에 상품 갯수가 업데이트되도록 구현 2. app.js 파일에서 state와 메소드를 생성하고 웹 페이지인 ItemList와 Cart에 props으로 전달 3. itemList와 Cart에서는 cartItem, Item, Nav, OrderSummary 컴포넌트를 사용 4. 상품 목록(items)과 장바구니 목록(cartItems) 상태로 관리하기 위해 React의 Hook을 사용 // 상품 .. 2023. 6. 27.
[Node.js] readline 모듈로 입출력 받기 readline 모듈이라고 하는 낯선 것을 처음 접한 것은 Node.js로 백준 문제를 풀기 위해 구글링을 할 때였다. 문제 뿐만이 아닌 입력과 출력에 신경을 써야 했다. readline이란? Readable Stream에서 한 번에 한 줄 씩 데이터를 읽기 위한 인터페이스를 제공하는 모듈이다. 사용법 readline 모듈 불러오기 const readline = require("redaline"); 인터페이스 생성하기 const rl = readline.createInterface({ input: process.stdin, output: process.stdout, }); 입출력을 처리하는 코드 작성하기 rl.on("line", (line) => { /*입력받는 값을 처리하는 코드*/ rl.close().. 2023. 6. 24.
[JavaScript] fetch 란 ? fetch가 나오기 전까진 자바스크립트에서는 ajax를 쓰기란 매우 까다로웠다. AJAX ? JavaScript의 라이브러리 중 하나이며, Asynchronous Javascript And Xml(비동기식 자바스크립트와 xml의 약자)이다. AJAX를 쓰는 이유는 브라우저가 가지고 있는 XMLHttpRequest 객체를 이용해서 전체 페이지를 새로 고치지 않고도 페이지의 일부만을 위한 데이터를 로드할 수 있기 때문에 사용한다. XMLHttpRequest ? 대부분의 웹 브라우저에서는 서버로부터 데이터를 요청하는 XML 객체들을 내장하고 있다. 이름만 보면 XML 데이터만 다룰 수 있을 것 같지만 모든 데이터를 다룰 수 있으며, AJAX 프로그래밍에서 주로 사용한다. XMLHttpRequest를 이용하면 .. 2023. 6. 18.
728x90