[22.12.09] TIL

TODO LIST 만들기 2번째~~

• redux,styled component, router 를 이용해서 만들어보고 있다.
  일단 레이아웃을 짜야할 것 같아서 레이아웃 먼저 만들고있다.

children 사용해 header,footer 페이지에 연결하기

• 이건 생각보다 간단했다.

1. shared 폴더에 Layout.jsx 폴더를 만든다.
2. children을 구조분해할당으로 매개변수에 넣어 땡겨준다.
3. header footer import 해오기
4. header,footer 컴포넌트를 return문 안에 넣고 그 사이에 <div>{children}</div> 입력
5. router.js 가서 BrowserRouter 컴포넌트 바로 안에 Layout 컴포넌트 집어넣기

잘 연결이 되었다.

styled component 만들기

지금 컴포넌트를 잘게잘게 부셔버리는 정도로 쪼개고 있는데 이렇게 하는게 맞는건지 모르겠다.
어느정도 만들고 튜터님한테 확인해볼 생각인데, 일단 지금 만들고있는거는
버튼,인풋,카드 등 모든걸 쪼개버렸는데 쪼개니까 style 확인하기도 편하고, 그 해당 기능을 하는 부분의 html만 확인하는것도 용이하다.

styled component에 ::hover 같은 속성 넣기

• 이건 &:hover{} 하니까 잘 됐다.
  이런식으로 active도 넣어서, 동적인 버튼과 input을 생성했다.

지금까지 한것

현재 상황은 헤드,푸터,input이 들어있는 제목,내용 입력하는 창
이렇게 만들었다.

하면서 생긴 문제점 및 해결한 방법

• 오늘 스타일컴포넌트 만들다 조금 바보같은짓을 한게, 변수명을 파스칼케이스로 써줘야하는데 다 소문자로 써놓고 컴포넌트화 안된다고 징징거렸다.
  커뮤니티에 글을 올리고나서 다시 코드를 잘 살펴보니 뭔가 이상.. 앞글자 대문자로 바꾸니 잘된다 -ㅅ-
  아직 초보자다보니 사소한걸 하나씩 놓치고있는데 이런 부분들은 메모해놨다가 다음에 몰라도 찾아볼 수 있도록 해야겠다.

문제점

• card는 만들다 말았는데 잘 안된다.
  이건 props의 문제같은데 내일 발생한 문제, 해결방법에 대해 자세히 기재해볼 예정이다.
• Home.jsx가 메인이 되는 페이지라 거기에 max-width, min-width style을 줬는데 적용이 안되는 것 같다. 이것도 내일..