1주차 - 프로젝트 생성, 최소 단위 컴포넌트 만들기, 숙제
본문 바로가기
항해 중/5주차 리액트 심화반

1주차 - 프로젝트 생성, 최소 단위 컴포넌트 만들기, 숙제

by 은돌1113 2021. 11. 29.

[프로젝트 생성]

 

1. CRA로 프로젝트 생성

 

- nvm 설치

- node install과 use [node version]

nvm install [node version]
nvm use [node version]

- yarn 설치

npm install -g yarn

- create-react-app 설치

yarn add global create-react-app

- CRA로 프로젝트 생성

yarn create react-app image-community

 

2. 크롬 익스텐션 설치하기

  • Redux devTools : 리덕스를 사용할 때, 리덕스의 액션에 따른 데이터 변화를 편히 볼 수 있게 해줘요!
  • React developer Tools : 리액트를 디버깅하기 편하게 해줍니다.

3. VSCode 확장 프로그램 설치하기

  • react extension pack 설치
  • prettier - code formatter

[최소 단위  컴포넌트 만들기]

 

0. 폴더 구조 잡기

  • build: 빌드 후 결과물이 여기에 생성됩니다.
  • node_modules: 우리가 설치한 패키지들이 들어있습니다.
  • public: 가상 돔이 들어갈 빈 껍데기 html(index.html)이 들어있는 폴더입니다.
  • src: 실제 소스 코드가 들어갈 폴더입니다.
    • /elements: button, input등 최소단위 컴포넌트가 들어갑니다.(공통 스타일도 여기서 맞출거예요.)
    • /components: elements의 컴포넌트를 조합해서 우리가 쪼갠 컴포넌트를 만들어 넣을거예요.
    • /pages: 페이지 시작점입니다. components에 있는 컴포넌트를 조합해서 페이지를 꾸릴거예요.
    • /redux: 리덕스 모듈과 스토어가 들어갑니다.
    • /shared: 공용으로 사용할 코드가 들어갑니다.
    • App.js, Request.js, Time.js, Cookie.js, firebase.js 등 시작점으로 쓸 파일과 전역으로 쓸 객체는 여기에 만들어줄거예요.

 

1. 패키지 설치하기

yarn add react-router-dom@5.2.0
yarn add styled-components

 

2. Grid 잡기

import React from "react";
import styled from "styled-components";

const Grid = (props) => {
  const { is_flex, width, margin, padding, bg, children } = props;

  const styles = {
      is_flex: is_flex,
      width: width,
      margin: margin,
      padding: padding,
      bg: bg,
  };
  return (
    <React.Fragment>
      <GridBox {...styles}>{children}</GridBox>
    </React.Fragment>
  );
};

Grid.defaultProps = {
  chidren: null,
  is_flex: false,
  width: "100%",
  padding: false,
  margin: false,
  bg: false,
};

const GridBox = styled.div`
  width: ${(props) => props.width};
  height: 100%;
  box-sizing: border-box;
  ${(props) => (props.padding ? `padding: ${props.padding};` : "")}
  ${(props) => (props.margin ? `margin: ${props.margin};` : "")}
  ${(props) => (props.bg ? `background-color: ${props.bg};` : "")}
  ${(props) =>
    props.is_flex
      ? `display: flex; align-items: center; justify-content: space-between; `
      : ""}
`;

export default Grid;

 

+ 컴포넌트이름.defaultProps

: 페이지를 그리는 데 꼭 필요한 데이터를 defaultProps에 담아두면 데이터가 없어서 나는 오류를 방지 할 수 있습니다.

 

3. Image 컴포넌트 만들기

import styled from 'styled-components';
import React from "react";

const Image = (props) => {
    const {shape, src, size} = props;

    const styles = {
        src: src,
        size: size,
    }

    if(shape === "circle"){
        return (
            <ImageCircle {...styles}></ImageCircle>
        )
    }

    if(shape === "rectangle"){
        return (
            <AspectOutter>
                <AspectInner {...styles}></AspectInner>
            </AspectOutter>
        )
    }

    return (
        <React.Fragment>
            
        </React.Fragment>
    )
}

Image.defaultProps = {
  shape: "circle",
  src: "https://mean0images.s3.ap-northeast-2.amazonaws.com/4.jpeg",
  size: 36,
};

const AspectOutter = styled.div`
    width: 100%;
    min-width: 250px;
`;

const AspectInner = styled.div`
    position: relative;
    padding-top: 75%;
    overflow: hidden;
    background-image: url("${(props) => props.src}");
    background-size: cover;
`;

const ImageCircle = styled.div`
    --size: ${(props) => props.size}px;
    width: var(--size);
    height: var(--size);
    border-radius: var(--size);

    background-image: url("${(props) => props.src}");
    background-size: cover;
    margin: 4px;
`;

export default Image;

 

4. Text 컴포넌트 만들고 반영하기

 

