Life.Contains("Coding");

캐나다 일상 자주 올려야지 다짐하지만 정신 차리고 보면 시간이 훅훅 지나가 있다. 리치몬드에 위치한 홈스테이에 머문지 두달 째, 주변에 아무것도 없으니 집에만 박혀있는 시간이 아까워 월세는 비싸지만 인프라가 좋은 다운타운으로 이사갈 예정이다. 막상 떠나려니 다운타운에서 방문하기 힘든 곳들은 미리 방문해야겠다는 생각에 현재 진행 중인 리치몬드 해바라기 페스티벌로 향했다. 이 시기에 칠리왁과 리치몬드에선 해바라기 축제가 열린다. 칠리왁이 훨씬 넓고 볼 것이 많다고 하지만 뚜벅이인 내가 도저히 갈 수 없는 위치이기에 아쉬운대로 리치몬드 해바라기 축제를 가보았다. 축제기간 2022년 8월 13일 ~ 2022년 9월 10일 운영시간 평일 12:00 ~ 18:00 / 입장 마감 18:30 주말 10:00 ~ 18:..

지금까지 Vue.js 다큐먼트를 따라 하였는데 입사하게 된 회사는 Vue.js를 제외한 Angular와 React를 사용하기에 React부터 공부해보기로 하였다. 개발자의 길이란 멀고도 험하고 배움엔 끝이 없다. React는 Meta(구 Facebook)가 개발한 JavaScript UI 라이브러리이다. 1. Node.js 설치 Vue와 마찬가지로 React 프로젝트를 생성하기 위해선 Node.js를 설치해주어야 한다. 먼저 터미널을 켜 node -v를 입력한다. 위와 같이 node의 버전이 나온다면 이미 설치되었다는 것이기에 설치할 필요가 없으며 node의 버전이 나오지 않는다면 설치를 해줘야 한다. Node.js의 설치과정은 기존 Vue.js 개발환경 설정에서 진행했었기에 해당 링크의 2번까지 진행해..

이 페이지에서는 Component Basics를 이미 읽었다고 가정한다. Component를 처음 사용하는 경우 Component Basics를 먼저 읽고 와야 한다. Emitting and Listening to Events Component는 내장 함수 $emit을 사용하여 템플릿 표현식(예: v-on 핸들러)에서 직접 사용자 정의 이벤트를 발신할 수 있다. click me $emit() 메서드는 component 인스턴스에서 this.$emit()로 사용할 수도 있다: export default { methods: { submit() { this.$emit('submit') } } } 그러면 부모는 v-on을 사용하여 수신할 수 있다. .once 수식어는 component 이벤트 리스너에서도 지원된..

밴쿠버로 넘어온 지 한 달이 조금 안 되는 기간 동안 그 누구보다 정신없이 살다가 정신 차리고 처음 작성하는 캐나다 생활. 우연히 친분을 쌓게된 지인분이 내가 머무는 곳 근처에 야시장이 있다고 알려주신 덕분에 같이 홈스테이 하는 일본인 친구와 주말을 이용해 다녀왔다. 축제기간 2022년 4월 29일 ~ 2022년 10월 10일 운영시간 금요일 19:00 ~ 00:00 토요일 18:00 ~ 00:00 일요일 19:00 ~ 23:00 Long-Weekend Monday (May 23rd, Aug 1st, Sept 5th, Oct 10th) 19:00 ~ 23:00 이용요금 General $7 Zoom Pass $35 Children(under 7 years), Senior(60+ years) 무료 숙소에서 ..

