reduce() map() 대신 사용 array의 모든 요소를 체크하고 누적된 값을 리턴하기 좋은듯 반복문이나 값을 계산하기 위한 변수를 따로 선언하지 않아도 결과 값을 출력할 수 있어서 코드가 깔끔해보인다. array.reduce(callback, 초기값); array: 콜백함수를 돌리는데 사용할 인수를 가진 배열 callback: 배열의 각 요소에 대해 실행될 함수 사용가능 한 인수들 accumulator: 누적된 값 currentValue: 현재 처리 중인 요소 currentIndex: (선택사항) 현재 처리 중인 인덱스 array: (선택사항) reduce()가 호출된 원본 배열 초기값: 생략시 array의 첫 번째 요소가 초기 누적값이 됨 예시 const array = [1, 2, 3, 4, 5..
리팩토링
장바구니 페이지 리팩토링하기 이 프로젝트에서 가장 가독성 떨어지는 파일이다. 당시 디렉토리 구조를 아래와 같이 만들는데, pages 폴더에 웹 프로젝트에서 보여줄 각각의 페이지를 넣고 그 페이지를 구성하는 요소를 component 폴더에 담았다. 예컨데 메인페이지를 만든다고 가정했을 때, pages > main.js / component > header, footer, nav 이런식으로 쪼개서 만든 셈이다. 당시에 컴포넌트란 개념에 대해 UI의 최소 단위, 재사용 가능한 가장 작은 조각이라고 이해했다. 이걸 HTML의 시멘틱 태그처럼 코드를 봤을 때 그 구조가 한눈에 보이게 짜면 되겠구나! 라고 생각한 것이다. 아주 틀린 말은 아니겠지만 실제 현업에서 프로젝트를 진행하면서 보았던 컴포넌트들은 저정도? 크..
Options API: 지금까지 사용했던 문법 Composition API: 관련 있는 코드를 한 곳에 모을 수 있음 * 컴포넌트마다 Options / Composition 선택 가능 보여줄 vue 만들기 데이터 준비하기 1. 보여줄 vue 만들기 - 마이페이지 팔로워 사용자명 2. 데이터 준비하기 - public폴더 내 json 파일 생성 // folowwer.json [ { "id": 0, "name": "_Limvely", "image": "https://picsum.photos/200?r=0" }, { "id": 1, "name": "salmon_X", "image": "https://picsum.photos/200?r=1" }, { "id": 2, "name": "360noscope", "ima..
> 리액트에서 PWA 설치 및 세팅 [React] PWA PWA : Progressive Web App 안드로이드 / iOS 모바일 앱처럼 사용할 수 있게 만드는 웹개발 기술 iOS, Android 앱으로 발행하는게 아니라 웹사이트 자체를 스마트폰 홈화면에 설치 1. PWA 장점 설치 마케팅 비 seungstory.tistory.com 1. 라이브러리 설치 vue add pwa 2. 배포용 html 생성하기 npm run build * 주요 파일 manifest.json - 앱 정보를 담은 파일 service-worker.js - 웹페이지 구동에 필요한 html, css, js, img를 하드에 저장해두고 사용(오프라인에서도 사용가능하게) 3. PWA 설정 변경하기 vue.config.js 파일 생성 /..
Vuex : 사용 이유 props, custom event로 데이터를 주고받으면 컴포넌트가 여러개일 때 관리하기가 힘듦 (컴포넌트, 데이터 개수가 적을 때는 props가 더 나을 수 있음) 1. 설치 npm install vuex@next 2. 세팅 src폴더 > store.js 파일 생성 // store.js import { createStore } from 'vuex'; const store = createStore({ state() { return { name: 'kim', // 보관하고 싶은 state(:데이터) }; }, }); export default store; main.js에 store파일 import // main.js import { createApp } from 'vue'; impo..