Engineering

    [Vue.js] Vuetify 사용방법
    Engineering/Vue.js

    [Vue.js] Vuetify 사용방법

    프로젝트에서 프론트엔드 역할을 맡아 Vue.js로 작업하고 있다. 그래서 Vuetify를 공부하며 열심히 활용하고 있는 중이다. 처음에 뭔지 하나도 모르다가 직접 사용해보니 굉장히 편하다고 느꼈다. 디자인적 요소는 깔끔한 편이라 나처럼 디자인 요소를 꾸미기 힘들어 하는 사람에게 뷰티파이를 적극 추천한다. 1. Vuetify 시작하기(설정 방법) vue-cli를 사용해 vuetify 패키지를 vue프로젝트에 추가하기 🔵 cli 사용해 vue프로젝트 생성한 후에 해당 프로젝트로 이동해서 vuetify를 add 하기 * 프로젝트 진행 도중에 추가하게 되면 폴더 구조가 바뀔 수 있으니 가급적 프로젝트 시작할 때 추가하기 명령어=> vue add vuetify 🔵 plugins/vuetify.js가 생성되고, m..

    [Vue.js] 네 번째 정리(props, emit)
    Engineering/Vue.js

    [Vue.js] 네 번째 정리(props, emit)

    0. 부모와 자식 간에는 단방향 바인딩만 가능하다(단방향 데이터 흐름) -> why? 자식은 부모의 데이터에 접근하거나 데이터를 변경할 수 없어야 한다. (데이터 흐름이 꼬일 수 있기 때문이다) 단지 이벤트만 보낼 수 있다. 자식은 커스텀 이벤트를 방출하면 부모는 이벤트를 리스닝(@)하여 어떠한 행동을 한다(함수 실행 등) 1. props & emit - 분리된 상태의 부모, 자식 컴포넌트 간 긴밀히 소통해야 할 때가 있는데, 이때 필요한 것이 컴포넌트 통신. 즉 props와 emit이다. - 컴포넌트 통신 규칙은 각 컴포넌트가 독립성은 유지하면서 데이터 흐름이 규칙적이게 하기 위함 - props는 부모에서 자식으로 데이터를 전달하기 위해 사용 - emit은 자식이 부모에게 데이터를 전달하기 위해서 이벤..

    [Vue.js] Dynamic Route Matching(동적 라우트 매칭)
    Engineering/Vue.js

    [Vue.js] Dynamic Route Matching(동적 라우트 매칭)

    해당 유저의 마이페이지에 url로 접근하는 경우 동일한 url 패턴을 보이게 된다. 예를 들어 /user/yeji 또는 /user/deokgi 처럼 비슷한 패턴의 url이 동일한 컴포넌트에 매칭되는 경우 동적 라우트 매칭을 사용한다. 동적 세그먼트는 콜론(:)부터 시작해서 작성하는데 예를 들었던 /user/yeji, /user/deokgi 에서 yeji, deokgi 처럼 바뀌는 부분이다. 나는 인스타 클론코딩을 할 때 유저 페이지에 동적 라우트 매칭을 사용했다. 아래는 인스타 클론 코딩에서 사용한 동적 라우트 매칭👇 // router- index.js에 경로 설정 Vue.use(VueRouter) const routes = [ { //dynamic route matching path:'/:usernam..

    [Vue.js] 세 번째 정리 (프로젝트 생성 초기 설정)
    Engineering/Vue.js

    [Vue.js] 세 번째 정리 (프로젝트 생성 초기 설정)

    지난 번까지 뷰에 대한 기본적인 것, 개념들을 공부했다면 이번엔 뷰 프로젝트를 직접 생성해봤다. [Vue 사용하기 전 초기 환경 설정] 1. 우선 node.js 설치 -> node.js는 무엇일까? 원래 javascript는 원래 웹 브라우저 환경에서만 동작하는데, 이때 node.js가 우리가 사용하는 컴퓨터 환경에서도 javascript를 사용해 개발할 수 있도록 만들어 주는 플랫폼이다. (node.js는 자바스크립트를 웹 브라우저 속에서만 사용되던 언어에서 범용 스크립트 언어로 탈바꿈 시켰다는 점에서 의미가 있다) -> node.js의 가장 큰 특징은 단일 스레드 모델, non-blocking 이라는 것 -> 노드 설치 후 버전 확인: node -v 2. npm (Node Packaged Module..

    [Vue.js] 두 번째 정리 (비동기, non-blocking, computed, watch)
    Engineering/Vue.js

    [Vue.js] 두 번째 정리 (비동기, non-blocking, computed, watch)

    ✔ 둘째 날, Vue Basics - 배운 내용 정리 콜백함수를 쓸 때는 화살표 함수를 사용한다. json-server의 paginate 기능 사용 배열 합치는 방법 3가지 👇 1. concat() 2. spread 스프레드 : arr3 = [...arr1, ...arr2] -> 스프레드가 가장 빠르고 효율적임 3. push와 spread 사용 : arr4= arr.push(...arr2) Vue instance 생애주기👇 [Vue Instance Lifecycle Hooks] 뷰 인스턴스는 created -> mounted -> updated -> destroyed 순으로 생성됐다가 소멸되는 생애주기를 갖는다. non-blocking 하게 동작하는 코드 두 가지 1. axios 2. setTimeout..

    Engineering/Vue.js

    [Vue.js] Vue 시작하기 (directive 정리)

    첫째 날, Vue Intro el은 뷰 인스턴스의 속성이며 어떤 HTML 요소에 mount할 지를 결정하는 요소. data는 객체이며 MVVM 패턴에서 Model에 해당하는 것. 뷰인스턴스의 핵심이 된다. interpolation/ 보간법/ {{ }} => 인스턴스에 있는 데이터를 순수 문자열 형태로 보여줄 때 사용한다. methods는 함수들의 집합 syntactic sugar => methods 안에 정의된 함수에서 : function()은 생략할 수 있다. v-on: 는 ' @ '로, v-bind: 는 ' : '로 줄여서 숏컷으로 쓰기. v-text="message" 와 {{ message }}는 완전히 같음. v로 시작하는 요소들은 directive(디렉티브)는 엘리먼트에게 어떤한 행동을 하라고 ..

    0316_Web page를 꾸미는 역할, CSS
    Engineering/etc.

    0316_Web page를 꾸미는 역할, CSS

    CSS (Cascading Style Sheets) 기존 HTML이 정보에 집중하는 언어라면, CSS는 디자인적 요소를 책임지는 별도의 언어이다. HTML로 웹 페이지에 들어갈 정보를 일단 입력하고 나면, CSS를 통해 사용자로 하여금 간편하고 보기 좋도록 페이지를 꾸며준다. 도입 배경을 간단히 설명하면 다음과 같다. 원래는 HTML 의 기존 틀 안에서 스타일적 요소를 넣어 페이지를 꾸미다 보니 정보 요소와 디자인적 요소가 혼재되어 코드가 지저분해지고 용량이 커지며 사용자들이 많아질수록 불편을 겪을 수 밖에 없는 구조가 되었는데, 이런 문제를 해결하기 위해 새로운 언어를 개발하였고 그게 바로 CSS이다. 장점 CSS 덕분에, 코드의 중복성을 제거하고 / 웹페이지의 유지 및 보수가 용이해지고 / 코드 가독..

    0315_First step to Web, Summary about HTML
    Engineering/etc.

    0315_First step to Web, Summary about HTML

    HTML - HyperText Markup Language HTML은 무엇인가. => Language의 개념. 결론부터 말하자면 웹페이지를 구성하기 위해서 작성하는 컴퓨터 언어이다. 쉽게 말해 개발자가 의도하는 대로 웹브라우저가 읽어들여 웹페이지를 구성할 수 있도록 하는 일종의 명령어인셈이다. 따라서 웹페이지를 만들기 위해서는 필수적으로 알아야 한다. HTML는 1980년대쯤? 처음 만들어졌다고 하는데 일반인들에게는 1990년대에 공개된 것으로 알고 있다. 자세한 history는 모르니까 ->위키피디아 참고. (https://ko.wikipedia.org/wiki/HTML) 그래서 HTML은 무엇이 중요할까. 바로 'Information(정보)'이다. 웹 페이지에서 HTML이 가지고 있는 것은 바로 정보..

티스토리툴바