데이터 요청하는 순서

브라우저 -> 프론트 서버 -> 백엔드 서버 -> 데이터베이스 -> 백엔드 서버 -> 프론트 엔드 서버 -> 브라우저

서버사이드 렌더링을 쓰는 이유

서버사이드 렌더링을 쓰는 이유는 검색 엔진 최적화, 빠른 페이지 렌더링 을 위해서 이다.

서버사이드 렌더링 장점

검색엔진 최적화 초기화면 로딩이 빠르다

서버사이드 렌더링 단점

잦은 서버 요청

container / presentational 패턴이란, 소스코드를 자바스크립트(기능)와 HTML(UI)로 나누는 방법을 의미 여기서 container는 자바스크립트(기능) 부분을 의미하고, presentational은 HTML(UI) 부분을 의미 props로 던져주고 받아줌

이름 비밀번호 제목 내용을 다안적어주면 버튼이 회색임

이름 비밀번호 제목 내용을 빈칸없이 다채워주면 버튼이 노란색으로 변함

서버와 데이터를 주고 받는 방식

👍 동기 : 응답이 모두 끝난 후 요청 👍 비동기 :서버 컴퓨터가 작업이 끝날 때 까지 기다리지 않는 통신 👍 자바스크립트는 비동기 통신이 기본값이다. 👍 비동기를 동기로 바꿔주기 위해서 async, await 를 써준다.

apollo 통신 연습

import{ Wrapper1, Wrapper,Title, IdInput,TextInput,Header, InputText, Main, MainInput, Address,
    AddressInput, AddressButton, YouTube, Picture,
     PictuerButton, PictureDiv,MainSettings, FooterButton,
   AddressBox,MiniTitle,ErrorMessage} from '../../../styles/BoardsNew.styles'

import {useState} from 'react'
import { useMutation, gql } from "@apollo/client"

const CREATE_BOARD = gql`
    mutation ($createBoardInput:CreateBoardInput!){
        createBoard(createBoardInput:$createBoardInput){
            _id
        }
    }
`


export default function BoardsNewPage(){

    const [ createBoard ] = useMutation(CREATE_BOARD)

    const [ name, setName ] = useState("")
    const [ pass, setPass ] = useState("")
    const [ title, setTitle ] = useState("")
    const [ contents, setContents ] = useState("")


    const [ nameError, setNameError ] = useState("")
    const [ passError, setPassError ] = useState("")
    const [ titleError, setTitleError ] = useState("")
    const [ contentsError, setContentsError ] = useState("")


    function onChangeName(event) {
        setName(event.target.value)
        if(event.target.value !== "") {
            setNameError("")
        }
    }

    function onChangePass(event) {
        setPass(event.target.value)
        if(event.target.value !== "") {
            setPassError("")
        }
    }

    function onChangeTitle(event) {
        setTitle(event.target.value)
        if(event.target.value !== "") {
            setTitleError("")
        }
    }

    function onChangeContents(event) {
        setContents(event.target.value)
        if(event.target.value !== "") {
            setContentsError("")
        }
    }

    async function onClickSignup() {


        if(name === ("")) {
            setNameError("이름을 작성해주세요.")
        }

        if(pass === ("")) {
            setPassError("비밀번호를 작성해주세요.")
        }

        if(title === ("")) {
            setTitleError("제목을 작성해주세요.")
        }

        if(contents === ("")) {
            setContentsError("내용을 작성해주세요.")
        }

        if(name !== "" && pass !== "" && title !== "" && contents !== "") {
            const result = await createBoard({
                variables: {
                    createBoardInput: {
                        writer:name,
                        password:pass,
                        title:title,
                        contents: contents
                    }
                }
            })
            console.log(result.data.createBoard._id)
            alert('게시물을 등록합니다')
        }
    }




   return (
       <Wrapper1>
           <Wrapper>
               <Title>게시물 등록</Title>
               <IdInput>
                   <div>
                        <div>
                            <MiniTitle>작성자</MiniTitle>
                        </div>
                        <TextInput type="text" placeholder="이름을 적어주세요" onChange={onChangeName}/>   
                        <ErrorMessage>{nameError}</ErrorMessage>
                   </div>
                   <div>
                   <div>
                            <MiniTitle>비밀번호</MiniTitle>
                        </div>
                        <TextInput type="password" placeholder="비밀번호를 입력해주세요" onChange={onChangePass} />
                        <ErrorMessage>{passError}</ErrorMessage>
                   </div>
               </IdInput>
               <Header>    
                   <MiniTitle>제목</MiniTitle>      
                   <InputText type="text" placeholder="제목을 입력하세요" onChange={onChangeTitle}/>  
                    <ErrorMessage>{titleError}</ErrorMessage>
               </Header>
               <Main>          
                       <MiniTitle>내용</MiniTitle>               
                       <MainInput type="text" placeholder="내용을 작성해주세요" onChange={onChangeContents}/>   
                       <ErrorMessage>{contentsError}</ErrorMessage>  
               </Main>
               <Address>              
                   <MiniTitle>주소</MiniTitle>    
                   <AddressBox>
                       <AddressInput type="text"/>
                       <AddressButton>우편번호 검색</AddressButton>
                   </AddressBox>
                   <div>
                       <InputText type="text"/>
                   </div>
                   <div>
                       <InputText type="text"/>
                   </div>
               </Address>
               <YouTube>
                   <div>
                       <MiniTitle>유튜브</MiniTitle>
                   </div>
                   <div>
                       <InputText type="text" placeholder="링크를 복사해주세요"/>
                   </div>
               </YouTube>
               <Picture>     
                   <div>  
                   사진첨부
                   </div>       
                   <PictureDiv>
                       <PictuerButton>
                           <span>+</span>
                           <span>Upload</span>
                       </PictuerButton>
                       <PictuerButton>
                       <span>+</span>
                           <span>Upload</span>
                       </PictuerButton>
                       <PictuerButton>
                           <span>+</span>
                           <span>Upload</span>
                       </PictuerButton>
                   </PictureDiv>
               </Picture>
               <MainSettings>       
                   메인설정     
                   <div>
                       <input type="radio" name="settings"/>유튜브
                       <input type="radio" name="settings"/>사진
                   </div>
               </MainSettings>     
                   <FooterButton onClick={onClickSignup}>등록하기</FooterButton>
           </Wrapper>
        </Wrapper1>
   )

}

