1차 프로젝트(논픽션)

결과

position

• Main
• Nav (+Category)
• Footer

기능구현

• [Main] 마우스 오버시 하위메뉴 나타내기 기능구현블로그
• [Main] 스크롤 이벤트 기능구현블로그
• [Nav] 검색창 만들기 기능구현블로그
• [Nav] 카테고리 클릭시 해당 페이지로 들어가기 기능구현블로그
• [Nav] 카테고리 만들기 기능구현블로그

느낀점

논픽션 홈페이지를 프론트엔드 4명과 백엔드 2명이 널픽션이라는 팀명으로 작업

다들 처음하는 프로젝트라 긴장도 많이했다
하지만 서로의 의견을 존중하며 처음이라 많이 서툰 프로젝트를 하나씩 서로의 할당량을 나누며 시작했고
부족한 것들은 구글링과 잘 아는사람과 소통하며 하나둘씩 해결해 나갔다
지금와서 되돌아보니 다른팀에는 의견충돌이 일어났으며, 마지막날은 분위기가 안좋은 팀이 몇몇 있었다.
우리팀은 성향이 비슷해서 그런지 서로 미안해했고 서로 아는것에 한해 최선을 다해 도와주려했다
또한 백엔드와도 진도가 비슷했고 나름 막히는것 없이 순조로워서 트러블이 생길 일이 별로 없었던것 같다

나는 메인페이지를 담당했다
처음엔 감성적인 UI에 끌려 메인페이지를 담당하겠다고 손을 들었다
내가 선택한 이미지를 메인에 세우고, 현란한 스크롤구현을 하고, nav와 footer를 구현해 다른페이지에도 나타냈다
하지만 이내 후회했다 기능구현이 너무나도 없었던것.
나는 레이아웃으로 낑낑댈 때, 다른 팀원들은 기능 구현으로 낑낑댔다
그렇게 나는 2차 프로젝트때는 기능구현들만 가득찬 페이지를 담당하리라 마음을 먹는다

배운점

Img

우선 메인페이지에 베이스인 크기가 각기 다른 이미지들.
크기가 각기다르며 위치도 각기 달라서 애를 무척이나 먹었다
그래서 처음엔 이미지에 직접적인 픽셀을 줘서 구현했다가 이건 아니것 같아서 큰맘먹고 싹 갈아엎었다
이미지위에 박스를 씌우고 양쪽각각 div를 써서 두개의 박스위에 큰박스를 덮어씌우는 것
부모 박스에 크기를 주고 img에는 width: 100%
결과는 마음을 잘 먹었다 (쓰담쓰담)
양쪽에 div를 주고 그 위에 큰 div를 줘서 justify-contents: space-between으로 기본적인 위치를 잡을 수 있었고
그 안에서 각기 다른위치를 center, flex-end 등 위치를 선정하고 나머지 부분들은 margin을 주었다

Scroll

대망의 스크롤.
애니매이션을 한번도 쓴 적이없어서 사실 막막했다
이내 막막함은 차버리고 구글링에 뛰어들었다
기초적인 스크롤 애니메이션으로 시작해서 이것저것 해보다 useRef로 사용하는 코드까지 왔지만
구현이 안되었다 결국 멘토님께 달려갔다
state에 선언이 안되어 있어서 실행이 안됐었고 동적인 스타일은 body에 준다는것.
기본적인 스크롤 구현에 대해 설명을 듣고
다시 직접 구현해봤다
스크롤이 돌아갈때의 내 기분은 마치 세상을 다 가진기분 ....

category

메뉴 레이아웃을 마치고 토글을 구글링했다
대략적으로 css만으로 구현하는법과 js으로 구현하는법이 있었다
css만으로 하는건 도움이 안될것 같아서 js쪽으로 공부중에 동기에게 sos신청을 했다
흔쾌히 줌링크를 보내며 설명을 해주겠다고 손을내밀었고 냅다 뛰어 들어갔다
설명은 서툴지만 코드를 보고 있었고 어느정도의 하고싶은말은 잘 전달 되었기에
동기의 소중한 시간을 위해 이만 놓아주었다
동기의 소중한 코드를 내가 다시 한줄한줄 써보았다
조건부 렌더링. 메뉴에 hover가 ture이면 펼치고 싶은 div가 하위메뉴로 나오는것
하지만 하위메뉴로 나오는 div에 애니메이션을 주고싶었는데 transition이 안먹는다..
다음에는 css로 하는걸로..