기록하는 개발자

나는 처음 프론트엔드를 공부할 때, 당시 vue, angular 보다 react의 생태계가 더 넓고 커뮤니티가 활성화 되어있기 때문에 react를 선택했다. vue의 점유율은 꾸준히 오르고 있는데 실제로 취업 공고에도 vue가 많이 보이고 카카오에서도 react와 vue, angular를 함께 사용한다. react와 vue의 github issue나 star수만 보면 사실 차이가 많이 나긴 한다. react - issue 1.2k, start 220k vue - issue 691, start 43.6k 그렇다면 react와 vue의 장단점, 공통점과 차이점을 알아보자. React React는 자바스크립트 라이브러리로 사용자 인터페이스를 만들기 위해 사용된다. - SPA(Single Page Applica..

https://mingmeng030.tistory.com/266 [React] React+typescript에서 chartJs의 update() 사용법 프로젝트를 할 때마다 그래프가 필요할 때 라이브러리 ‘chartJs’의 Bar chart를 사용하였는데, 그냥 javascript가 아닌 react+typescript 환경에서 사용할 때 상태 변경에서 문제가 발생했다. react+typescript mingmeng030.tistory.com 기존에 적용한 chartjs에 data label이 바로 보이도록 추가하고 싶은 경우가 있다. default 로는 아래처럼 data label이 보이지 않다가 마우스가 hover 되었을 때 그래프 위에 툴팁으로 뜬다. 만약 위와 달리 아래처럼 hover 없이도 dat..

위와 같이 진행 중인 프로젝트에서는 시작, 종료 날짜 입력 후 버튼을 클릭 하면 해당 기간에 대한 직원들의 출근부를 엑셀 파일로 추출해주는 기능이 있다. 서버에서 파일을 만들어서 넘겨주는 것보다 프론트에서 작업하는 것이 훨씬 빨랐다. react-csv라는 훌륭한 라이브러리가 있기 때문이다🥹🥹🥹 1. 라이브러리 react-csv 다운로드 // npm npm install react-csv --save; // yarn yarn add react-csv // typescript npm install --save @types/react-csv 2. react-csv의 컴포넌트 react-csv는 CSVLink 와 CSVDownload 두 가지 컴포넌트를 제공한다. 내가 사용한 기능은 사용자가 버튼을 클릭했을 때..

현재 만들고 있는 프로젝트는 가게 직원의 스케줄 및 출근부를 관리하는 웹 페이지이다. 각 가게마다 같은 이름의 직원이 등록될 수 있다고 간주하고 이름과 색상을 함께 조합하여 구분한다. (즉, 이름과 색까지 모두 같을 수는 없음) 이에 스케줄 및 출근부의 작성과 수정 시 직원을 선택할 때 색도 함께 보여주어야만 하는데 이미 위와 같이 select, option 태그로 구현을 해놓은 뒤에야 문제점을 발견하게 되어 뒤늦게 리팩토링을 하게 되었다. select 태그에 색을 넣기 위해서는 div 태그로 직접 select를 구현하거나 라이브러리를 사용해야했다. 직접 구현하는 것이 빠르기는 하지만 react-select 라이브러리를 경험해보고 싶어서 적용해보았다. 설치 - react-select 와 chroma-js..

프로젝트를 할 때마다 그래프가 필요할 때 라이브러리 ‘chartJs’의 Bar chart를 사용하였는데, 그냥 javascript가 아닌 react+typescript 환경에서 사용할 때 상태 변경에서 문제가 발생했다. react+typescript 환경에서는 list를 위와 같이 라이브러리의 인자 ‘data’로 넘겨준다. 편의상 기존 data를 prevData, 변경된 data를 newData라고 하겠다. → 이 때 prevData가 변경되면 그래프에 newData 가 아닌 기존의 prevData와 newData 가 함께 보이는 문제가 있었다. 알아보니 chartJs의 javascript 버전에는 위 문제해결에 update() 함수가 사용 되는데 react 라이브러리에서는 사용이 불가한 함수이었다. 때..

현재 프로젝트에서는 access_token과 refresh_token을 받아 localstorage에 저장하여 사용자 인증 정보를 사용하고 있다. 두 토큰이 각각 만료되었을 때 처리 해야할 로직이 다르다. access_token의 만료 프론트 백 access_token이 만료 된 채로 서버에 api 요청 → ← 서버에서 401 error 와 함께 message 로 “expired” 전송 기존의 access_token, refresh_token을 통해 토큰 재발급 요청 → ← 토큰 재발급 토큰 저장 후 토큰 만료로 수행하지 못했던 api 요청 → ← response refresh_token의 만료 프론트 백 refresh_token이 만료 된 채로 서버에 api 요청 → ← 서버에서 401 error와 함..

Next.js 는 프론트엔드에 관심이 있는 사람이라면 한 번쯤은 들어봤을 것이다. Next.js에 대해 이해하기 위해서는 SSR, CSR, SSG 등에 대한 지식이 필요한데, 이전에 정리해둔 글을 참고하면 좋을 것 같다. https://mingmeng030.tistory.com/249 SSR과 CSR, MPA와 SPA react로 개발을 하면서 spa는 많이 들어봤지만 single page application이라는 것만 알았지 정확히 무엇이고, 왜 사용해야하는지, 장단점은 무엇인지 등에 대해 모르고 있었다. 블로그 정리를 위해 서치 mingmeng030.tistory.com https://mingmeng030.tistory.com/250 SSG(Static Site Generator)란? https:/..

react로 개발을 해본 사람이라면 babel과 webpack에 대해 들어본 적 있을 것이다. 그렇다면 이 babel과 webpack 두 녀석은 정확히 무슨일을 하는걸까? webpack Webpack은 여러개 파일을 하나로 합쳐주는 모듈 번들러이다. Webpack은 '빌드'라는 과정을 통해 프로젝트에서 코드가 수정될 때마다 자동으로 트랜스파일러를 동작시켜준다. 자바스크립트 코드 뿐 아니라 이미지, CSS등도 같이 빌드한다. 번들러를 사용하면 여러개 파일을 하나로 묶어주기 때문에 네트워크 접속의 부담을 줄여 더 빠른 서비스를 제공할 수 있다. Babel 바벨은 코드를 재작성해주는 대표적인 트랜스파일러(transpiler) 프로그램으로, 모든 브라우저가 최신 기능인 ES6의 기능을 제공하지 않기 때문에 ES..