콘솔창에 id로 playground에 검색해보자.

잘나오는거 같다.

HTTP란 두 컴퓨터간에 텍스트 데이터를 주고 받는 길

API와 API의 종류

API란 HTTP 요청을 Back-end 컴퓨터에 보냈을때 실행되는 Back-end 기능

rest-API, graphql-API

rest-API의 경우 함수 이름이 홈페이지 주소처럼 생겼고, graphal-APl의 경우 일반적인 함수와 같습니다 rest-API의 경우 응답 결과를 모든 데이터를 받아야 하고 graphal-API의 경우 필요한 데이터만 받을 수 있습니다

솔직히 이해가 되지 않지만 연습을 해야겠다 플레이 그라운드라는 사이트를 이용해 연습을해야겠다.

React를 배워야하는 이유, React 컴포넌트(state)

👍 React 를배워야하는 이유

1. 가장 많은 사용자 수
2. 하나를 배우면 웹, 안드로이드, IOS, 데스크톱을 동시에 할 수 있다는 장점

👍 React 컴포넌트

컴포넌트란 UI 또는 기능을 재사용 쉽게 할 수 있게 해준다.

👍 React state

state: 컴포넌트에서 사용하는 변수 setState: 컴포넌트에서 사용하는 변수를 바꿔주는 기능 useState: 컴포넌트에서 사용하는 변수를 만들어주는 기능 useState는 react로부터 import 해줘야 합니다.

2일차 quiz (state연습)

index.js

import {Wrapper1,Wrapper2,Wrapper3,HeaderHeader,Header,Main,MainId,Id,IdInput,Footer
,MainPw,HeaderTitle, Pw, PwInput, LoginButton,TalkButton
,FooterMain,FooterFont,TalkLogin,Error} from '../../../styles/02-login'

import {useState} from 'react'

