잡동구리들

1. 폴더 만들기

 python -m venv ./test5

./test5 <-- 해당 위치에 원하는 폴더 이름 넣기(ex. ./test6)

2. 가상환경 활성화하기

source ./bin/activate

위 사진과 같이 (test5) 활성화 되는거 확인.

다만 2번 과정은 vscode에서 해당 폴더를 열면 알아서 자동으로 활성화 시켜주긴함.

Frontend 초기 세팅에 이어서 이번엔 Backend 초기 세팅!

1. npm 초기화 및 .gitignore 설정

  a. npm 초기화

npm init --yes (--yes or -y : npm 초기화시에 물어보는 여러 질문들을 넘기는 명령어)

--yes(-y) 명령어를 입력하면 아래 사진과 같이 가장 기본적인 내용만 package.json에 담기게 된다.

  b. .gitignore 설정

      아래 사진과 같이 gitignore.io 사이트에서 키워드를 넣고 Create 한 후 나온 텍스트로 .gitignore 파일 생성

2. 필요한 패키지 설치

패키지는 개인, 팀 별로 천차 만별일테니 참고만.

a. devDependencies

    1. npm i @babel/core @babel/node @babel/preset-env --save-dev(node가 이해할 수 있는 문법으로 변경)
    2. npm i eslint-config-prettier --save-dev(eslint-config-prettier : prettier와 충돌할 설정들을 비활성화)
    3. npm i eslint-plugin-prettier --save-dev(eslint-plugin-prettier : eslint에 prettier의 포매팅 기능을 추가)
    4. npm i nodemon --save-dev(nodemon : 코드 수정 시 자동으로 서버 재시작)

    5. npm i prettier-plugin-prisma --save-dev(prettier-plugin-prisma : prisma 사용 시 prettier 기능 적용)

    6. npm i prisma --save-dev(prisma : 데이터베이스에 대한 접근을 쉽게 하도록 도와주는 소프트웨어)
b. dependencies
    1. npm i @prisma/client --save(@prisma/client : prisma를 이용하여 DB 제어)
    2. npm i bcrypt --save(bcrypt : 암호화 관련 패키지)
    3. npm i cors --save(cors : 브라우저에서 다른 출처의 리소스를 공유)

    4. npm i dotenv --save(dotenv : .env 파일로부터 환경 변수를 읽어 들임)

    5. npm i express --save(express : Node.js 웹 애플리케이션 프레임워크)

    6. npm i jsonwebtoken --save(jsonwebtoken : 유저 정보가 담긴 JSON 데이터를 암호화해서 클라이언트와 서버 간 전달 가능)

최종적으로 설치된 패키지(package.json)

3.  환경 설정

환경 설정 역시 개인, 팀 별로 다를 테니 참고만.

a. .babelrc 설정 및 package.json script 수정(start 추가)

// .babelrc
{ "presets": ["@babel/preset-env"] }

// package.json
"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "nodemon server.js --exec babel-node" // 추가
  },

b. .env 설정

.env는 환경변수 파일로 key = value 형태로서 변수로 설정된 key에 해당하는 값을 process.evn.key 형태로 사용이 가능하다.

// .env
DATABASE_URL="mysql://USERNAME:PASSWORD@localhost:3306/DB_NAME" // mysql 사용

PORT = 8080

SECRET = testproject // jsonwebtoken 검증시 필요

c. .eslintrc 파일 생성

// .eslintrc
{
  "extends": ["eslint:recommended", "plugin:prettier/recommended"],
  "parserOptions": {
    "ecmaVersion": 2017,
    "sourceType": "module"
  },

  "env": {
    "es6": true,
    "browser": true,
    "node": true,
    "jest/globals": true
  },

  "plugins": ["jest"] // TDD용
}

d. .prettierrc 파일 생성

// .prettierrc
{
  "printWidth": 80,
  "tabWidth": 2,
  "singleQuote": true,
  "trailingComma": "all",
  "bracketSpacing": true,
  "semi": true,
  "arrowParens": "avoid",
  "endOfLine": "lf"
}

