WIL8

항해99 50일차	2022. 6. 27.(월)	실전프로젝트 (프론트2+백3+디자이너1 협업)	D반 - 실전프로젝트 8조(6명),  기획 일부 수정(스코프 줄이기 등), API 일부 수정, 회원가입 기능 구현 95% 완성(CSS는 제외) JS 스터디
항해99 51일차	2022. 6. 28.(화)	실전프로젝트 (프론트2+백3+디자이너1 협업)	D반 - 실전프로젝트 8조(6명),  디자이너 와이어프레임 작업 확인하며, 의견 공유, 회원가입, 로그인 기능 구현 완료, 소셜로그인 공부중 JS 스터디
항해99 52일차	2022. 6. 29.(수)	실전프로젝트 (프론트2+백3+디자이너1 협업)	D반 - 실전프로젝트 8조(6명),  로그인/회원가입 기능 구현 테스트 완료 JS 스터디
항해99 53일차	2022. 6. 30.(목)	실전프로젝트 (프론트2+백3+디자이너1 협업)	D반 - 실전프로젝트 8조(6명),  CI/CD 파이프라인 구축-github actions (완료-AWS 버킷 연결까지 완료/일단 disabled), 헤더/로그인/회원가입/회원가입완료 페이지 1차 CSS, 게시글 상세 페이지 view 그리기 JS 스터디
항해99 54일차	2022. 7. 1.(금)	실전프로젝트 (프론트2+백3+디자이너1 협업)	D반 - 실전프로젝트 8조(6명),  기술 멘토링 사전 노트 작성, 헤더 CSS , 산책 JS 스터디
항해99 55일차	2022. 7. 2.(토)	실전프로젝트 (프론트2+백3+디자이너1 협업)	D반 - 실전프로젝트 8조(6명),  CI/CD 정리 및 다시 테스트, 기술 멘토링!, 디자인 회의(로고, 폰트, 기타 디자인 시안 등), 팀 노션 이사 JS 스터디
항해99 56일차	2022. 7. 3.(일)	Weekly I Learned 작성, 산책, 과제

실전 프로젝트를 진행하며 기술적으로 막혔던 부분은? 해결했다면 어떻게 해결했나?

한 주 회고

 

1. 처음 접한 CI/CD와 .env 

https://writingcode.tistory.com/79

깃허브 액션스에서 yml파일 만들 때, 오타 있어서 오류난 것도 있었고, CI=false 라는 문구가 없어서 오류나기도 했다. 여러 차례 테스트 끝에 AWS CloudFront에서의 도메인에서도 적용이 잘 되는 것을 확인했다. 

이 과정에서 index.html 의 카카오앱키를 env 파일을 이용해 숨기는 것도 알게 되었다. (yarn add dotenv)

 

2. CSS 몇 가지

2-1) 체크박스 둥글게, 그리고 v 표식처럼 나타나기

디자이너가 와이어프레임에 그려놓은 대로 최대한 하려고 찾았는데, 가운데 v자 표식은 이미지를 삽입한 것이다. 

.CheckboxStyle {
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  border: 1px solid #999;
  appearance: none;
  cursor: pointer;
  transition: background 0.1s;
  display: inline-block; /* 영역적용가능해짐 */
  box-sizing: border-box;
  position: relative;
  margin-bottom: 9%;
}

:checked {
  background-image: url(https://cdn.icon-icons.com/icons2/2248/PNG/512/checkbox_marked_icon_138772.png);
  background-size: 135%;
  background-repeat: no-repeat;
  background-position: center;
  border: none;
}

2-2) 헤더의 카테고리 눌렀을 때 CSS 변경/유지

  // 메뉴 버튼 클릭했을 때 클릭한 버튼 상태 변화 유지하기
  const [currentClick, setCurrentClick] = useState(false);
  const GetClick = (e) => {
    console.log(e.target);
    setCurrentClick(e.target.id);
  };
  // 변한 상태 css 스타일
  useEffect(
    (e) => {
      if (currentClick !== false) {
        let current = document.getElementById(currentClick);
        current.style.color = "black";
        current.style.borderBottom = "2px solid";
        current.style.fontWeight = "600";
      }
    },
    [currentClick]
  );

=> 문제점: 다른 버튼 누르면 사라져야 하는데… 효과가 남아 있었고, 아래 블로그를 참고해서 해결했다.

 

https://data-jj.tistory.com/51

// 메뉴 버튼 클릭했을 때 클릭한 버튼 상태 변화 유지하기
  const [currentClick, setCurrentClick] = useState(null);
  const [prevClick, setPrevClick] = useState(null);
  const GetClick = (e) => {
    // console.log(e.target.id);
    setCurrentClick(e.target.id);
    navigate(`${e.target.id}`);
  };
  // 변한 상태 css 스타일
  useEffect(
    (e) => {
      if (currentClick !== null) {
        let current = document.getElementById(currentClick);
        current.style.color = "black";
        current.style.borderBottom = "2px solid";
        current.style.fontWeight = "600";
      }
      if (prevClick !== null) {
        let prev = document.getElementById(prevClick);
        prev.style.fontWeight = "400";
        prev.style.borderBottom = "none";
      }
      setPrevClick(currentClick);
    },
    [currentClick]
  );

=> 카테고리1 하나를 누르고 로고를 누르면 카테고리1의 상태 변화가 그대로 남아 있는 문제점이 또 있었다.

logo 클릭 했을 때 setTimeout을 적용해 해결했다.

	<div
          className="HeaderLogo"
          onClick={() => {
            navigate("/");
            setTimeout(() => {
              window.location.reload();
            }, 50);
          }}
        >
          logo
        </div>

3) 콘솔창 오류

Warning: validateDOMNesting(...): <button> cannot appear as a descendant of <button>.

=> styled components 적용하면서 생긴 오류였는데, div 아래 button 속성 때문.. button 을 span으로 바꾸니 해결됨.

 

Warning: Each child in a list should have a unique "key" prop

=> 맵 돌릴 때 만날 수 있는 오류인데, 가장 바깥 태그에서 key 값 지정해 주니 해결.. 

{applyList.map((value) => {
        return (
          <div key={value.id}>
          (이하 생략)

(참고) https://velog.io/@dum6894/%EC%98%A4%EB%A5%98%ED%95%B4%EA%B2%B0-Warning-Each-child-in-a-list-should-have-a-unique-key-prop