728x90 > 코딩애플 (부분공개)/인스타그램을 만들며 배워보는 Vue.js 3 완벽 가이드3 HTML에 데이터 꽂아넣는 Vue 데이터바인딩 문법 오늘의 5분 숙제 : 일단 이렇게 생긴 데이터를 하단에 하나 저장하십시오. products : ['역삼동원룸', '천호동원룸', '마포구원룸'] ▲ 그 데이터와 {{데이터바인딩}} 문법으로 대충 이렇게 생긴 HTML 레이아웃을 만들어오십시오. 가격은 대충 임시로 아무거나 기입하시길 바랍니다. HTML에 자바스크립트 데이터를 꽂아넣고 싶을 때가 있습니다. 데이터바인딩이라고 하는데Vue에서 데이터바인딩 하는 문법을 2개 알아보도록 합시다. 근데 애초에 데이터바인딩을 왜 하는지 의문점 부터 들지 않습니까.그런거 궁금해해야 나중에 여러분 데이터 바인딩 할지 말지 스스로 판단하는 훌륭한 사람이 됩니다. 그것 부터 알아봅시다. Vue 개발은 어려운게 아닙니다 dkssudsfadf우선 HelloWorld 글.. 2024. 7. 12. 개발환경 셋팅과 Vue 3 설치 (자주겪는 에러 포함) (참고) 설치나 실행시 ESLint is not a constructor 에러가 뜨는 경우 터미널에서 npm i -D eslint@7.32.0 입력해봅시다. (참고) VSCode extension중에 Vetur는 지원종료되어서 Volar 설치합시다. Vue 설치부터 하도록 합시다.문법 체험을 위해 HTML 파일에 라이브러리 식으로 간략하게 설치하는 방법은 쓰지 않고 실제 Web-app 개발에 필요한 Vue 프로젝트를 처음부터 만드는 식으로 진행합니다.그러려면 Vue-cli 라는 라이브러리가 필요한데 그것 부터 설치하도록 합시다. 그리고 요즘은 설치과정 맥이나 윈도우나 똑같음 요약부터 하자면 1. nodejs 최신버전 설치우측 최신버전이 뭔가 에러가 덜 납니다. 그래도 에러나면 LTS 왼쪽 버전.. 2024. 7. 11. 카카오가 리액트 냅두고 왜 Vue 쓰는지 알려드림 실은 카카오 프론트엔드 개발자들은 리액트랑 반반 섞어서 쓴다고 합니다.다만 초절정 유행 중인 리액트라는 선택지를 놔두고네이버든 카카오든 Vue로 새로운 페이지들을 만들어내는 경우가 많습니다.네이버 뮤직도 Vibe로 바꿀 때 Vue를 이용해서 프론트엔드를 디자인했더라고요.이유를 알아봅시다. 0. 일단 React Angular Vue 라이브러리는 왜 쓰냐면 항상 "이걸 왜 쓰는지" 알아야 배울 때 이해가 쉽습니다.이건 web-app을 만들 때 씁니다. 이게 뭐냐면 페이지가 새로고침되지 않고 부드럽게 전환되는 사이트를 뜻합니다. 페이지 전환시 페이지를 새로 요청하는게 아니라자바스크립트로 HTML을 갈아치우면서 부드럽게 구현하는 것인데 근데 쌩자바스크립트로 이런거 만들려면 귀찮고 코드가 길어집니다. 그래서 V.. 2024. 7. 11. 이전 1 다음 728x90
