> 위스타그램 코드리뷰!!

위스타그램 코드리뷰를 진행

나는 처음 코드를 다짜놨는데 왜또 리뷰를 하지 ??? 라고 생각을 처음에 했었다 굳이 서로 각자가 다 다른 코드르 짯는데 봐서 뭐하지? 라는 생각을 가졌었는데 역시 잘못된 생각이었다. 코드리뷰를 하며 상대방이 어떻게 짠지를 들어보고 잘한점은 본받고 잘못된점은 서로 지적해주며 내가 미쳐 몰랐던 부분까지 집어내는 아주 유익한 시간이었다..!!

잔말말고 코드부터 쓩~

import React from 'react';
import Nav from '../../../components/Nav/Nav';
import './MainHo.scss';

function MainHo() {
  return (
    <>

예전과 달라진게 뭐가있을까요~~~??? 맞추면 그대는 프론트의 신으로 임명하겠습니다.
<리뷰>
임폴트순서 : 라우터 라우터돔 컴포넌트 scss
이순으로 써야 했었는데 전에는 이렇게 쓰지않고 그냥 막썼다능... 다시한번 상기하면서 실수하지 않도록 조심해야겠다 ..!!

다음코드

main className="Main-Ho">
        <div className="feeds">
          <article className="main-feeds">
            <div className="ss">
              <div className="profile">
                <img
                  alt="profilephoto"
                  className="profilephoto"
                  src="https://search.pstatic.net/common/?src=http%3A%2F%2Fpost.phinf.naver.net%2FMjAyMTAzMDlfMiAg%2FMDAxNjE1MjY3NjE3NDAx.EJ4minHh6DuVzMcsSog6CWIB-R3j16NVXA3G1FQJZ0Mg.o45QtWy7yEUgIiQtpd-1nZLwRF38HL94XEv4nrGTlzQg.PNG%2FIvqncdOv6zPcEKFsDE3blh1bEPxA.jpg&type=a340"
                />

                <span className="C9">C9</span>

여기선 모든 태그에 className 을 붙혀줬다. 전에는 <Article.> 이렇게 써서 SCSS에 .을 빼고 Article 로 썻었는데 코드리뷰를 하면서 모든 태그에 className 을 붙혀야하고 거기에또 누가봐도 알수있는 이름을 짓도록 하라고 했다. className 도 의미있게 붙혀야한다는 말씀에 큰 공감을 해버리면서 어떻게 나아가야할지 깨달았다. 또한 이미지엔 art 값이 꼭 들어가야한다!! 없으면 실행이 안되는건 아니지만 !시각장애인들이나 도움이 필요한사람들에게 꼭 필요한 값이니 소홀히 하지말기!!

SCSS 코드

.main-feeds {
    border: 0.5px solid #dbdbdb;
    margin-left: 350px;
    margin-top: 100px;

    .ss {
      .profile {
        border: 1px solid white;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        display: flex;
        padding-left: 10px;
        padding-top: 20px;
        padding-bottom: 70px;
      }

      .profile img {
        width: 50px;
        height: 50px;
        
        object-fit: cover;
        border-radius: 50%;
      }

사소한거지만 본인은 코드사이에 간격을 띄우지 않았었다. 그것도 필수는 아니지만 그냥 그게 훨씬 가독성이 좋다고 하셨다.또한 마지막에 있는 코드처럼 공백이 절대절대 있어서는 안된다!!! 그걸 다확인하고 push 했어야했는데 너무 신경을 못썻다!!!!! 다음엔 좀더 신경쓸 수 있는 사람이 될 수 있도록 하겠다

후기

역시 코드리뷰를하며 하나하나 세세하게 잘못된점을 지적해주며 건강한 토론의 장을 이어나감으로써 서로 더 잘해나갈 수 있도록 도움이되는 시간이었다... 매일 이렇게 봐줬으면 ... ㅎㅎ 다들 코드리뷰 천번만번하세요

                                      뿅