개발하는 망나뇽 개발하는 망나뇽

전체 글

• tabUI

  Vue.js 2022. 7. 29. 02:09

  내용0 내용1 내용2 버튼0 버튼1 버튼2 이런, 기본적인 ui를 만들고 탭기능을 만들어보면, 먼저, UI 현재상태를 데이터로 만들고, 상태에 따라 HTML이 어떻게 보일지 작성하면 된다. step : 0이란 데이터를 만들고, 내용0 내용1 내용2 버튼0 버튼1 버튼2 이런 식으로, v-if를 이용하면 조건에 맞을때 보여주므로 성공이다. 이걸 이용해서 간단한 페이지정돈 step에 맞춰서 페이지를 보여주게끔 만들 수 있다.

  Read More
• ajax로 더보기 버튼만들기

  Vue.js 2022. 7. 29. 01:03

  보통 get, post요청을 하면 브라우저가 새로고침이 되는데, ajax를 이용하면, 새로고침 없이 가능하다. ajax요청을 하려면, 1. axios를 사용하던가, 2. 기본 fetch함수를 사용하던가 하면 된다. npm install axios 위처럼 입력해서 axios를 설치하고, import axios from 'axios'; 상단에 axios를 import해준다. 이렇게 더보기 버튼을 만들고, 더보기 버튼을 누르면 서버에서 추가 게시물을 가져오고, 그걸 로 보여주게 될 것이다. 더보기 이렇게 만들고, methods: { more() { //post는 //axios.post('url',{name: 'Lee'}) 이런 식으로 데이터를 url에 전송함 //.then은 성공시 .catch는 실패시임 ax..

  Read More
• mapStateToProps와 mapDispatchToProps

  Redux 2022. 7. 28. 04:20

  먼저, 기본 셋팅을 해주면, index.js에는 import React from "react"; import * as ReactDOM from 'react-dom/client'; import { Provider } from "react-redux"; import App from './components/App'; import store from './store'; const root = ReactDOM.createRoot(document.getElementById("root")); root.render( ); 위처럼 셋팅을 맞춰주고, Provider에 store를 연결해주고, App을 감싸준다. App.js 에서 import React from "react"; import { BrowserRouter, ..

  Read More
• 리덕스만으로 todo 만들기

  Redux 2022. 7. 27. 21:33

  To Dos Add html을 짜주고, 리덕스로 상태관리를 할 수 있게 해보자. import { createStore } from "redux"; const form = document.querySelector("form"); const input = document.querySelector("input"); const ul = document.querySelector("ul"); 먼저, 각각의 태그를 잡아주고, const reducer = (state = [], action) => { switch(action.type) { case ADD_TODO://...state를 뒤로보내면 순서바뀜 치는게 아래로 내려가게 return [...state, { text: action.text, id: Date.now..

  Read More
• 개선사항

  Redux 2022. 7. 27. 20:31

  reducer함수에서 action을 사용할 때, if말고 switch를 사용할 수 있다. const countModifier = (count = 0, action) => { // if (action.type === "ADD") { // return count + 1; // } else if (action.type === "MINUS") { // return count - 1; // } else { // return count; // } switch (action.type) { case "ADD": return count + 1 case "MINUS": return count - 1 default: return count } } 그리고, action type에서 string으로 작성하게 되면 "MNUS"이..

  Read More
• subscribe

  Redux 2022. 7. 27. 20:17

  이제 버튼에 연결해서 기능을 만들어보면 const add = document.getElementById('add'); const minus = document.getElementById('minus'); const number = document.getElementById('number'); const countModifier = (count = 0, action) => { if (action.type === "ADD") { return count + 1; } else if (action.type === "MINUS") { return count - 1; } else { return count; } } const countStore = createStore(countModifier); const hand..

  Read More
• action

  Redux 2022. 7. 27. 19:52

  저번에 store와 reducer의 의미를 배웠는데, store는 data를 저장하는 공간, reducer은 data를 수정하는 공간이다. 여기서 data를 수정하려면 action을 통해서 가능하다. action은 reducer의 두번째 파라미터이고, countStore.dispatch({type: "ADD"}) 이런 식으로, store에 dispatch()를 붙여서 오브젝트형식을 action에 보낼 수 있다. type: "ADD" 를 먼저 보내보자. 이러면 reducer안에서 action은 type: "ADD"가 된다. const countModifier = (count = 0, action) => { if (action.type === "ADD") { console.log('hello') } retu..

  Read More
• store 와 reducer

  Redux 2022. 7. 27. 19:50

  redux 를 사용하려면 먼저, 설치를 해야한다. npm install redux 그리고, redux를 사용할 페이지에 import { createStore } from "redux"; 이렇게 import 를 해준다. 이제, store를 알아보자. store는 내 data를 넣는 곳이다. 내 state가 된다. (state는 내 어플리케이션에서 바뀌는 data를 뜻한다.) const reducer = () => { } const store = createStore(reducer); store라는 변수를 작성하면 위처럼 reducer를 적어달란 에러가 나오는데, reducer은 내 data를 수정(modify)하는 함수이다. 만약, reducer가 return "hello"를 하면 내 어플리케이션의 dat..

  Read More