분류 전체보기

 (51)
[ Jquery ] 선택자 (자식선택자, 형제선택자, 부모선택자 등) 선택자 · $(선택자) 함수 : 태그를 검색해서 반환한다. · 제이쿼리는 태그를 찾을 때 BOM or DOM을 사용하지 않고 CSS 선택자를 사용한다. 1. 태그 선택자 선택자에 태그명을 적어 사용한다. $('div').css('color', 'pink'); 2. id 선택자 선택자에 #과 id명을 적어 사용한다. id는 키 역할을 하므로 특정 요소, 객체, 태그를 제어하기 위하여 사용한다. $('#id').css('color', 'pink'); 3. class 선택자 선택자에 .과 class명을 적어 사용한다. class는 공통적인 속성을 가진 즉, 그룹핑 되어 있는 요소들을 묶어서 제어하기 위하여 사용함. $('.class').css('color', 'pink'); 4. 자식 선택자 / 자손 선택자..
[ JavaScript ] nullish 병합 연산자 '??' nullish 병합 연산자 '??' · nullish 병합 연산자 ??를 사용하면 짧은 문법으로 여러 피연산자 중 그 값이 '확정되어있는' 변수를 찾을 수 있다. a ?? b 의 평가 결과는 다음과 같다. · a가 null도 아니고 undefined도 아니면 a · 그 외의 경우는 b nullish 병합 연산자 ??없이 x = a ?? b와 동일한 동작을 하는 코드를 작성하면 다음과 같다. x = ( a !== null && a !== undefined ) ? a : b; 비교 연산자와 논리 연산자만으로 nullish 병합 연산자와 같은 기능을 하는 코드를 작성하면 코드가 길어진다. 또 다른 예시를 살펴보자. firstName, lastName, nickName 이란 변수에 사용자 이름이나 별명을 저장하..
[ JavaScript ] 논리 연산자 논리 연산자 · 자바스크립트엔 세 종류의 논리 연산자 | | (OR), && (AND), ! (NOT)이 있다. · 연산자에 '논리'라는 수식어가 붙긴 하지만 논리 연산자는 피연산자로 불린형뿐만 아니라 모든 타입의 값을 받을 수 있다. 연산 결과 역시 모든 타입이 될 수 있다. 1. || (OR) 'OR' 연산자는 두 개의 수직선 기호로 만들 수 있다. result = a || b; 전통적인 프로그래밍에서 OR 연산자는 불린값을 조작하는 데 쓰인다. 인수 중 하나라도 true이면 true를 반환하고, 그렇지 않으면 false를 반환한다. 자바스크립트의 OR 연산자는 다루긴 까다롭지만 강력한 기능을 제공한다. OR을 어떻게 응용할 수 있는지 알아보기 전, OR 연산자가 불린값을 어떻게 다루는지 알아보자 O..
[ JavaScript ] if와 ' ? ' 를 사용한 조건 처리 if와 '?'를 사용한 조건 처리 · 조건에 따라 다른 결과가 나와야 할 때 if문과 조건부 연산자 '?' 사용 1. if문 if(···)문은 괄호 안에 들어가는 조건을 평가하는데, 그 결과가 treu(참)이면 코드 블록이 실행된다. let year = prompt('이글은 무슨 년도에 발행되었을까요?'); if ( year == 2022 ) alert('정답입니다!'); 위 예시에선 조건(year == 2022)이 간단한 경우만 다뤘지만 조건문은 더 복잡할 수도 있다. 조건이 true일 때 복수의 문을 실행하고 싶다면 중괄호로 코드 블록을 감싸야한다. if (year == 2022) { alert('정답입니다!'); alert('아주 똑똑하시네요!'); } if문을 쓸 때는 조건이 참일 경우 실행되는 ..
터미널로 Github 올리기 및 Vue.js 배포 방법 1. GitHub repository 생성 2. 터미널 키고 cd 폴더주소 3. git init 4. git remote add main 깃허브URL 5. git add -A 6. git commint -m “커밋메세지” Vue.js 배포 할 때 해야하는 작업 1. config.js 파일에 아래 코드 추가 module.exports = { outputDir: "./docs", publicPath: "" } 2. npm run build 3. Push할때는 docs 폴더안의 파일만 해주면 됨
[ Vue.js ] v-for 반복문 V-for반복문 · HTML이 반복될때 축약하는 문법 사용법 원하는 태그에 v-for="작명 in 반복할횟수"를 적고 반드시 :key="작명"과 함께 사용한다. Kim // Kim이라는 span 태그가 3번 출력 v-for 반복문을 사용 할 때 array 또는 object 데이터를 사용할수도 있다. data(){ return { names : ['Kim', 'Lee', 'Han'] } } 먼저 데이터를 저장 한 후, {{ names }} // Kim, Lee, Han 이라는 span 태그가 각각 한개씩 출력 반복할 횟수에 저장된 데이터를 넣으면 반복되면서 names에 저장된 데이터들이 출력된다. * names 총 3개 = 반복되는 횟수 3번 v-for안에 변수는 총 2개이다. {{ names }} (..
[ Vue.js ] 데이터바인딩 데이터바인딩(Data Binding) · 서버의 데이터를 HTML에 꽂아 넣는 문법 · 데이터 변경이 자주 일어날 때 사용한다. 사용법 데이터를 보관하고(또는 서버의 데이터) {{ 데이터이름 }}(콧수염) 문법으로 HTML 중간에 어디든 꽂아 넣는다. 보통 콧수염 문법을 사용하지만 속성값을 데이터바인딩 할때는 :속성값 = 데이터이름 으로 사용한다. 하드코딩을 하지 않아 수정이 쉽고 재사용이 가능한 코드가 된다. 아이스크림 //속성값 데이터 바인딩 {{ price }}원 //콧수염 문법
[ JavaScript ] 비교연산자 비교연산자 · 보다 큼/작음 : a > b, a = b, a 1 ); // true alert( 2 == 1 ); // false alert( 2 != 1 ); // true 반환된 불린값은 다른 여타 값처럼 변수에 할당 할 수 있다. let result = 5 > 4; // 비교 결과를 변수에 할당 alert( result ); // true 2. 문자열 비교 · 자바스크립트는 '사전'순으로 문자열을 비교한다. '사전편집'순 이라고 불리기도 하는 이 기준을 적용하면 사전 뒤쪽의 문자열은 사전 앞쪽의 문자열보다 크다고 판단된다. · 실제 단어를 사전에 실을 때 단어를 구성하는 문자 하나하나를 비교하여 등재 순서를 정하는 것과 같이 자바스크립트도 문자열을 구성하..

티스토리툴바