[95일차]20210726 react Link, head, title, css, 라우터, 폰트, 이미지 넣기, 핸드폰과 연동하기

프론트에 next 를 설치하기 

 

1. blog > back, front 폴더 생성

2. 터미널 front까지 접근

3. npm init / 설치 

npm init
npm install next react react-dom

3. package.json 수정 

{
  "name": "front",
  "version": "1.0.0",
  "description": "",
  "main": "server.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev":"next dev -p 3001 -H 0.0.0.0", 
    "build":"next build", 
    "start":"next start",
    "lint":"next lint"   
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "next": "^11.0.1",
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
  }
}

4. front> pages 폴더 생성

front 폴더 - local express / next를 설치한 곳 

5. pages>index.jsx 생성 및 코드 작성

const Index = ()=>{
    return(
        <>
            Hello Next.js
        </>
    )
}

export default Index

6. 실행해보기 

npm run dev

localhost:3001 에 잘 나옴!

 

노트북 사용 시 + 핸드폰 wifi 공유할 때 꿀팁 

 

cmd -> ipconfig 입력 -> 내 핸드폰 (노트북과 와이파이 함께쓰는) 브라우저에 Ipv4 주소 + :3001 입력하면 위의 내용 똑같이 뜬다. 

 

 

 

 

7. pages> 안에 아래처럼 파일트리 & 코드 동일하게 생성 

 

8.   <동적 라우팅 사용방법>

 

/admin/:menu -> express 동적으로 한 것 

리액트에도 동적 라우팅이 생김!

파일 명을 배열 형식으로 만들어야함

 

1) post.jsx를 -> [post].jsx 로 변경 

[post].jsx 내용도 수정 

import {useRouter} from 'next/router'

const Post = ()=>{
    const router = useRouter()
    const {post} = router.query

    return(
        <>
            {post} 글쓰기 페이지입니다.
        </>
    )
}

export default Post

이제 url 끝에 post 대신 아무 말이나 써도 받아온다. 

게시글 뿌려줄 때 ! & 글 쓸 때 

 

 

9. 레이아웃 구성하기 

header & footer Components 는 고정! 

그 가운데만 계속 바뀌었음!

 

front > components 폴더 생성 > blogLayout.jsx 생성 및 코드 작성 

const BlogLayout = ({children})=>{
    return(
        <>
            Header html 
            <div className="header">
                {/* 로고 & 메뉴  */}
                <h1>로고</h1>
                <ul>
                    <li>Home</li>
                    <li>글쓰기</li>
                    <li>로그인</li>
                    <li>회원가입</li>
                </ul>
            </div>
            <div className="container">
                {children}
            </div>
            Footer html 
            <div className="footer">
                copyright &copy; all reserved
            </div>
        </>
    )
}

export default BlogLayout

 

 

 

10. index.jsx, join.jsx, login.jsx , [post].jsx

아래처럼 적용 BlogLayout import 해오기 

import BlogLayout from "../components/blogLayout"

const Index = () => {
    return (
        <>
            <BlogLayout>
                Hello Next.js
            </BlogLayout>
        </>
    )
}

export default Index

 

localhost:3001 들어가보면 아래와 같이 나온다. 

localhost:3001/join 

/login 

/posts/asdf

다 잘 나옴 

 

 

요즘 로그인 / 회원가입에는 header가 없다,,,,,,,,,,,고 함. 

레이아웃 자체가 바뀐다 ! 새로운 페이지로 

 

* 추후에 레이아웃 뜯어 고치기 어려우니까 처음에 잘 짜기! 

 

11. login 할 때 header 없애자 ! 

components > FormLayout.jsx 생성 (login, 회원가입 등 할 때 쓰는 ! ) 

const FormLayout = ({ children }) => {
    return (
        <>
            {children}
            Footer html  // 나중에 footer부분 / header도 따로 compo로 나누기 
            <div className="footer">
                copyright &copy; all reserved
            </div>
        </>
    )
}

export default FormLayout

login.jsx, join.jsx 아래처럼 수정 

import FormLayout from "../components/FormLayout"

const Login = ()=>{
    return(
        <>
            <FormLayout>
                로그인 페이지입니다
            </FormLayout>
        </>
    )
}

export default Login

 

 

 

 

 

12. 링크의 이동

next를 활용해서 링크 이동 

components>BlogLayout.jsx - import Link

* Link를 쓸 때 a tag 는 빈 값이라도 꼭 넣기 ! 

* react -> <Link to = "/">menu1</Link>

next.js -> <Link href="/"><a>menu1</a><Link>

import Link from 'next/link'

