김평범's OrdinaryCode

좀 더 감각 있는 버튼, 배경을 만들어줄 때 그러데이션 효과를 많이 이용한다. 대부분 그라데이션 효과가 있을 때는 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는 실제로 만들 화면상에 어울리지 않을 가능성이 높아서 ..

노션에서 테이블 중 캘린더 테이블을 사용하는 경우가 있다. 이때 기본적으로 일요일부터 시작하는 캘린더가 생성이 되는데 노션 캘린더 시작 요일도 변경이 가능하다! 📆노션 캘린더 생성하기 노션에서 캘린더는 데이터 베이스 형태로 생성이 가능하다. 노션에서 /캘린더 혹은 /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문제인지 여러 방면으로 삽질을 했었..