4. 폴더 설정

Layered Pattern을 적용하여 아래와 같이 폴더 생성

5. server.js 생성

import http from 'http';
import express from 'express';
import cors from 'cors';
import dotenv from 'dotenv';
// import { PrismaClient } from '@prisma/client';

dotenv.config(); // dotevn 라이브러리 사용
// const prisma = new PrismaClient();

import routes from './routes';

const PORT = process.env.PORT;

const app = express();

// middleware
app.use(cors());
app.use(express.json());

// route
app.use(routes);

// server test
app.use('/ping', (req, res) => {
  return res.status(200).json({ message: 'pong' });
});

// create server
const server = http.createServer(app);

// run my server
const serverStart = async () => {
  try {
    server.listen(PORT, () => {
      console.log(`server is listening on PORT ${PORT}`);
    });
  } catch (error) {
    console.log(error);
    // await prisma.$disconnect();
  }
};

serverStart();

6. DB 생성 및 연결

a. prisma 초기 세팅

npx prisma init

b. DB 연결

// prisma/schema.prisma
datasource db {
  provider = "mysql"
  url      = env("DATABASE_URL")
}

// .env
DATABASE_URL="mysql://USERNAME:PASSWORD@localhost:3306/DB_NAME" // '3.환경설정' 내용과 동일

c. prisma 모델 생성 

prisma/schema.prisma 수정이 완료된 후, 아래 명령어 실행.

npx prisma migrate dev --name init // 작성된 prisma 모델을 .env에 연결된 로컬 DB에 만들어준다.

생성된 마이그레이션 파일이 DB에 적용되었는지 확인.

d. prisma client 생성

prisma로 DB를 제어하기 위해 client가 필요.

npx prisma generate

7. 최종 결과물

위와 같이 초기 설정을 해서 나온 결과물은 아래 그림과 같다. 코드는 아래 gitghub에서 확인 가능!

https://github.com/quark4904/test-project-back

프로젝트 초기 세팅을 정리해놓지 않으니 매번 시작할 때마다 까먹어서 이 참에 정리를 해놓으려고 한다.
순서는 상관이 없고, 이 세팅이 정답도 아니다.
개인별로, 팀별로, 회사별로 다 다를테니 어떤 흐름인지만 확인하면 될 것 같다.

Backend 초기 세팅은 여기로

1. CRA(create react app) 설치

일단 node.js가 설치되어 있다는 가정하에 시작한다.

npx create-react-app test-proejct

위 명령어를 실행한 폴더 하위에 'test-project'이라는 폴더가 생기면 CRA 설치 완료.
해당 폴더를 vsc로 열면 아래와 같은 폴더 구조를 갖게 된다.

vsc에서 터미널(단축키: cmd + j)을 열어 npm start 명령어를 실행하면 아래와 같이 정상적으로 실행이 되는 것을 확인할 수 있다.

2. 필요한 패키지 설치

패키지는 개인, 팀 별로 천차 만별일테니 참고만.

패키지 설치시 package.json 파일에 해당 패키지가 추가가 되는지 꼭 확인한다.
만약 추가가 되어 있지 않으면 해당 프로젝트를 다른 사람이 clone 받았을 때 패키지를 설치할 수가 없다.

<패키지 설치 옵션 간단 설명>
--save : dependencies에 추가됨(npm5 이상부터 생략 가능)(dependencies : 실제 애플리케이션 운용에 필요한 패키지)
--save-dev(또는 -D) : devDependencies에 추가됨(devDependencies : 개발에 필요한 패키지)

a. devDependencies
1. npm i eslint-config-prettier --save-dev(eslint-config-prettier : prettier와 충돌할 설정들을 비활성화)
2. npm i eslint-plugin-prettier --save-dev(eslint-plugin-prettier : eslint에 prettier의 포매팅 기능을 추가)
3. npm i prettier --save-dev --save-exact(--save-exact : 버전이 달라지면서 생길 스타일 변화를 막기 위함)
b. dependencies
1. npm i react-router-dom --save(react-router-dom : router 사용)
2. npm i styled-components --save(styled-components : javascript에서 css 사용이 가능한 스타일링 프레임워크)
3. npm i styled-reset --save(styled-reset : css 설정 초기화)