export default function BoardsNewPage(){

    const [ email, setEmail ] = useState()
    const [ pass, setPass ] = useState()

    const [ emailError, setEmailError ] = useState()
    const [ passError, setPassError ] = useState()


    function onChangeEmail(event) {
        setEmail(event.target.value)
    }

    function onChangePass(event) {
        setPass(event.target.value)
    }

    function onClickSignup() {
        if(email === "" || !email.includes("@")) {
            setEmailError("이메일을 확인해 주세요")
        }

        if(pass === "" || pass.length < 8) {
            setPassError("8~16자의 영문,숫자,특수문자만 사용가능합니다.")
        }
    }




    return (
        <Wrapper1>
            <Wrapper2 >
            <HeaderHeader></HeaderHeader>
                <Wrapper3>                  
                    <Header>
                        <img src="/images/photo10.png"/>
                        <HeaderTitle>잇츠로드</HeaderTitle>
                    </Header>
                    <Main>
                        <MainId>
                            <Id>
                                <IdInput type = "text" placeholder="이메일을 입력해 주세요" onChange={onChangeEmail}/>
                                <img src="/images/photo11.png"/>
                            </Id>
                            <hr />
                            <div>
                                <Error>{emailError}</Error>
                            </div>
                        </MainId>
                        <MainPw>
                            <Pw>
                                <PwInput type = "password" placeholder="비밀번호를 입력해 주세요" onChange={onChangePass}/>
                                <img src="/images/photo11.png"/>
                            </Pw>
                            <hr/>
                            <div>
                                <Error>{passError}</Error>
                            </div>
                        </MainPw>
                    </Main>
                    <Footer>
                        <LoginButton onClick={onClickSignup}>로그인</LoginButton>
                        <FooterMain>
                            <FooterFont>이메일 찾기</FooterFont>
                            <FooterFont>|</FooterFont>
                            <FooterFont>비밀번호 찾기</FooterFont>
                            <FooterFont>|</FooterFont>
                            <FooterFont>회원가입</FooterFont>
                        </FooterMain>
                        <TalkButton> 
                        <img src="/images/photo12.png"/>                       
                          <TalkLogin>카카오톡으로 로그인</TalkLogin>
                        </TalkButton>


                    </Footer>
                </Wrapper3>
            </Wrapper2>
        </Wrapper1>

    )

}

02-login.js

import styled from '@emotion/styled'

export const Wrapper1 = styled.div`
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;

`

export const Wrapper2 = styled.div`
    width: 640px;
    height: 1138px;
    background-color: skyblue;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: solid 1px black;
    background-image: url("/images/photo13.png");

`
export const HeaderHeader = styled.div`
    width: 640px;
    height: 43px;
    border : solid 1px black;
`

export const Wrapper3 = styled.div`
    width: 540px;
    height: 1095px;

`

export const Header = styled.div`
    width: 540px;
    height: 400px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

`
export const HeaderTitle = styled.span`
    font-size: 60px;
    color: white;
` 

export const Main = styled.div`
    width: 540px;
    height: 300px;
    /* background-color: blue; */
`

export const MainId = styled.div`
    width: 540px;
    height: 90px;

`

export const Id = styled.div`
    display: flex;
    flex-direction: row;
    justify-content: space-between;
`

export const IdInput = styled.input`
    width:400px;
    height: 30px;
    border: none;
    background-color:transparent;
    color: white;
`

export const MainPw = styled.div`
    width: 540px;
    height: 90px;

`

export const Pw = styled.div`
    display: flex;
    flex-direction: row;
    justify-content: space-between;
`

export const PwInput = styled.input`
    width:400px;
    height: 30px;
    border: none;
    background-color:transparent;
    color: white;
`


export const Footer = styled.div`
    width: 540px;
    height: 350px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;

`

export const LoginButton = styled.button`
    width: 540px;
    height: 76px;
    border-radius: 38px;
    opacity: 0.6;
    background-color: #ff1b6d;
    font-size: 26px;
    color: white;
`

export const TalkButton = styled.button`
    width: 540px;
    height: 76px;
    border: 1px solid yellow;
    border-radius: 38px;
    background-color:transparent;
    font-size: 26px;
    color: yellow;
`

export const FooterMain = styled.div`
    width: 400px;
    height: 30px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
`

export const FooterFont = styled.span`
    size: 20px;
    color: white;
`

export const TalkLogin = styled.span`
    margin-left: 10px;

`

export const Error = styled.div`
    color: red;
`

2일차 board

index.js

import{ Wrapper1, Wrapper,Title, IdInput,TextInput,Header, InputText, Main, MainInput, Address,
    AddressInput, AddressButton, YouTube, Picture,
     PictuerButton, PictureDiv,MainSettings, FooterButton,
   AddressBox,MiniTitle,ErrorMessage} from '../../../styles/BoardsNew.styles'

import {useState} from 'react'

