[토이프로젝트] project.zip 제작기

[토이프로젝트] Project.zip 제작기

토이 프로젝트를 보관하는 토이프로젝트

코드스테이츠를 진행하면서 간간히 프로젝트를 진행한다. (계산기나 트위터 SPA 같은 미니 프로젝트)

그냥 저냥 폴더로 관리하고 github에 fork도 되어있고 repositories에 보관도 되어있지만 내가 구현했지만 꺼내보질 않게 된다! 폴터 하나하나 들어가기도 귀찮고 부트캠프에서 진행하다 보니까 test 파일때문에 노트북이 화를 내서 자꾸 보고싶지만 그러질 못했다. 그래서! 내 프로젝트를 모아놓은 사이트를 제작하기로했다!

가장 최근에 react 기초를 실습했는데 그걸 활용해서 만들기로 결심했다. 이유는 데이터 다루기도 좋고 (물론 DB를 연결하는 건 아니지만 data js 파일을 따로 만들기 때문에 불러와서 쓰기 좋겠다고 생각함) 리액트도 다시 복습할 겸! 사실 디자인에 욕심을 부리면 하루안에 디자인이 안끝나고 나는 레퍼런스를 많이 찾아보고 디자인 하는 시간 «« 레퍼런스 보는 시간 이기때문에 디자인은 어느정도 타협을 봤다 ㅜㅜ,

그래서 그 사이트 이름은 Project.zip 이다! 프로젝트 모음집 같은 너낌~ㅎ 메인페이지에는 작업 하나하나가 컴포넌트로 배치되어있고 그컴포넌트 내용으로는

1. 프로젝트 나열되어 있고
2. 프로젝트 명 & 프로젝트 정보
3. 팀프로젝트인가 개인 프로젝트인가 구분 (나중에는 팀프로젝트도 진행하기 때문에!)
4. 작업 기간

이렇게 정했다! 그래서 간략하게 디자인 된 모습은 !?

위의 이미지는 figma로 디자인했습니다!

이거다!! 대쉬보드 느낌으로 프로젝트들이 나열되게끔! 하다보니까 나중에는 포트폴리오로 활용할 수도 있겠다고 생각했다. 아직도 디자인을 하고 코드로 구현할때 가장 어려운 점은 사이즈다. 위에 있는 사진은 MacBook Pro 16” - 1 를 기준으로 작업했지만 내 모니터는 가로로 더 길어서 내꺼에만 맞추면 맥북에서 봤을 떄 이상해진다 ㅜㅜ 그래서 되도록 px 단위를 잘 안쓰려고 한다. 디자인하고 구현을 하면 내가 디자인한 간격을 그대로 코드로 적용했을 때 간격이 너무 넓어보인다 (늘 그랬던 것 같다,,) 그래서 이러면 안되지만 매번 눈대중으로 간격을 조금 좁힌다,,,,,

그리고 의외의 문제가 있었는데

1. 데이터를 입력하면 컴포넌트가 자동으로 생성되기 때문에 정렬이 쉽지 않았고
2. 위에 사진처럼 sidebar는 고정되어 있고 content 부분만 스크롤 되야하는데 둘이 붙어서 같이 움직이고
3. x 축 방향으로 스크롤리 생겼다 ㅜㅜ

우선 1번같은 경우는 dispaly: flex를 이용했고 컴포넌트 하나의 width만 주고 justify-content: space-around를 했는데 그러면 프로젝트가 5개가 되면 가운데가 비어있고 양 옆으로 붙어버린다 ㅜㅜ margin을 주면 내가 만들어놓은 inner 에 영향이 가서 간격이 안맞았었다. 그리고 :nth-child로 3의 배수 빼고 margin-right 를 줘야하나 했지만 구현을 못하기에,, 포기 ,, 이런 모양을 가진 웹사이트를 찾아보았다. 한 사이트는 그냥 마진을 양 옆으로 주고 모두 그런 모양새로? 간격을 맞추고 있었다. 깔끔하지 않아서 패스, 한 사이트는 grid를 사용하고 있어서 이거다! 싶었다.

그래서 찾아본 방법이 display: grid 사실 이 방법은 잘 쓰지 않고 IE에서 지원이 안돼서 잘 사용이 안된다고 하는데 사실 사용할 수 있는 방법이 있긴하다. (display: -ms-grid 뭐 이런식,, 하지만 난 생략했다,,) 그래서 성공!!

갑자기 설명하는 grid로 정렬하는 방법

우선 flex 처럼 컨테이너 (부모요소) 에 display: grid 를 줘야한다.

<div class="container">
	<div class="item">1</div>
	<div class="item">2</div>
	<div class="item">3</div>
	<div class="item">4</div>
	<div class="item">5</div>
</div>

.container {
	display: grid;
}

그리고나서 해야 할 일이 그리드 column을 몇개 줄것이며 간격은 어떻게 할 것인가? 이다. 나는 3개에 간격을 48px 주고싶어서

.container {
	display: grid;
 	grid-template-columns: repeat(3, 1fr);
 	gap: 48px;
}

.item {
  	height : 100px;
  	background-color: red; 
}

이렇게 수정해주었다. 여기서 fr은 fraction로 분수, 일부 이런뜻인데 일정한 비율로 나눠주겠다~ 라는 의미다. 여기까지 하면 이렇게 된다! 추가되면 밑으로 3개씩 쭉쭉 정렬된다!

여기까지 완성된 결과물이

이제 2번 3번을 해결해야한다,,,,

+문제점 ) PERSNAL, TEAM 태그 간격 다시 (padding으로 주면 될 듯) & 나눠서 태그 색상 다르게 하기, 폰트 바꾸기