- 프론트엔드 공부 30일차 -
프로그램 설치
1. VSCODE 설치
2. Node.js 설치
3. Yarn 설치
폴더에 기능 설치하기
1. 바탕화면에 폴더 만들기
2. 폴더에 "class" 라는 이름의 Next.js 프로젝트 설치하기
3. class 폴더에 Emotion(CSS 쉽게 만들어주는 기능) 설치
4. class 폴더에 Apollo-Client, Graphql(백엔드 통신 쉽게 해주는 기능) 설치
5. class 폴더에 Ant-Design(누가 만든 버튼과 인풋창 등) 설치
6. class 폴더에 Axios(백엔드 통신 쉽게 해주는 기능2) 설치
VSCODE 추가 익스텐션
vscode-styled-components 설
프로그램 설치
1. 인터넷을 통해 VSCODE 설치
2. 인터넷에 Node.js 검색 후 설치
3. powershell 열어서 npm install -g yarn 입력 후 Yarm 설치
4. Node –version 입력 후 Node 설치 확인
5. npm –version 입력 후 npm 설치 확인
6. yarm –version 입력 후 Yarm 설치 확인
윈도우에서 yarm –version 입력 시 오류 발생할 경우
- 윈도우 권한 문제로 생기는 오류이다
powershell을 관리자 권한으로 연 후 get-help Set-ExecutionPolicy 입력 시 해결
Next.js 설치 방법
VSCODE의 터미널 창에서 npx create-next-app 입력
생성할 폴더 명 입력
모든 선택에서 no 선택
Next.js를 설치하면 react가 18버전으로 설치되지만 안정성 때문에 17버전으로 대체하기 위한 방법
- cd 생성한 폴더 이름
- yarn add next@12.1.0 react@17.0.2 react-dom@17.0.2 --exact 입력
pages 폴더의 api 폴더와 _document.js 파일 삭제
_app.js의 첫 줄 삭제
index.js 내용
import Head from "next/head";
export default function Home() {
return (
<>
<Head>
<title>Create Next App</title>
<meta name="description" content="Generated by create next app" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" href="/favicon.ico" />
</Head>
</>
);
}변경
emotion 설치하기
powershell에서 생성한 폴더가 선택한 상태에서
yarn add @emotion/react
yarn add @emotion/styled
입력
Apollo-Client와 Graphql 설치하기
powershell에서 생성한 폴더가 선택한 상태에서
yarn add @apollo/client graphql
입력
ant-design 설치하기
powershell에서 생성한 폴더가 선택한 상태에서
yarn add antd
입력
Axios 설치하기
powershell에서 생성한 폴더가 선택한 상태에서
yarn add axios
입력
보일러 슬레이트
폴더별 의미
node_modules : 라이브러리/프레임워크 저장소
pages : 프런트엔드의 페이지 화면들
public : 사진, 아이콘
styles : CSS 파일
.gitignore : git에서 제외할 파일
package.json : 기본 메뉴얼
README.md : 상세 설명서
yarn.lock : 버전 장금 파일
JSX
React 전용 html
기존
<div>
<div class = 'title'>안녕하세요</div>
<button onclick = 'click()'></button>
</div>
jsx 방식
<div>
<div className = 'title'>안녕하세요</div>
<button onClick = 'click()'></button>
</div>
CSS-IN-JS
React 인기 CSS 방식
기존
.title {
width : 95px;
height : 30px;
}
CSS-IN-JS 방식
const Title = styled.div`
width : 95px;
height : 30px;
`
Emotion 장점
1. 간결한 코드
2. 태그에 의미 부여
3. 코드 재사용성 증가
Emotion 사용법
ex)
export default function Emotion() {
// JS 코드 작성
return(
// html 코드 작성
)
}
emotion 실습
import { MyEmail, MyEmailInput } from "../../../styles/01-02-emotion";
export default function EmotionPage() {
return (
<div>
<MyEmail>이메일: </MyEmail>
<MyEmailInput type="text" />
<button>클릭</button>
<img src="/favicon.ico"></img>
</div>
);
}import styled from "@emotion/styled";
export const MyEmail = styled.span`
color: blue;
font-size: 25px;
`;
export const MyEmailInput = styled.input`
border-color: red;
`;'프론트엔드 공부 > React' 카테고리의 다른 글
| 35일차 프론트엔드 공부 - Graphql (0) | 2024.11.12 |
|---|---|
| 34일차 프론트엔드 공부 - 데이터 통신 (0) | 2024.11.03 |
| 33일차 프론트엔드 공부 -나만의 페이지 만들기 실습 02 (0) | 2024.11.02 |
| 32일차 프론트엔드 공부 - State (2) | 2024.10.27 |
| 31일차 프론트엔드 공부 -나만의 페이지 만들기 실습 01 (3) | 2024.10.26 |