- Image 컴포넌트 만들기

import styled from 'styled-components';
import React from "react";

const Image = (props) => {
    const {shape, src, size} = props;

    const styles = {
        src: src,
        size: size,
    }

    if(shape === "circle"){
        return (
            <ImageCircle {...styles}></ImageCircle>
        )
    }

    if(shape === "rectangle"){
        return (
            <AspectOutter>
                <AspectInner {...styles}></AspectInner>
            </AspectOutter>
        )
    }

    return (
        <React.Fragment>
            
        </React.Fragment>
    )
}

Image.defaultProps = {
  shape: "circle",
  src: "https://mean0images.s3.ap-northeast-2.amazonaws.com/4.jpeg",
  size: 36,
};

const AspectOutter = styled.div`
    width: 100%;
    min-width: 250px;
`;

const AspectInner = styled.div`
    position: relative;
    padding-top: 75%;
    overflow: hidden;
    background-image: url("${(props) => props.src}");
    background-size: cover;
`;

const ImageCircle = styled.div`
    --size: ${(props) => props.size}px;
    width: var(--size);
    height: var(--size);
    border-radius: var(--size);

    background-image: url("${(props) => props.src}");
    background-size: cover;
    margin: 4px;
`;

export default Image;

 

- Text 컴포넌트 만들기

import React from "react";
import styled from "styled-components";

const Text = (props) => {
  const { bold, color, size, children } = props;

  const styles = {bold: bold, color: color, size: size};
  return (
      <P {...styles}>
          {children}
      </P>
  )
};

Text.defaultProps = {
  children: null,
  bold: false,
  color: "#222831",
  size: "14px",
};

const P = styled.p`
  color: ${(props) => props.color};
  font-size: ${(props) => props.size};
  font-weight: ${(props) => (props.bold? "600" : "400")};
`;

export default Text;

 

- elements/index.js 만들기

: 모든 파일을 매번 여러 줄 써가며 불러오기 귀찮을 때 index 파일을 만들어 두면 import가 깔끔 해집니다!!

import Grid from "./Grid";
import Image from "./Image"
import Text from "./Text";

export {Grid, Image, Text};

 

- App.js에 반영하기

import React, { useEffect } from "react";

import { Route } from "react-router-dom";
import { BrowserRouter } from "react-router-dom";
import { Grid } from "../elements";

import PostList from "../pages/PostList";


function App() {


  return (
    <React.Fragment>
      <Grid isRoot>
        <BrowserRouter>
          <Route exact path="/" component={PostList} />
        </BrowserRouter>
      </Grid>
    </React.Fragment>
  );
}

export default App;

 

- Post.js에 반영하기

import React from "react";
// import Grid from "../elements/Grid";
// import Image from "../elements/Image";
// import Text from "../elements/Text";

import {Grid, Image, Text} from "../elements";


const Post = (props) => {

    return (
      <React.Fragment>
        <Grid>
            <Grid is_flex>
                <Image shape="circle" src={props.src}/>
                <Text bold>{props.user_info.user_name}</Text>
                <Text>{props.insert_dt}</Text>
            </Grid>
            <Grid padding="16px">
                <Text>{props.contents}</Text>
            </Grid>
            <Grid>
                <Image shape="rectangle" src={props.src}/>
            </Grid>
            <Grid padding="16px">
                <Text bold>댓글 {props.comment_cnt}개</Text>
            </Grid>
        </Grid>
      </React.Fragment>
    );
}

Post.defaultProps = {
  user_info: {
    user_name: "mean0",
    user_profile: "https://mean0images.s3.ap-northeast-2.amazonaws.com/4.jpeg",
  },
  image_url: "https://mean0images.s3.ap-northeast-2.amazonaws.com/4.jpeg",
  contents: "고양이네요!",
  comment_cnt: 10,
  insert_dt: "2021-02-27 10:00:00",
};

export default Post;

설치한 패키지

1) yarn add react-router-dom@5.2.1

2) yarn add styled-components

숙제

더보기

💡 [숙제 설명]

  1. 로그인/회원가입 페이지 만들기
    • 헤더도 만들어주세요! 😉
    • 아이디와 비밀번호를 가지고 로그인 페이지를 만든다.
    • 아이디, 닉네임, 비밀번호를 받아 회원가입 하는 페이지를 만든다.
  2. 파이어 스토어 프로젝트를 만들기

저작자표시

'항해 중 > 5주차 리액트 심화반' 카테고리의 다른 글

2주차 - 웹 저장소(feat. 토큰)  (0) 2021.11.30
2주차 - 토큰 기반 인증(OAuth 2.0, JWT)  (0) 2021.11.30
2주차 - Promise  (0) 2021.11.30
1주차 - JavaScript Re-Start, Prototype  (0) 2021.11.29
5주차 개인 과제  (0) 2021.11.29

관련글

댓글

티스토리툴바