03-3 화면구성

1. 프로젝트 만들기

 

프로젝트를 만들어 봅시다.  먼저 프로젝트를 만들 폴더로 이동 후 아래 명령을 입력합니다.  

프로젝트명은 insta-clone으로 하겠습니다. (이름은 원하는 프로젝트 이름으로  사용해도 됩니다.) 

 

next.js 프로젝트를 만들기 위해서는   npx create-react-app  을 이용합니다. 

> npx create-react-app  insta-clone   

1~2분후에 프로젝트가 생성이 됩니다.  이제 비주얼 스튜디오 코드로 프로젝트를 열어 봅시다.

 

> 비주얼스튜디오 코드에서 생성한 insta-clone 폴더를 선택합니다.

 

자동 생성된 코드를 일단 실행해 봅시다. 

 

비주얼스튜디오 코드(VSC) 메뉴에서 Terminal - New Terminal 을 선택 한 후  npm run dev를 실행합니다. 

 

크롬을 열어서 http://localhost:3000/ 입력하면 Welcome to Next.js! 가 뜨는걸 확인 할 수 있습니다. 

 

[디렉토리 역할]

pages 폴더 :  페이지 생성, 라우팅 처리가 됨 

public  폴더 : 이미지,비디오,오디오 리소스 폴더

pages/api 폴더 : 서버에서 동작하는 api 구현 폴더

tailwind를 설치합니다. 

cmd> npm install -D tailwindcss postcss autoprefixer

 

현재 프로젝트에 tailwindcss 설정합니다. 

cmd> npx tailwindcss init -p

tailwind.config.js 코드를 아래와 같이 수정합니다.  pages, components 디렉토리에서 사용할 수 있는 확장자 js,jsx,ts,tsx를 정의한 내용입니다. 

 

 

module.exports = {

  content: [

    "./pages/**/*.{js,jsx,ts,tsx}",

    "./components/**/*.{js,jsx,ts,tsx}",

  ],

  theme: {

    extend: {},

  },

  plugins: [],

};

styles/globals.css 수정

 

@tailwind base;

@tailwind components;

@tailwind utilities;

pages/index  자동으로 작성된 코드를 지우고 인스타클론 Start!!! 코드로 수정해 봅시다.

 

2장에서 배운 Tailwind CSS  (m-3, flex, justify-between, w-100 h-8 shadow rounded …) 를 사용하여 코드를 변경해 봅시다.  