export default function BoardsNewPage(){

    const [ name, setName ] = useState()
    const [ pass, setPass ] = useState()
    const [ title, setTitle ] = useState()
    const [ contents, setContents ] = useState()


    const [ nameError, setNameError ] = useState()
    const [ passError, setPassError ] = useState()
    const [ titleError, setTitleError ] = useState()
    const [ contentsError, setContentsError ] = useState()


    function onChangeName(event) {
        setName(event.target.value)
    }

    function onChangePass(event) {
        setPass(event.target.value)
    }

    function onChangeTitle(event) {
        setTitle(event.target.value)
    }

    function onChangeContents(event) {
        setContents(event.target.value)
    }

    function onClickSignup() {
        if(name === ("")) {
            setNameError("이름을 작성해주세요.")
        }

        if(pass === ("")) {
            setPassError("비밀번호를 작성해주세요.")
        }

        if(title === ("")) {
            setTitleError("제목을 작성해주세요.")
        }

        if(contents === ("")) {
            setContentsError("내용을 작성해주세요.")
        }
    }




   return (
       <Wrapper1>
           <Wrapper>
               <Title>게시물 등록</Title>
               <IdInput>
                   <div>
                        <div>
                            <MiniTitle>작성자</MiniTitle>
                        </div>
                        <TextInput type="text" placeholder="이름을 적어주세요" onChange={onChangeName}/>   
                        <ErrorMessage>{nameError}</ErrorMessage>
                   </div>
                   <div>
                   <div>
                            <MiniTitle>비밀번호</MiniTitle>
                        </div>
                        <TextInput type="password" placeholder="비밀번호를 입력해주세요" onChange={onChangePass} />
                        <ErrorMessage>{passError}</ErrorMessage>
                   </div>
               </IdInput>
               <Header>    
                   <MiniTitle>제목</MiniTitle>      
                   <InputText type="text" placeholder="제목을 입력하세요" onChange={onChangeTitle}/>  
                    <ErrorMessage>{titleError}</ErrorMessage>
               </Header>
               <Main>          
                       <MiniTitle>내용</MiniTitle>               
                       <MainInput type="text" placeholder="내용을 작성해주세요" onChange={onChangeContents}/>   
                       <ErrorMessage>{contentsError}</ErrorMessage>  
               </Main>
               <Address>              
                   <MiniTitle>주소</MiniTitle>    
                   <AddressBox>
                       <AddressInput type="text"/>
                       <AddressButton>우편번호 검색</AddressButton>
                   </AddressBox>
                   <div>
                       <InputText type="text"/>
                   </div>
                   <div>
                       <InputText type="text"/>
                   </div>
               </Address>
               <YouTube>
                   <div>
                       <MiniTitle>유튜브</MiniTitle>
                   </div>
                   <div>
                       <InputText type="text" placeholder="링크를 복사해주세요"/>
                   </div>
               </YouTube>
               <Picture>     
                   <div>  
                   사진첨부
                   </div>       
                   <PictureDiv>
                       <PictuerButton>
                           <span>+</span>
                           <span>Upload</span>
                       </PictuerButton>
                       <PictuerButton>
                       <span>+</span>
                           <span>Upload</span>
                       </PictuerButton>
                       <PictuerButton>
                           <span>+</span>
                           <span>Upload</span>
                       </PictuerButton>
                   </PictureDiv>
               </Picture>
               <MainSettings>       
                   메인설정     
                   <div>
                       <input type="radio" name="settings"/>유튜브
                       <input type="radio" name="settings"/>사진
                   </div>
               </MainSettings>     
                   <FooterButton onClick={onClickSignup}>등록하기</FooterButton>
           </Wrapper>
       </Wrapper1>
   )

}

BoardsNew.styles.js

import styled from '@emotion/styled'

export const Wrapper1 = styled.div`
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
`

 export const Wrapper = styled.div`
    border: solid 1px black;
    width: 1200px;
    height: 1715px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
`
export const Title = styled.h1`
    margin-top: 50px;
`

export const IdInput = styled.div`
    width: 996px;
    height: 130px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    /* align-items: center; */
`

export const TextInput = styled.input`
    width: 486px;
    height: 52px;
    margin-top: 10px;
`

export const Header = styled.div`
    width: 996px;
    height: 120px;
    display: flex;
    flex-direction: column;

`
export const InputText = styled.input`
    width: 996px;
    height: 52px;
    border: solid 1px black;
    margin-top: 10px;
`

