FrontEnd 107

[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

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

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

FrontEnd 2022.01.09

[정규식에러/크로스브라우징] 모바일(IOS) 크롬, 사파리 에서 페이지 안뜰 때 (PC 정상 작동)

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

FrontEnd/Javascript 2021.12.29

[nuxt/vue filter] 숫자 3자리(천자리) 마다 콤마 찍으면서 소수점 처리하기

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

FrontEnd/Vue.js 2021.12.17

[vue/nuxt] nuxt-link로 파라미터 보내는 방법 (query, param 데이터 확인하기)

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

FrontEnd/Vue.js 2021.12.14

상태관리 라이브러리 리덕스(REDUX)란? (기본 개념)

리덕스(REDUX)란? 리덕스는 가장 많이 사용되는 상태 관리 라이브러리이다. 리덕스를 이용할 경우 컴포넌트에서 사용할 상태에 관련된 코드만 다른 파일로 분리시켜서 관리할 수 있다. 리덕스를 사용하는 이유 리덕스를 사용하는 가장 큰 이유는 공통적으로 이용하는 상태를 전역에서 관리를 하기 위함입니다. 프로젝트가 커지면서 컴포넌트구조가 복잡해질 경우 리덕스를 이용하면 유지보수, 코드작성의 효율성을 극대화 해줍니다. 아래 이미지를 보면, 보통 props를 이용해서 Root 컴포넌트에서 하위컴포넌트와 상태값을 주고 받는다. 하지만, 컴포넌트가 한두개가 아니라 여러개가 생성되고, 여러개도 부모 자식간의 컴포넌트로 복잡하다고 가정해보자. 이럴경우 하위에서 값이 변경되거나, 루트에서 변경된 값을 읽으려면 계속해서 컴..

FrontEnd 2021.11.15

[React] Hooks 사용하기 - useEffect (업데이트, 마운트 시 함수 실행)

혹시 Hooks을 처음 사용한다면? 앞의 강좌를 먼저확인해주세요 https://ordinary-code.tistory.com/120 [React] 함수형 컴포넌트 상태관리 Hooks useState 사용법 알아보기 🍟React Hooks이란? Hooks은 리액트 16.8 버전에서 새로 도입된 상태 관리 기능이다. 기존의 함수형코드에서는 관리하지 못했던 상태 관리가 Hooks을 통해서 가능해졌다. React Native의 경우에는 0.59 버전 ordinary-code.tistory.com useEffect란? Hooks 기능 중 useEffect는 컴포넌트가 랜더링 될 때 특정 작업을 수행하게 한다. useEffect는 class 생명주기에서 componentDidMount와 componentDidUpd..

FrontEnd/React 2021.10.21

[React] 함수형 컴포넌트 상태관리 Hooks useState 사용법 알아보기

🍟React Hooks이란? Hooks은 리액트 16.8 버전에서 새로 도입된 상태 관리 기능이다. 기존의 함수형코드에서는 관리하지 못했던 상태 관리가 Hooks을 통해서 가능해졌다. React Native의 경우에는 0.59 버전부터 Hook을 지원한다고 한다. React에서는 함수형 컴포넌트와 Class형 컴포넌트 두 가지 형태로 코드를 작성하는데, 기존의 함수형 컴포넌트에서는 React State의 생명주기 기능을 이용할 수 없었다. 하지만 hooks 기능이 추가되면서 이제는 함수형 컴포넌트에서도 생명주기 기능을 연동할 수 있게 된다. Hooks은 클래스형 컴포넌트에서는 동작하지 않는다. hooks 업데이트 이후에도 클래스형 컴포넌트는 그대로 사용이 가능 때문에, Hooks의 기능을 위해서 기존 코..

FrontEnd/React 2021.10.20