김평범's OrdinaryCode

Vue.js 공부할 때 이미지 경로를 하드코딩하지 않고 변수로 연결했던 방법을 공유했었다. https://ordinary-code.tistory.com/85 [Vue.js] 이미지 경로를 변수, data 값, URL로 이미지 연결하는 방법 (require이용) vue.js에서 img 태그 내에 이미지를 특정 분기를 이용해서 해당 값에 맞는 이미지를 바꿔가면서 보여주고 싶을 때가 있다. 혹은 data에 선언한 변수명으로 img 이름으로 대체해서 보여주고 싶을 때 ordinary-code.tistory.com 오늘은 이미지 경로를 가져오다가 에러가 발생할 경우 default 이미지를 호출하는 코드를 공유해보려고한다. 😎img 태그 @error 활용하기 @error의 경우 원본 이미지가 깨지거나, 로드되지 않..

✔️자바스크립트의 세미콜론(;) 자바스크립트에서는 세미콜론을 찍어주는 이유는 내가 쓰는 구문이 종료가 되었다 라는 의미이다. 프로그래밍 문법에 맞게 작성한 코드를 적고 해당 코드가 완료되면 그 뒤에 종료가 되었다는 의미로 세미콜론을 찍어준다. let a = 1; console.log(a); 하지만, 개발을 하다 보면 세미콜론을 정확히 찍을 때도 있지만, 개발을 하다보면 세미콜론을 까먹고 안 찍는 경우도 있다. 하지만 보통 세미콜론을 안찍어도 오류가 난적이 없다! 그런데도 꼭 세미콜론을 찍어야하는건가? 하지만 오류가 안나는 이유는 바로 ASI 때문이다! 🎇ASI(Automatic Semicolon Inserion, 자동 세미콜론 삽입) ASI는 자바스크립트 엔진에서 자동으로 ASI를 찍어주는 기능이 있기 ..

Animation.css npm으로 간단히 설치가 가능하며 설치된 이후 해당 css를 CDN혹은 파일로 import 해놓으면 class 를 통해서 Animation을 이용할 수 있다. 위 사이트에서 실제로 제공되는 애니메이션 효과도 모두 확인해볼 수 있다. 간단하지만 매우 강력한 라이브러리 https://animate.style/ Animate.css | A cross-browser library of CSS animations. Animate.css is a library of ready-to-use, cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and attention-..

🏷️Vue ref란? Vue에서 특정 컴포넌트나 HTML에 접근을 하고 싶을 때는 ref속성을 이용해서 접근이 가능하다. 먼저 아래의 코드로 예시를 보자. /page/ref.vue 상위컴포넌트 입니다. 하위 컴포넌트 클릭 이벤트 호출 /components/refComponent.vue 하위 컴포넌트 입니다. 상위컴포넌트 클릭 Count : {{count}} ref.vue에서 refComponent에 접근해서 하위 컴포넌트의 function을 실행하는 코드이다. 이럴 경우 하위 컴포넌트에 ref를 이용해서 컴포넌트 명에 접근한다 그다음 해당 컴포넌트에 methods에 등록된 clickCount를 호출해서 숫자를 올리는 코드이다. 이렇듯 ref를 이용하면 해당 컴포넌트에 손쉽게 접근할 수 있다. 🚩ref 사..

🤔Math 객체란? Math객체는 자바스크립트에 내장되어 있는 객체이다. 주로 숫자를 다루는 수학에 관련된 함수들이 들어가 있다. 그중 오늘은 내가 자주 사용하는 Math.random()에 대해 공부하겠다. 📈Math Random 함수를 사용할 때 대시보드나 그래프를 그려줄 때 가끔 데모 사이트를 만들 때 랜덤 값들이 필요한 경우가 있다. 이럴 때 나는 주로 Math.random()을 이용해서 특정 범위의 랜덤 값을 만들어서 연동한다. 📕Math Random 이용하기 실행화면 실행을 해보면 알겠지만 0 이상 1 미만이 난수를 발생해준다. 1️⃣최소 최대값 사이의 난수 생성하기 0,1 사이 난수가 아니라 가끔은 내가 원하는 정수의 난수가 필요할 때도 있다. 이때는 min과 max 값을 설정해서 아래와 같이..

