함께 자라기 with 그랩 - 1주차

Apeachicetea·2022년 5월 20일
0
post-thumbnail

📌내용 정리

📌파이썬 기본

파이썬을 전반적으로 훑어본 결과 기존에 알고 있던 자바스크립트와 크게 다르지 않았다. 자바스크립트와 파이썬에서 사용하는 키워드들이 상이하기 때문에 파이썬 사용시 그때그때 필요한 파이썬의 키워드들을 검색 및 적용한다면 큰 문제는 없다고 생각했다.

그랩님이 공유해주신 자료를 토대로 간단하게 옮겨두었다. 앞으로 필요할 때마다 찾아본 내용들을 차근차근 정리할 예정이다.

기본 명령어 및 변수

알고리즘 공부시 파이썬으로 공부하려고 했었는데 마침 파이썬을 접하게 되어서 좋은 기회라고 생각이 들었다.


📌Git 기초 및 상황별 대처 방법

git 기초

이전에 알고 있었던 git의 작업공간인 workspace, staging area, local repository, remote repository에 대해 다시 리마인드했다.

상황별 Git 다루는 법

파이널 프로젝트 당시 git log, restore, stash를 정말 많이 사용했었는데, 왜 이렇게 사용해야했는지 알게 되었다.


📌클린코드

클린 코드 내용 중 주석, 포맷팅이 가장 눈에 들어왔다. 그 내용은 아래와 같다

주석

모든 내용을 주석으로 넣게 되면 코드가 지저분할 수 있습니다. 대부분은 좋은 Naming으로 충분히 해결이 가능합니다.

네이밍으로 표현할 수 없는 영역은 주석으로 표현해주면 됩니다.

- 법적인정보를 담을 때
- 의도를 명확하게 설명할 때
- 중요성을 강조할 떄
- 결과를 경고할 때

관용적으로 사용되는 키워드

- TODO: 당장은 아니지만 다음에 해야할 때
- FIXME: 치명적인 에러를 발생하는 코드는 아니지만 수정해야 할 때
- XXX: 더 생각해볼 필요가 있을 때

포맷팅

Vertical Formatting

- 한 파일에 코드를 다 넣지 말고, 개념에 맞게 파일을 나눠서 사용합니다.
- 다른 개념의 코드는 Spacing으로 분리하기
- 비슷한 개념의 코드는 붙여서 사용하기

Horizontal Formatting

- 한 줄에 코드를 다 넣기보단 변수 등을 활용해서 가독성 높이기
- 네이밍 잘해서 길이 줄이기

📌내 프로젝트에 피드백 해보기

파이널 프로젝트의 코드를 보면 한 파일에 너무 많은 코드들이 들어가 있는 상태이다. 따라서 앞서 배운 주석과 포맷팅 중 Vertical Formatting, Horizontal Formatting을 적용해서 전반적인 코드의 가독성을 높이고 싶다. 추후 리팩토링 기간 중에 맨 처음 적용하고 싶다!

아래 코드는 파이널 프로젝트 당시 Home 컴포넌트 인데 한 파일에 너무 많은 코드가 많고, Naming이 애매한 경우가 많다.

