에바니네

허스키를 통한 린팅, 포맷팅 자동화

일단 기본적으로 prettier와 eslint가 보일러 플레이트에 어느정도 설치가 되있는 상황이였습니다. 그런데 eslintrc에는 아주 단순한 심플 담백하게 셋업이 되어있어서 다시 처음부터 해봐도 괜찮다는 생각이 들었습니다. 일단 처음 npm init @eslint/config를 통해 초기 세팅을 도움 받아보고자 합니다. 1. Eslint 설치 및 초기 세팅 위 처럼 세팅이 되는데, 피어 디펜던시가 많이 안맞는다면.. 강제로 다운로드하고 저는 위와 같이 airbnb 코드 스타일에 타입스크립트까지 적용되게끔 열심히 구글링해서 적용해봤습니다. 2. prettier 설치 및 Script 추가 https://prettier.io/docs/en/install.html Prettier · Opinionated C..

ESLint - parsing Error

파싱에 실패했다고 하네요. 이유가 뭔지 한참을 보다가 아 ... 경로가 틀린걸 확인했습니다. 흔히들 나와있는 방법을 다 써봤는데도 경로가 자꾸 수정이 안되서 경로를 직접 하드코딩해서 넣어주었습니다. 저처럼 엄청 해맸던분을 위해 간단하게 적어봅니다. ㅎㅎ;

Section5 - Summary

강의보면서 새로 알게된 것 정리 및 리마인더 입니당. Chat 내역을들 날짜별로 그룹핑 채팅메세지 별로 날짜에 따라 분류해서 객체에 인덱싱하는 유틸함수로 사용해서 데이터를 가공해주고, 맵핑해서 그룹핑이 쉽게끔 만들었습니다. 그리고 'sticky'라는 position 속성을 사용해서 같은 날짜안에 채팅내역들이 헷갈리지 않도록 했다고 합니다. 기존에 한번도 안써본 속성이였는데, 이번 기회에 직접 적용시켜보니 와닿네요 하하; https://developer.mozilla.org/ko/docs/Web/CSS/position position - CSS: Cascading Style Sheets | MDN CSS position 속성은 문서 상에 요소를 배치하는 방법을 지정합니다. top (en-US), right..

Section 4 - Summary

제로초님 강의보면서 그냥 공부 및 정리한거 적어봤어보는 거예요 ~ Web Socket 나오기 전에는 롱 폴링같은 방식을 통해 채팅같은 기능을 구현했다고 합니다. https://ko.javascript.info/long-polling 롱 폴링 ko.javascript.info 그래서 적어보는 Regular Pollingr과 Long Polling의 차이 Regular Polling은 10초에 한 번씩 서버에 “안녕하세요. 저 클라이언트인데 새로운 정보 줄거 있나요?” 라고 요청을 보내는 식이고 그것에 대해서, 서버는 스스로 해당 클라이언트가 온라인으로 인지를 시키고 그 순간까지 수신한 메세지를 보내줍니다. 괜찮은 방식이지만 부정적인면도 있습니다. 메세지 요청 사이마다 10초까지 딜레이가 발생할 수 있습니다..

Property 'activeClassName' does not exist on type 'IntrinsicAttributes & NavLinkProps & RefAttributes'

NavLink에는 to와 현재 URL이 같으면 Active상태가 true로 해준다. 그래서 손쉽게 active 상태 스타일을 설정해줄 수 있었다. 이런식으로 설정해주면 to에 해당되는 URL에 있다면 activeClassName안에 클래스가 활성화가 되었다. V5까지는 그런데 이번에 V6가면서 active와 관련된 attribute가 없어졌다고 나와있었다. 그러면 어떻게 쓰는가 찾아봤더니 친절하게 공식 사이트에서 알려주신다. https://reactrouter.com/en/main/components/nav-link NavLink v6.8.1 Type declarationdeclare function NavLink( props: NavLinkProps ): React.ReactElement; interf..

dotenv setting for webpack without CRA

이제 BASE_URL을 환경변수를 활용해 적용하려던 참 평소와 같이 환경변수를 넣어서 BASE URL을 깔아주려는 참이였는데 다음과 같은 에러가 났다. 생각해보니 이번에 CRA없이 시작하면서 dotenv에 대한 설정을 따로 안해준거 같다는 생각이 들어서 바로 구글링 때려버렸다. https://www.npmjs.com/package/dotenv-webpack dotenv-webpack A simple webpack plugin to support dotenv.. Latest version: 8.0.1, last published: 6 months ago. Start using dotenv-webpack in your project by running `npm i dotenv-webpack`. There a..

Section 2 Summary

그냥 강의보면서 두서없이 적는 글입니다 하핳 https://www.npmjs.com/package/gravatar gravatar Gravatar Node.js library. Latest version: 1.8.2, last published: a year ago. Start using gravatar in your project by running `npm i gravatar`. There are 274 other projects in the npm registry using gravatar. www.npmjs.com 간단한 프로필 이미지를 자동으로 생성해주는 라이브러리다. 패키지 설치 후 gravatar 객체를 가져와 url함수에 문자열, 옵션, 프로토콜이 이렇게 3가지를 넣을 수 있는데, 프로토콜..

SWR 사용에 앞서서 axios 설정해두기

본격적으로 fetcher를 사용해서 SWR을 사용해야했다. 뭔가 추후 편리를 위해서 먼저 axios instance 생성 및 axios interceptor를 설정해줘야겠다는 생각을 하게 해주었다. 전 프로젝트에서는 이런식으로 모든 요청에 대해서 아래와 같은 식으로 인터셉터를 구현했다. 공홈에서 제시하는 그대로 ㅎㅎ;; https://axios-http.com/docs/interceptors Interceptors | Axios Docs Interceptors You can intercept requests or responses before they are handled by then or catch. axios.interceptors.request.use(function (config) { retur..