최종적으로 설치된 패키지(package.json)

3.  환경 설정

환경 설정 역시 개인, 팀 별로 다를테니 참고만.

a. .eslintrc 파일 생성

{ "extends": ["react-app", "plugin:prettier/recommended"] }

b. .prettierrc 파일 생성

{
  "printWidth": 80,
  "tabWidth": 2,
  "singleQuote": true,
  "trailingComma": "all",
  "bracketSpacing": true,
  "semi": true,
  "arrowParens": "avoid",
  "endOfLine": "lf" 
}

c. .gitignore 설정
.eslintcache 추가

d. .env 설정
.env는 환경변수 파일로 key = value 형태로서 변수로 설정된 key에 해당하는 값을 process.evn.key 형태로 사용이 가능하다.

REACT_APP_SERVER_HOST="http://localhost:8000"
REACT_APP_CLIENT_HOST="http://localhost:3000"

만약 위와 같이 .env에 서버 주소를 지정하면 fetch 함수를 사용해서 백엔드와 통신을 할 때 아래와 같이 사용이 가능하다.

fetch(`${process.env.REACT_APP_SERVER_HOST}/user/signin`, {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  mode: 'cors',
  body: JSON.stringify({
    email: emailValue,
    password: pwValue,
  }),
})

4. public 폴더 및 src 폴더 수정

이부분도 개인, 팀 별로 다를 테니 참고만.

a. public 폴더(아래 사진)
- images 폴더 생성
- 불필요한 파일 삭제
- index.html에서 불필요한 부분 삭제 및 추가

b. src 폴더(변동이 많기 때문에 자세한 코드는 아래 github에서 확인)
- 불필요한 파일 삭제
- components, pages, styles 폴더 생성
- Routes.js 파일 생성(react-router-dom 패키지를 사용할 경우)
- config.js 파일 생성(API를 일괄적으로 관리해주기 위한 용도)
- GlobalStyle.js, Theme.js 파일 생성(styled-components 패키지를 사용할 경우)

5. 최종 결과물

위와 같이 초기 설정을 해서 나온 결과물은 아래 그림과 같다. 코드는 아래 gitghub에서 확인 가능!

https://github.com/quark4904/test-project-front

틀린 부분이나 부족한 부분이 있으면 댓글 부탁 드립니다!

내가 어떤 페이지에 특정 데이터를 전달하고 싶은 경우, react에서는 일반적으로 부모자식 관계로 설정해서 props를 전달하게 된다. 

하지만 만약 부모자식 관계가 아닌데도 props를 전달해야 할 필요가 있을 경우에는 어떻게 데이터를 전달할까..

결론은 Link 컴포넌트를 이용하면 된다. 

아래와 같은 경우를 생각해보자.

Router.js가 아래와 같이 구성되어 있고, 

// Router.js
import React from "react";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import Home from "./pages/Home";
import Main from "./pages/Main";

function Router() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/main" element={<Main />} />
      </Routes>
    </BrowserRouter>
  );
}

export default Router;

Home.js는 아래와 같이 로그인/회원가입 버튼을 누르면 /main 경로로 할당된 Main.js 컴포넌트로 가게끔 되어있다. 

// Home.js
import { Link } from "react-router-dom";

function Home() {
  return (
    <div>
      <Link to="/main">
        <button>로그인</button>
      </Link>
      <Link to="/main">
        <button>회원가입</button>
      </Link>
    </div>
  );
}

export default Home;

그런데 Main.js안에는 아래 사진 및 코드와 같이 useState를 사용해서 초기값을 true로 설정을 해줘서 Main.js가 렌더링 되면 무조건 SignIn.js가 렌더링 되게 되어있다.

