🧑‍💻

발표 자료

1. 팀 소개

1) 팀명

발표 시연 영상(2023년 1월 5일)

1. 팀 소개

1) 팀명

HI 25

•

홍대의 H  인천의 I

•

25시, 하루에 주어진 24시간 보다 더 넘어서 성실히 움직이자

2) 팀원

3) HI25 의 약속

공동 목표 :  완성된 프로젝트

중요 가치 : 소통

2. 프로젝트 소개

1) 기술 스택

2) 프로젝트 컨셉

•

노나먹자 서비스의 역할  식재료 또는 반찬을 공유할 수 있는 온라인 공유 냉장고 

노나먹자

•

 ‘노느다’ 여려몫으로 갈라 나누다 

주요 대상

•

1인 가구 또는 소수의 인원으로 구성된 가구

서비스 목적

•

식재료(또는 반찬)를 매개채로 지역사회 커뮤니티 형성

•

여분의 식재료 및 반찬 공유, 공동구매 를 통한 경제적인 소비, 자원의 낭비 방지 

주요 타겟 1인 가구 또는 소수의 인원으로 구성된 가구

서비스 목적

•

판매상품 등록 기능을 통해 무료 나눔, 공동구매 제안, 유저의 개인물품 판매 등록

•

포스팅 기능을 통해 사진과 글을 기록하며 1인 가구에 도움이되는 정보를 공유

3. 역할 분담 및 기능 시연

•

노나마켓 깃허브 README url 부분 참고

GitHub - TEAM-HI25/nonamarket

Contribute to TEAM-HI25/nonamarket development by creating an account on GitHub.

https://github.com/TEAM-HI25/nonamarket

4. 협업 방식

1) 깃허브 컨벤션

깃허브 컨벤션 · TEAM-HI25/nonamarket Wiki

You can't perform that action at this time. You signed in with another tab or window. You signed out in another tab or window. Reload to refresh your session. Reload to refresh your session.

https://github.com/TEAM-HI25/nonamarket/wiki/%EA%B9%83%ED%97%88%EB%B8%8C-%EC%BB%A8%EB%B2%A4%EC%85%98

2) 코드 컨벤션

코드 컨벤션 · TEAM-HI25/nonamarket Wiki

You can't perform that action at this time. You signed in with another tab or window. You signed out in another tab or window. Reload to refresh your session. Reload to refresh your session.

https://github.com/TEAM-HI25/nonamarket/wiki/%EC%BD%94%EB%93%9C-%EC%BB%A8%EB%B2%A4%EC%85%98

3) 깃허브 협업 프로세스

이슈 등록

브랜치생성 후 PR push

PR 기록을 보고 코드리뷰

merge

5. 주요 코드

1) useContext

•

token, accountname이 여러 컴포넌트 내에서 api통신을 할 때 필요로 하는 것을 발견.

•

전역에서 필요한 token, accountname을 useContext를 이용하여 관리

•

useContext를 사용함으로써 prop drilling을 방지

•

 useContext에서 token, accountname를 관리하고 있기 때문에 token, accountname 정보를 얻기 위한 불필요한 데이터 요청 방지

•

accountname의 경우 로컬스토리지에 저장할 경우 보안 상의 위험이 있어 추후 리팩토링 예정

//context.js
const AuthContextProvider = ({ children }) => {
  const [state, dispatch] = useReducer(authReducer, {
    user: {
      token: localStorage.getItem('token'),
      accountname: localStorage.getItem('accountname'),
    },
  });

  const value = useMemo(
    () => ({
      ...state,
      dispatch,
    }),
    [state],
  );

  return (
    <AuthContext.Provider value={value}>{children}</AuthContext.Provider>
  );
};
JavaScript
복사

// index.jsx
import { AuthContextProvider } from './context/context';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <AuthContextProvider>
      <App />
    </AuthContextProvider>
);
JavaScript
복사

//SearchUser.jsx
const SearchUser = () => {
  const { user } = useContext(AuthContext);

  useEffect(() => {
    if (keyword) {
      const getUserData = async () => {
        const data = await FetchApi.searchUser(keyword, user.token);
      };
      getUserData();
    }
  }, [keyword]);

 
  return (
    //중략
  );
};

export default SearchUser;
JavaScript
복사

2) CustomHook

•

모달 구현 시 모달이 필요한 여러 컴포넌트 내에서 동일한 로직이 반복적으로 사용되는 것을 발견.

•

이를, useModal 이라는 커스텀 훅으로 만듦으로써 코드의 중복 최소화 및 상태 관리 로직의 재사용성을 높임.

//useModal.jsx
import { useState } from 'react';

