[11주차] 부족함을 느낀다.

7/11
쇼핑몰 2
header 구현 시작, 빈 곳에 호버해도 dep 2 가 나타남 왜?

 

7/12
어제 궁금한 것을 강사님께 여쭤봤더니 opacity : 0 을 주고 hover 하면 opacity : 1 을 주는 것이 아니라 display : none 을 주고 hover 하면 flex 를 해줘야 했음
dep1 에만 호버해야 dep2 가 나오는 걸 다른 교육생에게 물어봤더니 dep1 의 a 의 크기를 수정하라고 해서 맞췄더니 됐다.
header 마크업과 스타일링을 하느라 수업을 아예 듣지 못했다.
집에 와서 겨우 메인페이지에 들어갈 header 의 마크업과 스타일링을 마쳤다. 사용을 하지 않으니 잊어버려서 헤맸지만 잘 마쳤다.

 

 

7/13
메인 기본 배경이 투명인데 서브페이지에서는 기본이 흰색이라 강사님께 여쭤봤다.
header 컴포넌트 나누는 법이 감이 잡히지 않아 강사님께 여쭤봤다. 내가 하는 게 맞고 gnb 는 hover 기능을 썼으니 li 나눌 필요 없다고 하셨다. 그러나 내 것처럼 컴포넌트를 구성하면 각각 props 를 귀찮게 내려줘야 한다고 하셨고 요소들을 쭉 나열하면 정신 없기 때문에 어쩔 수 없다고 한다. 그리고 dep2 가 컨텐츠 크기만큼 높이를 설정하게 하려면 그냥 height 값을 안 주면 된다고 하셨다. 

지금 헤더에 해야하는 기능 : 
- dep1 클릭하면 dep2 나오고 header 배경색 흰색으로 나오게 : 각 서브 페이지에서 state 값으로 클래스 네임으로 흰색지정하기
- eng, chn 누르면 기본 kor 가 각 lang 으로 바뀌게 : select 태그 이용해서 간단하게 처리가능
- search 버튼 누르면 search 창 나오게 :  onclick

강사님 : 
- 햄버거 버튼 클릭하면 사이트맵 나오게(옆에서 서서히 나오는건 어떻게? css 로?)
- border 로 밑줄을 줄 수 없어서 after 로 밑줄을 넣어줬는데 컨텐츠 크기만큼 어떻게 넣는지? / :hover::after 이렇게 넣으면 안되고 a 태그는 dep2 를 위해 width 를 늘려놨기 때문에 after 를 직접 주면 width 가 그만큼 늘어나기 때문에 텍스트 크기만큼 주고 싶다면 텍스트를 span 태그로 감싸서 span 태그에 after 를 주기
- 왜 검색버튼 움찔거려!~!~!~! : 걍 부모 태그에 위드값 좀 더 넓게 주니까 안 그럼..

언니한테: 클래스 네임 header도 똑같이 hd어쩌구로 줘야하는지 -> 맞음~! , dep2 는 각 컨텐츠 크기만큼만 나오게 하는건지? -> min-width 지정하기~!
세진님한테: app.js 에 header 가 없던데 어떻게 하는건지? -> 직접 넣으면 됨~~!

강사님 퇴근 후 :
- height 가 커서가 옮겨갈때마다 해당 dep2 가 컨텐츠 크기만큼 서서히 줄었다가 서서히 늘렸다가 어떻게?

집에 가서 코딩 :
- react 를 허투로 배웠는지 검색창 열리고 닫히는데 시간을 많이 할애했다.
- warning: LF will be replaced by CRLF in src/styles/ir/irPerfo.css.
The file will have its original line endings in your working directory => git add . 했더니 이런 오류가 났다. 구글링 해보니 윈도우의 줄바꿈 문자와 다른 운영체제의 줄바꿈 문자가 다르기 때문에 발생한다고 하는데 어떤 조치를 요구하는 경고 같은 것이 아니라 알림성 메세지라고 생각하면 된다고 한다. 그래서 큰 문제가 되지 않지만 기능 사용을 원치 않는다면 비활성화 코드가 있다고 하는데 아마 내일 가서 세진님한테 여쭤봐야 하지 않을까 싶다.
- react-dom.development.js:86 Warning: validateDOMNesting(...): <button> cannot appear as a descendant of <button>. => 버튼 기능을 추가한 후 콘솔을 봤는데 이런 에러가 떠있었다. 검색해보니 button 태그 안에는 또 button 태그를 쓸 수 없다는 뜻이란다. 아마 button 태그 안에 onclick 을 주느라 그 안에 중괄호로 컴포넌트를 불러와서 button 태그 안에 div 가 있는 이상한 구조라 에러가 난 것 같아 button 태그 밖으로 빼줬다. 

내일 할 것:
- 검색 창이 아래로 스크롤하면 화면에 고정되어 있음 수정 필요
- 검색 버튼 두번 눌러야 닫힘 수정 필요
- dep2 transition 적용하려면 visibility 로 적용

 

 

7/14
강사님한테 텍스트도 안보였다가 보이게 어떻게 하냐고 물어보기 : overflow hidden 을 주면 텍스트도 안보임

오늘 한 것:
- 검색 창이 아래로 스크롤하면 화면에 고정되어 있음 수정 필요 : relative 를 absolute 로 수정
- 검색 버튼 두번 눌러야 닫힘 수정 필요 : 사진 첨부, 강사님이 간단하게 바꿔주심
- dep2 transition 적용하려면 visibility 로 적용 : 그리고 height 도 줌

m&a / ipo 해야 할 것
- 일단 index 파일 하나 만들어서 동일한 모든 요소 불러들이기
- mnasubtitle, iposubtitle 컴포넌트 생성
- info, pro, perfo 컴포넌트에 들어갈 mnainfo, ipoinfo 이런 식으로 각각 컴포넌트 생성
- 그래서 m&a 버튼 누르면 mnasubtitle 을 부름과 동시에 mnainfo 컨텐츠도 같이 부를 수 있도록 info, pro, perfo 컴포넌트에다가 state 로 설정

내일 강사님께 물어볼 것
- header 서브페이지 가면 바뀌게 

 

 

7/15
서브 페이지 mna ipo 를 usestate 로 초기값을 컴포넌트로 배열로 만들어서 mna 버튼 누르면 mna 배너랑 mna 컨텐츠 나오도록

 

 

7/16
한 것: maipo process m&a 아코디언, 성과 ipo

강사님께 : 
- 개요 컴포넌트에 버튼 누르면 변화 있도록 스타일 주고 싶은데 에러 나고 안됨

 

 

7/17
한 것: maipo 성과 ipo 애니메이션

헤더 z-index 외 않되~!~!~!