export default function Home() {

  return (

    <div className="m-3">

      <div className="flex justify-between  m-3">

        <div className="w-100 h-8 shadow rounded 

         bg-[#d51c7c] text-white">인스타클론 Start!!!</div>

      </div>

    </div>

  )

}

 

서버가 실행되어 있다면 Ctrl+C 로 서버를 중지 후 npm run dev를 실행시켜 주세요. 

(Tailwind CSS 설정을 위해서 tailwind.config.js 변경하였으므로 재실행이 필요합니다.)

 

Tailwind CSS가 적용된 화면으로 출력되었습니다. 

Tailwind CSS가 적용되는것도 확인했고, 이제 본격적으로 작업을 진행해 보겠습니다. 

 

component 뼈대 만들기

 

화면은 크게  Header, Feed, Modal 로 나누겠습니다.  나누어진 Header, Feed, Modal은 components 에 정의하겠습니다.  

 

component를 사용하는 이유는 하나의 페이지에 html을 만들어 사용하면 코드가 길어지고 깔끔하지 않기 때문에  해당 기능별로 컴포넌트화 시키는걸 권장합니다. 

 

하나씩 살펴보겠습니다. 

const Home: NextPage = () => {

  return (

    <div className=”bg-gray-50 h-screen overflow-y-scroll scrollbar-hide”> 

      {/* Header */}

 

      {/* Feed */}

 

      {/* Modal */}

    </div>

  )

}

bg-gray-50           background 칼라 회색 50 

h-screen               height 100vh (viewport 높이의 100%) 

overflow-y-scroll   크기가 overflow 되었을때 y-scroll 표시 

 

1. Header Component 

먼저, components 폴더를 생성하고 그 밑에 Header.tsx를 생성합니다. 

 

rfce 입력 후 탭을 선택하면 코드가 자동생성됩니다. 

 

( 만약, 자동생성이 되지 않으면 VS Code 익스텐션에서 ES7 React/Redux/GraphQL/React-Native snippets 설치해 주세요. 반복되는 작업을 줄여주고 개발의 생산성을 도와줍니다.)

 

import React from 'react'

 

function Header() {

    return (

        <div>

            Header

            {/* Left */}

 

            {/* Middle */}

 

            {/* Right */}

        </div>

    )

}

 

export default Header

Header는 크게 Left, Middle, Right로 나누어집니다. 

Left에는 인스타그램로고를 표시하고 가운데는 서치 Input Form , 그리고 오른쪽에는 메뉴아이콘을 표시하겠습니다. 

      Left (이미지)                       Middle (Search)                                        Right (icons)

Left에 이미지를 추가해 보겠습니다.  

 

<Image

    src='https://links.papareact.com/ocw'

    layout='fill'

    objectFit='contain'

/>

 

Image 클래스의 object-fit은 <img>, <video>의 사이즈가 컨테이너 내부에서 어떻게 조절되는지를 나타냅니다. object-fit이 ‘contain’이면 내부 콘텐츠의 비율을 유지하면서 컨테이너의 fit 되도록 내부 콘텐츠의 사이즈가 조정됩니다. 

 

 

Image 클래스에 src, layout, objectFit를 입력한 후 실행해 보았습니다. 

 

오류가 발생하네요. 

Next/image에서는 src에 들어가는 도메인을 미리 next.config.js에 정의를 해 주어야 됩니다. 정적파일의 접근은 상관없지만 외부 서버 이미지를 가져와야 될 경우는 도메인 설정이 필요합니다.  

 

next.config.js에 도메인을 추가해 주세요.  

서버를 중지하고 다시 npm run dev로 실행해 주세요. 환경파일 변경시에는 반드시 서버를 중지하고 실행하셔야 됩니다. 

인스타그램 로고 이미지가 출력되었네요.  한 가운데에 크게 표시되었네요. 위치나 크기는 Tailwind로 조정해 볼게요 

 

relative h-24 2-24로 사이즈를 변경하였고, 상위 div에 flex justify-between 를 추가하였습니다.

 

이미지는 모바일때와 PC화면일때 2가지로 표시하려고 해요. 현재 이미지는 PC버전일때만 표시합니다.  그래서 hidden lg:inline-grid 를 넣어 줍니다. 

 

이제 모바일때 이미지로 추가해 봅시다. 

이미지를 추가후 className에 relative w-10 h-10 lg:hidden 을 넣어 주었습니다. 

 

아이콘은 heroicons 무료 아이콘을 사용하겠습니다.  사용하려면 먼저, 인스톨이 필요합니다. 

 

heroicons 인스톨하기 

npm install @heroicons/react@v1  

tailwindcss가 지원하는 forms 도 같이 인스톨 하겠습니다.  이 부분은 인스톨 후 환경설정도 변경이 필요합니다. 

 

npm install @tailwindcss/forms

 

스크롤바도 필요해서 미래 인스톨 하겠습니다. 

npm install –save-dev tailwind-scrollbar

 

tailwind.config.js  forms, scrollbar  추가해 주세요. 

module.exports = {
 content: [
   './pages/**/*.{js,ts,jsx,tsx}',
   './components/**/*.{js,ts,jsx,tsx}',
   './app/**/*.{js,ts,jsx,tsx}',
 ],
 theme: {
   extend: {},
 },
 plugins: [require("@tailwindcss/forms")],
          require("tailwind-scrollbar"),
          require("tailwind-scrollbar-hide"),
 ],
}

 

Search 화면추가 

               {/* Middle */}
               <div className="max-w-xs">
                   <div className="relative mt-1 p-3 rounded-md">
                       <div className="absolute inset-y-0 pl-3 flex items-center
                                   pointer-events-none">
                           <SearchIcon className="h-5 w-5" />
                       </div>
                       <input
                           className="bg-gray-50 block w-full pl-10
                                       sm:text-sm border-gray-300 rounded-md
                                       focus:ring-black focus:border-black"
                           type="text" placeholder="Search" />
                   </div>
               </div>

SearchIcon은 표시합니다. 그런데 SearchIcon은 포커스가 필요없기 때문에 pointer-events-none을 상위 div 클래스로 정의합니다.

 

