[개인 Project] styled components 방식으로 스타일링 하고 컴포넌트 재분리

240201 목 TIL ✍

 

수준별분반 수업 과제로 to do list 프로젝트를 보완하고

css 및 인라인 스타일링 방식 => styled components 방식으로 변경했다

전역 스타일링도 적용! (GlobalStyle.jsx)

 

폴더 파일 구조도 변경했다. 컴포넌트 분리 구조 약간 변경

기존의 CustomBtn 이라는 버튼 태그 컴포넌트는 불필요한거같아서

(그리고 styled component적용하려니까 약간 골치아파져서 버렸다고 한다. 하핫)

삭제하고 그냥 컴포넌트들 내에서 button태그를 각각 달아주었다.

 

다시 컴포넌트 분리하고 옮기는 과정에서 에러도 났다 .

{ } 불필요하게 중괄호가 더 들어가있어서 에러가 났다든지 (js문법사용이라 { } 를 이미 썼는데 그 안에 또 { } 사용함)

- 이런 자잘한 에러에서도 문제를 찾지못해 시간을 잡아먹었다.

 

또한 스타일컴포넌트 방식으로, js문법 - 삼항연산자와 props 내려주기를 활용해서 스타일링했다. 

예를들어 아래와 같이.

const TodoTextBox = styled.div`
	text-decoration: ${(props) =>
		props.type === "working" ? "none" : "line-through gray"};
        ....

 

 

투두리스트 카드에서 영어만 제목에서 줄바꿈이 안되고 카드 밖으로 빠져나오는 현상 (버그?)을 발견했는데

이 경우 word-wrap: break-word  (스타일) 를 써서 해결했다 (영어?- 단어단위로 줄바꿈)

(다른 속성들도 있었으나 안 먹히는 것도 많았음 ㅠㅠ  word-break: normal 이나 word-break: keep-all 은 안먹힘

word-break: break-all 은 먹혔는데, 글자단위 줄바꿈) 

 

그 외 반복되는 태그들은 컴포넌트화 시켜서 처리

 

마감일 날짜 미정일 시 정렬옵션 선택 시 한쪽으로 같이 정렬되도록 했다 (미선택이어도 엄청난 미래의 날짜를 부여) 

 

스타일도 조금 더 손 봄!

 

또 git 다루는게 생각보다 아직도 어렵고 ..많이 헤매게 된다. merge했는데 안된다든지, 등등

 

그리고 처음에 git 추적시작하고 연동할 때, github에서 repo 생성 후  (이때 readme.md 나 라이센스 생성 다 OK) 

git clone 하는 방법이 제일 좋다. 그리고 vite 프로젝트를 시작하려면 해당 로컬폴더 상위 폴더에서 create-vite =>

그 뒤 프로젝트명 = 해당폴더명  일치시켜서 씀 => 기존폴더안에 프로젝트 그대로 생성 가능

(로컬에서 레포 먼저 생성하고 init 후에 연동시키려면.. github repo에서 readme 파일 등 없어야)

 

 

다른 블로그를 참고해보자 

>>

* merge 오류시 (강제 merge하기)

https://yewon918.tistory.com/34

merge 오류 (Branch가 merge되지 않을 때) 해결법

 

* git branch 주요 명령어 정리

https://jistol.github.io/vcs/2017/01/27/git-branch/