export const Main = styled.div`
    width: 996px;
    height: 530px;
    display: flex;
    flex-direction: column;

`

export const MainInput = styled.input`
    width: 996px;
    height: 480px;
    border: solid 1px black;
`

export const Address = styled.div`
    width: 996px;
    height: 200px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
`

export const AddressBox = styled.div`
    width: 210px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
`

export const AddressInput = styled.input`
    width: 77px;
    height: 52px;
`

export const AddressButton = styled.button`
    width: 124px;
    height: 52px;
    background-color: black;
    color: white;
`

export const YouTube = styled.div`
    width: 996px;
    height: 80px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
`

export const Picture = styled.div`
    width: 996px;
    height: 120px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

`

export const PictureDiv = styled.div`
    width: 270px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
`

export const PictuerButton = styled.div`
    width: 78px;
    height: 78px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #BDBDBD;

`

export const MainSettings = styled.div`
    width: 996px;
    height: 50px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

`

export const FooterButton = styled.button`
    width: 179px;
    height: 52px;
    background-color: #FFD600;
    margin-bottom: 50px;
    border: none;
`

export const MiniTitle = styled.span`
    margin-bottom: 10px;
`

export const ErrorMessage = styled.div`
    color:red;
` 

첫날부터 너무 어려운 날이였다..첫날이라 그런지 설치해야할게 너무많았다. Nods.js,Yarn,Next.js,Apollo-Client 등등..아직도 이해가 안가는 것들을 설치를 하였다. 설치 하는거 조차 너무어려워서 멘탈이 흔들렸지만 열심히 하다보면 이해되고 적응 할 수있지 않을까 생각이 드는 하루였다. 이해안가는거 투성이지만 천천히 알아가도록 해야할거같다.

1.터미널 명령어

$ cd 디렉토리로 이동 $ ../ 현재 폴더에서 위의 폴더 $ ./ 현재 폴더 $ mkdir 폴더 생성 $ rm 현재 작업중인 directory 원본 삭제 $ rm -rf 해당 폴더 및 파일 전부 삭제 $ ls 현재 위치한 경로 안의 내용 출력 $ ls -al 현재 위치 경로 안의 비밀 폴더까지 보여줌 $ mv 폴더 또는 파일 원본 이동 입력하세요

2.git

git init - 프로젝트에 git설치 git add * - .gitignore에 있는 파일 제외하고 모두 올리기 git commit -m '(메세지)' - commit 메세지 작성 git remote add origin - git 저장소 연결 git push -u origin master - git master로 push

3.Emotion

JavaScript 안에서 스타일을 작성할 수 있게 해준다. emotion 쓰는법 : import styled from '@emotion/styled' (아직은 이정도밖에 모르겠다)

4. 1일차 quiz

1.index.js

import{Wrapper1,Wrapper2,Header,HeaderHeader,HeaderPhoto,HeaderMain,
    My,Name,MyPhoto,Faq,HeaderFooter,Notice,Main,
MainMain,MainText,MainText2,Text1,Text2,MainFooter,
FooterPhoto,FooterPhoto2,MyMy} from '../../../styles/01-faq'

