오늘은 각자 작업한 부분을 깃에서 머지하고 풀로 가져오면서 오류가 발생하였다.
알고보니, 파일명의 규칙을 정하지 않아 일어난 오류였다. 다행히 초반이라서 파일 컨벤션을 빠르게 정하였다. 그 중 제일 조심해야 하는 부분이 폴더명은 소문자, 파일명은 첫 글자만 대문자로 하는 규칙이었다. 이 부분이 꼬이니까 파일경로 오류 등이 너무 많이 발생해서 컨벤션 통일이 정말 중요하다고 느꼈다.
그런데....!!! 분명 잘 구분해서 올렸는데 깃에는 반영이 안된다는것이다!!!
✅ 1. git은 폴더/파일명의 대소문자를 무시한다.
📌 git 설정에서 대소문자를 무시하지 말라고 설정해야 한다.
git config core.ignorecase false 이 설정을 하고나서 push하면 된다.
하지만.... 이럼에도 불구하고 반영이 되지 않았는데...
📌 이런 경우는 깃 저장소에 변경된 폴더 내 캐싱 된 파일이 남아있어서 그렇다고 한다.
git rm -r --cached . ➡️ git add . ➡️ git commit -m "~~~~"
위 명령어를 실행해주면 된다.
✅ 2. <hr /> 사용하여 가로줄 생성
회원가입 페이지를 구현하면서 hr을 사용하여 가로줄 사이에 글씨를 넣어주었다
hr {
border: none;
border-top: 3px double #333;
color: #333;
overflow: visible;
text-align: center;
height: 5px;
}
hr:after {
background: #fff;
content: 'OR';
padding: 0 4px;
position: relative;
top: -13px;
}✅ 3. SASS에서 사용하였던 lighten(), darken() 스타일 적용하는 방법
⚙️ npm install --save polished 라이브러리 설치
&:hover { background-color: ${darken(0.1, 'white')}; }
이렇게 사용하여 호버 시 약간 어둡게 하는 효과를 적용하였다.
✅ 4. <a>태그의 속성 사용방법
&::visited { color: blue; }를 적용하면 클릭 후에도 색이 파란색으로 적용된다.
a:link: 방문 전 링크 상태a:visited: 방문 후 링크 상태a:hover: 마우스 오버 했을 때 링크 상태a:active: 클릭 했을 때 링크 상태
✅ 5. Styled-component에 props 넣어서 내려주는 방법
${(props) => props.color || "blue"}
&:hover { background-color: ${(props) => props.backgroundColor ? darken(0.1, props.backgroundColor) : darken(0.1, Theme.PRIMARY.WHITE)}; }
✅ 6. Input태그 Placeholder에 스타일 지정하는 방법
&::placeholder { color: ${Theme.PRIMARY.GREEN_DARK}; }
회원가입 컴포넌트를 구현하며 유저가 좀 더 편하게, 한 눈에 볼 수 있도록 구성하기 위해 여러가지 효과를 적용하였다. 앞으로 로그인 할 때 마다 좀 더 깊게 효과를 분석하게 될 것 같다...ㅎㅎ
또한, 나름 규칙들을 다 정하고 들어갔다고 생각했는데 좀 더 세분화해서 생각해보고 사소한 부분일지라도 동일한 규칙을 적용해야 겠다. 오류파티 나기전에....^^
