Vue 데이터 바인딩-html/input/select HTML 데이터 바인딩 {{htmlString}} 위처럼 적으면 화면에는 붉은색 글자가 출력되는 대신 This is a red String 라고 출력 된다. 태그와 속성을 포함한 데이터 바인딩을 하기 위해서는 아래와 같이 template 태그 안의 코드를 수정해야 한다. 위처럼 vue에서 html을 바인딩하기 위해서는 태그안 v-html이라는 속성에 data 명을 적어줘야한다. Input 데이터 바인딩 Input태그를 넣은 컴포넌트를 하나 만들어보자. input 태그의 value라는 속성에 대해 vue에서는 v-model 속성을 써서 데이터 값을 넣을 수 있다. {{ valueModel }} 위와 같이 적은뒤 input 값을 변경하면 p태그의 값도 함..

React Hook 리액트 hooks 에 관한 노마드 코더의 무료 영상을 보고 쓴 리액트 훅에 관한 공부 글이다. 실전형 리액트 Hooks 10개 일단 hook이란 react의 state machine에 연결하는 가장 기본적인 방법이다. 이번 글에서는 useState, useInput, useTab에 관해 설명한다. useState useState는 가장 기본적인 리액트 훅이다. const [state, setState] = useState(0); 가장 기본적인 useState 함수 구문이다. useState는 항상 2개의 값을 return한다. 첫번쨰 변수는 우리가 이용하는 값이고, 두번째 변수는 첫번째 변수를 바꿀수 있게해주는 함수이다. 그리고 useState의 괄호 안에 초기값을 부여 할 수 있다...

설치 링크: https://marketplace.visualstudio.com/items?itemName=usernamehw.todo-md Doc: https://github.com/usernamehw/vscode-todo-md/blob/master/docs/docs.md ToDo MD는 마크다운 파일을 활용해서 사이드 바에 투두리스트를 추가 할 수 있게 해주는 기능인데 꽤나 유용하다. 대부분의 개발자들은 어차피 VS코드를 매일 키게 되니 여타 다른 프로그램을 쓸 필요가 없어서 좋다. 사용방법: 1. 확장을 깐 뒤에 todo를 기록할 마크다운 파일과 완료 리스트가 저장될 마크다운 파일을 하나 만든다. 2. todomd의 설정에 들어가서 Default파일(todo 리스트를 적을 파일)과 Archive파일(..

내가 가장 사랑하는 영화를 뽑으라면 나는 주저 없이 패왕별희를 말할 것이다. 그만큼 내게는 인상 깊은 영화였다. 무엇이 내가 이 영화를 그리도 사랑하게 만들었는지, 잘은 모르겠지만 음악도, 영상미도, 스토리도, 캐릭터도 모든 것이 너무나도 아름답고 슬프다. 감독은 젊어서 문화대혁명을 겪었다고 하는데 그런 감독의 경험이 영화에 더욱 생동감을 주지 않았을까 싶다. 영화에 대한 생각을 흐름대로 적어볼까 한다.(스포일러가 있다.) 가장 인상깊은 장면을 뽑으라면 당연히 데이가 절규하는 장면이다. 데이는 굉장히 감정적이고 이기적인 캐릭터라고 할 수 있지만 이 영화를 보고 누가 감히 그를 미워하겠는가. 좋았던 점은 영화가 단순히 문화대혁명 이전의 경극 문화를 좋게만 포장하지 않는다는 점이다. 데이와 샬루는 결국 성공..

리액트로 날씨 사이트 만들기01 - 날씨 API 가져오기 날씨 API키 신청하기 실시간 날씨 사이트를 만들기 위해선 우선 날씨 API키를 얻어 와야 한다. 아래 사이트로 가서 무료 API키를 신청 해보자. https://openweathermap.org/price 신청 후에 기다리면 날씨 API 키를 이메일로 보내준다. 나는 이 프로젝트를 최대한 혼자 힘으로 하고 싶었기 때문에 우선 API DOC을 읽었다. Current weather data 무려 20만개가 넘는 도시의 날씨 정보를 끌어올 수 있으며, 데이터는 JSON, Html, Xml 포맷을 지원한다고 한다. 아래는 API DOC 에 쓰여져 있는 API 호출 방식이다. https://api.openweathermap.org/data/2.5/weat..

