[JUSTCODE] 1개월차 회고

배경

JUSTCODE를 시작한 지 한달이 지났다. 이 한달동안은 배움에 초점을 두고, 많은 것을 학습했다.

 

1개월동안 했던 것들

Week 1  Pre-course : justgram UI 구현

Week 2 Pre-course : node.js로 간단한 back-end 서버 구현

Week 3 Basic Foundation : justgram UI React로 변환하기

Week 4 Advanced Foundation : 카카오 상품으로 리스트뷰 / 카드뷰 구현하기

 

 

Week 1  Pre-course

vanila Javascript, html, css를 사용하여 instagram을 클론한 justgram을 만들었다.

JUSTCODE에 들어와서 맨 처음 결과를 낸 것이었기 때문에 내가 뿌듯했다.

또한, 팀원들과 peer review를 진행하며 서로의 코드를 리뷰하는 방법을 배웠고, 조금 더 성장할 수 있었다.

 

 

Week 2 Pre-course

const http = require("http");
const express = require("express");

const users = [
  {
    id: 1,
    name: "Rebekah Johnson",
    email: "Glover12345@gmail.com",
    password: "123qwe",
  },
  {
    id: 2,
    name: "Fabian Predovic",
    email: "Connell29@gmail.com",
    password: "password",
  },
];

const posts = [
  {
    id: 1,
    title: "간단한 HTTP API 개발 시작!",
    description:
      "Node.js에 내장되어 있는 http 모듈을 사용해서 HTTP server를 구현.",
    userId: 1,
  },
  {
    id: 2,
    title: "HTTP의 특성",
    description: "Request/Response와 Stateless!!",
    userId: 1,
  },
];

const postingData = {
  data: [
    {
      userID: 1,
      userName: "Rebekah Johnson",
      postingId: 1,
      postingTitle: "간단한 HTTP API 개발 시작!",
      postingContent:
        "Node.js에 내장되어 있는 http 모듈을 사용해서 HTTP server를 구현.",
    },
    {
      userID: 2,
      userName: "Fabian Predovic",
      postingId: 2,
      postingTitle: "HTTP의 특성",
      postingContent: "Request/Response와 Stateless!!",
    },
    {
      userID: 3,
      userName: "new user 1",
      postingId: 3,
      postingTitle: "내용 1",
      postingContent: "sampleContent3",
    },
    {
      userID: 4,
      userName: "new user 2",
      postingId: 4,
      postingTitle: "내용 2",
      postingContent: "sampleContent4",
    },
  ],
};

const app = express();
app.use(express.json());
app.get("/ping", (req, res) => {
  res.json({ message: "pong" });
});

//회원가입

//1. app에 회원가입하는 URL등록
app.post("/join", (req, res) => {
  //2. email, name, password 요청받기
  const { email, name, password } = req.body;

  //3. user배열에 고객추가
  const userData = {
    id: 3,
    email,
    name,
    password,
  };
  users.push(userData);

  //4. response to client
  res.json({ message: "userCreated" });
});

//게시물 작성

//1. app에 게시물을 작성하는 URL등록
app.post("/postList", (req, res) => {
  //2. name, email, password 요청받기
  const { title, description, userId } = req.body;

  //3. posts배열에 게시물추가
  const postsData = {
    title,
    description,
    userId,
  };
  posts.push(postsData);

  //4. response to client
  res.status(201).json({ message: "postCreated" });
});

//게시물 목록조회

//data형태를 직접 만들어서 res.json()으로 보내주기
//1.app에 게시물 목록을 조회하는 URL등록
app.get("/inquiry", (req, res) => {
  //2. response to client
  res.status(200).json({ message: "postInquiry" });
  res.status(200).json({ data: postingData });
});

//게시물 정보수정

//1.app에 게시물을 수정하는 URL등록
app.patch("/update", (req, res) => {
  //2. 1번이라는 숫자를 변수에 할당
  const id = 1;
  //3. posts라는 배열(db)에서 id가 1번인 객체를 가져오기
  for (let i = 0; i < postingData.length; i++) {
    if (postiingData.userID == 1) {
      //4. 컨텐츠를 node로 변경
      postiingData.postingContent = "node";
    }
  }
  //5. response to client
  res.json({ message: "postUpdate" });
});

//서버켜기
const server = http.createServer(app);

try {
  server.listen(8000, () => {
    console.log("server is listening on PORT 8000");
  });
} catch (err) {
  console.log(err);
}

node.js로 간단한 API를 작성하여 보고, ERD를 작성해보았다.

기본적인 것이지만 back-end의 기본적인 구동 방식을 익힐 수 있었다.

ERD를 작성하면서, 데이터 테이블간의 관계를 정립하는것이 생각보다 어렵고, 까다롭다는 것을 알게되었다. 손으로 관계를 직접 써보면서 작성하면 도움이 될 것 같다.

 

 

Week 3 Basic Foundation

import React, { useEffect, useState } from "react";
import styles from "./Feed.scss";
import Comment from "./../Comment/Comment";

function Feed({ accountName, likenum, picture }) {
  //댓글 개수 관리 state
  const [commentArray, setCommentArray] = useState([]);

  useEffect(() => {
    fetch("/data/commentsData.json")
      .then((res) => res.json())
      .then((res) => setCommentArray(res.data));
  }, []);

1주차에서 만든 justgram의 UI를 React로 변환하였다.

이 과정에서 css로 사용했던 것을 Sass를 이용하여 scss로 변환하여 사용하였고, nesting 방식도 익혀보았다. 

또한 컴포넌트를 만드는 이유와 방식에 대해서도 알게되었고,

props로 객체를 넘기는 법, useState hook의 사용법 등을 배우며 justgram을 한층 완성도 있게 만들어보았다.

React를 사용해보니, '아, 이래서 React를 사용하는구나.'하는 생각이 들었다.

React의 첫 발을 내딛었던 나. 앞으로 Front-end 개발자로 멋지게 성장하고 싶다는 생각이 들었다.

 

 

Week 4 Advanced Foundation

카카오 상품페이지로 조건부렌더링, 컴포넌트 재사용 등을 학습하였다.

조건부렌더링을 사용하니, 하나의 컴포넌트를 다양하게 쓸 수 있어서 깜짝 놀랐다. 정말 센세이션이었다.

 

 

느낀점

무언가를 배워나갈 때 기록하는 것은 정말 중요하다는 것을 느꼈다. 팀원들의 블로그를 구경하는데, 정말 정리를 깔끔하고 또 상세하게 적어놓은 것을 보고 놀랐다. 그리고 나를 돌아보게 되었다. 나도 꼭 정리를 열심히하는 개발자가 되리라.

그리고 무언가를 배울 때 그것을 직접 사용해보지 않는다면, 그것은 나의 것이 아니게된다. 따라서 이론적으로만 정리하지 말고 직접 코드를 쳐가며 구현해보자!

그리고 팀원들과 소통하며 많은 것을 배운 것 같다. 그들이 가지고 있는 지식과 기술을 아낌없이 흡수하도록 하자!