Home.js에서 로그인 버튼을 누르면 로그인으로 페이지가 열리고, 회원가입 버튼을 누르면 회원가입 페이지가 열리게 하고 싶은데, 

만약 Home.js와 Main.js가 같은 페이지였다면, 부모자식 간에 props를 전달하는 방법으로 손쉽게 해결이 될 것 같다. 그런데 이 경우는 아예 다른 페이지이기 때문에 기존 방법으로는 props를 넘겨줄 수가 없다. 

// Main.js
import { useState } from "react";
import "./Main.scss";
import SignIn from "./SignIn";
import SignUp from "./SignUp";

function Main() {
  const [isLogin, setIsLogin] = useState(true);

  const onClickSignIn = (event) => {
    setIsLogin(true);
  };
  const onClickSignUp = (event) => {
    setIsLogin(false);
  };
  
  return (
    <div className="loginContainer">
      <div className="btns">
        <button className="btn" onClick={onClickSignIn}>
          로그인
        </button>
        <button className="btn" onClick={onClickSignUp}>
          회원가입
        </button>
      </div>
      {isLogin ? <SignIn /> : <SignUp />}
    </div>
  );
}

export default Main;

해결방법은 Main.js 파일의 isLogin state 초기값인 true를 Home.js의 회원가입 버튼을 눌렀을 땐, false로 변경되게끔 수정해주면 된다. 

즉, Home.js의 회원가입 버튼에 state false값을 실어보내주면 된다.

// 수정된 Home.js
import { Link } from "react-router-dom";

function Home() {
  return (
    <div>
      <Link to="/main">
        <button>로그인</button>
      </Link>
      <Link to="/main" state={{ signUp: false }}> // 수정된 부분(객체로 값을 전달해준다.)
        <button>회원가입</button>
      </Link>
    </div>
  );
}

export default Home;

// 수정된 Main.js
import { useState } from "react";
import { useLocation } from "react-router-dom"; // 추가된 부분
import "./Main.scss";
import SignIn from "./SignIn";
import SignUp from "./SignUp";

function Main() {
  const location = useLocation(); // 추가된 부분
  const signUp = location.state?.signUp; // 추가된 부분

  const [isLogin, setIsLogin] = useState(signUp === false ? false : true); // 수정된 부분

  const onClickSignIn = (event) => {
    setIsLogin(true);
  };
  const onClickSignUp = (event) => {
    setIsLogin(false);
  };

  return (
    <div className="loginContainer">
      <div className="btns">
        <button className="btn" onClick={onClickSignIn}>
          로그인
        </button>
        <button className="btn" onClick={onClickSignUp}>
          회원가입
        </button>
      </div>
      {isLogin ? <SignIn /> : <SignUp />}
    </div>
  );
}

export default Main;

결과는 아래와 같다. 

난 왜 소프트웨어 개발자가 되고 싶어 했을까?

솔직히 이 질문에 아직 해답을 찾진 못한 것 같다. 

처음엔 막연히 내가 만든 블로그가 있었으면 좋겠다 싶어서 무작정 django 책을 두 권사서 따라 해 봤는데,

나름 재미는 있었지만 직장을 다니면서 뭔가를 한다는 게 말처럼 쉬운 건 아니었다.(물론 지금 생각해보니 핑계가 거의 90% 이상이었지만..)

그 뒤로 잊고 살다가 불현듯! 프로그래밍이 하고 싶어졌다. 

이유가 몇 가지 있었다. 

1. 2020년 겨울쯤에 방영된 tvN 드라마 '스타트업'이 굉장히 재밌었다. 

2. 00학번으로 항공우주공학과를 들어가서 2021년 대한항공 항공기술연구원 퇴사 때까지

    거의 20년간 항공우주 관련 일을 했는데(물론 굉장히 재밌었고, 나름 자부심도 있었지만)

    그 상황에 너무나 만족한 나머지 무기력증에 걸려버렸다. 그래서 새로운 도전이 필요했다.

