본문 바로가기

분류 전체보기346

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.
Vue(3) - 같은 value의 라디오버튼 그룹 선택 시 자동클릭 오류방지 문제상황 열심히 라디오 버튼으로 비만 테스트를 만들었다. 그런데 문제가 생겼다. 1번 보기나 2번보기를 처음 클릭했을 때 3번보기로 자동선택되는 현상이 나타났다. 해결하고자 영어로 열심히 구글링까지 해봤지만 답을 찾지 못했다. 결국 왜 나만안됨 까지 검색해봤으나 정말 없었다. 이슈화면 문제원인 - 원인은 input 의 value 가 셋 다 같은 값이기 때문이다. 아래는 내가 짠 코드이다. 빨간 박스의 value 가 0 으로 같다. - 그래서 세 개 중 하나를 클릭 했을 때 최근 마지막 코드(3번째)로 자동 선택 되는 것 같다는 결론을 내렸다. 문제해결 HTML - value 에 숫자 대신 알파벳을 대신 넣는다. 이 알파벳은 나중에 숫자와 매핑될 것이다. - 이 버튼을 클릭하면 선택한 value 의 숫자가.. 2021. 5. 12.
JavaScript - map 함수란 (feat. filter) map () 이란 - 반복문을 돌며 배열 안의 요소들을 1대 1로 짝지어 매핑해준다. - 결과로 나오는 새 배열과 !== 기존배열 은 다르다. (기존 배열을 수정하지 않고 새로운 배열을 만들기 때문) - 단, [ 배열 안에 { 객체 } 가 들어있으면, ] 객체는 공유된다. 새 배열 = 기존 배열.map((요소, 인덱스, 배열) => { return 요소 }); map() 으로 짝수만 출력하기 - 새 배열의 아이템 갯수는 === 기존배열 아이템 갯수와 같다. 그래서 map으로 거른 부분을 제외한 나머지는 undefined 가 된다. 출력화면 ** tip. 만약 빈칸으로 남아있는게 싫다면 filter 함수로 필터링 해주면 된다. filter() 으로 짝수만 출력하기 출력화면 ** 나의생각 map 과 filt.. 2021. 5. 12.
React(28) 리액트 훅 useContext 란 useContext 란 context 를 사용할 때, (즉 할머니 컴포넌트가 특정 손주 컴포넌트 한테만 다이렉트로 데이터(용돈)를 쏴주려고 할 때) 그 귀여운 손주는 useContext 라는 훅을 사용해서 할머니의 데이터(용돈)를 받아 사용할 수 있다. (할머니땡큐) ** Context 와 Context API 의 자세한 기본 개념은 아래 포스팅을 참고해주세요. React(26) 리액트 훅 Context API 란 Context API를 사용하는 이유 React 에서 일반적인 값을 전달하는 방법은 하향식(부모→자식)으로 전달해야한다. 보통 상위에서 → 하위컴포넌트로 속성값을 전달하는데 상위 → 하위 → 하위 → .... devbirdfeet.tistory.com Grandmama.js - createCo.. 2021. 5. 7.
반응형

티스토리툴바