export default function BoardsNewPage(){

    return (
        <Wrapper1>
            <Wrapper2>
                <Header>
                    <HeaderHeader>

                    </HeaderHeader>
                    <HeaderPhoto>
                        <img src="/images/photo1.png"/>
                    </HeaderPhoto>
                    <HeaderMain>
                        <MyMy>
                            <My>마이</My>
                        </MyMy>
                        <MyPhoto>
                            <img src="/images/photo2.png"/>
                            <Name>임정아</Name>
                            <img src="/images/photo3.png"/>
                        </MyPhoto>
                    </HeaderMain>
                    <HeaderFooter>
                        <Notice>공지사항</Notice>
                        <Notice>이벤트</Notice>
                        <Faq>FAQ</Faq>
                        <Notice>Q&A</Notice>
                    </HeaderFooter>
                </Header>
                <Main>
                    <MainMain>

                            <MainText>
                                <MainText2>                               
                                    <Text1>Q.01</Text1>                                                               
                                    <Text2>리뷰 작성은 어떻게 하나요?</Text2>                 
                                </MainText2>
                                <div>
                                    <img src="/images/photo4.png"/>
                                </div>
                            </MainText>
                            <MainText>
                                <MainText2>                               
                                    <Text1>Q.02</Text1>                                                               
                                    <Text2>리뷰 수정/삭제는 어떻게 하나요?</Text2>                 
                                </MainText2>
                                <div>
                                    <img src="/images/photo4.png"/>
                                </div>
                            </MainText>
                            <MainText>
                                <MainText2>                               
                                    <Text1>Q.03</Text1>                                                               
                                    <Text2>아이디/비밀번호를 잊어버렸어요.</Text2>                 
                                </MainText2>
                                <div>
                                    <img src="/images/photo4.png"/>
                                </div>
                            </MainText>
                            <MainText>
                                <MainText2>                               
                                    <Text1>Q.04</Text1>                                                               
                                    <Text2>회원탈퇴를 하고싶어요.</Text2>                 
                                </MainText2>
                                <div>
                                    <img src="/images/photo4.png"/>
                                </div>
                            </MainText>
                            <MainText>
                                <MainText2>                               
                                    <Text1>Q.05</Text1>                                                               
                                    <Text2>출발지 설정은 어떻게 하나요?</Text2>                 
                                </MainText2>
                                <div>
                                    <img src="/images/photo4.png"/>
                                </div>
                            </MainText>
                            <MainText>
                                <MainText2>                               
                                    <Text1>Q.06</Text1>                                                               
                                    <Text2>비밀번호를 변경하고 싶어요.</Text2>                 
                                </MainText2>
                                <div>
                                    <img src="/images/photo4.png"/>
                                </div>
                            </MainText>

                    </MainMain>
                    <MainFooter>
                        <FooterPhoto>
                            <FooterPhoto2>
                                <img src="/images/photo9.svg"/>
                                <span>홈</span>
                            </FooterPhoto2>
                            <FooterPhoto2>
                                <img src="/images/photo6.png"/>
                                <span>잇츠로드</span>
                            </FooterPhoto2>
                            <FooterPhoto2>
                                <img src="/images/photo7.png"/>
                                <span>마이찜</span>
                            </FooterPhoto2>
                            <FooterPhoto2>
                                <img src="/images/photo8.png"/>
                                <span>마이</span>
                            </FooterPhoto2>
                        </FooterPhoto>
                    </MainFooter>
                </Main>
            </Wrapper2>
        </Wrapper1>
    )
}

2.01-faq.js

import styled from '@emotion/styled'

export const Wrapper1 = styled.div`
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
`

export const Wrapper2 = styled.div`
    width: 640px;
    height: 1138px;
    border: solid 1px gray;
`

export const Header = styled.div`
    height: 408px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;

    /* border: solid 1px black; */
`

export const HeaderHeader = styled.div`
    width: 640px;
    height: 43px;
    background-color: gray;
    border: solid 1px black;
`
export const HeaderPhoto = styled.div`
    width: 600px;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    height: 32px;

`

export const HeaderMain = styled.div`
    width: 600px;
    height: 70px;
    padding-left: 30px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;

`

export const MyMy = styled.div`
    padding-top: 15px;
`

export const My = styled.span`

    font-size: 40px;
`

export const MyPhoto = styled.div`
    width: 230px;
    height: 70px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;

`

export const Name = styled.span`
    font-size: 26px;
`

export const HeaderFooter = styled.div`
    width: 600px;
    height: 80px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 50px;

`

export const Notice = styled.span`
    font-size: 30px;
    color: #cacaca;

`

export const Faq = styled.span`
    font-size: 30px;
    color:#ff1b6d;
    border-bottom: solid 1px #ff1b6d;

`


export const Main = styled.div`
    height: 730px;

`

export const MainMain = styled.div`
    width: 640px;
    height: 630px;
    margin-left: 40px;
    padding-bottom: 50px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

`

// export const Main1 = styled.div`
//     width: 640px;
//     height: 630px;
//     display: flex;
//     flex-direction: row;
//     justify-content: center;
// `

export const MainText = styled.div`
    width: 550px;
    height: 60px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    /* border: solid 1px black; */
`

export const MainText2 = styled.div`
    height: 60px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

`

export const Text1 = styled.span`
    font-size: 18px;
    color: #adadad;
`

export const Text2 = styled.span`
    font-size: 24px;
    color: #444444;
`

export const MainFooter = styled.div`
    width: 640px;
    height: 100px;
    border-top: gray solid 1px;
`