javascript를 작성하다 보면 JSON과 javascript에서 Object가 매우 흡사한 형태를 가지고 있다는 사실을 알 수 있다. 형태가 비슷하기 때문에 똑같아고 생각하는 분들도 있을 테지만 엄연하게 두개는 다르다. 그럼 오늘은 JSON과 javascript의 Object의 차이를 알아보겠다. 📄JSON이란? JSON은 Javascript Object Notation의 약자로 서버와 데이터를 교환할 때 사용하는 Data 형태이다. JSON은 단순히 데이터를 표시하는 포맷일 뿐이고 프로그래밍 문법은 아니다. JSON은 서버와 클라이언트 데이터를 주고받을 때 현재 많이 사용되는 데이터 표시방식이며, 자바스크립트의 Object와 굉장히 비슷하게 작성이 되지만 이는 단순한 텍스트일 뿐이다. JSON형태..

😶‍🌫️css 가상 요소 ( pseudo-Element) 가상 요소는 css를 통해서 가상의 element를 추가하는 코드이다. 이미 작성된 HTML에 새로운 스타일을 주기 위해서 가상 요소를 추가해서 사용을 할 수 있다. :before는 HTML안 앞쪽에 추가하는 가상 요소이고 :after는 HTML이 끝날 때 추가되는 가상 요소이다. css 가상 요소 사용법 div:after {...} div:before {...} 가상 요소는 css는 내가 처리할 요소 뒤에 :after, :before로 붙여서 만들 수 있다. 코드는 아래를 참고해보자. sample Code 텍스트 결과 화면 위의 코드를 실행해 보면 위에 같이 코드가 나타난다. HTML상에서는 div에. text랑 클래스를 가진 div 안에 있는 ..

홈페이지 상에서 가끔 자주 묻는 질문 등의 페이지에 들어가면 토글 메뉴의 UI를 많이 볼 수 있다. 은근 홈페이지를 제작할 때 많이 쓰는 토글 메뉴를 만들기 위해서는 주로 라이브러리를 이용해서 작성을 했는데 이번 HTML5 태그로만 만들 수 있다고해서 이에 대해 설명해보려고 한다. 1️⃣HTML details & summary Tag 흔히 말하는 아코디언 메뉴를 작성하려면, 사용자가 먼저 볼 수 있는 타이틀과 클릭했을 때 보일 세부 내용으로 이루어진다. 해당 태그안에는 클릭했을 때 보일 세부내용을 작성할 수 있다. 클릭 전 보여질 타이틀 내용을 작성할 수 있다. 위의 예시처럼 만들려면 아래와 같은 코드를 이용하면 된다. 자주묻는 질문1 여기에 자세한 내용을 작성합니다. 예전에 Javascript로 구현을..

좀 더 감각 있는 버튼, 배경을 만들어줄 때 그러데이션 효과를 많이 이용한다. 대부분 그라데이션 효과가 있을 때는 CSS를 이용해서 작성을 해주는데 디자이너가 별도로 있는 분들이라면 색을 지정해서 오지만 혼자서 개발을 할 때는 적절한 색 조합을 찾지 못하는 경우도 많다. 이때 유용한 색상 조합의 그러데이션 샘플을 제공해주는 사이트인 uigradients를 이용해보도록 하자 그러데이션 추천 사이트 uigradients uigradients는 다양한 그라데이션 색 조합을 추천해주는 사이트이다. 웹퍼블리셔나 디자이너분들은 해당 사이트에서 적절한 색상 코드를 찾을 수도 있다. 먼저 사이트에 접속해보자 uigradients.com/ uiGradients - Beautiful colored gradients uiG..

웹사이트를 구성하다 보면 로딩 바가 은근 많이 사용된다! 보통 css, Javascript로 만들기도 하지만 HTML만으로도 Process bar를 만들 수 있다고 한다. 🌖HTML progress tag html에서 이용하는 progress tag는 로딩바 형태의 UI를 생성해준다. 안에 들어가는 속성은 아래와 같다. value : 실제 값 min: progress의 최소값 max: progress의 최댓값 progress tag를 이용하면 아래와 같은 UI가 생성된다. sample code 진행상항 실제로 0부터 100 사이의 중간인 50%까지 파란색이 차있는 것을 볼 수 있다. 🎨HTML Progress CSS 적용하기 기본적으로 제공하는 UI는 실제로 만들 화면상에 어울리지 않을 가능성이 높아서 ..