기록하는 개발자

위와 같이 진행 중인 프로젝트에서는 시작, 종료 날짜 입력 후 버튼을 클릭 하면 해당 기간에 대한 직원들의 출근부를 엑셀 파일로 추출해주는 기능이 있다. 서버에서 파일을 만들어서 넘겨주는 것보다 프론트에서 작업하는 것이 훨씬 빨랐다. 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 라이브러리에서는 사용이 불가한 함수이었다. 때..

현재 진행중인 프로젝트에서는 직원 정보에 이름, 직급, 색상이 필요하다. 이 때, 직급과 색상 정보는 서버에서 enumType으로 관리하고 값을 전달해주기 때문에 프론트에서도 enumType 으로 값을 갖고 있어야했다. enum 은 열거형 변수로 정수를 하나로 합칠 때 편리한 기능이다. 임의의 숫자나 문자열을 할당할 수 있으며 하나의 유형으로 사용해서 버그를 줄일 수 있다. enum은 TypeScript가 자체적으로 구현하는 기능이기 때문에 JavaScript에서는 사용할 수 없다. enum은 편리한 기능이지만 TypeScript가 자체적으로 구현했기 때문에(JavaScript에서 사용 불가하기 때문에)발생하는 문제가 있다. JavaScript에 존재하지 않는 것을 구현하기 위해 TypeScript 컴파..

현재 프로젝트에서는 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와 함..

졸업 프로젝트에서 반응형 웹사이트를 만들 때 Css에 media query를 적용했던 적이 있다. 새로운 프로젝트를 시작하면서부터는 scss를 사용하고 있는데, 이 scss 에서 media query를 적용하는 방법을 알아보자. _variables.scss $breakpoint-mobile: 335px; $breakpoint-tablet: 758px; $breakpoint-desktop: 1024px; Scss 에서는 css와 달리 변수 사용이 가능하다. “_variables.scss” 파일을 만들고 변수로 breakpoint를 선언해준다. 변수를 저장할 파일이기 때문에 언더바 “_” 로 파일명을 시작한다.(언더바로 시작하는 파일은 파일 단위로 분리되어 컴파일 되지 않는다.) mixin.scss @imp..

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