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..

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를 설치하는 방법이다. 터미널을 열어 설치하면된다...

사람들이 마크다운에서 엔터를 여러번 하고 싶을 때 태그를 쓰라고들 하는데 vs코드에서 태그를 쓰니 잘못된 표현이라고 나왔다. 티스토리에 업로드하는데에는 상관이 없지만 이왕이면 에러 없는 코드를 쓰고 싶은게 개발자의 마음이다. 구글에 영어로 찾아보니 라는 태그를 쓰면 된다고 한다. 여러번 엔터를 할 때는 이렇게 쓰면 된다.실행결과: 여러번 엔터를 할 때는 이렇게 쓰면 된다. 참고로 는 NO-BREAK-SPACE를 뜻하는 특수 문자이다.

그 동안 리액트로는 따라써보기를 많이 했는데, 한 번 스스로 리액트로 날씨API를 끌어와 날씨를 알려주는 간단한 사이트를 하나 만들어 볼 생각이다. 당장 생각나는 걸로는 1. 날씨 API를 끌어와야하고 2. 매시간 업데이트 되어야하며 3. 도시를 고를수 있어야한다. 그 외는 만들어가며 해결해볼 생각이다.