김평범's OrdinaryCode

노션에서 테이블 중 캘린더 테이블을 사용하는 경우가 있다. 이때 기본적으로 일요일부터 시작하는 캘린더가 생성이 되는데 노션 캘린더 시작 요일도 변경이 가능하다! 📆노션 캘린더 생성하기 노션에서 캘린더는 데이터 베이스 형태로 생성이 가능하다. 노션에서 /캘린더 혹은 /calendar로 영어로 검색하면 캘린더 데이터베이스 생성이 가능하다. 노션에서 이런 식으로 캘린더가 생성이 되면 기본적으로 일요일부터 시작되는 캘린더가 생성이 된다. 하지만 사용자에 따라 월요일을 시작하는 캘린더가 익숙한 분들이 있다. 이럴 경우 노션 설정 페이지에서 노션 캘린더 시작 요일을 변경할 수 있다. 🤔노션 달력(캘린더) 시작 요일 변경하는 방법 노션 설정 중 설정과 멤버를 클릭하면 팝업이 하나 뜬다. 설정 페이지에서 언어와 지역을..

Aixos에서 호출을 보내고 에러가 나면 catch를 통해서 retrun 받은 에러 메시지를 사용자에게 보여줘야 할 때가 있다. Axios catch error 매개 변수 sample Code axios.post('/noUrl') .then(res => { console.log(res) }).catch(error => { console.log(error); }); 먼저 내가 호출해도 없는 URL을 만들어서 호출하고 catch를 통해서 error를 통해서 콘솔로그를 찍어보았는데, string 형태로 오류 메시지가 뜨는 것을 볼 수 있다. 만약, 내가 받는 error가 이런 시스템 에러가 아니라 Backend에서 받은 별도의 에러 변수를 사용하기 위해 객체로 받아야 하는 경우가 있다. axios error...

프런트 앤드 개발자는 사용자가 편리한 UI/UX를 제공해주는 것도 중요하고 디자이너가 제작해준 디자인을 100% 구현하는 것도 중요하다. 개발을 하다 보면 잘 챙기진 않지만 이런 부분을 챙기면 좀 더 퀄리티가 올라가는 사이트를 제공할 수 있는 부분들이 있어서 공유해보고자 한다. 1️⃣ 에러 화면 구현하기 생각보다 개발에 급급하다 보면 에러 화면에 대한 퍼블리싱은 미룰 때가 있다. 사용자가 에러화면을 만나는 경우는 종종 있다. 보통 개발이 급하게 돌아가는 경우 에러 화면을 챙기지 못하면, 프로젝트 내에서 제공하는 기본 에러 화면이 뜨는 경우가 있다. 이러한 에러 화면은 사용자에게 정확한 에러 내용을 전달할 수 없을 뿐 아니라 다시 정상적인 화면으로 돌아가는 길을 제공하지 못한다. 좋은 에러 화면에는 사용자..

📃paginate란? paginate를 이용하면 DB에 등록되어있는 행을 페이징 처리를 해서 보여주는 게 가능하다. 만약 데이터양이 많다고하면 paginate를 이용해서 데이터를 나눠서 보여주는 게 가독성 상 좋다. 보통 게시판형태의 UI를 개발할 때 많이 사용하게 될 것이다. 💡vuejs-paginate vue.js에서 쉽게 페이징 처리를 할 수 있게 제공해주는 npm 라이브러리이다. 간단하게 css로 디자인 커스터마이징도 가능해서 사용해보기로 했다. vuejs-paginate 설치하기 https://www.npmjs.com/package/vuejs-paginate vuejs-paginate A simple pagination component for Vue.js www.npmjs.com 먼저 해당 사..

🔽노션에서 토글(toggle)이란? 노션에서 사용되는 토글은 제목을 표시하고 접으면 안의 내용이 안 보이게 처리하는 블록이다. 화살표가 밑으로 하면 안에 있는 내용을 볼 수 있고 화실표가 옆으로 되면 안에 있는 내용을 숨길 수 있는 기능이다. 🅱️노션 토글 단축키 빈블록에서 >를 쓴 뒤 스페이스를 누르면 토글이 생성된다. 토글이 생성된 상태에서 #을누르고 스페이스를 누르면 토글 제목 1 사이즈로 변경되고 ##를 누르고 스페이스를 누르면 토글제목2로 , ###를 입력하고 스페이스를 누르면 토글 제목 3으로 변경된다. 💡토글 제목 1,2,3 업데이트 기존에는 일반 글자 사이즈의 토글만 제공을 했는데 이번 21년 12월 23일 업데이트 이후에 고급블록에 토글에도 제목 크기를 선택할 수 있는 블록이 추가 되었다..

