프리온보딩 3일차

---

Stylelint

• scss 파일에서 css 순서 stylelint 적용이 안될 때, vscode setting.json에 "stylelint.validate": ["css", "scss"] 을 추가하면 정상적으로 작동한다.
  • 근데 순서를 알려주긴 하는데.. 자동으로 바뀌었으면 좋겠다 ㅎㅎ
  • vscode 설정 페이지 여는 방법은 이 링크를 참고했다.

2022-05-06

• 다른 팀의 어떤 분이 Stylelint 저장 시 자동으로 css 속성을 정렬해주는 세팅을 알려주셨다 !!!!!!!!!!!!!!!! 편_안

"editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
    "source.fixAll.stylelint":true 
  },

---

SVG

<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path
              fillRule="evenodd"
              clipRule="evenodd"
              fill='currentcolor'
              d="M22 12C22 17.5228 ..."
            />
</svg>

svg 아이콘 자체 크기 변경

• 뷰박스(viewBox)는 좌표의 가로, 세로의 비율을 결정하는 svg의 특성이다.
• viewBox="x좌표 y좌표 width비율 height비율
• 아이콘끼리 크기가 달라서 맞춰주기 위해 사용했다.

참고

• SVG (Scalabe Vector Graphic)

---

classnames과 css module

• classnames와 css module을 사용하면서 무리 없이 사용하다가 styles 뒤에 클래스 명을설정해주는 부분에서 막혔다😭

{COLOR_VALUE.map((color) => (
        <button							{/* 이 부분에 color를 입력하길 원함 */} 
          className={cn(styles.colorChip, styles.(color)}
          type="button"
          aria-label="color button"
          data-color={color}
          onClick={choiceColor}
          key={`${color}-color`}
        />
))}

• 뒤에 정말 많은 방법으로 붙여보려 노력했지만,.. 결국 못찾아서 팀원 분에게 여쭤보았다...

• 친절하신 (천재만재)팀원님이 해결 방법을 제시해주셨다 !!!!🎉

• styles[color] 이렇게 대괄호를 이용해서 안에 변수를 적어주면 된다.

• 이렇게 또 하나의 지식을 얻었지만, 구글링하는 방법을 좀.. 바꿔봐야겠다.😵

• classnames - npm
  : classnames 사용이 헷갈릴 때 들어가서 읽어보기

---

click outside

• 사전 과제의 dropbox를 최적화하기 위해 해당 영역의 외부 영역을 클릭하면 접히도록 구현하려고 한다.
• 링크를 참고하여 진행할 예정이다.

---

mount, unmount 애니메이션

• 팀원 분이 담당한 기능이 애니메이션이 있는 기능이어서 이 링크글을 참고하여 진행하셨다고 한다. 추후에 공부할 수 있도록 작성

---

porps으로 넘기기

• svg 파일을 이용해서 버튼에 아이콘을 추가하기 위해 prop을 이용했다.
• 버튼을 따로 여러 개 만들지 않고, 하나의 버튼 컴포넌트를 이용하기 위해 svgicon의 이름을 넘겨줬는데, 화면에 아이콘이 출력되지 않았다.

내가 저지른 만행과 해결

<div className={cn(styles.wrapButtons)}>
        <BasicButton SVGIcon={FolderIcon} outline={false} />
        <BasicButton SVGIcon={FlagIcon} outline={false} />
        <BasicButton SVGIcon={MoonIcon} outline={false} />
</div>

export default function BasicButton({ SVGIcon, outline, onClick }) {
  return (
    <button className={cn(styles.basicButton, { [styles.outline]: outline })} type="button" onClick={onClick}>
      <div className={cn(styles.svgWrap)}>
        <SVGIcon />
      </div>
    </button>
  );
}

• 이전에는 변수명을 svg로 설정했다.
  • 이렇게 되면 svg 태그와 겹쳐 제대로 작동하지 않는다.
• <SVGIcon /> 이렇게 태그 형태로 작성하지 않고, {SVGIcon} 변수 넣듯 작성했다😓

(천재만재) 팀원 분이 또.. 도와주셨다.😭 죄송합니다죄송합니다암쿠라잉

---

Github

branch에 push하기

• git push <저장소명> <브랜치명>
• git push -u <저장소명> <브랜치명>
• 이전에 -u 옵션을 이용해서 git push 명령어를 날린 적이 있을 경우 그냥 git push 해주면 된다.

참고

• git push 사용법/팁

merge pull request

• 팀원 분이 수정하신 코드를 나에게 pull request 해주셨다.

pull request

• 수정한 코드가 있으니 branch를 가져가서 검토 후 병합해달라는 의미

• 이후 merge pull request로 코드 변경내용을 확인한 후 merge를 결정했다.

문제 발생

• 이때 코드를 잠깐 수정하던 중이었는데 이를 생각하지도 않고.. 바로 머지를 했다 (나진짜머지)
• 😳 이 표정으로 이 사태를 어떻게 해결해야 할지 고민했다.
• pull을 해도 내 코드랑 깃허브 코드에 다른 점이 있으므로 충돌이 발생했다.
• 많은 양을 수정한 게 아니라서 일단.. (이러면 안됨) 수정했던 사항을 모두 지우고, pull을 하여 로컬로 코드를 받았다.
• 제대로 들어온 것을 확인하고 다시 수정한 후 커밋했다 ^^;
• 앞으로는 머지 전에 커밋하겠습니다 .............

참고

• Git - Pull Request 활용하기
• Git - 커밋 메시지 컨벤션
  • 앞으로 커밋할 때 컨벤션 읽으면서 진행하자

---

하루 후기

깃허브는 나의 적
그래도... 친해져야 하므로 엉엉 울면서 알아보고 있다.
깃허브에 올릴 때마다 눈을 부릅뜨고 방법을 찾아본다...
얼른 깃허브에 대해 공부해야겠다. 이만 총총