본문 바로가기

전체 글69

[React] Redux : store에 state 보관, 사용하는 법 Redux store에 state 보관하는 법(Store.js)import { configureStore, createSlice } from '@reduxjs/toolkit'let user = createSlice({ name : 'user', initialState : 'kim'})let stock = createSlice({ name : 'stock', initialState : [10, 11, 12]})export default configureStore({ reducer: { user : user.reducer, stock : stock.reducer }}) 1. createSlice()를 상단에서 import 해온 다음 { name : 'state 이름', initi.. 2024. 8. 27.
[React] Redux Tookit 설치 ReduxRedux는 props 없이 state를 공유할 수 있게 도와주는 라이브러리. js 파일 하나에 state를 보관할 수 있는데, 그걸 모든 컴포넌트가 직접 꺼내 사용할 수 있다.props 전송이 필요 없어지고 컴포넌트가 많아질수록 사용하기 좋다.사이트가 커지면 필수로 사용할 수밖에 없다.  Redux 설치npm install @reduxjs/toolkit@1.8.1 react-redux터미널을 열어 설치 명령어를 입력해 준다.(redux toolkit은 redux의 개선 버전, redux에 비해 문법이 조금 더 쉬움)*설치하기 전에 package.json 파일에서 "react", "react-dom" 두 항목의 버전이 18.1.x 이상이어야 사용 가능하다.Redux 세팅1. store.js 파일.. 2024. 8. 27.
[JavaScript] 변수 문법 변수 문법var 변수명 = 넣을 값; 자료를 잠깐 저장하고 싶으면 변수 문법을 사용한다.  var age = '20';var name = 'kim';console.log(age); // 20 출력console.log(name); // kim 출력문자, 숫자 외에도 거의 모든 걸 다 집어 넣을 수 있다. document.getElementById()도 변수에 넣어 사용할 수 있다.영어로 작명시에는 함수를 작명하듯 camelCase로 하면 된다.  변수 문법을 사용하는 이유1. 길고 복잡한 자료가 있을 때 변수에 저장해서 사용하면 편리하다.예를 들어 사이트를 만드는데 '안녕하세요. 반갑습니다. 오랜만입니다.'라는 인삿말이 매우 자주 필요하다고 가정해 보자.var 인삿말 = '안녕하세요. 반갑습니다. 오랜만입.. 2024. 8. 26.
[JavaScript] input, change 이벤트와 and, or 연산자 input 이벤트와 change 이벤트  태그에서 발생하는 input 이벤트와 change 이벤트가 있다. 안에 입력할 때 발생하는 이벤트들이다. document.getElementById('email').addEventListener('input', function(){ console.log('안녕')});▲ 에 입력된 값이 변경될 때 input 이벤트가 발생한다. 에 값을 입력할 때마다 콘솔창에 안녕이 출력된다.document.getElementById('email').addEventListener('change', function(){ console.log('안녕');});▲ 에 입력된 값이 변경되고 커서를 다른 곳에 찍으면 change 이벤트가 발생한다. 에 값을 입력하고 커서를 다른 곳에.. 2024. 8. 26.
[JavaScript] <form>, 조건문(if/if else/else if) 과 기능을 만들면서 조건문을 배워 보자. 로그인하세요 전송 닫기 Bootstrap을 이용해서 모달창 안에 을 만들었다.그리고 같은 폴더에 success.html 파일을 하나 만들어 '전송 완료' 이라는 내용을 넣었다.은 서버로 유저 정보를 전송하려고 사용한다. action="url"에 작성한 url로 폼 데이터가 전송된다.(현재 서버가 없기 때문에 로컬에 파일, success.html 을 만든 것) (주의) 안의 은 전송 버튼은 type="submit"으로 그 외.. 2024. 8. 26.
[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; }.white-bg { padding: 30px; border-radius: 5px; background: #fff;}.show-modal {display: block;}class 부착식으로 만들기 위해 모달창에 display:none을 추가하고 show-mo.. 2024. 8. 26.

티스토리툴바