Vue 컴포넌트 미리 앞서 es-lint를 사용한다면 컴포넌트 이름을 작성 할 때는 한 단어로 작성해선 안된다. 예를 들어 "ToDo"는 가능 하지만 "Todo"는 오류가 난다. Vue 영역 태그 Vue에서는 html, script, css를 한 페이지 안에 작성할수 있다. (각각 Emmit 기능으로 쉽게 쓸 수 있다. ) template 영역에는 html 코드를 쓸 수 있고, script에는 자바 스크립트를, style영역에는 css를 사용할 수 있다. Vue의 가장 기본적인 스트립트 형태는 아래와 같다. name은 컴포넌트의 이름이며, 둘 이상의 단어로 이루어져야 한다. components는 외부에서 컴포넌트를 임포트 할 때 사용가능하다. 마지막으로 data()는 말그대로 안에 데이터를 저장 할 수 ..

Vue Router에 대해 Vue Router 설치 뷰 프로젝트가 있는 폴더를 열고 vue add router커맨드를 입력하고 히스토리 사용 여부를 선택하자. Vue Router 기초 기본으로 제공되는 Vue 페이지에 들어가면 상단에 'Home | About' 이라는 문구가 보일 것이다. 이제 프로젝터 폴더 안의 src/router/index.js 파일을 열어보자. import Home from '../views/Home.vue'; const routes = [ { path: '/', name: 'Home', component: Home, }, { path: '/about', name: 'About', component..

영어는 얼마든지 재밌고 쉽게 배울 수 있는 언어인데, 많은 사람들이 영어를 어려워하고 재미없어 한다. 대부분 영어를 문법과 단어 위주로 공주하기 때문이다. 나는 영어를 문법과 단어 위주로 공부하는 것에 굉장히 반대한다. 그 이유는 영어에 흥미를 잃게 되는 큰 원인이 되기 때문이다. 그렇다면 어떻게 공부해야 할까. 우선 자신의 관심 분야에 관한 영어 기사들을 찾아보자. 영어를 잘하지 못하는 사람들에게는 식상하지만은 Time for Kids를 강력 추천한다. 우선 무료고 수준별로 기사가 나뉘어져 있으며 긴 기사에는 영어로 듣기 기능을 제공한다. 어느 정도 실력이 된다면 영어로 된 소설이나 BBC 기사, Time지 기사들을 추천한다. 영어로 된 흥미로운 팟캐스트를 듣는 것도 상당히 좋은 방법이다. 내가 재밌게..

Vue 시작해보기 Vue를 현재 처음으로 배워보는 중이다. Vue를 시작하는 방법부터 차근차근 공부해보려고 한다. (참고로 나는 인프런에서 Vue.js 제대로 배워볼래?강의를 통해 학습 중이다.) 시작하기 전에 vs코드 확장으로 Vetur를 까는 것을 추천한다. https://vuejs.github.io/vetur/ Vue CLI 설치하기 우선 Vue를 사용하기 위해서는 Vue CLI를 설치해야 한다. Vue CLI는 쉽게 Vue 프로젝트를 생성하고 관리할수 있게 해주는 프로그램이다. Vue 프로젝트의 폴더구조, 필요한 파일들, 기본 설정 옵션을 명령어를 사용해 자동으로 만들 수 있게 해준다. https://cli.vuejs.org/ 아래는 Vue CLI를 설치하는 방법이다. 터미널을 열어 설치하면된다...

내가 만들었던 여러 디자인 중에서 제일 마음에 든다.