function Home() {
  const [value, setValue] = useState('');
  const [scrollY, setScrollY] = useState(0);
  const [errorMessage, setErrorMessage] = useState('');
  const [title, setTitle] = useState([]);
  const [homeSearch, setHomeSearch] = useState(false);
  const navigate = useNavigate();
  const dispatch: Dispatch = useDispatch();

  const getTitle = useCallback(async () => {
    const postTitle = await axios.post(
      `${process.env.REACT_APP_SERVER}/posts/title`,
      {},
      {
        headers: {
          'Content-Type': 'application/json',
        },
        withCredentials: false,
      },
    );
    const title = postTitle.data.data.map((el: IElProps) => el.title);
    setTitle(title);
  }, [title, setTitle]);

  const handleFollow = useCallback(() => {
    setScrollY(window.pageYOffset); // window 스크롤 값을 ScrollY에 저장
  }, [setScrollY]);

  useEffect(() => {
    const watch = () => {
      window.addEventListener('scroll', handleFollow);
    };
    watch(); // addEventListener 함수를 실행
    return () => {
      window.removeEventListener('scroll', handleFollow); // addEventListener 함수를 삭제
    };
  });

  useEffect(() => {
    setHomeSearch(false);
    getTitle();
  }, []);

  useEffect(() => {
    if (homeSearch) {
      const getSeach = async () => {
        const data = await axios.post(
          `${process.env.REACT_APP_SERVER}/posts/search?keyword=${value}`,
          {},
          {
            headers: {
              'Content-Type': 'application/json',
            },
            withCredentials: true,
          },
        );
        dispatch(HomeSearch(data.data.data));
      };
      getSeach();
      navigate(`/search?keyword=${value}`);
    }
  }, [homeSearch, value]);

  const arr = title.filter((el: string) => {
    return el.toLowerCase().includes(value.toLowerCase());
  });

  const filteredArr: string[] = [];
  for (let i = 0; i < arr.length; i += 1) {
    if (filteredArr.length >= 10) {
      break;
    }
    const isIn = filteredArr.includes(arr[i]);
    if (!isIn) {
      filteredArr.push(arr[i]);
    }
  }

  const searchListOnClick = async (e: React.SyntheticEvent<EventTarget>) => {
    setValue((e.target as HTMLInputElement).innerText);
    setHomeSearch(true);
  };

  const handleOnChange = (e: React.FormEvent<HTMLInputElement>) => {
    setValue(e.currentTarget.value);
  };

  const handleOnSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    const data = await axios.post(
      `${process.env.REACT_APP_SERVER}/posts/search?keyword=${value}`,
      {},
      {
        headers: {
          'Content-Type': 'application/json',
        },
        withCredentials: true,
      },
    );
    dispatch(HomeSearch(data.data.data));
    setErrorMessage('여기에 입력해주세요!');
    navigate(`/search?keyword=${value}`);
  };

  const deleteValueOnClick = useCallback(() => {
    setValue('');
  }, [setValue]);

  const UpScrollOnClick = useCallback(() => {
    if (!window.scrollY) {
      return;
    }
    window.scrollTo({
      top: 0,
      behavior: 'smooth',
    });
  }, []);

  return (
    <>
      <Nav />
      <HomeWrapper>
        <Wrapper>
          <Fade delay={400}>
            <IntroWrapper>
              <Intro src={intro} alt={logo1} />
            </IntroWrapper>
            {/* <Logo src={logo1} /> */}
          </Fade>
          <SearchBox>
            <Fade delay={500}>
              <Text>개발하면서 궁금했던 점을</Text>
              <Text>바로 검색해보세요!</Text>
              <HiOutlineChevronDoubleDown className="down" />
            </Fade>
            <Fade delay={600}>
              <Searchbar>
                <Form onSubmit={handleOnSubmit}>
                  <SearchBarWrapper>
                    <SearchInput
                      onChange={handleOnChange}
                      value={value}
                      placeholder={errorMessage || '여기에 입력해주세요!'}
                    />

                    <DeleteBtn onClick={deleteValueOnClick}>&times;</DeleteBtn>

                    {arr.length !== 0 && value !== '' ? (
                      <SearchBarBox>
                        <SearchList
                          type="button"
                          list={filteredArr}
                          chooseList={searchListOnClick}
                        />
                      </SearchBarBox>
                    ) : null}
                  </SearchBarWrapper>
                  <Button type="submit">
                    <FaSearch className="search" />
                  </Button>
                </Form>
              </Searchbar>
            </Fade>
          </SearchBox>
        </Wrapper>
        <Box>
          <LeftBox>
            <Fade delay={500}>
              <Logo src={logo2} />
            </Fade>
            <Fade delay={500}>
              <TextBox>
                <Number>01</Number>
                <Title>공식문서들 봐도 이해가 안되셨나요?</Title>
                <Fade delay={700}>
                  <Descriprtion>
                    이해가 안된 부분만 발취해서 질문해보세요.
                  </Descriprtion>
                  <Descriprtion>
                    다양한 분야의 전문가들이 여러분들을 기다리고 있습니다.
                  </Descriprtion>
                </Fade>
              </TextBox>
            </Fade>
          </LeftBox>
        </Box>
        <Box>
          <RightBox>
            <Fade delay={500}>
              <TextBox>
                <Number>02</Number>
                <Title>알고리즘에 고민이 많으신가요?</Title>
                <Fade delay={700}>
                  <Descriprtion>
                    문제를 풀다가 막히는 부분이 생기면 질문해보세요.
                  </Descriprtion>
                  <Descriprtion>
                    알고리즘의 전문가들이 여러분들을 기다리고 있습니다.
                  </Descriprtion>
                </Fade>
              </TextBox>
            </Fade>
            <Fade delay={500}>
              <Logo src={logo3} />
            </Fade>
          </RightBox>
        </Box>
        <Box>
          <LeftBox>
            <Fade delay={500}>
              <Logo src={logo4} />
            </Fade>
            <Fade delay={500}>
              <TextBox>
                <Number className="three">03</Number>
                <Title className="three">개발하면서 오류를 만나셨나요?</Title>
                <Fade delay={700}>
                  <Descriprtion className="three">
                    여러분이 겪은 오류를 공유해주세요.
                  </Descriprtion>
                  <Descriprtion className="three">
                    수많은 오류를 해결한 전문가들이 여러분들을 기다리고
                    있습니다.
                  </Descriprtion>
                </Fade>
              </TextBox>
            </Fade>
          </LeftBox>
        </Box>
        <Box>
          <RightBox>
            <Fade delay={500}>
              <TextBox>
                <Number className="four">04</Number>
                <Title className="four">협업 시 문제가 있으신가요?</Title>
                <Fade delay={700}>
                  <Descriprtion className="four">
                    해결되지 않은 문제를 공유해주세요.
                  </Descriprtion>
                  <Descriprtion className="four">
                    수많은 협업을 진행해 온 전문가들이 여러분들을 기다리고
                    있습니다.
                  </Descriprtion>
                </Fade>
              </TextBox>
            </Fade>
            <Fade delay={500}>
              <Logo className="logo5" src={logo5} />
            </Fade>
          </RightBox>
        </Box>
      </HomeWrapper>
      {scrollY >= 500 ? (
        <UpScrollBtn>
          <FiChevronsUp
            className="upscroll"
            type="button"
            onClick={UpScrollOnClick}
          >
            위로가기
          </FiChevronsUp>
        </UpScrollBtn>
      ) : null}
      <FooterWrapper>
        <Footer />
      </FooterWrapper>
    </>
  );
}

export default Home;

profile
웹 프론트엔드 개발자

1개의 댓글

comment-user-thumbnail
2024년 1월 29일

The loyalty program at this casino is second to none. The rewards and perks genuinely make you feel valued as a player. It's not just about the games; it's about being part of a platform that recognizes and appreciates your loyalty. The personalized offers and exclusive events make the gaming experience even more enjoyable. For someone playing from Canada, it's great to find a casino that offers such a comprehensive and rewarding loyalty program. North Casino It shows that the platform not only values its players but also goes the extra mile to make their gaming experience special.

답글 달기