2022. 1. 15. 20:39ㆍNext.js
이제 작업물들을 소개하는 것을 만들어보겠습니다.
하기 전에 Home.module.css안에 내용들을 알려드리도록 하겠습니다.
Home.module.css
.project_nav {
text-align: center;
background-color: rgb(29, 128, 159);
}
.projects {
background-color: white;
width: 800px;
height: 500px;
margin: 0 auto;
margin-top: 15px;
text-align: center;
border-radius: 15px;
border: 2px solid black;
}
.info {
margin-left: 25px;
text-align: left;
}
.left_tab {
float: left;
margin-right: 15px;
}
.right_tab {
float: none;
}
@media screen and (max-width: 768px) {
.projects {
width: 100%;
}
}
작업물들을 소개하는 것은 그 작업물의 이미지와 어떤 작업물인지, 어떻게 작업을 하였는지, 느낀점은 무엇인지 그리고
어떤 언어로 했는지, 마지막으로 사이트를 알려주는 것으로 하겠습니다.
index.js에 함수 하나를 만들겠습니다.
index.js
const Data = ({
title,
imgPath,
first,
second,
third,
firstPath,
secondPath,
languages,
}) => {
return (
<nav className={styles.projects}>
<h2>{title}</h2>
<nav className={styles.info}>
<nav className={styles.left_tab}>
<picture>
<source
media="(max-width: 768px)"
srcSet={imgPath}
width={150}
height={200}
></source>
<img src={imgPath} width={350} height={400}></img>
</picture>
</nav>
<nav className={styles.right_tab}>
<h3 style={{ fontWeight: "normal" }}>
{first}
<br></br>
<br></br>
{second}
<br></br>
<br></br>
{third}
</h3>
<br></br>
<hr></hr>
<br></br>
GitHub : <Link href={firstPath}>{firstPath}</Link>
<br></br>
Page : <Link href={secondPath}>{secondPath}</Link>
<br></br>
Languages : {languages}
</nav>
</nav>
</nav>
);
};일단 작업물들이 여러개이니 작업물 소개하는 것을 하나의 함수로 만들어서 사용하였습니다.
저 코드를 설명하자면, 일단 title은 작업물의 이름, imgPath는 이미지 경로, first, second, third는 내용입니다.
그리고 firstPath, secondPath는 사이트 주소들이고, languages는 어떤 언어로 하였는지에 대한 것입니다.
저희는 이 웹사이트를 모바일에서도 모양이 맞게 할 것이기 때문에, 이미지를 넣을 때 그냥 넣지 않고 picture를 이용해 source로 넣었습니다.
<picture>
<source
media="(max-width: 768px)"
srcSet={imgPath}
width={150}
height={200}
></source>
<img src={imgPath} width={350} height={400}></img>
</picture>이렇게 하면 미디어의 최대 너비가 768px일 때, 이미지의 너비를 150, 높이를 200으로 맞추게됩니다.
왜 768px이냐면, Home.module.css에서 미디어의 max-width를 768px로 잡았기 때문입니다.
@media screen and (max-width: 768px) {
.projects {
width: 100%;
}
}
이제 함수는 완성되었으니, export 하는 Home함수에 코드를 짜도록 하겠습니다.
export default function Home() {
return (
<div>
<Head>
<title>이기현의 포트폴리오 사이트</title>
<meta
name="viewport"
content="width=device-width, initial-scale=0.8 "
/>
</Head>
<nav className={styles.project_nav}>
<h1>Projects</h1>
<nav className={styles.project_gather}>
<Data
subtitle="알고리즘 모음"
imgPath="/project1.PNG"
first="백준이라는 사이트에서 여러 난이도의 알고리즘들을 하루에 하나씩
풀고 있습니다."
second="종류는 수학, 브루트 포스, 그리디, 그래프 이론들, dp, 이분
매칭, 이분 탐색, 자료구조, 정렬, 정수론 등이 있습니다."
third="다양한 알고리즘들을 배우고 활용하는 방법을 알 수 있어 코딩
실력이 늘었고, 프로그래밍을 할 때 날코딩이 아닌, 효율적으로
알고리즘화 시켜서 푸는 방법도 알게 되었습니다."
firstPath="https://github.com/Tublanx/Algorithm"
secondPath="https://www.acmicpc.net/user/rlgus0823"
languages="Java, C++, C"
></Data>
<Data
subtitle="미니 무비 앱"
imgPath="/project2.PNG"
first="개봉했던 영화들을 나열하여서 이미지와 이름을 불러오는
사이트입니다."
second="데이터들은 TMDB 사이트에서 영화 API 키를 가져와
구성하였습니다. 그리고 getServerSideProps를 이용하여
데이터들은 fetching하였습니다."
third="기본적인 Next.js에 대해 배울 수 있어 뜻깊은 프로젝트였고
Next.js가 어떤 프레임워크인지 개념을 잡아줬던 프로젝트입니다."
firstPath="https://github.com/Tublanx/mini-movieapp"
secondPath="https://mini-movieapp.vercel.app/"
languages="Next.js, React"
></Data>
<Data
subtitle="GraphQL을 이용한 캐릭터 검색 사이트"
imgPath="/project3.PNG"
first="Rick and Morty라는 애니메이션 API를 가져와 캐릭터를 검색하는
사이트입니다."
second="데이터는 rickandmortyapi.com에서 가져왔으며, 이는
getStaticProps를 이용해서 데이터를 fetching하였습니다."
third="이 프로젝트도 Next.js 사용법에 대해서 기본적으로 알
수 있었고, 특히 GraphQL에 대한 이론과 사용법들을 알 수
있었습니다."
firstPath="https://github.com/Tublanx/next-graphql"
secondPath="https://next-graphql-kappa.vercel.app/"
languages="Next.js, React, GraphQL"
></Data>
</nav>
<About></About>
<Skill></Skill>
</nav>
</div>
);
}
일단 결과물을 보겠습니다.
웹사이트 결과물
모바일 결과물
모바일에서도 상당히 이쁘게 나오는 것을 볼 수 있습니다. 만약 media를 위한 코드를 짜지 않았더라면 모든 요소들의 크기가 컴퓨터 기준으로 되어있기 때문에 모바일로는 보기가 많이 힘들었을 것입니다.
그러니 웹페이지를 만들 때에는 모바일 환경에서도 생각하여 코드를 짜주셔야합니다.
다음에는 나에 소개에 대한 것을 만들어 보도록 하겠습니다.
'Next.js' 카테고리의 다른 글
| Next.js를 이용해 포트폴리오 사이트 만들기 - Header 만들기(2) (1) | 2022.01.13 |
|---|---|
| Next.js를 이용해 포트폴리오 사이트 만들기 - 기본 세팅하기(1) (0) | 2022.01.12 |