🔍미들웨어란 미들웨어는 익스프레스의 핵심이다. 요청과 응답의 중간(미들 middle)에 위치하여 미들웨어라 부른다. 미들웨어는 요청과 응답을 조작하여 기능을 추가하기도 하고 나쁜 요청을 걸러내기도 한다. app.use(미들웨어) 모든 요청에서 미들웨어 실행 app.use('/abc', 미들웨어) abc로 시작하는 요청에서 미들웨어 실행 app.post('/abc',미들웨어) abc로 시작하는 POST 요청에서 미들웨어 실행 🔍morgan, cookie-parser, express-session, dotenv 설치 dotenv를 제외한 다른 패키지는 미들웨어임. dotenv는 process.env를 관리하기 위해 설치. app.use(morgan('dev')); 인수로는 dev 이외에도 combined, ..

📝뷰(Vue.js) 미니 프로젝트 Todo List App 만들기 1. 프로젝트 생성 vue create todo 2. 기본 디렉토리에 있는 HelloWorld 컴포넌트 지우고, index.html에 부트스트랩 CDN 추가 3. App.vue 코드 작성 Todo App

🤍beforeCreate 인스턴스가 생성되고 나서 가장 처음으로 실행되는 단계. 뷰 인스턴스의 data와 methods 속성이 정의되어 있지 않고 화면 요소(ex.dom)에도 접근할 수 없음. 🤍created data 속성과 methods 속성이 정의되었으므로 두 속성값에 접근하는 로직 구현 가능함. 하지만 아직 화면 요소에 인스턴스 부착 전이므로 template 속성에 정의된 dom 요소에 접근하는 코드 구현은 불가능. 🤍beforeMount render() 함수 호출되기 직전의 단계. created 이후 template 속성에 지정한 마크업 속성을 render() 함수로 변환 후 el 속성에 지정한 화면 요소에 인스턴스를 부착하기 직전 호출되므로 화면에 붙이기 전 실행해야 할 코드를 구현하면 됨. 🤍..

🔍슬롯(Slot)이란? 슬롯은 컴포넌트를 보다 디테일하게 활용할 수 있도록 하는 도구이다. (=기존 컴포넌트 재사용성을 높여줌) 컴포넌트에 콘텐츠 혹은 다른 컴포넌트를 또다른 방식으로 주입시킬 수 있는 방법 🔍슬롯 기본 예제 Slot은 부모 컴포넌트에 특정 문법에 따라 쓰인 html 코드를 자식 컴포넌트에 보내는 역할을 함. 부모 컴포넌트인 About.vue에 아래 코드를 작성 한다. 그럼 자식 코드의 slot 태그 위치에 해당 코드가 추가되어 로드된다. 만약 slot을 두 개 만들고 각기 다른 자리에 html 코드를 넣고 싶다면 slot에 이름을 붙여주면 된다. 그럼 header 이름을 가진 slot 태그에 해당 코드가 추가되며 만약 default로 지정할 경우 이름이 정해지지 않은 곳에 추가됨. 만약..

🔍부모로부터 props를 받는 자식 컴포넌트 작성 자주 사용하는 스타일을 별도 자식 컴포넌트 InputField.vue로 분류하였다. 🤍부모 컴포넌트 Home.vue InputField를 불러오고 자신의 data인 name을 name 속성으로 (:name) 바인딩하여 props로 내려줌. 🤍자식 컴포넌트 InputField.vue props로 name을 받아와서 input의 value 속성으로 바인딩. => 부모 컴포넌트로부터 props로 받아온 name 값은 input의 value 값으로 지정되지만, 사용자가 input box에 입력한 값은 props.name 값으로 지정되지 않음. 이를 해결하기 위해서 @input 속성을 사용할 수 있다. 🤍@input @input을 이용하며 input 태그에 입력되..

🔍뷰 라우터(Vue-router)란 싱글 페이지 애플리케이션(SPA) 여러 화면을 하나의 페이지 안에서 제공하면서 화면을 별도로 로딩하지 않는 방식. 뷰 라우터(vue-router) Vue.js에서 SPA 구현 시 사용자 요청 경로에 따라 해당하는 컴포넌트에 매핑하여 렌더링을 결정해주는 플러그인. 뷰 라우터 설치 npm install vue-router //vue router 설치 import Vue from 'vue' import VueRouter from 'vue-router'//main.js 추가 🔍뷰 라우터(Vue-router) 동작 방식 vue 설치 후 폴더 구조를 보면 아래와 같이 html 파일은 index.html 단 하나로 구성되어 있다.(SPA) index.html에서 id로 app을 매..

위와 같은 코드를 분석해 보면 거의 유사한 중복 코드가 작성되었다고 할 수 있다. 개발자는 언제나 간결하고 중복 없는 효율적인 코드가 필수이기 때문에 이런 경우 뷰 컴포넌트를 활용할 수 있다. 1. 컴포넌트란 컴포넌트는 Vue.js의 가장 강력한 기능 중 하나이다. 기본 HTML 엘리먼트를 확장하여 재사용가능한 코드를 캡슐화하는 데 도움이 된다. Vue.js에서 기본적인 프로그램 구현 방법은 화면 또는 기능을 적절하게 분리하여 컴포넌트화 시켜서 개발하고 이것을 연결하여 프로그램이 작동하도록 구현하는 방법을 사용한다. 각각의 컴포넌트 간 데이터의 이동은 단방향 이동만 가능함. 부모 컴포넌트에 있는 데이터를 자식 컴포넌트가 가져올 때에는 그냥 쉽게 부모 컴포넌트에 props로 변수에 값을 넣어주면 바로 자식..

🔍반복문, 리스트 렌더링 Vue.js에서 반복문 렌더링으로 제공하는 디렉티브는 v-for 구문이다. 배열을 기반으로 리스트를 렌더링할 수 있다. v-for item in items 🔍예제 people로 데이터를 선언하고 각각 다른 name, age를 주고 싶을 때 아래와 같은 코드를 작성할 수 있으나, 여기서 더 많은 데이터가 추가될 경우 코드가 복잡해질 수 있다. 이런 경우 v-for 구문을 활용할 수 있다. 실행 결과 반복문에 사용될 태그에 v-for 구문을 삽입해 주면 된다. 실행해 보면 동일한 결과가 출력되고 있다. 그리고 v-for 구문에는 index값을 사용할 수 있다. index를 추가해 주면 아래와 같이 index가 붙어 출력되는 것을 확인할 수 있다. 💡공식문서를 살펴보면 2.2.0 이상..