React (13) 썸네일형 리스트형 의존성 production install 후 next build 시 next.config.mjs 에@next/bundle-analyzer 라이브러리 못찾는 에러 해결 production install 은 devDependencies에 나열 된 패키지를 설치하지 않는 것으로, # npm npm install --production # yarn yarn install --production 하지만 위와 같이 하게된다면 next.config.mjs 에서 next build 시 에러가 발생한다. 이유는 @next/bundle-analyzer 를 찾을 수 없기 떄문이다. @next/bundle-analyzer 는 devDependencies 에 있기 때문에 production install 시에 설치되지 않는다. 물론 해당 의존성을 dependencies 로 옮기면 바로 해결 될 문제이겠지만, 이런 하드한 방법을 사용하고 싶지 않았다. 일단 에러가 나는 이유는 next.con.. nextjs 에서 antd 5.x 와 tailwind 적용 tailwind 적용은 https://tailwindcss.com/docs/guides/nextjs 참고 보통 antd 에 tailwind 를 추가로 쓰려고하는 사람은 아마? 대부분 간단한 스타일링을 할 때 (ex: padding, margin 등) inner style은 싫고, 그렇다고 css module 이나 css-in-js 를 사용해 파일을 추가로 생성하는게 부담스러울 때 쓰려고 한다고 생각한다. ※ tailwind 만으로 컴포넌트를 백프로 제작하길 원한다면 쿨하게 antd와 같은 UI 디자인은 버리기를 추천(UI Design 이중화 방지!)한다! tailwind 기본 설정이 끝났다면 tailwind.config.js 에 딱 두줄만 추가해주면 된다. /** @type {import('tailwin.. next-auth 를 활용한 jwt 인증 및 refresh 토큰 순환 next-auth는 사실 공식홈페이지에서도 소개된 것처럼 서버리스를 지원하도록 처음부터 설계된 오픈소스 인증 솔루션이다. 하지만 실무에서 서버리스로 개발하는 경우는 드물다. 그럼에도 필자가 next-auth를 도입해보게 된 이유는 프론트엔드에서 페이지 라우트별로 접근을 보다 쉽게 제한할 수 있으며, 그래도 상당히 나쁘지않은 보안적인 측면을 기본적으로 보다 쉽게 제공해주는 느낌을 받았기 때문이다. 예를 들면, 서버를 통해 accessToken을 넘겨받은 뒤, 해당 accessToken이 만료가 된다면 서버에서는 api 호출이 되지 않을 것이다. 하지만 각 라우트는 별도의 작업이 없다면 해당 페이지에 접근할 수 있게된다. 물론 HOC(High Order Component)나 각 페이지를 래핑하는 Provid.. React userEvent test 코드 작성시 Error: Expected key descriptor but found "" in "" react 의 테스트 코드 작성 시 userEvent(@testing-library/user-event) 사용해서 빈 문자열을 테스트 해보고 싶었다. userEvent.type(input, ''); 위와 같이 작성하면 에러가 발생하였다. ● Console console.error Error: Expected key descriptor but found "" in "" See https://github.com/testing-library/user-event/blob/main/README.md#keyboardtext-options for more information about how userEvent parses your input. ... ... falsy 를 허용하지 않는 것으로 보여진다.. 해당 부분.. Module not found: styled-components tried to access react-is (a peer dependency) but it isn't provided by its ancestors; this makes the require call ambiguous and unsound. Yarn Berry + Nextjs + Styled-Component 로 개발을 하던 중 제목과 같은 에러가 발생하였다. 에러로그를 자세히 보면 Module not found: styled-components tried to access react-is (a peer dependency) but it isn't provided by its ancestors; this makes the require call ambiguous and unsound. Required package: react-is Required by: styled-components@virtual:0487b1b8263ee74b6a800d7d32396247265bb66793913170b66fbaba014393ed5e7147a33f4bbb0.. React recoil Asynchronous (비동기처리) recoil 을 사용하면서 가장 마음에 들었던 부분은 비동기 처리가 별도 라이브러리 없이 recoil 만으로 가능하다는 것이다. recoil 의 selector 를 활용하면 쉽게 비동기 데이터를 가져올 수 있다. 이를 위해 recoil state 를 작성한다. (./src/states/board.js) import { atom, selector } from 'recoil'; import axios from 'axios'; export const boardSearchState = atom({ key: 'boardSearchState', default: { writer: '', title: '', content: '', } }); export const forceReloadBoardListState = at.. React + Recoil 초기 셋팅 및 테스트 React로 개발하다보면 상태관리에 대한 고민을 안할 수가 없다. 나 또한, 상태관리에 대해 고민하던 중 회사에서 redux를 적용했는데 redux 까지는 여차저차 괜찮았으나, 추가로 redux-toolkit, redux-saga 를 적용하려고 보니, 러닝커브가 높아서 막막했다. (더 편하게 개발하라고 나온 것들이지만...) 그러던 중 작년 5월즈음에 페이스북에서 recoil 을 발표했고, 고민없이 recoil 을 적용해봤는데 React hooks 개념이고 초기셋팅도 엄청 간단해서 recoil 로 넘어와버렸다... 아직 정식 major 버전은 릴리즈를 못한 것 같다. 하지만 minor 버전은 계속 업그레이드 하고 있고, 곧 정식 릴리즈가 되지 않을까 한다. 일단 먼저 recoil 을 테스트하기 위한 실습.. React + Redux 초기 셋팅 및 테스트 처음에 리액트를 접했을 때, 컴포넌트별로 분리해서 개발을 진행하는 과정에서 다른 컴포넌트 간의 state 값을 전달하기위해 부모컴포넌트로 보내고, 자식컴포넌트의 프로퍼티로 넘겨주는 작업들로 소스코드가 상당히 복잡한 관계가 되었다. 이를 해결 하기 위해 찾아보던 중 Redux 를 발견하였고, 나는 곧 바로 적용하였다. 리덕스는 중앙 저장소에서 상태관리가 일어나며, 저장소에서 구독하고 있는 상태값이 변경되면 해당 컴포넌트가 리렌더링 된다. 부모, 자식간의 프로퍼티 지옥이 끝났지만, 리덕스는 생각보다 러닝커브가 높다. 리덕스 단독으로 사용하기 보다는 redux-toolkit, redux-saga 와 같이 쓰이는 것 같은데, 여기서는 리덕스 셋팅 및 테스트 실습만 할 것이다. 일단 먼저 CRA 를 통해 리액트 .. React + Openlayers 구성 ( By React Context ) 리액트로 Openlayers 라이브러리를 활용한 개발을 하려고하면 한번 생성한 ol/Map 객체에 대해 여러 컴포넌트에서 사용할 때 어떻게 처리해야할지 많은 고민을 하게 된다. (jsp 시절에 개발할 땐 위에 한번 선언만 해주면 주구장창 다른데서 사용했었다....^^) 리액트에서 맵 객체를 사용하는 모든 컴포넌트에 프로퍼티(props)로 매번 전달하기에는 너무 벅차다. 그래서 필자는 상태관리 라이브러리 중 리덕스에 맵 객체를 넣어서 사용했었지만 리덕스의 러닝커브를 감당하지 못하고 리코일로 넘어가버리는 바람에 맵 객체를 리코일 state에 넣으려고 시도했으나,,, 리코일에는 맵 객체가 들어가지를 않았다. ㅠㅠ ( 아마 개인적인 생각엔 리코일 객체로 들어가면서 read only 객체로 객체 내부에서의 변경도.. React(+material-ui) draggable + resizing modal 컴포넌트 material-ui 를 사용하여 컴포넌트를 개발하던 중 Backdrop 이 없는 움직이는 다이얼로그 창이 필요했다. material 에서 제공해주는 컴포넌트 중 Draggable dialog 가 있었지만, 내가 필요한 것은 Backdrop 이 없으며 이동가능해야하고, 리사이즈 기능까지 있어야 했다. 그래서 나는 material 컴포넌트의 일부와 모달 드래그 및 리사이즈 라이브러리(react-draggable, react-resizable) 를 사용하여 컴포넌트를 구성하였다. 먼저 필요한 라이브러리를 설치한다. //npm $ npm i --save @material-ui/core @material-ui/icons react-draggable react-resizable prop-types // yarn .. 이전 1 2 다음