3. 누구나 시작은 해볼 수 있는 프로그래밍의 세계는 굉장히 좋은 출발점이었다.

4. "Programming" 이라는 단어가 그냥 마음에 와닿았다. 

등등..

물론, 이유가 명확하지 않아 남들이 보기에는 뜬구름 잡는 것처럼 보일 수도 있을 것 같다.

그런데 난 그냥 저런 이유만으로도 충분했다. 프로그래밍을 시작하기에는..

Wecode Fullstack 부트캠프 시작

회사 다닐 때는 퇴직하게 되면 최소 5년은 전 세계를 여행해야겠다고 생각을 했었는데,

아쉽게도 2021년 2월에 퇴직했을 때는 코로나 때문에 아무 데도 못 가는 상황이었다.

물론 그래도 집에서 게임도 하고, 영화도 많이보고, 보고 싶은 책도 많이 봐서 원 없이 쉬긴 했다. 

그리고 6개월 정도 재밌게 놀았으니, 이제 해보고 싶은걸 해보자 싶어서 바로 부트캠프에 등록했다. 

부트캠프의 장점은 같은 목표를 가진 사람들(협업)이 있고, 강요하진 않지만 해야만 하는 느슨한(?) 강제성이 있고, 

모르는 문제에 대해서 구글링 말고도 실시간 대화가 가능한 멘토분들이 있다는 점인 것 같다. 

혼자서도 시간관리 잘하고, 스스로 문제 해결을 잘 해내는 일당백인 사람들은 굳이 부트캠프로 시작할 필요는 없을 것 같다. 

하지만 확률적으로 보면 우리는 대부분 보통의 사람들이라서 결국 서로 돕고, 약간의 행동 제약을 받아야 결국 무언가를 해낼 수 있다는 걸 잘 안다. 

그러니 그냥... 부트캠프든, 국비지원이든 혼자 하지 말고 다른 사람들과 같이 하자.

1차 프로젝트 회고

6주간의 pre, foundation 코스가 지나고 2주간의 1차 프로젝트가 끝나가는 이 시점에 회고록을 쓰는 이유는...

지난 6주보다 프로젝트를 수행했던 2주가 더 드라마틱하게 다가왔기 때문이다.

프로젝트 소개 및 역할

우리 팀은 마플샵 클론 코딩이 프로젝트로 주어졌다. 

모든 기능을 구현할 수 있는 실력은 안되기 때문에

백엔드 데이터 모델링 및 각종 API 구현, 메인 페이지, 제품 상세 페이지, 로그인/회원가입, 이미지 슬라이드 UI 구현 등 기본적인 기능만 구현하는 것을 목표로 잡았다.

기간은 2주, 인원은 5명!

나의 역할은 프런트엔드 : 로그인/회원가입 UI 구현, 백엔드 : 상품 상세 정보 페이지에 정보를 제공하는 API 구현이었다. 

사용 기술

• Front-end : React.js, sass(최대한 라이브러리 배제)
• Back-end : Node.js, express, prisma, My SQL
• Common : RESTful API
• Community Tools : Slack, Zoom, Notion

결과물

Front-end : https://github.com/quark4904/fullstack3-1st-wepleshop-frontend

Back-end : https://github.com/quark4904/fullstack3-1st-wepleshop-backend

https://youtu.be/KS8-9Y_w8_A

개인적으로 좋았고, 아쉬웠던 점

6주간 정신없이 배웠던, React.js와 Node.js를 통합해서 하나의 웹페이지를 만드는 일은 생각보다 멋진 일이었다. 

부트캠프 초반에만 하더라도 useState, useEffect 등등 React Hook이 이해도 안 가고 router는 무엇이며,

부모 자식 간에 props를 전달한다는데 왜 그래야 되는지, fetch는 뭔지.....RDBMS, Layered Pattern은 왜 이리 복잡한지..

이 모든 것들이 머릿속에 짬뽕되면서  이게 그거 같고, 저게 그거 같은 지식의 과부하 때문에 머리가 복잡했는데,