const BlogLayout = ({ children }) => {
    return (
        <>
            Header html
            <div className="header">
                {/* 로고 & 메뉴  */}
                <h1>로고</h1>
                <ul>
                    <li>
                        <Link href="/">
                            <a>Home</a>  
                        </Link>
                    </li>
                    <li>
                        <Link href="/posts/post">
                            <a>글쓰기</a>  
                        </Link>
                    </li>
                    <li>
                        <Link href="/login">
                            <a>login</a>  
                        </Link>
                    </li>
                    <li>
                        <Link href="/join">
                            <a>join</a>  
                        </Link>
                    </li>
                </ul>
            </div>
            <div className="container">
                {children}
            </div>
            Footer html
            <div className="footer">
                copyright &copy; all reserved
            </div>
        </>
    )
}

export default BlogLayout

 

 

 

 

 

<- 버튼들 누르면 됨!

 

 

 

 

 

 

 

 

13. 뒤로가는 버튼 만들기 

FormLayout.jsx

import Router from 'next/router'

const FormLayout = ({ children }) => {
    return (
        <>
            <button onClick={()=>Router.back()}>뒤로가기</button>
            {children}
            Footer html  // 나중에 footer부분 / header도 따로 compo로 나누기 
            <div className="footer">
                copyright &copy; all reserved
            </div>
        </>
    )
}

export default FormLayout

 

 

 

 

 

14. Title 수정 방법 

** 근데 파일 구성에 index.jsx 가 없슴 -> 리액트가 다 관리해쥼 

그래도 만약 head / title 조작해야하는 경우에는 ? 

-> 이걸 바꿀 수 있는 Component를 리액트가 제공해준다 !

index.jsx

import BlogLayout from "../components/blogLayout"
import Head from 'next/head'

const Index = () => {
    return (
        <>
            <Head>
                <title>Blog</title>
            </Head>
            <BlogLayout>
                Hello Next
            </BlogLayout>
        </>
    )
}

export default Index

=> 모든 compoㅇ ㅔ 적용 ! 

1) import  

2) 코드 복붙 

 

 

이제 css / head ? 내용 해보기 

 

카톡에 url 공유할 때 그림 뜨는 것 html

-> head tag - meta tag 작성하면 된다 ! 아래 글 보고 따라하긔 

https://velog.io/@byeol4001/Meta-Tag-OG%EC%98%A4%ED%94%88%EA%B7%B8%EB%9E%98%ED%94%84-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0

Meta Tag , OG(오픈그래프) 사용하기

 

meta tag를 모두 head에 넣기에 귀찮으니깐

next에서 모든 compo 실행 전 거쳐가는 컴포넌트가 있다 -> app.jsx 에 head tag를 만들면 모든 곳에 공통적으로 사용 가능 ! or 공통적인 css가 있다면 여기다가 import하는게 좋다

 

 

 

15. pages > _app.jsx 생성 

const App =({Component})=>{
    return(
        <>
            hello?
            <Component/> {/* 우리가 만든 파일(index,login..)들이 여기에 위치 */}
            hi@2@@@
        </>
    )
}

export default App

 

 

hello? 가 뜬다.

 

저 <Component/> 안에 모든게 담겨져 있는 것 ! 

 

공통적인 css 사용할 때 많이 사용함!

 

 

 

 

 

 

 

 

16. front > index.css 생성

index.css

*{
    padding:0;
    margin:0;
}

ul,li{
    list-style:none;
}

a{
    color:darkcyan;
}

_app.jsx 에 css import

import '../index.css'

const App =({Component})=>{
    return(
        <>
            hello?
            <Component/> {/* 우리가 만든 파일(index,login..)들이 여기에 위치 */}
            hi@2@@@
        </>
    )
}

export default App

 

 

 

 

17. 폰트  넣어주기 

google font url 복사 

_app.jsx Head import + 해당 url 복붙 -> 에러 남  -> 닫는 tag 붙이기 

import '../index.css'
import Head from 'next/head'

const App = ({ Component }) => {
    return (
        <>
            <Head>
                <link rel="preconnect" href="https://fonts.googleapis.com" />
                <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="true" />
                <link href="https://fonts.googleapis.com/css2?family=Black+Han+Sans&display=swap" rel="stylesheet" />
            </Head>
            <Component /> {/* 우리가 만든 파일(index,login..)들이 여기에 위치 */}
        </>
    )
}

export default App

 

crossorigin ->  crossOrigin="true" 으로 바꿔주기 

 

-> 브라우저 network에서 잘 가져왔는지 확인 

 

 

 

index.css 

google fonts에서 사용하는 css 명령어 가져와서 넣기 

