본문 바로가기

전체 글

(37)
패스트캠퍼스 챌린지 최종 후기 안녕하세요. 9월 6일부터 10월 5일까지 진행된 작심 30일 자기계발 챌린지에 참여한 외노자 카키입니다. 저에게 이런 날도 오다니... 작심 3일만 해오던 제가 30일을 다 채운 게 아직도 의아하네요. 사실 저는 이번 이벤트 시즌에 유입된 건 아니고, 2018년과 2019년 1월에 두 패키지를 수강 '신청'한 이력이 있는 기존 패캠 수강생입니다. 과거 그 당시에는 강의 신청만 하고 끝 마무리는 흐지부지했죠. 음... 완강하지 못했단 소리입니다. (참고로 애초에 시작도 못한 강의도 있답니다 헤헷) 왜 제 자신이 30일 동안 꾸준히 공부한 게 의아하다고 했는지 이해가 가시겠지요? 그런 제가 뭔가 하나 해보겠다고 지난 8월에 또 강의 하나를 수강하게 되었습니다. 강의 이름은, 한 번에 끝내는 프론트엔드 개발..
Vue 템플릿 문법 [패스트캠퍼스 챌린지 30일차] 보간법 Interpolation 문자열 콧수염 기법을 사용한 문자열 보간법 : 이중 중괄호 구문 {{콧수염}} 메시지: {{ msg }} 콧수염 부분은 실제 데이터로 대체돼서 화면에 출력됨 그리고 그 해당하는 데이터가 변경될 때 화면도 같이 갱신됨 : 반응성 v-once 디렉티브를 사용했을 땐 일회성 : 데이터를 변경해도 화면이 갱신되지 않음 결코 안 변할 거임: {{ msg }} 원시 HTML 콧수염은 뷰js 데이터를 HTML이 아닌 일반 텍스트로 해석해서 화면에 출력함 만약 실제 HTML 구조로 출력하고 싶으면, v-html 디렉티브를 사용해야 함 이중 중괄호 사용: {{ rawHtml}} v-html 디렉티브 사용: 예시. 콧수염에 html 구조 넣었을 때 실제 브라우저에 출력된 건 빨간 색의 He..
Vue 인스턴스와 라이프사이클 [패스트캠퍼스 챌린지 29일차] 인스턴스와 라이프사이클 어플리케이션 인스턴스 생성하기 어플리케이션 & 컴포넌트 인스턴스 | Vue.js 어플리케이션 인스턴스 생성 모든 Vue 어플리케이션은 createApp 함수를 사용하여 새로운 어플리케이션 인스턴스를 생성하여 시작한다 const app = Vue.createApp({ /* options */ }) 인스턴스가 생성되면, mount 메소드에 컨테이너를 전달하여 mount 할 수 있음. 예를들어, 에 Vue 어플리케이션을 마운트 시키고 싶다면, #app을 전달해야함 아래는 예전에 썼던 방법 Vue.createApp({ /*option*/ }).mount('#app') 메소드 체이닝 사용 가능 어플리케이션 인스턴스에 의해 노출된 대부분의 메소드들은 동일한 인스턴스를 반환하여 ..