좌충우돌 IT이야기

🚀 MongoDB Error

진짜 어이없는 에러.. 자취방에서 IP 설정하고 집에서 IP 설정을 따로 안해주어서 접근 거부가 난거였음

🔗 해결 방안

' ALLOW ACCESS FROM ANYWHERE ' 누르면 해결 !!

🐱‍🏍 리액트(React) Note

많은 사람들이 리액트를 프레임워크로 알고있지만, 라이브러리이다.

🔨 프레임워크(Framework)

프레임워크는 '소프트웨어의 특정 문제를 해결하기 위해서 상호 협력하는 클래스와 인터페이스의 집합'이다.

Application 개발 시 필수적인 코드, 알고리즘, 데이터베이스 연동 등 과 같은 기능들을 위해 어느정도 구조를 제공해준다.

🔨 라이브러리(Library)

라이브러리는 '특정 기능에 대한 도구나 함수들을 모은 집합'이다. 즉, 프로그래머가 개발하는데 필요한 것들을 모아둔 것이다.

다시, 본론으로 돌아오자면 리액트는 컴포넌트로 이루어져 있어 재사용성이 높다는 장점을 가지고 있다.

또한, 기존의 자바스크립트에서 사용하던 Real Dom과 달리 리액트는 Virtual Dom을 사용하기 때문에 화면 렌더링 발생 시 화면 깜박거림이 발생하지 않는다. 참 트루.

🔨 Real Dom

화면 전체를 다시 LOAD 시킨다.

🔨 Virtual Dom

처음에 Snapshot을 찍어 변경 된 부분과 비교 후 해당 부분만 update 한다.

리액트를 생성하려면 터미널에서 npx create-react-app 이라는 명령어를 작성해주면된다. 이전에는 npm install -g create-react-app 명령어를 사용해서 설치했다고 한다. -g 옵션은 global의 약어로 document에 설치하여 디스크의 용량을 낭비한다는 단점이 존재했다. 이를 해결하고자 npx가 등장했다. npx를 사용함으로서 디스크의 용량 뿐 아니라 사용할 때 마다 최신 버전을 사용할 수 있게 되었다.

리액트를 사용하다 보면 바벨(Babel)과 웹팩(Webpack)이라는 단어를 접할 수 있다. 바벨(Bable)은 es6 문법을 구형 환경에서도 쓸 수있게 변환해주는 트렌스파일러(transpiler)이다. 웹팩(Webpack)은 모듈을 하나의 파일로 묶어주는 모듈 번들러이다. 예를 들어 이미지를 사용하고 싶으면 클라이언트의 src 폴더 안에 경로가 설정되어 있어야 웹팩이 이미지를 모듈로 인식한다.

리액트를 실행하면 기본적으로 App.js 파일 라우터 역할을 수행 한다. 여기서 원하는 파일로 이동하기 위해선 react-router-dom이 필요하다. react-router-dom을 호출하는 코드는 아래와 같다. 단, 먼저 npm을 이용하여 설치를 해야한다.

import {
  //react-router-dom 을 쓰기 위한 기본 구조
  BrowserRouter as Router,
  Switch,
  Route,
  Link,
} from "react-router-dom";

그리고 원하는 폴더 또는 파일을 생성하여 해당 경로를 App.js에 설정해주면, 원하는 페이지로 이동할 수 있다.

