분류 전체보기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. [JavaScript] jQuery 사용법 자바스크립트는 코드가 매우 길고 복잡한 특징이 있다. 그래서 html 조작을 쉽게 바꿔 주는 라이브러리들을 사용할 수 있다. React, Vue, jQuery 등이 html 조작을 쉽게 바꿔 주는 라이브러리들이다. React, Vue는 자바스크립트 문법을 어느 정도 알아야 사용 가능하기 때문에 우선 jQuery를 사용해 보자.jQuery는 언어가 아니라 라이브러리일 뿐으로 자바스크립트랑 다른 문법을 쓰는 것이 아니라 함수명, 셀럭터 이름들을 짧게 바꿔 주는 것이다. jQuery 설치구글에 jQuery cdn 검색하면 나오는 사이트(https://releases.jquery.com/)에서 jQuery 3.x 버전 이제 jQuery 설치한 곳 하단에서 jQuery 문법을 사용할 수 있다.(거의 모든 .. 2024. 8. 26. [JavaScript] classList 다루기 버튼을 누르면 등장하는 서브메뉴를 만들며 자바스크립트로 class 탈부착하는 문법을 배워 보자. Bootstrap 설치Bootstrap css 파일을 설치해 놓으면 버튼, 탭, 메뉴 같은 걸 가지고 와서 개발할 수 있다.1. Bootstrap 공식 사이트(https://getbootstrap.com/)에서 get started 버튼을 누른다.2. 우측 위에서 버진이 5.x 버전인지 확인한다.3. css 파일은 태그 안, js 파일은 태그 끝나기 전에 붙여 넣으면 설치는 끝이다. Navbar 만들기Bootstrap 사이트에 원하는 웹 UI를 검색해서 복사 붙여넣기 하면 된다.상단 메뉴 Navbar부터 만들어 보자.(index.html) Navbar 이러면 상단바 .. 2024. 8. 23. [JavaScript] EventListener, 이벤트리스너 getElementsByClassName 셀렉터테스트1테스트2이런 html 요소가 있다.셀렉터로 찾아 변경하고 싶으면 class명이 title인 것을 찾아라고 명령을 줄 수 있다. 테스트1테스트2이러면 태그 내용이 안녕으로 바뀐다.getElementsByClassName('클래스명')[순서] 이렇게 쓰면 된다. [0] 이렇게 [순서]를 넣는 이유는 getElementsByClassName 셀렉터는 일치하는 class가 들어있는 모든 html 요소를 찾아 주기 때문이다.그래서 그 중에 몇 번째 요소를 바꿀지 [순서]를 꼭 뒤에 붙여 줘야 한다.[0] : 찾은 것 중 위에서부터 1번째 요소[1] : 찾은 것 중 위에서부터 2번째 요소... (참고)getElementsByTagName (태그명으로 찾아 줌).. 2024. 8. 23. [JavaScript] function 문법, function의 파라미터 문법 자바스크립트 function 문법- function(일명 함수)라는 문법은 길고 더러운 코드를 한 단어로 축약하고 싶을 때 쓰는 문법.- 특정 기능을 다음에도 쓰기 위해 모듈화해 놓은 문법. function 함수명(){ 축약하고 싶은 긴 코드}1. function 키워드 쓰고 소괄호, 중괄호 붙인다.2. 소괄호 왼쪽에 함수명은 작명한다.3. 긴 코드를 중괄호 안에 담으면 코드 축약은 끝이다.그러면 함수명() 쓸 때마다 그 자리에 긴 코드가 실행된다. Alert 박스 코드 function으로 축약해 보기지난 포스팅에 만들었던 Alert 박스 코드를 보자. 알림창입니다. 닫기열기버튼의 onclick 안에 있는 긴 자바스크립트 코드를 함수 문법을 사용하면 짧게 축약해서 쓸 수 있다. .. 2024. 8. 23. [JavaScript] 동적 UI 만드는 법(Alert 박스 만들기) 기본적인 UI 만드는 법1. HTML/CSS로 미리 디자인(필요하면 미리 숨김)2. 버튼을 누르거나 할 경우 UI 보여 달라고 자바스크립트 코드 짜기 Alert 박스 만들기1. Alert UI 디자인작업 폴더에 main.css 파일 생성 후 index.html 태그 안에 첨부(index.html)알림창입니다.(main.css)#alert-box { display: none; padding: 20px; border-radius: 5px; color: #fff; background-color: #87ceeb;}UI를 평소에 숨기고 싶으면 display: none, 다시 보여 주고 싶으면 display: block 넣으면 된다.visiblity: hidden도 있다. 2. .. 2024. 8. 23. [JavaScript] 자바스크립트, 개발 환경 세팅 🌱 개발 환경 세팅0. 에디터 설치 (VS Code 사용)1. 작업 폴더 생성 후 에디터에서 [파일]-[폴더 열기]로 작업 폴더 열기2. index.html 파일 만들고 코딩 시작3. html 파일 미리보기 띄우고 싶으면 VS Code 에디터에서는 왼쪽 패널 Extensions 메뉴에서 Liver Server 설치, html 파일 우클릭 - Live Server 띄우기 클릭 자바스크립트란?HTML 파일 안에 "HTML 조작과 변경"을 담당하는 언어 자바스크립트 사용하는 이유- HTML 조작 가능- 서버와 통신 가능- 클릭, 타이핑 감지- 비동기 처리- 자료 다루기 자바스크립트로 HTML 조작하는 법안녕하세요 위의 코드를 실행해 미리보기로 확인해 보면 안녕하세요였던 태그가 안녕으로 바뀌어 .. 2024. 8. 22. 이전 1 2 3 4 5 6 다음
