2022/03 8

css Animation을 만들어주는 무료 라이브러리 모음

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

FrontEnd/css 2022.03.30

[Vue.js] ref undefined일 경우 해결 방법 (this.$nextTick)

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

FrontEnd/Vue.js 2022.03.22

[Notion] 데이터베이스 보기 추가 사용법 가이드 (복제, 필터 적용방법)

🔎Notion 빠른 필트 업데이트 먼저 확인해보기 https://ordinary-code.tistory.com/145 [Notion]노션 데이터베이스 데이터베이스 빠른필터 이용하기 Notion에서 내가 잘 쓰는 기능은 바로 데이터베이스이다. 나의 생각에는 노션의 데이터베이스가 다른 메모 어플과 가장 큰 차이점이라고 생각하고 특히 이 구조를 이용한다면 노션의 예쁜 디자인 ordinary-code.tistory.com Notion 업데이트 중 전 포스팅에서는 빠른 필터 기능을 살펴봤는데, 오늘은 데이터 베이스 보기 추가 업데이트에 대해서 자세히 알아보려고 한다. 🔥데이터베이스 보기추가 기능 이용하기 😊노션 레이아웃 선택하기 노션에서는 데이터베이스를 입력을 해서 데이터를 관리할 수 있다. 만약 노션의 데이터 ..

etc./Notion 2022.03.17

[Notion]노션 데이터베이스 데이터베이스 빠른필터 이용하기

Notion에서 내가 잘 쓰는 기능은 바로 데이터베이스이다. 나의 생각에는 노션의 데이터베이스가 다른 메모 어플과 가장 큰 차이점이라고 생각하고 특히 이 구조를 이용한다면 노션의 예쁜 디자인을 유지하면서 데이터 관리도 효율적으로 할 수 있다. 이런 점에서 내가 노션을 메모 어플로 잘 쓰는 이유이기도 하는데, 강력한 데이터베이스에 관련해서 오늘 노션에서 새로운 기능들이 추가돼서 바로 포스팅을 해보기로 했다. 🔎데이터베이스 업데이트 뭐가 달라졌나요? 일단 데이터베이스가 전체적으로 디자인이 변경되었다. 기존 데이터베이스보다 좀 더 강력한 기능들이 추가되고, 사용성도 훨씬 편하도록 UI가 수정되었다. 1️⃣노션 빠른필터 적용하기 데이터베이스에서 필터를 적용하려면 기존에는 8번 이상 클릭을 해야 되는 불편함이 있..

etc./Notion 2022.03.16

[Notion] 노션 포트폴리오에 차트 & 그래프 넣어보기 (Notion Charts)

🧑‍💻Notion 포트폴리오 만들기 후기 기존에 만들어놨던 노션으로 만든 개발자 포트폴리오가 매우 큰 인기로 노션 페이지 방문자 수가 벌써 6만이 넘어갔다. 👏 감사합니다.🙇‍♀️ 주니어 개발자분들과 현역 개발자 분들이 많은 관심을 주셔서 오늘은 노션 포트폴리오 업데이트에 대한 콘텐츠를 준비해 봤다. 👇아직 Notion포트폴리오 만드는 방법을 못 보셨다면? https://ordinary-code.tistory.com/39 [Notion]노션을 이용하여 개인용 포트폴리오 및 이력서 작성하기(신입, 경력직 포트폴리오 템플릿 🐣 들어가기 전 첫 취직 준비 시 아무것도 커리어가 없는 경우가 많다. 사람인, 잡코리아 등 간략히 적은 이력서는 누구나 가지고 있다면, 내가 그들보다 앞서기 위해서는 좀 더 나은 점이 ..

etc./Notion 2022.03.15

[Javascript] Math 객체를 이용해서 랜덤 값 만들기(Math.random)

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

FrontEnd/Javascript 2022.03.14

[javaScript]JSON 과 javascript의 Object 차이 바로 알기

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

FrontEnd/Javascript 2022.03.07

[css] 가상요소 ::after, ::before 사용방법 및 동작 안할 때 (content)

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

FrontEnd/css 2022.03.03