body{
    font-family: 'Black Han Sans', sans-serif;
}

 

그럼 폰트가 잘 바뀌었다! 

 

 

 

 

18. 이미지 가져오기 

front > public 폴더 생성 (public만 가능) 

 그 안에 이미지 넣고 index.jsx에 사용해보기

import BlogLayout from "../components/blogLayout"
import Head from 'next/head'

const Index = () => {
    return (
        <>
            <Head>
                <title>Blog</title>
            </Head>
            <BlogLayout>
                Hello Next
                <div>
                    <img src="/cat.jpg"/> 
                </div>
            </BlogLayout>
        </>
    )
}

export default Index

만약 public안에 또 폴더가 있다면 

public/[폴더명]/[파일명.jpg]

 

 

 

 

 

19. 갠지나는 css

index.css는 -> 공통css 

BlogLayout에만 쓰고 싶은 css 만들어보기 

components>FormLayout.module.css 

.footer{
    background-color: red;
    color:white;
}

 FormLayout 

import Router from 'next/router'
import styled from './FormLayout.module.css' //요 안의 모든 css를 객체로 변환 

const FormLayout = ({ children }) => {
    return (
        <>
            <button onClick={()=>Router.back()}>뒤로가기</button>
            {children}
            Footer html  // 나중에 footer부분 / header도 따로 compo로 나누기 
            <div className={styled.footer}>
                copyright &copy; all reserved
            </div>
        </>
    )
}

export default FormLayout

 

 

 

20. styled component로 햄버거 만들기

 

외부 라이브러리 설치해야함

npm i styled-components

 

components>NavToggle.jsx 파일 생성

const NavToggle =()=>{
    return(
        <div>
        
            <input 
                type="checkbox" 
                id="nav-toggle" 
                className="nav-toggle" 
            />
            <label htmlFor="nav-toggle">
                <span>1</span>
                <span>2</span>
                <span>3</span>
            </label>
        </div> 
    )
}

export default NavToggle

 

 

 

BlogLayout.jsx

NavToggle 가져오기 

import Link from 'next/link'
import NavToggle from './NavToggle'

const BlogLayout = ({ children }) => {
    return (
        <>
            Header html
            <div className="header">
                {/* 로고 & 메뉴  */}
                <h1>로고</h1>
                <ul>
                    <li>
                        <Link href="/">
                            <a>Home</a>  
                        </Link>
                    </li>
                    <li>
                        <Link href="/posts/post">
                            <a>글쓰기</a>  
                        </Link>
                    </li>
                    <li>
                        <Link href="/login">
                            <a>login</a>  
                        </Link>
                    </li>
                    <li>
                        <Link href="/join">
                            <a>join</a>  
                        </Link>
                    </li>
                </ul>
                <NavToggle/>
            </div>

 

이제 styled-component 불러오기 

styled-component -> 자동완성기능 X, 색상도 안보여, 오타 찾기 힘듬 

요거 다운 받기 

요건 자동완성도 됨 ! 

 

NavToggle.jsx

 

import Styled from 'styled-components'

const Toggle =Styled.div`
    background:transparent;
    border-color:transparent;
    & > .nav-toggle{
        display:none;

    }   
    & > .nav-toggle + label{
        display:block;
        width:2.5rem;
        height:2rem;
        position:relative;
        cursor:pointer;
    } 
    
    & > .nav-toggle + label > span{
        display:block;
        position:absolute;
        width:100%;
        height:5px;
        border-radius:30px;
        background:black;
        transition:all .35s ;
    }

    & > .nav-toggle + label > span:nth-child(1){top:0}
    & > .nav-toggle + label > span:nth-child(2){top:50%;transform:translateY(-50%)}
    & > .nav-toggle + label > span:nth-child(3){bottom:0}
`

const NavToggle =()=>{
    return(
        <Toggle>
        
            <input 
                type="checkbox" 
                id="nav-toggle" 
                className="nav-toggle" 
            />
            <label htmlFor="nav-toggle">
                <span></span>
                <span></span>
                <span></span>
            </label>
        </Toggle> 
    )
}

export default NavToggle

 

 

& = 나 자신 

 

에니메이션 추가

& > .nav-toggle:checked + label > span:nth-child(1){ 
    top:50%;
    transform:translateY(-50%) rotate(45deg);
}
& > .nav-toggle:checked + label > span:nth-child(2){ 
    opacity:0;
}
& > .nav-toggle:checked + label > span:nth-child(3){ 
    bottom: 50%;
    transform:translateY(50%) rotate(-45deg);
}

하면 -> 햄버거 클릭하면 X 가 된다 !