2022/01 6

[Axios] catch에서 error message 객체로 return 받기

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

FrontEnd 2022.01.28

한 끗 차이로 퀄리티가 올라가는 프론트앤드 개발자의 기술

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

FrontEnd 2022.01.16

[vue/nuxt.js] 게시판 페이징 처리를 위한 npm 추천! vuejs-paginate 사용하기(샘플 코드)

📃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 먼저 해당 사..

FrontEnd/Vue.js 2022.01.14

[Notion] 노션에서 토글 사용하기(토글 제목1,2,3 업데이트 추가!)

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

etc./Notion 2022.01.12

2022년 프론트엔드 개발 로드맵으로 보는 개발 트랜드와 공부 우선순위 추천

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

FrontEnd 2022.01.09

[노션/Notion] 기본 표 배경 색상 넣기 업데이트! 기본 표도 색상으로 꾸며 보자

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

etc./Notion 2022.01.02