-
웹에서의 drag & selection
우리가 많이 알고 있는 Drag의 의미 이런식으로 마우스 드래그를 먼저 생각할 수 있고, 이렇게 생각하실 수 있습니다. 위의 사진은 정확히 Drag & Drop 할 때의 드래그이고, 두번째 이미지의 드래그는 마우스 Selection 입니다. Drag & Drop Drag & Drop은 mouse를 이용해서 특정 컴포넌트를 잡았을 때 동작이 될 수 있는 이벤트 입니다. 이 이벤트를 통해서 컴포넌트 다른 위치로 넘기게 할 수 있습니다. <p>Drag the p element back and forth between the two rectangles:</p> <div class="droptarget" ondrop="drop(event)" ondragover="allowDrop(event)">...
-
Next와 Mobx 정리 - [커스텀]
[Next.js app & document 커스텀] Next.js에 대한 이해와 Mobx와 같은 라이브러리들을 사용해 웹을 개발하기 위한 기본 세팅 작업을 boilerplate로 만들어보는 과정에 대한 내용을 정리했습니다. 목차 Next.js 란? Next.js 시작하기 Next.js 라이브러리 세팅 Next.js app & document 커스텀 Next.js app & document 커스텀 [Github Project 링크] App 커스텀 App은 가장 최상위 컴포넌트 입니다. 아래 사항들을 커스텀할때 사용할 수 있습니다. 페이지 별로 잦은 Layout 변경이 필요할 경우 페이지가 이동 될 때 마다 State 값이 유지되어야 할 경우...
-
Next.js 코드 컨벤션
시작하며 해당 글은 똑똑한개발자 github에 있는 next-ts을 기준으로 작성되었습니다. VSCode 기준으로 설정 되었으며, 다른 IDE를 쓸 경우 ESLint와 Prettier가 다르게 보일 수 있습니다. 공통 사용 스택 - Next.js, PWA, TypeScript, styled-components, Storybook - axios 현재(글 마지막 업데이트 기준) 프로젝트 패키지 버전 { "dependencies": { "@material-ui/core": "^4.11.0", "@types/react-select": "^3.0.26", "@types/react-slick": "^0.23.4", "axios": "^0.20.0", "mobx": "^6.0.4", "mobx-react": "^6.2.2", "next": "^10.0.5", "next-pwa": "^3.1.4", "react": "^16.12.0", "react-device-detect": "^1.13.1", "react-dom": "^16.12.0", "react-flip-toolkit": "^7.0.13", "react-select": "^3.1.0", "react-slick": "^0.27.13", "slick-carousel": "^1.8.1", "styled-components":...
-
Next와 Mobx 정리 - [라이브러리 세팅]
[Next.js 라이브러리 세팅] Next.js에 대한 이해와 Mobx와 같은 라이브러리들을 사용해 웹을 개발하기 위한 기본 세팅 작업을 boilerplate로 만들어보는 과정에 대한 내용을 정리했습니다. 목차 Next.js 란? Next.js 시작하기 Next.js 라이브러리 설치 및 Bebel 세팅 Next.js app & document 커스텀 Next.js 라이브러리 세팅 [Github Project 링크] 라이브러리 설명 babel-plugin-module-resolver 아래 코드 처럼 Import path를 간단하게 만들어주는 바벨 라이브러리 입니다. // Use this: import MyUtilFn from 'utils/MyUtilFn'; // Instead of that: import MyUtilFn from '../../../../utils/MyUtilFn'; styled-components [참고] babel-plugin-styled-components...
-
Next와 Mobx 정리 - [시작하기]
[Next.js 시작하기] Next.js에 대한 이해와 Mobx와 같은 라이브러리들을 사용해 웹을 개발하기 위한 기본 세팅 작업을 boilerplate로 만들어보는 과정에 대한 내용을 정리했습니다. 목차 Next.js 란? Next.js 시작하기 Next.js 라이브러리 세팅 Next.js app & document 커스텀 Next.js 시작하기 [Github Project 링크] 프로젝트 생성 Next.js에서도 React에서 사용하는 creat-react-app과 같은 creact-next-app이라는 CLI를 제공하고 있으므로 꼭! 사용하는 것을 권장한다. 물론 메뉴얼 세팅 방법이 있지만, 다루지 않았으며, 하단에 참고 사이트를 참고 해주세요. $ npx create-next-app # or $ yarn create next-app...
-
Next와 Mobx 정리 - [알아보기]
[Next.js 알아보기] Next.js에 대한 이해와 Mobx와 같은 라이브러리들을 사용해 웹을 개발하기 위한 기본 세팅 작업을 boilerplate로 만들어보는 과정에 대한 내용을 정리했습니다. 목차 Next.js 란? Next.js 시작하기 Next.js 라이브러리 세팅 Next.js app & document 커스텀 Next.js 란? [Github Project 링크] 기본적으로는 리액트를 기반으로 한 SPA를 빠르게 빌드할 수 있도록 도와주는 프레임워크 입니다. Next에서는 많은 기능을 제공해주지만 리액트에 대한 기본적인 지식이 있는 상황이라면 client-side routing, page layout 두가지만 배우면 빠르게 Next를 사용할 수 있습니다. SSR vs CSR...