STUDY66 [JavaScript] Array, Object 자료형, 데이터 바인딩 Array 자료형- 여러가지 자료를 한 곳에 저장하고 싶을 때 사용하는 자료형var fruit = ['사과', 5000, 'apple']; - 대괄호를 열고 자료를 콤마로 구분해서 넣으면 여러 자료를 엑셀처럼 저장 가능하다.var fruit = ['사과', 5000, 'apple'];console.log(fruit[1]);- array 자료에서 데이터를 꺼낼 때는 대괄화 뒤에 [x]를 붙이면 된다. x번째 자료를 출력해 준다.var fruit = ['사과', 5000, 'apple'];fruite[1] = 7000;console.log(fruit[1]);- array 자료를 수정하거나 추가하고 싶으면 등호를 이용하면 된다.- 여러 자료를 하나의 변수에 저장하고 싶을 때 array를 사용하면 편리하다. .. 2024. 10. 7. [JavaScript] 이벤트 버블링, 이벤트 관련 함수들, dataset https://heeccup.tistory.com/72 [JavaScript] UI 애니메이션🌱 들어가기 전에버튼을 누르면 모달창을 띄워 보자.로그인 로그인하세요 닫기 .black-bg { display: none; width : 100%; height : 100%; padding: 30px; background : rgba(0,0,0,0.5); position : fixed; top: 0; left: 0; z-index : 5;heeccup.tistory.com이전 포스팅에서 모달창을 하나 만들어서 띄웠었다. 오늘은 모달창의 검은 배경을 누르면 모달창이 닫히는 기능을 추가해 보자. (생략) ▲ 모달창 HTML 부분이다. 모달창 오픈할 때 show-modal 클래스명을 넣어서.. 2024. 9. 30. [JavaScript] for 반복문에서 var 대신 let 사용하는 이유 보호되어 있는 글 입니다. 2024. 9. 25. [JavaScript] for 반복문 (+탭 기능) 탭 기능을 만들어 보면서 for 반복문을 배워 보자. Products Information Shipping 상품설명입니다. Product 스펙설명입니다. Information 배송정보입니다. Shipping ul.list { list-style-type: none; margin: 0; padding: 0; border-bottom: 1px solid #ccc;}ul.list::after { content: ''; display: block; clear: both;}.tab-button { display: block; padding: 10px 20px 10px 20px; float: left.. 2024. 9. 25. [JavaScript] 스크롤 이벤트 스크롤 이벤트 리스너스크롤바를 조작하면 scroll 이벤트가 발생한다. scroll 이벤트 리스너를 전체 페이지에 달면 전체 페이지를 스크롤할 때마다 원하는 코드를 실행할 수 있다.아래의 코드를 실행하면 스크롤바를 만질 때마다 '안녕'이 출력된다.window.addEventListener('scroll', function(){ console.log('안녕')}); (참고) window, document는 전체 페이지를 의미한다. window가 약간 더 큰 개념인데, scroll 이벤트 리스너는 관습적으로 window에 붙임. 스크롤 관련 유용한 기능들1. scrollY() (= pageYOffset)window.addEventListener('scroll', function(){ console... 2024. 9. 24. [JavaScript] 함수의 return 문법 & 소수 다루기 함수 function 문법- 긴 코드를 짧게 축약해서 쓸 수 있고,- 파라미터로 기능 업그레이드도 가능하다.- 오늘 배울 return을 쓰면 함수를 쓰고나서 원하는 값을 그 자리에 퉤 뱉을 수도 있다. 함수 안에서 쓸 수 있는 return 문법함수 안에서 return이라는 문법을 사용할 수 있다.return 오른쪽에 아무거나 적으면 함수가 실행되고 난 자리에 return 오른쪽에 있던 값이 남는다.function 함수(){ return 123}console.log(함수());진짜인지 확안하기 위해 함수() 실행하고 나서 123을 남기라고 적었다.출력해 보니 진짜 123이 출력된다.이렇게 함수() 실행하고 나서 그 자리에 뭔가 결과를 남기고 싶으면 return 문법을 쓰면 된다. function 함수.. 2024. 9. 23. [JavaScript] 캐러셀(이미지 슬라이드) 만들기 보호되어 있는 글 입니다. 2024. 9. 23. [React] custom hook으로 코드 재사용하기 custom hook이란?- 리액트에서 제공하는 기본 Hook들(useState, useEffect, useContext 등)을 조합해 특정 기능을 구현하고, 이를 여러 컴포넌트에서 재사용할 수 있도록 만든 것.- 함수 이름은 반드시 use로 시작해야 한다.리액트는 함수 이름이 use로 시작하면 해당 함수가 Hook이라는 것을 인식하고, 그 안에서 Hook을 사용할 수 있도록 허용한다. 이렇게 생긴 좋아요 버튼과 기능을 만들어 보며 알아보자.function Detail(){ let [like, setLike] = useState(0) return ( (생략) {like} { setLike((a) => { return a + 1 }) }}>❤ )}state를 만들고 +1 버튼도.. 2024. 9. 11. [React] state 변경 함수 사용할 때 주의점: async 자바스크립트의 sync / async 관련 상식자바스크립트는 일반적인 코드를 작성하면 synchronous(동기 방식)하게 처리하는데, 코드 적은 순서대로 코드가 실행된다는 뜻이다. 하지만 몇몇 함수(ajax, 이벤트 리스너, setTimeout 등)들을 쓸 때는 asynchoronous(비동기 방식)하게 코드가 실행된다. 이런 함수들은 처리 시간이 오래 걸리기 때문에 코드들이 순차적으로 실행되지 않고 완료되면 실행된다.console.log(1+1)axios로 get요청하고나서 console.log(1+2) 실행console.log(1+3)예를 들어 이런 코드를 실행하면 2, 4가 바로 출력되고 그 다음에 3이 출력된다.3을 출력하는 코드가 asynchoronous 처리를 지원하는 코드이기 때문이다. 3.. 2024. 9. 11. [React] PWA 세팅해서 앱으로 발행하기 PWA(Progressive Web App)- 웹 사이트를 안드로이드/iOS 모바일 앱처럼 사용할 수 있게 만드는 일종의 웹 개발 기술- React를 이용해 만든 웹 사이트를 모바일 앱으로 발행해서 쓰는데, iOS/안드로이드 앱을 발행하는 게 아니라 웹 사이트 자체를 스마트폰 홈 화면에 설치하는 것 PWA 장점1. 스마트폰, 태블릿 바탕화면에 웹 사이트 설치가 가능하다.설치된 앱 누르면 상단 URL바가 제거된 크롬 브라우저가 뜬다. 일반 사용자는 앱이랑 구분 못 함.2. 오프라인에서도 동작할 수 있다.serice-worker.js라는 파일과 브라우저의 Cache stroage로 오프라인에서도 동작할 수 있다. 그래서 자바스크립트로 게임 만들 때 유용하다.3. 설치 유도 비용이 매우 적다.앱 설치를 유도.. 2024. 9. 10. [React] 성능 개선 : batching, useTransition, useDeferredValue 리액트 18 버전 이후부터 렌더링 성능이 저하되는 컴포넌트에서 쓸 수 있는 기능이 추가되었다. 1. 일관된 batching (automatic batching)setCount(1)setName(2)setValue(3) // 여기서만 1번 재렌더링 됨state 변경 함수를 연달아서 3개 사용하면 재렌더링도 원래 3번 되어야 하지만, 리액트는 재렌더링을 마지막에 1회만 처리해 준다. 이렇게 일종의 쓸데없는 재렌더링을 방지해 주는 기능을 batching이라고 한다. fetch().then(() => { setCount(1) //재렌더링됨 setName(2) //재렌더링됨})리액트 17 버전까지는 ajax 요청, setTimeout 안에 state 변경 함수가 있는 경우에는 batching.. 2024. 9. 10. [React] 성능 개선 : 재렌더링 막는 memo, useMemo 컴포넌트가 재렌더링되면 그 안에 있는 자식 컴포넌트도 항상 함께 재렌더링 된다.이런 경우 자식 컴포넌트가 렌더링 시간이 오래 걸리는 무거운 컴포넌트라면 부모 컴포너트의 렌더링 시간이 문제가 될 수 있다. (예를 들어 자식 컴포넌트가 렌더링 시간이 10초나 걸리는 무거운 컴포넌트라면 부모 컴포넌트에 있는 버튼을 누를 때마다 10초 버벅이는 불상사가 발생한다.)그럴 때는 자식을 memo로 감싸 놓으면 된다. 테스트용으로 자식 컴포넌트를 하나 만들어 보자.(Cart.js)import { useState } from 'react';function Child(){ console.log('재렌더링됨'); return 자식 컴포넌트임}function Cart(){ let [count, setCou.. 2024. 9. 9. 이전 1 2 3 4 5 6 다음