Menu 화면

           {/* Right */}
               <div className="flex items-center justify-end space-x-4">
                   <HomeIcon className="navBtn " />
                   <MenuIcon className="h-6 md:hidden cursor-pointer" />
                   <PaperAirplaneIcon className="navBtn rotate-45" />
                   <PlusCircleIcon className="navBtn" />
                   <UserGroupIcon className="navBtn" />
                   <HeartIcon className="navBtn" />
               </div>

MenuIcon은 화면이 커지면 (md) 히든시킵니다.  navBtn은 버튼들의 속성이 같기 때문에 globals.css 에 정의하여 사용합니다.

 

globals.css navBtn 클래스를 정의해 보겠습니다.

@layer components {
   .navBtn {
       @apply hidden h-6 md:inline-flex
       cursor-pointer hover:scale-125
       transition-all duration-150 ease-out;
   }
}

헤더를 완성했습니다. 

 

 

Feed를 구성해 봅시다. 

 

 

Feed Component

 

Feed Component를 생성해 보겠습니다. 

 

components/Feed.tsx 만들기

Feed는 2개의 세션으로 구분됩니다.  첫번째 세션에는 Stories, Posts 두번째 세션에는 Mini profile, Suggestions 으로 구분됩니다. 

 

Stories 컴포넌트 작성 

 

Stories컴포넌트는 여러개의 Story컴포넌트로 이루어져 있습니다. 

import React from 'react'

function Stories() {
   return (
       <div>
           {/* Story */}
           {/* Story */}
           {/* Story */}
           {/* Story */}
           {/* Story */}
       </div>
   )
}

export default Stories

인스타에서 맨위에 위치해 있고, 인친들이 스토리를 올리면 아이콘이 하이라이트 처리되어 표시됩니다. 현재 인친관련부분은 이번 범위가 아니므로,  스토리의 인친 표시는 randomuser.me 사이트의  API를 이용하겠습니다. 

먼저, next.js에서 지원하는 getServerSideProps에 대해서 설명하겠습니다. 

 

getServerSideProps는 Next에서 페이지의 데이터를 서버로부터 제공받는 기본 API입니다. 서버에서 데이터를 패치하여 초기 데이터를 전달하도록 구성이 되어 있습니다.    

randomUsers 로 스토리의 유저들을 자동생성합니다. 

export async function getServerSideProps() {
 console.log("getServerSideProps  step1 ");
 let randomUsersResults = [];

 try {
    
   const res = await fetch(
     "https://randomuser.me/api/?results=30&inc=name,login,picture"
   );
   randomUsersResults = await res.json();

 } catch (e) {
   randomUsersResults = [];
 }

 return {
   props: {
     randomUsersResults,
   },
 };
}

getServerSideProps는 이름 그대로 서버 측에서 props를 받아오는 기능을 하게 됩니다. 페이지를 요청 시마다 실행이 되며 getServerSideProps에서 페이지로 전달해준 데이터를 서버에서 렌더링을 하게 됩니다. 서버에서 실행되기 때문에, 앞의 코드를 새로고침을 하여 실행해 본다면 브라우저의 콘솔 출력이 아닌 터미널에서 출력 되는 것을 확인하실 수 있습니다. 

 

스토리에 스크롤바도 필요합니다. 우리는 앞에서 미리  tailwind-scrollbar를 인스톨 했습니다. 

 

Feed  소스

function Feed({ randomUsers }) {
   return (
       <main className="grid grid-cols-1 md:grid-cols-2
           md:max-w-3xl xl:grid-cols-3 xl:max-w-6xl max-auto">
           {/* Section */}
           <section className="col-span-2">
               <Stories randomUsers={randomUsers} />
               {/* Posts */}
           </section>

           {/* Section */}
           <section>
               {/* Mini profile */}
               {/* Suggestions */}
           </section>
       </main>
   )
}

Stories 소스 

function Stories({ randomUsers }) {

   return (
       <div className="flex space-x-2 p-6 bg-white mt-8 
             border-gray-200 rounded-sm 
             overflow-x-scroll scrollbar-thin scrollbar-thumb-black">
           {randomUsers?.results?.map(profile => (
               <Story key={profile.login.username} 
                   img={profile.picture.thumbnail} 
                   username={profile.login.username} />
           ))}
       </div>
   )
}