업종 중에 개발직군은 트렌드가 매우 빠른 분야이다. 그래서 트래드에 맞춰서 새로운 언어들을 빠르게 따라가야 한다. 그중 kamranahmedse가 웹 개발자가 되기 위한 로드맵을 매년 이미지로 제공해주고 있다. 그해 연도에 트렌드하고 힙해진 언어들이 어떤 것들이 있는지 확인할 수 있다. 올해에도 2022년 프런트엔드 개발 로드맵이 떠서 살펴보기로 했다. 해당 github은 영어로 되어있는데 해당 로드맵 사이트를 한글로 번역해준 사이트도 있는데, 오늘은 해당 사이트의 자료를 보면서 주니어들이 주목해야되는 우선순위에 대해 말해보려 한다. 출처 : https://github.com/Han-Kyeol/developer-roadmap-kr- GitHub - Han-Kyeol/developer-roadmap-kr-..

노션에서 기본 표가 업데이트되면서 데이터베이스 형식이 아니라 기본적인 표가 업데이트가 되면서 추가되었다. https://ordinary-code.tistory.com/125 [노션/notion] 노션 기본 표 추가하는 방법 (간단한 표 활용) 노션에서 매일 사람들이 제일 기다리던 기본 표 업데이트가 21년 11월 16일 날 진행되었다. 기존의 노션 표는 데이터베이스 기반으로 제작이 되어 개발자가 아닌 일반 이용자들은 사용법에서 약 ordinary-code.tistory.com 하지만, 아직 기능이 좀 많이 약하다 (제발.. 셀 병합 기능을 주세요..) 12월 23일 이번 업데이트에서 기본 표에 추가적인 기능이 업데이트돼서 오늘 소개해보려고 한다! 노션 기본 표에 배경색상 추가하기 표가 업데이트 된 이후 ..

IOS 크롬 에러 발생 (PC는 정상 작동할 때) 전에 블로그 포스팅 중 천의 자리 콤마를 찍는 자바스크립트 정규식을 공유했었다. https://ordinary-code.tistory.com/128 [nuxt/vue filter] 숫자 3자리(천자리) 마다 콤마 찍으면서 소수점 처리하기 자바스크립트에서 천 자리마다 콤마를 찍어줘야 하는 경우가 많다. 숫자에다가 천 자리마다 콤마를 찍기 위해서는 정규식을 이용해야 한다. Vue에서는 Filter를 이용해서 숫자 3 자리 마자 콤마를 ordinary-code.tistory.com 최근에 서비스 배포 후 모바일에서 페이지가 정상적으로 작동하지 않는다는 내용이 접수되어 처음에 vue router 문제인지, 아니면 redirect문제인지 여러 방면으로 삽질을 했었..

자바스크립트에서 천 자리마다 콤마를 찍어줘야 하는 경우가 많다. 숫자에다가 천 자리마다 콤마를 찍기 위해서는 정규식을 이용해야 한다. Vue에서는 Filter를 이용해서 숫자 3 자리 마자 콤마를 찍는 게 가능하다. example.vue {{price | numberFormat(2)}} 예시 코드이다. vue filter를 이용해서 numberFormat이라는 filter를 만들어준다. 두 번째 인자로 toFixed를 이용해서 소수점을 잘라준다. 나의 경우 2를 넣어서 소수점을 2자리까지 표시해준다. price에 들어간 342345.10923이라는 숫자가 vue filter를 통해서 소수점이 2자리까지 잘리고 그 이후 정규식을 이용해서 3자리마다 콤마를 찍어주게 된다. 이처럼 간단하게 vue filter..

😶 Nuxt에서 A태그 이용하기 Nuxt에서 페이지를 이동하려면 를 이용한다. 사용방법은 아래와 같다. 해당 페이지 이름으로 이동 해당 페이지로 이동하면서 URL 파라미터를 던짐 동적라우터로 이동합니다. nuxt-link를 위에처럼 작성해줄 경우 HTML로 랜더링을 확인해보자. 그럼 각각 페이지별로 어떻게 파라미터를 받을지 확인해보도록 하겠다. 😁Query 파라미터 받기 page/index.vue Query 파라미터 값은? : {{query}} query파라미터로 보낸 내용은 this$route.query로 받으면 된다. 나의 경우 쿼리 파라미터를 id로 보내서 id값을 받아서 화면에 표시해줬다. 결과 화면 query변수에 담긴 파라미터 값이 제대로 나오는 것을 확인할 수 있다. 😎동적 라우터 확인하기 ..