프로젝트를 수행하면서 뭔가 머릿속이 1차적으로 정리가 된 느낌이 들어서 굉장히 만족스러웠다. 

내가 맡은 기능 구현에 초점을 맞추다 보니 다른 팀원들의 코드를 제대로 살펴보지 못한 건 아쉬움으로 남는다.

github에 올라온 다른 팀원들의 PR을 나름 유심히 본다고 봤지만, 세세하게 보진 못한 것 같다.

또한 로그인 후, 백엔드를 통해 받아온 token을 실제로 활용할 수 있는 코드를 직접 작성해보지 못한 것도 아쉽다. 

이러한 아쉬움은 다음 주에 있을 리팩터링 기간에 모두 해소시키리라 마음먹어본다.

협업

그동안 다녔던 회사들을 살펴보면, 협업이 중요하지 않은 곳은 단 한 군데도 없었다.

모든 분야가 그렇겠지만 항공우주 분야도 특성상 각 계통(추진, 구조, 전기 등등)과의 유기적인 협업이 굉장히 중요한 분야이다. 

특히나 항공 사고는 대부분 인명 사고로 직결되기 때문에 많은 것들이 시스템화 되어 있고, 보수적으로 흘러갈 수밖에 없다.

이제 겨우 부트캠프의 프로젝트 하나를 수행해본바로 웹 개발의 협업에 대해 많은 걸 알 수는 없겠지만,

개인적으로 느끼는 두 분야의 협업은 정답이 있느냐 없느냐로 나뉘지 않을까 싶다. 

항공우주 분야는 공기역학, 열역학, 구조역학 등 어찌 보면 정답 같은 것들이 존재하는 분야다.

빠르게 날아가기 위해서는 추진력이 강해야 하고, 공기역학적으로 동체 구조를 유리하게 만들어야 하고..등등

즉, 그 정답들에 빠르고 정확하게 다가가기 위한 회의로서의 협업의 느낌이라면..

웹 개발 분야의 경우, 아주 짧은 기간 동안 느낀 바로는 정답이 없는 문제를 해결해야 하는 분야 같다는 느낌이 든다. 

정답이 없다는 건 내 생각과 다른 사람의 생각이 모두 정답이 될 수도 있고, 정답이 되지 않을 수도 있다는 말이 된다.

결국 누군가의 생각(혹은 조직)이 정답이 될 텐데,  그만큼 협업이 굉장히 중요한 문제가 될 수 있는 분야이지 않을까 싶다. 

이번 프로젝트를 하면서 가장 크게 느낀 부분이 바로 이 부분이었다. 

프로젝트 초기 세팅을 하면서 우리가 놓친 부분에 대해서는 모두가 각자의 방식대로 진행을 했고,

또한 각자가 맡은 기능 구현에 초점을 맞춰 진행하다 보니 서로의 코드를 확인하는 것을 소홀히 진행했던 것이다. 

프로젝트 마무리 때 모두가 동의했던 내용이 바로 협업의 중요성이었다.

마무리

웹 개발 분야는 지금도 열심히 성장하는 분야다. 

그만큼 개발자들도 부지런해야 한고, 노력해야 하기 때문에 굉장히 힘든 분야인 것 같다. 쉽게 생각했던 나 자신을 반성한다. 

난, 대전 산기슭 어디쯤에서 편하게 생활하다가 갑자기 바다가 보고 싶어서 출발한 지 1년여 만에 바다에 도착을 했고, 이제 겨우 발바닥에 바닷물을 묻힌 수준인 초초보 개발자다. 다행히 바닷속에 들어가는데 나이 제한은 없긴 하지만, 바닥에 닿을 체력을 온전히 유지하고 있을지가 의문이다. 하지만, 일단 바닷가에 도착한 이상 바닷속을 들어가 봐야 한계를 알 수 있지 않을까 생각한다. 시간이 지나서 더 깊이 다이빙할 수도 있고, 잠시 해변가에 나와서 휴식도 취할 수 있는 그런 개발자가 되고 싶다. 

