에바니네

CMS vs Headless CMS

CMS와 Headless CMS의 차이를 잘 모르겠어서 관련 글 찾아보고 한번 번역해보면서 정리해봤습니다. 일단 CMS란 ? 'Content Management System'의 약자입니다. CMS는 사용자가 기술적인 지식없이 웹사이트의 컨텐츠를 수정, 관리, 생성을 할 수 있도록 도와주는 소프트웨어입니다. 다른말로는, CMS는 웹사이트를 코드없이 처음부터 빌드할수도 있게 할 수 있습니다. 웹 페이지 생성, 이미지 저장 및 기타 기능을 위한 자체 시스템을 구축하는 대신 CMS에서 기본적인 인프라를 모두 처리하므로 웹사이트의 보다 미래 지향적인 부분에 집중할 수 있습니다. 웹사이트 외에도 문서 관리와 같은 다른 기능을 위한 CMS을 찾을 수도 있습니다. CMS는 어떻게 동작할까요? CMS가 어떻게 동작하는지..

SWR 2.0뭐가 바뀌었을까 ~ ?

영어 공부할겸, 저희 회사 주스택인 SWR도 공부할겸 이렇게 적어봅니다. 오역이 굉장히 많을 것으로 생각됩니다. 피드백좀... https://swr.vercel.app/ko/blog/swr-v2 Announcing SWR 2.0 – SWR Announcing SWR 2.0: new mutation APIs and improved optimistic UI capabilities, new DevTools, better support for concurrent rendering, and more. swr.vercel.app We are thrilled to announce the release of SWR 2.0, the popular React data-fetching library that enables..

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

일단 기본적으로 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..