Front End(12)
-
React-redux 사용해보기
npm install react-redux src 폴더에 store.js 생성 후 스토어 작업 //액션 export const increase = (username) => ({ type: 'INCREMENT', payload: username }); export const decrease = () => ({ type: 'DECREMENT' }); //상태 const initstate = { num: 0, username: '', }; //액션의 결과를 걸러내는 과정 const reducer = (state = initstate, action) => { switch (action.type) { case 'INCREMENT': return { num: state.num + 1, username: action..
2021.12.23 -
React 글쓰기, 글 목록 보기 실습
import React, {useState} from 'react'; import styled from "styled-components"; const StyledItemBoxDiv = styled.div` border: 1px solid black; padding: 10px; height: 100px; margin: 20px; display: flex; justify-content: space-between; align-items: center; `; const ListPages = () => { const [no,setNo] = useState(6); const [post, setPost] = useState({ id:no, title:'', content:'' }); const [posts,setP..
2021.12.22 -
react-router-dom 기본 사용
npm i --save react-router-dom router를 사용 안하고 태그 사용시 SPA로 제작한 의미가 퇴색됨. a태그 사용시 전체 페이지를 다시 불러오므로 꼭 router 사용법을 익혀야함. index.js에서 을 로 감싼다. 라우팅 할 페이지에서 Route 태그를 이용해서 패스지정 패스 지정시 /로만 지정된 주소가 있다면 exact속성 부여해야함. Link to 활용 예제 match.params로 데이터 넘기기 link 스타일 먹일땐 Link 임포트 후 임포트받은걸 상속해서 진행.
2021.12.22 -
React 기본 문법, styled-component 사용
배열 수정하기 배열뒤에 ,(컴마) 찍고 입력 뒤에 오는값으로 덮어 씌움 const data = {phone: "2222"} const a6 = {id: 1, name: "홍길동", phone: "1111", age: 17, gender: "male"}; const b6 = {...a6, ...data}; console.log(b6) const users = [ {id: 1, name: "가가", phone: "2222"}, {id: 2, name: "나나", phone: "3333"}, {id: 3, name: "다다", phone: "4444"} ]; const updateUserDto = { id: 2, name: "홍길동" }; const newUsers = users.map(u => u.id ==..
2021.12.22 -
React 1일차.
설치 순서. node.js 설치 터미널 실행 후 설치 폴더까지 이동 npx create-react-app *** npm install react-redux npm install react-router-dom npm install --save styled-components npm install react-bootstrap bootstrap npm install --save-dev --save-exact prettier .prettierrc 파일 생성후 설정값 입력 jsx문법 return 시에 하나의 Dom만 리턴할 수 있다. 변수 선언은 let 혹은 const로만 해야함.(let = 변수, const = 상수) if 사용 불가능 X -> 삼항연산자 (조건 ? 값(true) : 값(false)) ex) {..
2021.12.22 -
jQuery
jQuery 사용법 1.url을 사용하는 법. 2.다운로드후 *.js로 사용하는 법. 3.cdn을 이용하여 사용하는 법. 메시지 : 제이쿼리를 공부하고 있습니다. 메시지 삭제 문서 준비 이벤트에는 여러 다중 이벤트를 정의할 수 있습니다. 버튼을 클릭하면 이벤트 처리를 합니다. 메시지 삭제 메시지 보기 질문1 : 대한민국의 수도는 어디입니까? [정답 보기] 대한민국의 수도는 서울입니다. 질문2 : 대한민국의 국보1호는 무엇입니까? [정답 보기] 대한민국의 국보1호는 숭례문입니다. 마우스 이벤트 알아보기 0 마우스 이벤트 알아보기 0 마우스 이벤트 알아보기 0 HTML5 CSS3 자바스크립트 제이쿼리 CSS 적용 CSS 적용 해제 김길동 02-123-4567 이길동 042-567-2929 홍길동 051-27..
2021.09.23