본문 바로가기

전체 글69

[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.

티스토리툴바