Update: next@12

Author: ZeroCho

intersection/back/package-lock.json

@@ -15,20 +15,20 @@
     "cookie-parser": "^1.4.5",
     "cors": "^2.8.5",
     "cross-env": "^7.0.2",
-    "dotenv": "^8.2.0",
+    "dotenv": "^16.0.0",
     "express": "^4.17.1",
     "express-session": "^1.17.1",
-    "helmet": "^3.23.3",
+    "helmet": "^5.0.2",
     "hpp": "^0.2.3",
     "morgan": "^1.10.0",
     "multer": "^1.4.2",
     "multer-s3": "^2.9.0",
     "mysql2": "^2.1.0",
-    "passport": "^0.4.1",
+    "passport": "^0.5.2",
     "passport-local": "^1.0.0",
-    "pm2": "^4.4.0",
-    "sequelize": "^5.21.13",
-    "sequelize-cli": "^5.5.1"
+    "pm2": "^5.2.0",
+    "sequelize": "^6.19.0",
+    "sequelize-cli": "^6.4.1"
   },
   "devDependencies": {
     "nodemon": "^2.0.4"

intersection/back/package.json

@@ -1,5 +1,5 @@
 {
-  "parser": "babel-eslint",
+  "parser": "@babel/eslint-parser",
   "parserOptions": {
     "ecmaVersion": 2020,
     "sourceType": "module",
@@ -30,6 +30,7 @@
     "react/jsx-one-expression-per-line": "off",
     "object-curly-newline": "off",
     "linebreak-style": "off",
-    "no-param-reassign": "off"
+    "no-param-reassign": "off",
+    "max-len": ["warn", { "code": 120 }]
   }
 }

intersection/front/.eslintrc

@@ -14,7 +14,7 @@ const SearchInput = styled(Input.Search)`
   vertical-align: middle;
 `;
 
-const AppLayout = ({ children }) => {
+function AppLayout({ children }) {
   const [searchInput, onChangeSearchInput] = useInput('');
   const router = useRouter();
   const { me } = useSelector((state) => state.user);
@@ -25,22 +25,21 @@ const AppLayout = ({ children }) => {
 
   return (
     <div>
-      <Menu mode="horizontal" selectedKeys={[router.pathname]}>
-        <Menu.Item key="/">
-          <Link href="/"><a>노드버드</a></Link>
-        </Menu.Item>
-        <Menu.Item key="/profile">
-          <Link href="/profile"><a>프로필</a></Link>
-        </Menu.Item>
-        <Menu.Item key="/search">
-          <SearchInput
+      <Menu
+        mode="horizontal"
+        selectedKeys={[router.pathname]}
+        items={[
+          { label: <Link href="/"><a>노드버드</a></Link>, key: '/' },
+          { label: <Link href="/profile"><a>프로필</a></Link>, key: '/profile' },
+          { label: <SearchInput
             enterButton
             value={searchInput}
             onChange={onChangeSearchInput}
             onSearch={onSearch}
-          />
-        </Menu.Item>
-      </Menu>
+          />,
+          key: '/search' },
+        ]}
+      />
       <Row gutter={8}>
         <Col xs={24} md={6}>
           {me ? <UserProfile /> : <LoginForm />}
@@ -54,7 +53,7 @@ const AppLayout = ({ children }) => {
       </Row>
     </div>
   );
-};
+}
 
 AppLayout.propTypes = {
   children: PropTypes.node.isRequired,

intersection/front/components/AppLayout.js

@@ -6,7 +6,7 @@ import { useSelector, useDispatch } from 'react-redux';
 import useInput from '../hooks/useInput';
 import { ADD_COMMENT_REQUEST } from '../reducers/post';
 
-const CommentForm = ({ post }) => {
+function CommentForm({ post }) {
   const dispatch = useDispatch();
   const id = useSelector((state) => state.user.me?.id);
   const { addCommentDone, addCommentLoading } = useSelector((state) => state.post);
@@ -39,7 +39,7 @@ const CommentForm = ({ post }) => {
       </Form.Item>
     </Form>
   );
-};
+}
 
 CommentForm.propTypes = {
   post: PropTypes.object.isRequired,

intersection/front/components/CommentForm.js

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import { useSelector, useDispatch } from 'react-redux';
 import { FOLLOW_REQUEST, UNFOLLOW_REQUEST } from '../reducers/user';
 
-const FollowButton = ({ post }) => {
+function FollowButton({ post }) {
   const dispatch = useDispatch();
   const { me, followLoading, unfollowLoading } = useSelector((state) => state.user);
   const isFollowing = me?.Followings.find((v) => v.id === post.User.id);
@@ -30,7 +30,7 @@ const FollowButton = ({ post }) => {
       {isFollowing ? '언팔로우' : '팔로우'}
     </Button>
   );
-};
+}
 
 FollowButton.propTypes = {
   post: PropTypes.object.isRequired,

intersection/front/components/FollowButton.js

@@ -6,7 +6,7 @@ import { useDispatch } from 'react-redux';
 
 import { UNFOLLOW_REQUEST, REMOVE_FOLLOWER_REQUEST } from '../reducers/user';
 
-const FollowList = ({ header, data, onClickMore, loading }) => {
+function FollowList({ header, data, onClickMore, loading }) {
   const dispatch = useDispatch();
   const onCancel = (id) => () => {
     if (header === '팔로잉') {
@@ -43,11 +43,15 @@ const FollowList = ({ header, data, onClickMore, loading }) => {
       )}
     />
   );
+}
+
+FollowList.defaultProps = {
+  data: [],
 };
 
 FollowList.propTypes = {
   header: PropTypes.string.isRequired,
-  data: PropTypes.array.isRequired,
+  data: PropTypes.array,
   onClickMore: PropTypes.func.isRequired,
   loading: PropTypes.bool.isRequired,
 };

intersection/front/components/FollowList.js

@@ -15,7 +15,7 @@ const FormWrapper = styled(Form)`
   padding: 10px;
 `;
 
-const LoginForm = () => {
+function LoginForm() {
   const dispatch = useDispatch();
   const { logInLoading, logInError } = useSelector((state) => state.user);
   const [email, onChangeEmail] = useInput('');
@@ -56,6 +56,6 @@ const LoginForm = () => {
       </ButtonWrapper>
     </FormWrapper>
   );
-};
+}
 
 export default LoginForm;

intersection/front/components/LoginForm.js

@@ -5,7 +5,7 @@ import { useSelector, useDispatch } from 'react-redux';
 import useInput from '../hooks/useInput';
 import { CHANGE_NICKNAME_REQUEST } from '../reducers/user';
 
-const NicknameEditForm = () => {
+function NicknameEditForm() {
   const { me } = useSelector((state) => state.user);
   const [nickname, onChangeNickname] = useInput(me?.nickname || '');
   const dispatch = useDispatch();
@@ -28,6 +28,6 @@ const NicknameEditForm = () => {
       />
     </Form>
   );
-};
+}
 
 export default NicknameEditForm;

intersection/front/components/NicknameEditForm.js

@@ -22,7 +22,7 @@ import FollowButton from './FollowButton';
 
 moment.locale('ko');
 
-const PostCard = ({ post }) => {
+function PostCard({ post }) {
   const dispatch = useDispatch();
   const { removePostLoading } = useSelector((state) => state.post);
   const [commentFormOpened, setCommentFormOpened] = useState(false);
@@ -178,7 +178,7 @@ const PostCard = ({ post }) => {
       )}
     </div>
   );
-};
+}
 
 PostCard.propTypes = {
   post: PropTypes.shape({