전체 글 201

[Notion] 스타트업에서 노션 활용하기 - Notion 크레딧 제공 확정!

현재 회사에서 위키로 매우 잘 사용하고 있는 Tool은 바로 Notion이다. Notion이 요즘 메모 어플로 급부상하면서 한국 내 스타트업에서 많이 이용 중인데 스타트업에서 Notion을 왜 선호할까?🤔 🧐스타트업에서 자주 쓴다는 노션의 장점 알아보기 1️⃣실시간으로 공동 작업 가능 노션의 가장 장점은 노션에 같은 팀원들이 모두 실시간으로 페이지 작업이 가능하다. 항상 최신 데이터를 누군가 업데이트해 놓으면, 모든 팀원들이 최신 페이지를 볼 수 있기 때문에 언제나 최신화된 정보를 관리할 수 있다. 파일을 주고 받으면서 버전 1, 버전 2, 버전 3 등 계속 늘어나면서 혼선이 생기기 쉬운데 노션으로는 항상 모든 팀원들이 최신의 자료를 볼 수 있다. (유료 플랜을 이용하면 히스토리까지 알아서 관리해주니 백..

etc./Notion 2022.05.10

[javascript/Vue] dayjs에서 요일 한국어 적용하기 (locale/ko)

moment.js를 걷어내고 day.js를 메인 날짜 라이브러리로 사용 중이다. https://ordinary-code.tistory.com/60 [javascript/Vue] moment.js 지원 중단으로 dayjs로 변경하기 🙅‍♀️moment.js 나의 프로젝트의 날짜 시간 계산을 하는 라이브러리는 moment.js를 사용했다. 오늘 기준 다운로드 수가 18,204,885 많은 개발자들에게 사랑받은 라이브러리였다. 나 역시 프로젝트마 ordinary-code.tistory.com 👩‍🏫dayjs에서 요일 표시하기 기본 날짜 포맷의 경우 영어든 한국어든 상관없이 사용하고 있었는데 dayjs를 이용해서 요일을 표시하게 되었는데, dayjs에서 요일을 표시하면 기본적으로는 영어 약어로 표시가 된다. 만..

FrontEnd/Vue.js 2022.05.03

[Vue/nuxt] mounted에서 $ref undefined 해결하기(<client-only> 이슈)

📌최근 발생한 문제점 $ref undefined mounted()에서 $ref에 접근을 해서 무언가를 적용을 하려고 해 봤는데, $ref에 접근이 안되고 undefined가 뜨는 오류가 발생했다. 무엇이 문제인지 찾아본 결과 안에 있는 $ref에 접근을 할 때, 초반에 undefined가 발생할 수 있다는 점을 찾아냈다. 이러한 상황은 왜 발생하는걸까? 먼저 이 문제를 알기 위해서는 를 왜 사용하는지를 알아야 했고, SSR과 CSR의 차이를 먼저 이해해야 되어서 오늘은 이 부분을 정리해보기로 했다! ⚙️SSR이란? Server Side Rendering이라고 해서 Server에서 렌더링이 된 HTML 화면을 만들어서 보내주는 방식을 말한다. SSR로 처리가 된다고 하면 모든 리소스를 서버에서 랜더링 한 ..

FrontEnd/Vue.js 2022.05.02

[Vue.js/Nuxt] vue-masonry-css를 이용해서 카드레이아웃 구현하기

📌masonry Layout masonry는 건물의 벽, 돌벽 등으로 벽돌을 쌓는 공사를 말한다. 보통 이런 레이아웃은 핀터레스트 스타일이라고 해서 높이가 다른 각자의 카드들을 높이에 맞춰 딱딱 들어맞는 형식의 레이아웃이다. 👩‍💻vue프로젝트에서 masonry 레이아웃 이용하기 실제로 만들려면, npm 중에 vue-masonry-css를 이용하면 손쉽게 적용할 수 있다. vue-masnory-css vue에서 masnory 레이아웃을 만들어줄 npm이 존재한다. 사용방법은 그냥 npm install만 해주면 된다. npm i vue-masonry-css --save plugins/client.js import Vue from 'vue' import VueMasonry from 'vue-masonry-c..

FrontEnd/Vue.js 2022.04.30

[Vue.js/Nuxt] 구글애널리틱스4 vue-gtag로 연동하기

✔️구글 애널리틱스 UA 종료 유니버설 애널리틱스(Universal Analytics, UA) 버전이 23년 7월 1일 이후부터 서비스가 종료된다는 안내가 왔다. 유니버설 애널리틱스 서비스 종료시점에서는 더 이상 신규 데이터 수집 및 조회가 안되기 때문에 구글 애널리틱스 4로 이전을 해야 된다. 🙅‍♀️vue-analytics 지원 중단 기존 지원하는 vue-analytics에서도 더 이상 지원이 안된다고 안내 문구가 떴다. 구글 애널리틱스 analytics.js 자체가 중단되고, gtag.js로 수집을 하라 권고가 되면서 vue-analytics 말고 vue-gtag를 이용을 하라고 안내가 되어있다. 📊vue-gtag https://www.npmjs.com/package/vue-gtag vue-gtag..

FrontEnd 2022.04.27

[vue.js] image 없을 경우 default 이미지 처리하는 방법 @error 사용하기

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의 경우 원본 이미지가 깨지거나, 로드되지 않..

FrontEnd/Vue.js 2022.04.26

[Notion/노션] 데이터베이스 이름 숨기기 (표 제목없음 숨기기)

🥲데이터베이스 이름 숨기기 페이지로 생성된 데이터 베이스 말고 인라인으로 데이터베이스를 생성하면 제목을 입력했어야 했고 기존에는 이름이 없으면 제목 없음이라는 데이터베이스명이 늘 따라다녔다. 이제는 제목 없음 옆에 점 3개를 눌러서 보기에서 제목 숨기기를 선택하면 표에서 제목이 사라지는 것을 볼 수 있다. 만약 숨긴 데이터 베이스의 제목을 다시 보이게 하고 싶다면? 데이터베이스 우측 상단 점 3개를 클릭해서 레이아웃에서 데이터베이스 제목 표시를 클릭해주면 다시 표의 제목이 나타나게 된다. :) 노션의 데이터베이스 대규모 업데이트로 좀 더 편하게 조건들을 걸어서 원하는 데이터를 잘 찾을 수 있게 된 것 같아서 만족스럽다.

etc./Notion 2022.04.24

[자바스크립트] 세미콜론(;)을 꼭 안찍어도되는 ASI 알아보기

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

FrontEnd/Javascript 2022.04.11

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