const useModal = () => {
  const [isShowModal, setIsShowModal] = useState(false);
  const [isShowInnerModal, setIsShowInnerModal] = useState(false);

  const handleShowModal = () => {
    setIsShowModal(true);
  };

  const handleCloseModal = () => {
    setIsShowModal(false);
  };

  const handleShowInnerModal = () => {
    setIsShowInnerModal(true);
  };

  const handleCloseInnerModal = () => {
    setIsShowInnerModal(false);
    setIsShowModal(false);
  };

  return [
    isShowModal,
    isShowInnerModal,
    handleShowModal,
    handleCloseModal,
    handleShowInnerModal,
    handleCloseInnerModal,
  ];
};

export default useModal;
JavaScript
복사

// PostCard.jsx
const PostCard = ({ data }) => {
  const [
    isShowModal,
    isShowInnerModal,
    handleShowModal,
    handleCloseModal,
    handleShowInnerModal,
    handleCloseInnerModal,
  ] = useModal();
  };


  return (
			//중략
			{!isShowModal ? null : author.accountname === user.accountname ? (
        <Modal CloseModal={handleCloseModal}>
          <ModalBtn name='삭제' onClick={handleShowInnerModal} />
          <ModalBtn name='수정' onClick={handleGoPostEdit} />
        </Modal>
      ) : (
        <Modal CloseModal={handleCloseModal}>
          <ModalBtn name='신고하기' onClick={handleShowInnerModal} />
        </Modal>
      )}
  );
};

export default Comment;
JavaScript
복사

6. 트러블 슈팅

[문제 상황] - 폰트 파일(Spoqa Han SanS Neo)을 다운로드 받아서 프로젝트 폴더 안에 저장하여 사용하고 있었으나 적용되지 않는 문제를 발견하게 되었다. - 개발자도구에서 렌더링된 글꼴이 Spoqa Han Sans Neo가 아닌 맑은 고딕이 적용되고 있었다.

[해결 과정] - 기존에는 폰트 파일의 경로를 url의 인자로 직접적으로 불러 왔었다. 그러나 리액트에서는 경로를 인자로 직접쓸 경우 리액트 실행시 경로가 바뀌어버리게 된다. 따라서, 파일(이미지, 폰트)를 가져올 때는 각 파일이 사용되는 부분에 바로 경로를 적는 것이 아니라 따로 import를 해서 가져와야 한다.

경로를 인자로 직접 쓴 경우 (error가 날 수 있는 상황)

폰트 경로를 변수형태로 import 해서 가져올 경우

- 경로를 import해서 가져왔음에도 불구하고 폰트가 적용되지 않았다. 멘토님께서 Spoqa Han SanS Neo가 아닌 다른 폰트는 적용이 되는지 확인해주셨는데 다른 폰트의 경우 적용이 잘 되었다. 그래서 폰트 파일 자체에 문제가 있을 수 있다는 힌트를 얻게되어 폰트 파일을 다시 다운 받았더니 Spoqa Han SanS Neo가 잘 적용 되었다. 결론은 폰트 파일에 문제가 있는 것이었다. - 그러나 폰트가 어떤 태그에는 적용이 되고, 어떤 태그는 적용이 안돼는 문제가 있었다. 이는 CSS 우선순위 문제였다. 기존에는 font-family를 * (전체 선택자)에 작성하였는데 reset css에 적힌 font:inherit은 태그 선택자에 작성되어있어 가중치 점수가 더 높기 때문에 전체 선택자에 작성한 font-family가 무시되는 것이었다. 따라서, reset css에 포함되지 않은 태그들(button)만 폰트가 적용이 되고, 나머지는 적용이 안되는 것이었다. 당시 개발자 도구를 통해 확인한 style

- 그래서 전체 선택자(* 애스터리스크)가 아닌 body 태그에 font-family을 주었고, reset css에 font-inherit이 적힌 부분과 가중치 점수가 동일하기 때문에 후자 우선의 원칙으로 뒤에 작성된 body의 font-family가 적용이 되고, body에 포함된 태그들이 이를 상속받을 수 있게 되었다.

애스터리스크에 적용

body 태그에 적용

7. 추후 프로젝트 개선 계획

1) 개선할 점

•

API 파일 기능별로 분리하기 (ex: 로그인, 회원가입, 상품등록 등)

•

보안문제로 인해 로컬스토리지에 accountname 값 빼기

•

중첩 삼항연산자 제거 - 가독성에 좋지 않은 중첩 삼항연산자 코드를 if문으로 교체하기

2) 추가 기능

•

카테고리 기능 추가 - 지역별 / 주제별 (반찬공유 / 공동구매 / 공동배달 등)

