본문 바로가기

전체 글198

[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.
[Vue.js] Vue.js 찍먹을 위한 초기 세팅 Vue2를 레거시로 가진 회사에서 인턴을 하게 되었습니다. 인턴 시작 전 Vue2를 공부하고 세팅 정도는 문제없이 하기 위해 포스팅합니다. 대부분의 출처는 : 한시간만에 배우는 VueJS 입문 입니다. Vue Cli로 프로젝트 생성하는 법 npm i -g @vue/cli 로 vue cli 설치 vue create . 으로 현재 폴더에 프로젝트 설치 (폴더 생성하며 만들려면 vue create 원하는폴더명 ) 이후 선택창에 default (vue2/eslint) (vue3/eslint) 등 선택지 생김, 일단 첨이니까 vue2 Default로 선택 npm run serve 하니 vue로 만든 첫 프로젝트를 만났다! ㅎㅎ react로 팀플 2개 돌려봤더니 vue시작이 엄청 어려울 것 같진 않다. 오히려 새로.. 2022. 9. 10.
[React.js] Styled Components 파일 분리 멘토 코드 리뷰 Styled Components 스타일드 컴포넌트를 프로젝트에서 사용하면서, 도대체 어떻게 써야 잘 쓰는건지 감을 못잡고 있었습니다. 그러던 중 동기 분이 이전 기수들 코드를 통해 파일분리를 하고, 쉽게 사용하는 방법을 알려줬습니다. 하지만 코드리뷰를 통해 조금 더 컨벤션에 가까운 best practies를 알게 되었고, 해당 리뷰를 반영하게 되었습니다. 멘토님의 깃헙 프로필을 까는게 개인정보 보호상 안좋다고 생각하여 프로필부분은 날렸습니다. 개인적으로 위 세가지 링크가 정말 도움이 많이 되어 포스팅으로 남깁니다. Styled Components Best Practices The 3 essentials to get started with styled-components default export와 nam.. 2022. 9. 4.
<프로그래머의 뇌> - 펠리너 헤르만스 취미가 독서인 나로썬 [ "프로그래머", "뇌", "인지 과학" ] 이라는 미친듯한 어그로의 제목을 보고 구매하기 버튼을 누르지 않을 수 없었다. 1독 한 결과 내가 평소에 생각하던 프로그래밍 공부법, 또는 프로그래밍에서 주요하다고 생각한 포인트가 솔찍히 거의 90% 이상 겹쳐서 어찌보면 도움이 되지 않은 책이라고 생각할 수도 있었다. 하지만 반대로 생각하면, 내가 뇌피셜로 생각했던 내용들, 경험적으로 "이러이러하게 공부해보니까 도움이 되더라~"라고 생각하고 동기들에게 이야기한 내용들을 인지과학 측면에서 논문등의 근거를 통해 주장을 뒷받침해주는 근거들이 있어서 아주 도움이 되는 책이었다. 아래는 책을 읽으며 밑줄 친 부분이나 스스로 코멘트 한 부분이다. 밑줄, 코멘트 등 클리핑 우리가 무슨 일을 할 때 .. 2022. 9. 4.
질 낮은 시간을 보낸 2차 프로젝트 1차 스프린트 한 주간 (그리고 출사표) 1주 3포스팅 마저 못 채우는 이번 주... 1주 3포스팅, 그 적은 양을 채우기 위해 고민을 해보았지만 이번주는 정말 3개의 포스팅을 채울 거리가 없다. 이 주의 배움이 그만큼 적었단 뜻이고, 이 주의 시간이 그만큼 온전한 공부의 시간이 되지 못했다는 뜻이다. 이번 한 주를 돌이켜 보면 꽤 많은 시간을 프로젝트에 할애 했다고 생각들지만, 실상 그 속을 들여다 보면 재밌게 공부한 시간이 거의 없다고 느낀다. 불이 났다 어쩐다 이런 핑계가 있지만 그 이외에 사무실에서의 시간 또한 굉장히 밀도 낮고, 질 낮은 시간이었던 것이 사실이다. 기억 남는 작업 이번주 기억에 남는 작업은 원티드의 이력서 작성 Form Page에서 이런 저런 Input Box를 커스터마이징하고, Select Box를 구현하고, 기술 스.. 2022. 9. 4.

티스토리툴바