export const FooterPhoto = styled.div`
    width: 640px;
    height: 100px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;

`

export const FooterPhoto2 = styled.div`
    width: 130px;
    height: 80px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;

`

아직 완성이 안됬다.

5. 1일차 board

1.index.js

import{ Wrapper1, Wrapper,Title, IdInput,TextInput,Header, InputText, Main, MainInput, Address,
    AddressInput, AddressButton, YouTube, Picture,
     PictuerButton, PictureDiv,MainSettings, FooterButton,
   AddressBox} from '../../../styles/BoardsNew.styles'

export default function BoardsNewPage(){

   return (
       <Wrapper1>
           <Wrapper>
               <Title>게시물 등록</Title>
               <IdInput>
                   <div>
                        <div>
                            <span>작성자</span>
                        </div>
                        <TextInput type="text" placeholder="이름을 적어주세요"/>
                   </div>
                   <div>
                   <div>
                            <span>비밀번호</span>
                        </div>
                        <TextInput type="password" placeholder="비밀번호를 입력해주세요"/>
                   </div>
               </IdInput>
               <Header>    
                   제목      
                   <InputText type="text" placeholder="제목을 입력하세요"/>  
               </Header>
               <Main>          
                       내용               
                       <MainInput type="text" placeholder="내용을 작성해주세요"/>         
               </Main>
               <Address>              
                   주소    
                   <AddressBox>
                       <AddressInput type="text"/>
                       <AddressButton>우편번호 검색</AddressButton>
                   </AddressBox>
                   <div>
                       <InputText type="text"/>
                   </div>
                   <div>
                       <InputText type="text"/>
                   </div>
               </Address>
               <YouTube>
                   <div>
                       유튜브
                   </div>
                   <div>
                       <InputText type="text" placeholder="링크를 복사해주세요"/>
                   </div>
               </YouTube>
               <Picture>     
                   <div>  
                   사진첨부
                   </div>       
                   <PictureDiv>
                       <PictuerButton>
                           <span>+</span>
                           <span>Upload</span>
                       </PictuerButton>
                       <PictuerButton>
                       <span>+</span>
                           <span>Upload</span>
                       </PictuerButton>
                       <PictuerButton>
                           <span>+</span>
                           <span>Upload</span>
                       </PictuerButton>
                   </PictureDiv>
               </Picture>
               <MainSettings>       
                   메인설정     
                   <div>
                       <input type="radio" name="settings"/>유튜브
                       <input type="radio" name="settings"/>사진
                   </div>
               </MainSettings>     
                   <FooterButton>등록하기</FooterButton>
           </Wrapper>
       </Wrapper1>
   )

}

2. BoardsNew.styles.js

import styled from '@emotion/styled'

export const Wrapper1 = styled.div`
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
`

 export const Wrapper = styled.div`
    border: solid 1px black;
    width: 1200px;
    height: 1715px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
`
export const Title = styled.h1`
    margin-top: 50px;
`

export const IdInput = styled.div`
    width: 996px;
    height: 90px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
`

export const TextInput = styled.input`
    width: 486px;
    height: 52px;
    margin-top: 10px;
`

export const Header = styled.div`
    width: 996px;
    height: 80px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
`
export const InputText = styled.input`
    width: 996px;
    height: 52px;
    border: solid 1px black;
`

export const Main = styled.div`
    width: 996px;
    height: 510px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
`

export const MainInput = styled.input`
    width: 996px;
    height: 480px;
    border: solid 1px black;
`

export const Address = styled.div`
    width: 996px;
    height: 200px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
`

export const AddressBox = styled.div`
    width: 210px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
`

export const AddressInput = styled.input`
    width: 77px;
    height: 52px;
`

export const AddressButton = styled.button`
    width: 124px;
    height: 52px;
    background-color: black;
    color: white;
`

export const YouTube = styled.div`
    width: 996px;
    height: 80px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
`

export const Picture = styled.div`
    width: 996px;
    height: 120px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

`

export const PictureDiv = styled.div`
    width: 270px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
`

export const PictuerButton = styled.div`
    width: 78px;
    height: 78px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #BDBDBD;

`

export const MainSettings = styled.div`
    width: 996px;
    height: 50px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

`

export const FooterButton = styled.button`
    width: 179px;
    height: 52px;
    background-color: #FFD600;
    margin-bottom: 50px;
    border: none;
`