•

상품 게시글 등록 시 ‘유통기한’ 또는 ‘구매일자’ 추가하기

•

다크모드 기능 도입

•

채팅기능

•

리덕스 등 상태관리 툴 도입해보기

8. 프로젝트 소감

선은혜

-팀프로젝트 하기 전 useState 조차 만들지 못했습니다. 하지만, 프로젝트를 통해 API 명세를 해석하며 서버와 통신을 할수 있게 되었습니다. 특히, 다른 사람의 코드를 한 줄 도 이해하지 못했던 제가 이해를 한 후 코드를 제 것으로 만들어 회고조 친구들에게 ‘로그인’ 특강을 했던 그 순간을 아직도 잊지 못합니다. 그간 배워본 것을 실제로 프로젝트에 적용을 하니 코딩에 대한 흥미가 높아졌고, 무지성 클론코딩을 하던 습관에서 원리를 이해하고 활용할 수 있게 되었습니다~!!

-첫 협업 프로젝트 였지만, 팀원들 모두 자신이 잘하는 파트를 자진해서 맡은 부분을 최선을 다 하고자 했기에 팀원 간의 불화 없이 잘 마무리 할 수 있었다고 생각합니다. 더불어, 아이스브레이킹 노션 폴더를 통해 부끄러운 의견도 숨김없이 공유를 했기에 사소한 오해조차 없이 프로젝트를 잘 마무리 한 것 같습니다!

한유진 - 서버에서 데이터를 받아오고 보내는 작업을 처음으로 해보았는데 이 과정속에서 실제로 에러를 직면하고 콘솔로 찍어보면서 에러를 해결하는 과정이 짜릿했습니다 프로젝트 이전에는 코드에 대한 이해나, 두려움이 있었다면 지금은 두려움보다는 흥미가 더 커진 것 같습니다 ! 첫 협업 프로젝트라 부족한점이 많았지만 팀원들과 고민을 나누고 함께 해결하는 과정이 즐겁고 고마웠습니다. 팀원들이 아니었다면 이 프로젝트를 무사히 완주하지 못했을 것 같아요 ! - 팀원들과 개발환경을 맞추기 위해 프로젝트 초기에 eslint와 prettier 세팅을 진행하였는데 초반에는 린트에서 잡아주는 오류들이 많아서 약간의 피로감이 있었습니다~ 그렇지만 어떤 부분이 잘못되었는지 알려주기 때문에 문제를 빠르게 해결할 수 있었고 코드의 질이 좋아졌다는 생각이 들었습니다.

방현영 - 프로젝트 시작할 당시에는 모든 것이 낯설었던 것 같습니다. 리액트를 공부한 이후로 만들게된 첫 협업 프로젝트이기도 했고 깃에 대한 경험도 부족했기 때문에 이런 저런 생각이나 걱정도 많았습니다. 하지만 걱정했던 것과는 달리 직접 부딪혀보니 어느순간 개발에 재미를 느끼고 있는 제 모습을 발견할 수 있었습니다. 로직을 짜고, 머리를 맞대고 같이 에러를 해결하기도 하고, 서로의 코드를 리뷰하는 그런 과정 속에서 때로는 지치도 하고 때로는 벅차오르는 순간도 있었습니다. 이런 순간 순간들이 모여서 리액트, 깃 뿐만 아니라 협업에 대한 자신감을 얻을 수 있었고, 개발에 재미도 느끼며 조금은 성장하는 계기가 되었던 것 같습니다. 무사히 프로젝트를 마무리하게 되어 뿌듯하고, 각자의 자리에서 최선을 다해준 팀원들에게 감사하다고 전하고 싶습니다!

양지성 - 코딩은 물론 프로젝트 개발환경 세팅, 기획논의 등등..어느하나 쉬운 것 없는 프로젝트였지만, 그 만큼 많이 성장할 수 있는 경험이였습니다. 불과 한달전에는 코드하나 칠때마다 쩔쩔 매고, 내가 가능할까 의심했었는데 지금은 그 순간도 미화된 추억처럼 ‘그랬었지..’ 할 정도로 시간이 빨리 지나갔고 성장 했음을 느낍니다. 본 프로젝트에서 많은 기능을 시도해보지는 못했지만 프로젝트를 완주했다는 만족감에 자신감도 얻어갈 수 있어 정말 좋았습니다. 마지막으로 팀장으로서 많이 모자란 저에게 팀장 대우 해주고 응원해준 25조 팀원들 덕분에 팀원들과 현생에서도 conflict 없이 오히려 친해지고 마무리 할 수 있었던 것 같습니다. 감사합니다.