이 페이지에서는 Component Basics를 이미 읽었다고 가정한다. Component를 처음 사용하는 경우 Component Basics를 먼저 읽고 와야 한다. Props Declaration Vue component는 명시적인 props 선언이 필요하기에 이를 통해 Vue는 component에 전달된 외부 props 중 어떤 것이 fallthrough 속성으로 처리되어야 하는지 알 수 있다(전용 섹션에서 설명함). props는 props 옵션을 사용하여 선언된다. export default { props: ['foo'], created() { // props는 `this`에 노출된다 console.log(this.foo) } } 문자열 배열을 사용하여 props를 선언하는 것 외에도 객체 구문을..

이 페이지에서는 Component Basics를 이미 읽었다고 가정한다. Component를 처음 사용하는 경우 Component Basics를 먼저 읽고 와야 한다. Vue component는 템플릿에서 발견될 때 Vue가 구현할 위치를 알 수 있도록 "등록"해야 한다. Component를 등록하는 방법에는 전역 및 로컬의 두 가지가 있다. Global Registration app.component() 메서드를 사용하여 현재 Vue 어플리케이션에서 component를 전역적으로 사용할 수 있도록 할 수 있다. import { createApp } from 'vue' const app = createApp({}) app.component( // 등록된 이름 'MyComponent', // 구현 { /*..

Component를 사용하면 UI를 독립적이고 재사용 가능한 일부분으로 분할하고 각 부분을 개별적으로 다룰 수 있다. 그렇기에 앱이 중첩된 component의 트리로 구성되는 것은 일반적이다. 이것은 기본 HTML element를 중첩하는 방법과 매우 유사하지만 Vue는 각 component에 사용자 정의 콘텐츠와 논리를 캡슐화할 수 있는 자체 component 모델을 구현한다. Vue는 기본 웹 component와도 잘 작동합니다. Vue component와 기본 웹 component 간의 관계가 궁금하다면 여기에서 읽어볼 수 있다. Defining a Component 빌드 방식을 사용할 때 일반적으로 싱글 파일 component(줄여서 SFC)라고 하는 .vue 확장자를 사용하여 전용 파일에 각 V..

누누이 말하지만 내가 제일 좋아하는 것은 밤하늘에 수놓아진 별을 보는 일. 매 달 삭일이 가까워지면 날씨를 확인하고, 맑다면 별 보러 가는 것이 작지만 큰 행복이다. 인생의 큰 전환점을 앞둔 시점에 새로운 일을 해내기 위한 원동력을 얻기 위해 양평 벗고개터널로 향했다. 사실 삭일 당일까지도 날이 맑을지 흐릴지 확실하지 않았고, 기상청 예보도 수시로 바뀌었기에 걱정이 많이 되었다. 못 먹어도 고!라는 마음으로 12시쯤에 서울에서 출발하였고 다행히도 가는 동안 구름이 걷히는 것을 볼 수 있었다. 양평 양동면 금왕리 187번지 벗고개 양평 벗고개터널은 목왕리와 금왕리에 하나씩 있는 것으로 표기되는데 별 명소로 유명한 곳은 금왕리에 위치하고 있으니 절대 헷갈리면 안 된다! 지난여름에 방문했을 때는 사람이 워낙 ..

Vue의 선언적 렌더링 모델은 대부분의 직접 DOM 작업을 추상화하지만 기본 DOM 요소에 직접 액세스해야 하는 경우가 여전히 있을 수 있다. 이를 달성하기 위해 특수 ref 속성을 사용할 수 있다. ref는 v-for 장에서 언급한 key 속성과 유사한 특수 속성이다. 이를 통해 마운트 된 특정 DOM element 또는 하위 component 인스턴스에 직접적인 참조를 얻을 수 있다. 예를 들어 프로그래밍 방식으로 component 마운트의 인풋에 초점을 맞추거나 엘리먼트에서 타사 라이브러리를 초기화하려는 경우에 유용할 수 있다. Accessing the Refs 참조 결과는 this.$refs에 노출된다. Component가 마운트 된 후에만 ref에 액세스 할 수 있다. 템플릿 표현식에서 $ref..

Basic Example Computed 속성을 사용하면 파생된 값을 선언적으로 계산할 수 있다. 그러나 상태 변경에 대한 반응으로 사이드 이펙트(DOM을 변경하거나 비동기 작업의 결과를 기반으로 다른 상태를 변경하는 것)를 수행해야 하는 경우가 있다. Options API를 사용하는 경우 watch 옵션을 사용하여 반응형 속성이 변경될 때마다 함수를 실행할 수 있다. export default { data() { return { question: '', answer: 'Questions usually contain a question mark. ;-)' } }, watch: { // question이 변경될 때마다 함수 실행 question(newQuestion, oldQuestion) { if (ne..