자식 컴포넌트 두개가 있는데, 한쪽 자식에게 전달하는 props에만 변경이 생긴경우,

특별한 조건을 주지 않는한 부모는 그 둘 모두를 렌더링(rendering) 하게 된다. 

그런데 만약 자식 컴포넌트가 1000개 라면 자식 하나의 변경만으로도 나머지 자식들 모두가 새롭게 렌더링되야하므로 시간이 지연이 발생하게 될 것이다. 

이때 유용하게 사용되는 메소드가 React.memo()다.

아래와 같이 React.memo()를 사용하면 처음에는 두 컴포넌트가 모두 렌더링 되고,

이후에는 변경된 자식 컴포넌트만 렌더링이 된다.

function Btn({ text, changeValue }) {
  console.log(text, "was chaneged"); 
  
  // 처음 렌더링 됐을 때,
  // Save Changes was chaneged
  // Continue was chaneged
  
  // onClick 이벤트 적용 후 렌더링 됐을 때,
  // Revert Changes was chaneged
  
  return (
    <button
      style={{
        backgroundColor: "tomato",
        color: "white",
        padding: "10px 20px",
        border: 0,
        borderRadius: 10,
      }}
      onClick={changeValue}
    >
      {text}
    </button>
  );
}

const MemorizedBtn = React.memo(Btn);

function App() {
  const [value, setValue] = React.useState("Save Changes");
  const changeValue = (event) => {
    setValue("Revert Changes");
  };
  return (
    <div>
      <MemorizedBtn text={value} changeValue={changeValue} />
      <MemorizedBtn text="Continue" />
    </div>
  );
}

1. Hoisting(호이스팅)

어디에 선언했느냐에 상관없이 항상 제일 위로 선언을 끌어올려 주는 것

2. Method(메소드)

object(객체)의 property 값이 function(함수)일 경우, 일반 function과 구분하기 위해 method라고 부른다. 즉 method는 object에 제한되어 있는 fucntion를 의미한다. 

3. JSON(JavaScript Object Notation)

서버와 클라이언트 간의 Data 교환 형식

4. JavaScript

JavaScript(자바스크립트)는 웹 페이지와 상호작용하도록 만들어진 언어 

5. Function(함수)

하나의 특정한 작업을 수행하도록 설계된 독립적인 블록

6. Scope(변수 영역)

변수 영역은 변수가 유효성을 갖는 영역을 가리킨다. 

7. Object-oriented(객체 지향)

객체지향 프로그래밍이란, 프로그램을 객체들로 구성하고, 객체들 간에 서로 상호 작용 하도록 작성하는 방법이다.

8. [React]side-effect

함수가 실행되면서 함수 외부에 존재하는 값이나 상태를 변경시키는 등의 행위

(ex. 함수 외부에 존재하는 버튼의 텍스트를 변경하거나, API로부터 유저 목록을 받아올때 해당 데이터를 호출하는 경우)

9. [React]state

화면에 보여줄(렌더링) 데이터(값)를 가지고 있는 객체(혹은 값 그 자체). 즉, 정보!(상태)

10. ORM(Object-Relational Mapping)

데이터베이스의 체계(테이블과 컬럼 등)를 클래스(객체)와 연관지어 사고하는 패러다임

오류 1

"SyntaxError: Unexpected token k in JSON at position 6" 에러

발생 원인 및 해결 : JSON 데이터를 만들때 맨 마지막 값에 콤마(,)가 들어가 있으면 발생 ==> 콤마(,) 제거로 해결

오류 2

"SyntaxError: Unexpected token } in JSON at position 99" 에러

발생 원인 및 해결 : JSON 데이터를 만들때 키값이 쌍따옴표("")로 감싸져 있지 않으면 발생  ==> 쌍따옴표("") 추가로 해결

상태 코드는 3자리 숫자로 만들어져 있으며, 첫번째 자리는 1에서 5까지 제공된다. 첫번째 자리가 4와 5인 경우는 정상적인 상황이 아니기 때문에 사이트 관리자가 즉시 알아야 하는 정보다.

