본문 바로가기

전체 글349

vue(5) 이미지 업로드 (formData에 담아 axios로 보내기) vue.js 로 이미지업로드 기능을 구현 중이다. 고객들이 올리는 이미지를 formData에 담아 axios 통신으로 백엔드에 보내주려고 한다. 하지만 나는 vue린이 ... 하지만 안될 건 없다. 하다보니 어떻게든 되더라 (시간이 걸려서 그렇지) 컴포넌트 로직 ImageUpload.vue 에서 상담요청 버튼 누름 ↓ UploadConfirm.vue 로 넘어가 작성내용 리뷰 후, 확인버튼 누르면 ↓ index.js 의 통신 로직을 타고 백엔드로 데이터 전송 vue(5) 이미지 업로드 (formData에 담아 axios로 보내기) ImageUpload.vue - 결과 화면 상담 작성란을 모두 작성 후, 마지막으로 다중 파일 선택을 한 뒤 "상담요청" 버튼을 누르면 작성한 데이터와 함께 확인페이지로 넘어간다.. 2021. 5. 18.
javaScript - sort () 로 오름차순 내림차순 정렬하기 sort() 자바스크립트 배열의 오름차순, 내림차순은 sort() 라는 함수로 간단하게 만들 수 있다. 단 sort 만 사용하게 되면 ASCII 문자 순서로 정렬되어 숫자의 크기대로 나오지 않는다. 그래서 안에 내장함수를 넣어주어 앞 뒤 인덱스와 비교한 뒤 정렬해준다. 숫자 정렬 // 오름차순 score.sort(function(a, b) { return a - b; // 1, 2, 3, 4, 10, 11 }); // 내림차순 score.sort(function(a, b) { return b - a; // 11, 10, 4, 3, 2, 1 }); 2021. 5. 16.
React(31) Redux 패턴 action-reducer-store-view 지난 포스팅에서는 Redux 의 개념을 심플하게 알아보았다. 이번 포스팅에서는 예제를 통해 몸소 느껴보자 React(30) Redux 란 Redux 란 리덕스 는 React 의 상태관리 라이브러리이다. 즉, 데이터를 더욱 쉽게 이쪽저쪽으로 보내주고 관리도 해주는 도우미이다. React 는 View 만을 책임지는 라이브러리이기 때문에 데이터를 어 devbirdfeet.tistory.com React(31) Redux 패턴 action-reducer-store-view Redux 의 동작 방식 변화가 일어나면 Action(type에 대한 정보를 가진 객체)을 만들고, → (각 액션에 맞게 미리 정의해 둔) Reducer가 새로운 상태를 만들어 → store를 업데이트 한다. store를 (connect()로.. 2021. 5. 15.
React(30) Redux 란 Redux 란 리덕스 는 React 의 상태관리 라이브러리이다. 즉, 데이터를 더욱 쉽게 이쪽저쪽으로 보내주고 관리도 해주는 도우미이다. React 는 View 만을 책임지는 라이브러리이기 때문에 데이터를 어떻게 관리할 것인가 고민을 하다가 redux 가 나왔다. 컴포넌트의 props와 state 만으로 상태를 관리하기엔 우리가 만드는 앱은 너무 복잡하기 때문이다. Redux 의 동작 방식 변화가 일어나면 Action(type에 대한 정보를 가진 객체)을 만들고, → (각 액션에 맞게 미리 정의해 둔) Reducer가 새로운 상태를 만들어 → store를 업데이트 한다. store를 (connect()로) 구독하고 있는 → 컴포넌트(View)에 상태변화가 적용된다. 액션 생성자(action creator.. 2021. 5. 14.
React(29) 리액트 훅 useReducer 란 useReducer 란? useReducer 함수는 간단히 말해 리액트에서 상태변화를 업데이트 해주는 함수이다. const [state, dispatch] = useReducer(reducer, 초기값, 초기 함수) useReducer 함수를 사용하려면 + state 와 + dispatch() 함수 + reducer() 함수가 필요하다. reducer() 함수를 사용하려면 + state 와 action 이 필요하다. ** dispatch({ 는 action 오브젝트 내용 }) 을 넣는다. 그러면 reducer 가 동작하여 action 을 받아 상태(state)를 변경해준다. ** reducer(는 현재 state와, action) 을 인자로 받아 => 새로운 상태(state) 를 반환 하는 함수이다. *.. 2021. 5. 13.
Vue(4) v-for 문으로 라디오 버튼 만들기 하드코딩 된 라디오 버튼들을 v-for 을 사용하여 동적으로 다이나믹 리스트 렌더링을 해보자 HTML 1. for 문을 두 번 사용하였다. 먼저 Question 배열을 돌려 질문을 뿌리고, 그 안에 Values 배열을 돌려서 보기 값을 뿌려 주었다. 2. 결과확인 버튼 을 누르면 @결과 페이지로 가는 메소드 를 만들었다. **전체코드 보기(더보기 클릭) 더보기 소아청소년 비만 검사 총 {{ QUESTIONS.length }} 문항 문항 {{ i + 1 }} {{ question }} {{ item.label }} 진단 결과 확인 data() 1. 첫번째 for 문에 사용될 Question 배열, 두번째 for 문에 사용될 values 배열이 보인다. 2. valueMap 를 만들어서 알파벳값 을 실제 점.. 2021. 5. 12.
반응형

티스토리툴바