본문 바로가기

분류 전체보기222

[SPA] SPA 프레임워크, 라이브러리 기초 캡틴판교 vuejs 기초 강의 중 Object.defineProperty() 라는 메서드를 알게 되었습니다. 해당 메스드를 사용하면, get, set (호출, 할당) 을 할 때 어떤 동작을 하는지 재 정의 할 수 있습니다. set을 할 때 div#app 의 innertHTML을 set한 value로 만들어주는 render()함수를 정의하여 넣어주면 우리가 사용하는 react, vuejs와 같은 SPA 프레임워크, 라이브러리와 동일한 동작을 하도록 만들어 줄 수 있습니다. 프로그래머스 과제 테스트를 할 때 render()함수를 통해 dom을 만들어 appendChild하는 형태로 만들어는 봤는데요, 해당 방식으로 Object set을 할 때 render가 되도록 하는 방식은 처음 알게 되었습니다. 아주 의.. 2022. 9. 15.
[Vue.js] v-bind를 이용한 Class, Style 변경 v-bind 활용 v-bind를 활용하면 태그의 속성값에 데이터바인딩이 가능하다. class, style 또한 v-bind를 사용해서 조작가능하다. Class Binding (object) Class Binding (Array) Inline-style Binding (object) Inline-style Binding (Array) 2022. 9. 15.
[Vue.js] v-bind를 활용한 인풋버튼 비활성화, img src url 변수 사용 v-bind를 활용한 인풋 버튼 비활성화 v-bind를 활용하여 인풋 버튼 비활성화를 해보았습니다. react에서 { } 안에 js코드를 넣을수 있는것 처럼 vue에서는 " " 안에 js코드를 넣을 수가 있네요. v-bind:disabled="textValue === ''" 라는 부분을 통해 디스에이블드를 조건에 따라 true flase로 만들어 주었습니다. 만약 복잡한 validation이 필요하다면 methods로 빼야할것 같네요! Click 2022. 9. 15.
[Vue.js] v-model v-model VueJS는 State 대신 data() {}를 사용한다. 해당 data()의 return 값에 data 키-밸류 객체가 있다. 이 data를 input tag에 value로 바인딩 해주려면 "v-model" 이라는 속성을 사용해주면 된다. input:text, input:number, textarea 아래와 같이 input 속성값에 v-model을 넣어주면 된다. {{ valueModel }} {{ valueNumber }} {{ valueTextArea }} select, checkbox checked라는 data의 초기값을 빈배열로 지정, input checkbox의 v-model을 checked로 지정 => checked된 결과에 따라 배열에 들어감.. 신기하넹 리액트였음 onCli.. 2022. 9. 15.
[Vue.js] v-html (htmlBinding) VueJS에서 미리 선언한 HTML 코드를 꽂아 넣고 싶으면 아래와 같이 v-html이라는 곳에 미리 선언한 htmlString data를 넣으면된다. 그러면 아래 그림과 같이 v-html 속성을 추가한 DOM요소의 하위 태그로 htmlBinding이 Append된다. 2022. 9. 14.
[Vue.js] Vue Component 기본 틀 및 Data Binding Vue Component 기본 틀 위 그림은 Vue JS Component의 기본 틀입니다. Vue Component는 크게 세가지로 나뉩니다. 1) template : HTML 코드 부분 2) script : JS 로직이 들어가는 부분 3) style : CSS 부분 template에서 알아야 하는 부분 (React를 먼저 배워서 비교하면서 기록합니다.) 1) {{title}} 처럼 변수를 사용할 수 있다. (React와 동일) 2) v-model="title" 이라는 건 input 태그의 밸류가 title이라는 데이터와 바인딩 된다는 뜻 React 기준, value={title}과 동일, onChange={(e) => setTitle(e.target.value)}해주지 않아도 된다는건 다름, 강의에서.. 2022. 9. 14.
[Vue.js] Lazy Loading Routes 공식 문서 해석, 기록 공식 문서에서의 Lazy Loading 공식 문서 번들러를 이용해서 앱을 빌딩하면 JS번들은 꽤나 커진다. 그래서 코드를 Chunk 단위로 쪼개는게 효과적이다. 그리고 routing 될 때만 로드 하는게 효과적이다. Lazy Loading 하는 법 // replace // import UserDetails from './views/UserDetails' // with const UserDetails = () => import('./views/UserDetails') const router = createRouter({ // ... routes: [{ path: '/users/:id', component: UserDetails }], }) 위처럼 import문을 "Dynamic imports" 로 변경하고.. 2022. 9. 14.
[Vue.js] vue3 - vue router 설치, Lazy Loading 설정 서론 Vue3 강의 밖에 없어서 vue3를 기준으로 공부를 시작합니다. 연휴기간 시간이 없었기에 아직 HelloWorld를 벗어나지 못한 상태이지만, 그래도 이제 vue에 대해 알아가고 있으니 좋게 생각해야겠죠?! vue router 설치 vue add router 치면 알아서 설치를 해준다. src 하위에 router, views 폴더가 생긴다. Lazy Load (비동기 컴포넌트) 구성하기 import { createRouter, createWebHistory } from 'vue-router'; import HomeView from '../views/HomeView.vue'; import ContactView from '../views/ContactView.vue'; // import AboutVi.. 2022. 9. 14.
2차 프로젝트 개인 회고 2차 프로젝트 회고 (블로그 용) 서론 건물 화재로 인한 대피, 태풍, 인턴지원으로 시간이 부족한 프로젝트였다. 건물에 불이 나 대피하는 사건이 있었고, 이로 인해 이틀간은 제대로 된 환경없이 떠돌이 신세가 되었었다. 힌남노 태풍이 와서 전원 재택으로 돌리기도 했고, 인턴십을 앞두었기에 기업 서칭, 이력서 작성, 연락 등 인턴십에도 시간을 투자해야했다. 여기에 추석연휴까지 하루 끼어 시간적으로 많이 부족한 프로젝트였다. 그럼에도 불구하고 7명의 팀원들이 힘을 합쳐 최선을 다해 작업했고, 결과적으로 원했던 필수 사항들은 전부 구현하여 학습차원에선 괜찮았던 프로젝트라 생각한다. 쉽지 않은 주제의 웹사이트였다. DB 테이블이 20개 가량이 되는데 해당 ERD를 짜고 API를 구축해준 백엔드 팀에게 박수를 보낸.. 2022. 9. 11.
[Vue.js] 튜토리얼 따라하는데 시작부터 에러 난 단지 헬로 월드만 찍고 싶었을 뿐인데... 시작부터 에러가 많이 나네요. (component name "" Should always be multi-word) 다행히도 검색해보니 이건 별건 아니고, Default로 지정되는 eslint에서 컴포넌트 이름을 multi-word로 하라는 설정이 되어 있어서 그렇다고 하네요. 간단하게 lint를 무시해주려면 아래와 같이 하면된다. // @vue.config.js const { defineConfig } = require('@vue/cli-service'); module.exports = defineConfig({ transpileDependencies: true, lintOnSave: false, }); 그러나 경험상 lint는 귀찮지만 도움이 되는 친구이.. 2022. 9. 10.

티스토리툴바