따라하며 만드는 웹사이트 E03-2 : 댓글 등록 시스템

이 문서는 유튜버 코딩견 히치님의 웹사이트 강의를 하나하나 따라하며 남기는 노트이다.

웹사이트를 빨리 배워야 하는 내가 선택한 강의이다. 일단 끝까지 들어보고 평을 남겨보도록 하겠다.

 

간략한 요약만 보고 싶다면 아래 블로그를 계속 이어 보고, 자세한 내용은 동영상을 보자.

 

 

이제 따라가기 힘들다.

javascript 선행 학습이 있지 않은한 완벽한 이해는 어려울 듯 하다.

하지만 url에 올리는 과정까지 끝내는게 목적이므로 빨리 진행 해봐야겠다

 

진행시켜!

 

 

 

지금까지의 소스코드는 아래와 같다.

 

App.js

화면을 구성하는 메인 앱이다.

import React from "react";
import {
  Image,
  Input,
  Header,
  Container,
  Divider,
  Icon,
  Button,
  Grid,
  Label,
} from "semantic-ui-react";
import {} from "semantic-ui-react";

import Comments from "./comments.js";
import Jenny from "./jenny.jpg";

function App() {
  return (
    <div>
      <Header as="h1" dividing>
        <Container textAlign="center">제니의 첫 솔로곡 SOLO</Container>
      </Header>
      <Grid centered>
        <Grid.Row>
          <Image src={Jenny} size="medium" rounded centered />
        </Grid.Row>
        <Grid.Row>
          <Button as="div" labelPosition="right">
            <Button color="red">
              <Icon name="heart" />
              Like
            </Button>
            <Label as="a" basic color="red" pointing="left">
              2,048
            </Label>
          </Button>
          <Button as="div" labelPosition="right">
            <Button basic color="blue">
              <Icon name="fork" />
              Share
            </Button>
            <Label as="a" basic color="blue" pointing="left">
              2,048
            </Label>
          </Button>
        </Grid.Row>
      </Grid>
      <br />
      <Divider horizontal>
        <Header as="h4">
          <Icon name="paperclip" />
          Description
        </Header>
      </Divider>
      <Container textAlign="center">
        <br />
        천진난만 청순가련
        <br />
        새침한 척 이젠 지쳐 나 <br />
        귀찮아 <br />
        매일 뭐 해? 어디야? 밥은? 잘 자 <br />
        Baby, 자기, 여보 보고 싶어 <br />
        다 부질없어 <br />
        You got me like <br />
      </Container>

      <Comments />
      <br />

      <br />
      <br />
      <div>
        <Grid centered>
          <Button circular color="facebook" icon="facebook" />
          <Button circular color="twitter" icon="twitter" />
          <Button circular color="instagram" icon="instagram" />
          <Button circular color="google plus" icon="google plus" />
          <Button circular color="kakao talk" icon="kakao talk" />
        </Grid>
      </div>
      <br />)
    </div>
  );
}

export default App;

 

Comments.js

코멘트를 담당하는 클래스다.

import React from "react";
import {
  Button,
  Input,
  Comment,
  Form,
  Header,
  Divider,
  Icon,
} from "semantic-ui-react";

import avatar from "./avatar.png";
import avatar2 from "./avatar2.png";

function SingleComment (detail){
  return(
    <Comment>
      <Comment.Avatar src={avatar} />
      <Comment.Content>
        <Comment.Author as="a">Matt</Comment.Author>
        <Comment.Metadata>
          <div>Today at 5:42PM</div>
        </Comment.Metadata>
        <Comment.Text>{detail.content}</Comment.Text>
        <Comment.Actions>
          <Comment.Action>Reply</Comment.Action>
        </Comment.Actions>
      </Comment.Content>
    </Comment>
  )
}

class Comments extends React.Component {
  constructor() {
    super();
    this.state = {
      inputContent: "",
      commentsList : []
    };
  }

  render() {
    return (
      <Comment.Group style = {{marginLeft:"10%"}}>
        <Divider horizontal>
          <Header as="h4">
            <Icon name="comment alternate" />
            Comment
          </Header>
        </Divider>

        {this.state.commentsList.map(comments => <SingleComment content = {comments}/>)}
      <SingleComment/>

        <Form reply>
          <Form.TextArea
            value={this.state.inputContent}
            placeholder="댓글을 입력해주세요."
            onChange={(e) => this.setState({ inputContent: e.target.value })}
          />
          <Button
            content="Add Reply"
            labelPosition="left"
            icon="edit"
            primary
            onClick={() => this.setState( (prevState) => {return{commentsList: [...prevState.commentsList, this.state.inputContent]}}  )}
          />
        </Form>
      </Comment.Group>
    );
  }
}

export default Comments;

 

사실 여기부터는 진짜 잘 모르겠다.

강의도 횡설수설한 부분이 많고 javascript를 가르치는게 논점이 아니므로, 나도 쿨하게 넘어가도록 한다.