의도적인 연습!! HTML Vue Course Goals 뷰 공식홈페이지 입니다. JavaScript const app = Vue.createApp({ data() { return { courseGoal: '뷰 열심히 공부하기', vueLink: "https://vuejs.org/", } }, methods: { randomMsg() { return this.courseGoal } } }).mount('#user-goal') 보통 {{ }} 문법에 html 태그를 직접적으로 넣는건 허용되지 않는다. 이는 보안상 이슈 때문이며, 크로스사이트스크립팅 공격을 허용할 수 있다. 다만 몇몇 경우에 한해 html 태그를 직접 문서에 바인딩해야할 경우가 생기는데, 이 때는 html 태그에 v-html="vue데이터"..
학습목적 의도적인 반복 학습 및 배운 내용을 직접 코드하기 위해 vue의 예약어 중 하나인 methods를 사용해보기 위해 HTML Vue Course Goals My Course Goal {{ courseGoal }} {{ randomMsg() }} 랜덤링크로 접속합니다. p 태그에 보이는 {{ randomMsg() }} 는 함수를 실행하는 문법인데 html에서 동작이 될까? a 태그의 어트리뷰트인 v-bind:href="randomLink()" 도 함수를 실행하는 문법인데 html에서 동작이 될까? 된다! JavaScript const app = Vue.createApp({ data() { return { courseGoal: '뷰 열심히 공부하기', vueLink: "https://vuejs.org..
학습결과 interpolation(보간법)은 태그 내부의 텍스트 노드를 채워넣을 때 쓸 수 있다. ex) {{ vuedata }} v-bind는 태그의 어트리뷰트에 데이터를 바인딩 시켜줄 때 사용할 수 있다. ex) 주소를 눌러요 VUE 내부동작 추론 최상단에 vue가 cdn으로 설치가 되어있기 때문에 vue 문법을 사용할 수 있게 된다. vue는 html 상단에서 vue cdn과 app.js를 defer로 미리 다운로드한 뒤 HTML 파싱이 끝날때까지 대기한다. (defer 키워드로 인해 js코드 다운로드와 html 파싱이 동시에 이루어지나, js의 실행은 html 파싱이 전부 이뤄진 뒤 실행된다. 따라서 vue의 내부 동작은 js가 dom을 변경함으로써 이뤄질 것이다.) HTML 파싱이 끝난 뒤, v..
학습목적 CDN 방식을 통해 먼저 vue와 친숙해져보자. 기본이라 할 수 있는 Options API를 한번 사용해보자. index.html Vue Course Goals {{ courseGoal }} My Course Goal {{ courseGoal }} script를 통해 vue를 cdn으로 사용했다. (js는 defer 프로퍼티를 이용해 화면이 렌더링이 된 이후 실행이 되도록 한다.) body안의 {{ courseGoal }} 은 보간법(interpolation) 이라는 vue 특유의 데이터 바인딩 기법이다. html과 vue가 결합된 형태에서는 vue가 특수구문을 읽어들여 html을 다르게 파싱하게 한다. app.js const app = Vue.createApp({ data() { return ..
transform transform(변형)은 html 요소를 여러 형태로 변형할 때 사용하는 속성으로, transition과 함께 사용하면 재미있는 효과를 낼 수 있다. transform에 속한 대표적으로 사용하는 속성은 scale, rotate, translate, skew, origin 등이 있다. scale hello world scale은 요소의 크기를 변환시킬 때 사용하는 속성으로, 중심점(transform-origin)을 따라 커지는 효과를 나타낸다. scale(1)에서 1은 100%를 의미하며, 1 이상 또는 이하의 값을 입력해야 변형이 일어난다. scale은 2가지 값을 인수로 받을 수 있다. (x축, y축) 하나만 입력하면 x, y축 모두 동일한 수치를 나타내게 된다. 의외로 음수값도 들..
버튼을 누르면 2초 뒤 DOM이 조작되어 브라우저에 렌더링 된다. 0. HTML 뼈대 및 정리 안된 코드 분식점 음식제작 한 껏 늘려쓴 코드이다. if문이 중첩되어있고, 모든 기능들이 함수 하나에 전부 내장되어 있다. 1. if 합치기 if문이 2개라면 연산자로 묶어서 하나로 표현해줄 수 있다. 이를 통해 코드 한 줄을 줄일 수 있고, 들여쓰기를 삭제해줄 수 있다. 1-1. if문 밖으로 코드 빼기 (+ 드모르간의 법칙) 논리 연산에서 AND와 OR 연산을 서로 바꾸고 각 변수에 부정을 취할 때 두 값은 논리적으로 같다는 것이 드모르간의 법칙이다. ('el이 존재하며 orderList가 배열로 존재해야 한다'와 'el이 없거나 orderList가 없어야 한다'는 논리적 동치관계) 여기에서는 드 모르간의 ..
문제 const grades = [80.55, 90, -95, -45, 44.3, 100, 177] /* 아래 조건에 따른 새로운 배열을 만들어서 console.log 해야 합니다. 1. 0 ~ 100점이 유효한 점수입니다. 2. 소수점을 제거해주세요. 3. 각 엘레멘트의 뒤에 '점'을 추가해주십시오. ex) 80점 4. console.log로 출력 해주십시오. */ const validGrades = [] // 새로운 배열입니다. for문, if문 const grades = [80.55, 90, -95, -45, 44.3, 100, 177] const validGrades = [] // 새로운 배열 // 1번 풀이 for (let grade of grades) { if (grade >=0 && grad..
mysql을 배워서 프로젝트에 도입해보았다. mySQL 접속 mysql을 설치했다면, mysql에 접속해야 한다. mySQL이 설치된 폴더 경로로 이동한 후 명령 프롬프트를 통해 MySQL에 접속할 수 있는데, 내 경우, 경로는 C:\Program Files\MySQL\MySQL Server 8.0\bin 이다. mysql -h [접속할주소] -u [사용자명] -p Enter password: [암호 입력] 접속한 후 프롬프트가 mysql> 형태로 바뀌었다면 접속이 된 것이다. mysql> 이후 SQL 명령어를 입력하면 mysql을 사용할 수 있다. 스키마(데이터베이스) 생성 스키마를 생성해보자. 먼저 명령 프롬프트로 진행할 경우 mysql에 접속이 되어있어야 한다. CREATE SCHEMA [데이터베이..
product라는 객체가 있다. info라는 객체에 product 키는 값으로 product라는 객체를 가지고 있다. 그래서 전역 product 객체와 info 내부 product의 객체는 주소값이 같다. 기초를 다시 떠올려보기 위한 장난이었다.
문제 링크 https://www.acmicpc.net/problem/1065 1065번: 한수 어떤 양의 정수 X의 각 자리가 등차수열을 이룬다면, 그 수를 한수라고 한다. 등차수열은 연속된 두 개의 수의 차이가 일정한 수열을 말한다. N이 주어졌을 때, 1보다 크거나 같고, N보다 작거나 www.acmicpc.net 문제 설명 어떤 양의 정수 X의 각 자리가 등차수열을 이룬다면, 그 수를 한수라고 한다. 등차수열은 연속된 두 개의 수의 차이가 일정한 수열을 말한다. N이 주어졌을 때, 1보다 크거나 같고, N보다 작거나 같은 한수의 개수를 출력하는 프로그램을 작성하시오. 문제 해석 등차수열은 항이 넘어갈 때마다 정해진 수 만큼 증가하는 수열이다. (만약 수열의 각 항이 a1, a2, a3, a4, ....