username, thumbnail을 표시합니다. 스크롤 관련 overflow-x-scroll scrollbar-thin scrollbar-thumb-black 도 클래스에 추가했습니다. 

 

Story 소스

function Story({key, img, username}) {
 return (
   <div>
       <img
           src={img}
           alt="profile pic"
           className="h-14 w-14 rounded-full p-[1.5px] border-red-500 border-2
               object-contail cursor-pointer hover:scale-110 
               transform duration-200 ease-out" 
       />
       <p className="text-xs w-14 truncate text-center">{username}</p>
   </div>
 )
}

hover:scale-110  스토리에 마우스 오버시에 이미지를 크기를 110%로 확대합니다.

 

 

  Posts

function Posts() {
 return (
   <div>
       {/* Post */}
       {/* Post */}
       {/* Post */}
       {/* Post */}
   </div>
 )
}

Posts 컴포넌트는 여러개의 Post로 이루어져 있습니다. 

 

파이어베이스와 연결하는 부분은 5장에서 다루고 있습니다.  여기에서는 더미데이터로 화면을 구성하겠습니다.

const posts = [   // 더미 데이터 
   {
       id: "123",
       username: "blockmeta",
       userImg: "https://i.pinimg.com/564x/dc/36/eb/
                   dc36eb1e90a9513ef82b343ef2d852ac.jpg",
       img: "https://i.pinimg.com/236x/63/b7/41/
                   63b7413ad91d74ae34986de68283bf9d.jpg",
       caption: "Next.js 인스타클론 코딩 정복",
   }
];

function Posts() {
 return (
   <div>
       {
           posts.map((post) => (
               <Post key={post.id} id={post.id}
                     username={post.username}
                     userImg={post.userImg}
                     img={post.img}
                     caption={post.caption}
               />
           ))
       }
   </div>
 )
}

id, username, userImg, img, caption 을  props (프롬스)로 Post 컴포넌트에 값을 전달합니다. 

 

더비 데이터 posts는 리스트로 되어 있어서 map()을 이용합니다. 

Post에서는 전달 받은 props는 아래와 같이 표시합니다. 

 

function Post( { id, username, userImg, img, caption })  

전달할때나 받을때 같은 변수이름으로 사용하게요. 

 

Post에는 Header, img, Buttons, caption, comments, input box 필요한 컴퍼넌트가 많이 있어요. 우리가 구현할 핵심 기능이 있습니다. 

 

하나씩 살펴 보겠습니다.

 

Header

       {/* Header */}
       <div className="bg-white my-7 border rounded-sm">
           <div className="flex items-center p-5">
               <img className="rounded-full h-12 w-12 object-contain
                                border p-1 mr-3" />
               <p className="flex-1 font-bold">{username}</p>
               <DotsHorizontalIcon className="h-5" />
           </div>
       </div>

Header 부분이 실행된 화면입니다.

 

img 

 

<img src={img} className=”object-cover w-full” />

 

Button

       {/* Buttons */}
       <HeartIcon className='btn' />
       <ChatIcon className='btn' />
       <PaperAirplaneIcon className='btn' />

공통으로 사용하는 btn 클래스는 globals.css에 @apply로 정의해 줍니다.  

 

globals.css

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
   .navBtn {
       @apply hidden h-6 md:inline-flex
       cursor-pointer hover:scale-125
       transition-all duration-150 ease-out;
   }

   .btn {
       @apply h-7 hover:scale-125 cursor-pointer
       transition-all duration-150 ease-out
   }
}

BookmarkIcon 도 추가 했습니다.

       {/* Buttons */}
       <div className="flex justify-between px-4 pt-4">
           <div className="flex space-x-4">
               <HeartIcon className='btn' />
               <ChatIcon className='btn' />
               <PaperAirplaneIcon className='btn' />
           </div>
           <BookmarkIcon className="btn" />
       </div>

HeartIcon, ChatIcon, PaperAirplaneIcon 이 표시된 화면입니다. 

 

 

caption

username, caption 이 표시된 화면입니다. 

 

truncate  글자가 화면에 넘치면 넘치는 부분은 자르고 … 줄임말로 표시

 

 

input box

input box는 border를

 없애고 깔끔하게 처리하였습니다. 

border-none focus:ring-0 outline-none 

 

MinProfile

Suggestion