본문 바로가기

전체 글69

[JavaScript] setTimeout(), setInterval(), clearTimeout() 타이머 주는 법 setTimeout()지정된 시간이 지난 후 한 번 실행되는 타이머를 설정하는 함수. 지정된 시간이 지나면 전달된 함수가 실행된다.setTimeout(function(){ 실행할 코드 }, delay)function(){} : 지연 시간 지나면 실행할 함수delay : 지연 시간 (밀리초 단위, 1000ms = 1초)setTimeout(function(){ console.log('안녕');}, 1000)위 코드는 1초(1000ms) 후에 콘솔에 '안녕'이라는 메시지를 출력한다.  5초 이내 구매시 사은품 증정!위 코드는 페이지 방문시 5초 후에 '5초 이내 구매시 사은품 증정'이라는 메시지가 사라진다.  clearTimeout()setTimeout()으로 설정한 타이머를 취소할 때 사용되는 함수.즉.. 2024. 9. 6.
[React] 실습- 쇼핑몰 프로젝트 보호되어 있는 글 입니다. 2024. 9. 3.
[React] localStorage localStorage새로고침 하면 모든 state 데이터는 리셋된다.왜냐하면 새로고침 하면 브라우저는 html, css, js 파일들을 처음부터 다시 읽기 때문이다.이게 싫다면 state 데이터를 서버로 보내서 DB에 저장하거나 하면 된다.서버나 DB 지식이 없다면 loaclStorage를 이용해도 된다.유저의 브라우저에 몰래 정보를 저장하고 싶을 때 쓰는 공간이다. ▲ 크롬 개발자 도구에서 Application 탭 들어가면 왼쪽에서 많은 저장 공간들을 볼 수 있다. Local Stroage key : value 형태로 저장 가능사이트마다 5MB 정도의 문자 데이터만 저장 가능사이트를 재접속해도 남아 있음(브라우저 청소하면 삭제됨), 반영구적임Session Storage Local Stroage랑 똑같.. 2024. 8. 29.
리액트에서 자주 쓰는 if문 작성 패턴 보호되어 있는 글 입니다. 2024. 8. 29.
[React] Redux : state가 object/array일 경우 변경하는 법, 파일 분할 Redux state가 object/array일 경우 변경하는 법(Store.js)let user = createSlice({ name : 'user', initialState : {name : 'kim', age : 20}, reducers : { changeName(state){ return {name : 'park', age : 20} } }}) {name : 'kim', age: 20} 인 자료를 state를 만들었다.여기에서 'kim' → 'park' 이렇게 변경하고 싶으면 state 변경 함수인 changeName()을 사용하면 된다.  그런데 array, object 자료의 경우의 state변경은 state를 직접 수정도 가능하다.(Store.js)let user .. 2024. 8. 27.
[React] Redux : store의 state 변경하는 법 Redux store의 state 변경하는 법Redux의 state 변경은 state 수정해 주는 함수를 만들어 두고 컴포넌트에서 원할 때 그 함수를 실행해 달라고 요청하는 방식.1. store.js에 state 변경해 주는 함수 생성2. export 하기3. 필요할 때 import 해서 dispatch()로 감싸서 사용   1. store.js에 state 변경해 주는 함수 생성 (Store.js)let user = createSlice({ name : 'user', initialState : 'kim', reducers : { changeName(state){ return 'john ' + state } }}) createSlice() 안에 reducers : { } 열고 .. 2024. 8. 27.