• 1xx(정보) : 요청을 받았으며 프로세스를 계속 진행
• 2xx(성공) : 요청을 성공적으로 받았으며 인식했고 수용함
• 3xx(리다이렉션) : 요청 완료를 위해 추가 작업 조치가 필요
• 4xx(클라이언트 오류) : 요청의 문법이 잘못되었거나 요청을 처리할 수 없음
• 5xx(서버 오류) : 서버가 명백히 유효한 요청에 대한 충족을 실패

지금까지 컴퓨터를 하면서 가장 자주 접하는 상태 코드는 역시나 "404 Not Found"가 아닐까 싶다. 서버가 요청한 페이지를 찾을 수 없다는 의미로 서버에 존재하지 않는 페이지에 대한 요청이 있을 경우 서버에서 이 코드를 제공한다.

있어야 할 페이지가 갑자기 사라진다면, 개발자 마음은 어떨까..?

response는 어떠한 작업을 요청한 곳에 무엇인가를 돌려주는 역할을 한다. 

app.get('/', (req, res) => {
  res.send()
  res.json({ message: "'I'm Jason Mraz." })
  res.end()
})

• res.send() : 정보를 돌려보내 주는 가장 기본적인 역할을 수행한다. 
• res.json() : 정보를 돌려보내긴하는데, json 형태로 바꿔서 돌려준다.
• res.end() : 주로 서버가 작동을 안하거나 오류가 있을 경우, 특정 문구를 나타내고 응답을 종료하고자 할 때 사용된다.

Node.js의 http 모듈과 express 프레임워크로 server를 생성하는 방법중 가장 큰 차이점은 바로...

routing과 modularization(모듈화)이다. 

앱이나 웹의 규모가 커지면 커질수록 코드는 복잡해 질수밖에 없는데 라우팅이나 모듈을 사용하지 않을 경우, 아래 코드와 같이 조건문으로 분기해서 다른 로직을 처리하게끔 해주어야 한다. 

const http = require('http')
const { sendPosts } = require('./sendPosts')

const server = http.createServer((req, res) => {
  const { url, method } = req
  res.setHeader('Content-Type', 'application/json')

  if (url === '/') return res.send({ message: '/ endpoint' })
  if (url === '/signup' && method === 'POS') return res.end(JSON.stringify({ message: '회원가입 완료!' }))
  if (url === '/login' && method === 'POST') return res.end(JSON.stringify({ message: '로그인 완료!' }))
  if (url === '/products' && method === 'GET') return sendPosts(res)

  res.send(JSON.stringify({ message: 'this response answers to every request' }))
})

server.listen(8080, () => { console.log('server is listening on PORT 8000')})

하지만 express 프레임 워크를 쓴다면, 아래와 같이 조금 더 간결하게 코드를 구성할 수 있게 된다. 

const http = require('http')
const express = require('express')
const { sendPosts } = require('./postings')

const app = express()
app.use(express.json())

app.get('/', (req, res) => {
  res.json({ message: '/ endpoint' })
})

app.post('/signup', handleSignUp) // 첫번째 인자에는 endpoint url 을 기입하고,
app.post('/login', handleLogin) // 각각의 요청에 대해 핸들링 하는 함수를 두번째 인자로 넣는다.
app.get('/products', sendPosts)

const server = http.createServer(app)

server.listen(8000, () => {
  console.log('server is listening on PORT 8000')
})

UI(User Interface)란?

사용자(User)가 컴퓨터와 의사소통을 가능하게 만드는 접점(Interface)을 의미한다.

하드웨어로는 키보드, 조이스킥, 마우스 등등이 있고, 소프트웨어로는 웹페이지, 터미널 등등이 UI라고 할 수 있다. 

API

컴퓨터나 컴퓨터 프로그램 사이의 연결이다. 즉, 프로그램들이 서로 상호작용하는 것을 도와주는 매개체라고 볼 수 있다.