1주차 월요일

첫날..

-프로그램 설치-

node.js -> yarn ($sudo npm install -g yarn) 설치
next.js (홈페이지에서 소스를 찾아 터미널에 폴더생성하여 입력)
RunJs

~~폴더에 수업 프로젝트 설치

1. Next.js 설치 ($npx create-next-app@latest를 최상위 폴더에)
2. 프로젝트 이름 작성
3. 프로젝트 폴더 안에서
    1) Emotion 설치 ($yarn add @emotion/react
    		    $yarn add @emotion/styled)
    2) Apollo-Client & Graphql 설치 ($npm install @apollo/client graphql)
    3) Ant-Design 설치 ($yarn add antd)
    4) Material-UI 설치 ($npm install @material-ui/core)
    5) Axios 설치 ($yarn add axios)

- 수업 내용 -

프론트엔트 라이브러리 -> React, jQuery (이미 만들어져 있는 기능을 복사하여 사용)
프레임워크 -> Angular, Vue (유지보수에 좋음. 하지만 제공하는 기능만 사용)

라이브러리 : 필요할 때 호출하여 사용
프레임워크 : 기본 구조 안에 규칙에 따라 사용 (템플릿으로 개발)

Next는 React 기반 프레임워크

기존 HTML -> JSX
JSX(JavaScript eXtension) : HTML에 대한 형식을 return 해주는 방식. javascript를 확장한 문법
기존 CSS -> CSS-IN-JS (상수에 저장하여 사용)
CSS-IN-JS : 자바스크립트 코드에서 css를 작성하는 방식

import : 다른 폴더의 파일 불러오기
export : 파일안의 내용 내보내기

git : 소스코드 관리를 위한 분산버전관리 시스템

- 실습 -

로그인 창에 있는 아이디와 비밀번호를 input으로 사용하여 작성

pages/index.js // html

import {MyTitle, Wrapper, Form, Putter ... } from '../../styles/emotion'

export default function EmotionPage () {
  
  return (
    <Wrapper>
      <MyTitle>로그인</MyTitle>
      <Form>아이디</Form>
      <Putter type="text" />
      <Form>비밀번호</Form>
      <Putter type="password" />
    </Wrapper>
  )
}

• import { } from '../../styles/emotion'
• 태그를 사용할때엔 부모 태그(div 등) 안에 자식 태그를 삽입
• 속성을 페이지에 보이게 하기 위해선 export default를 선언한다

styles/emotion.js // css

import styled from '@emotion/styled'

export const MyTitle = styled.div`
  color: black;
  text-align: center;
  font-size: 2rem;
  padding-bottom: 20px;
`
export const Wrapper = styled.div`
  width: 60%;
  height: 300px;
  display: flex;
  flex-direction: column;
  border: 1px solid black;
  border-radius: 15px;
  padding: 30px;
  margin: 0 auto;
`

export const Form = styled.p`
  font-size: 12px;
`

export const Putter = styled.input`
  width: 100%;
  height: 50px;
  border: 1px solid gray;
  border-radius: 5px;
`

• css 바뀌지 않는 속성을 가져야 하기 때문에 const로 선언하며,
• html에서는 class로 선언하여 스타일을 주었지만(class로 선언 후 스타일 속성 적용가능함) 태그 이름을 대문자로 시작하여 선언 후 css에서 불러와 스타일 적용이 가능하다.
• "export const Putter = styled.input"에서 마지막 태그는 각각의 태그 속성을 가지고 있는 태그를 적용

public/.png // images

(과제 : figma에서 자유게시판 게시물 등록 freeboard에서 제작)