(* 이동방법 => https://localhost:3000/login (또는 register) path에 맞게 작성해주면 된다.)

import LandingPage from "./components/views/LandingPage/LandingPage";
import LoginPage from "./components/views/LoginPage/LoginPage";
import RegisterPage from "./components/views/RegisterPage/RegisterPage";

function App() {
  return (
    <Router>
      <div>
        <Switch>
          <Route exact path="/" component={LandingPage} />
          <Route exact path="/login" component={LoginPage} />
          <Route exact path="/register" component={RegisterPage} />
        </Switch>
      </div>
    </Router>
  );
}

여기서 <Route exact path="/" compoent={LandingPage} /> 를 볼 수 있다. 이는 가독성이 좋기 위한 코드이며 이 전의 코드는 아래와 같다.

<Route path="/login"><LoginPage /></Route>

🔗 전체코드

/*
	전체코드
*/

import React from "react";
import "./App.css";
import {
  //react-router-dom 을 쓰기 위한 기본 구조
  BrowserRouter as Router,
  Switch,
  Route,
  Link,
} from "react-router-dom";

import LandingPage from "./components/views/LandingPage/LandingPage";
import LoginPage from "./components/views/LoginPage/LoginPage";
import RegisterPage from "./components/views/RegisterPage/RegisterPage";

function App() {
  return (
    <Router>
      <div>
        <Switch>
          <Route exact path="/" component={LandingPage} />
          <Route exact path="/login" component={LoginPage} />
          <Route exact path="/register" component={RegisterPage} />
        </Switch>
      </div>
    </Router>
  );
}

export default App;

🏓 주저리

얼마전 험난한 취업 시장을 뚫고 학생 신분을 탈출한 신입 개발자 지인들을 만났다. 그들은 빠르게 성장하고 있었고, 자신들의 학습 방법을 알려주었다. 서로 상이했지만, 공통점은 '이유' 였다.

' 왜 사용하는지 알고, 꼬리를 물고 파고 파서 습득한다. '

이게 그 이유이다. 기존에는 코드가 오류만 안나고 작동하면 만족했었다. 왜 동작하는지도 모른체. 그래서 이번에는 동작원리 또는 탄생 배경부터 알아가고자 노력한 것 같다. 앞으로 꾸준히 이렇게 공부할 수 있도록 노력.. 또 노력 !

🙋🏻‍♂️ 데이터 암호화 하기

/*
  User.js
*/

// npm install jsonwebtoken --save
const jwt = require("jsonwebtoken");

//jwt 생성
userSchema.methods.generateToken = function (cb) {
  let user = this;
  let token = jwt.sign(user._id.toHexString(), "secrectToken");

  user.token = token;
  user.save(function (err, user) {
    if (err) return cb(err);
    cb(null, user);
  });
};

이렇게 하면 jwt가 생성이고 user객체의 token에 삽입되고 객체 전체가 index.js로 반환된다.

🙋🏻‍♂️ jsonwebtoken 생성하기

 /*
 	** 로그인 프로세스 **
	 1. DB 안에서 요청된 이메일 찾기
     2. 이메일이 있다면 비밀번호 일치 여부 확인
     3. 둘 다 수행하면 Token 생성 (<=== 토큰 생성은 이 곳)
 */


app.post("/login", (req, res) => {
  // 1.
  User.findOne({ email: req.body.email }, (err, user) => {
    if (!user) {
      return res.json({
        loginSuccess: false,
        message: "제공된 이메일에 해당하는 유저가 없습니다.",
      });
    }
    //2.
    user.comparePassword(req.body.password, (err, isMatch) => {
      if (!isMatch) {
        return res.json({
          loginSuccess: false,
          message: "비밀번호가 틀렸습니다.",
        });
      }
      //3.
      user.generateToken((err, user) => {
        if (err) return res.status(400).send(err);
        res
          .cookie("x_auth", user.token)
          .status(200)
          .json({ loginSuccess: true, userId: user.user_id });
      });
    });
  });
});

jwt는 쿠키, 로컬 스토리지 등에 저장할 수 있다고 한다. 어느 것이 가장 효율 적인 방법이라고 단정지을 수는 없지만 프로젝트의 특성을 파악하고 사용해야 될 것 같다. 일단은 쿠키로. jwt는 무엇일까? 그건 나중에 알아봐야지

//npm insatll cookie-parser --save
const cookieParser = require("cookie-parser");

쿠키에 저장하기 위해 설치해야한다.

🚀 기초 React (1강 ~ 8강)

> 강의 보러가기 

🙋🏻‍♂️ Node.js 란 ?

예전에는 자바스크립트 런타임이 브라우저 밖에 존재하질 않았다. 이러한 한계를 극복하고 나온 자동차의 엔진과 같은 역활.

🙋🏻‍♂️ Express.js란 ?

node.js를 쉽게 이용할 수 있게 해주는 자바스크립트 프레임워크.

📁 폴더 생성 순서

• Documents에 접속 > 터미널(or git bash) > npm init 입력 > package.json 생성 > index.js 만들기

💾 명령어

• npm express --save // --save를 적어주면 package.json에 기록되므로, 타인이 설치된 내용에 대해 쉽게 알 수 있다.

• npm run start // server 시작. 변경 사항이 자동으로 반영되지 않기 때문에 페이지를 새로고침 해야한다.

📂 Express.js 만들기

> Documents

const express = require('express')
const app = express()
const port = 3000

app.get('/', (req, res) => {
  res.send('Hello World!')
})

app.listen(port, () => {
  console.log(`Example app listening at http://localhost:${port}`)
})

• require() 은 뭘까? => 확인