좌충우돌 IT이야기

🚀 MongoDB Error

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

🔗 해결 방안

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

🚀 호이스팅(Hoisting)

javascript에서 호이스팅(Hositing)은 선언된 변수 및 함수를 코드 상단으로 끌어올리는 것을 만한다.

🔗 예제

console.log(a)
var a = 10

개발자가 코드를 이렇게 작성을 할 경후 자바스크립트의 Parser에 의해서 호이스팅이 자동적으로 일어난다. 개발자가 작성한 코드는 위와 같지만, 컴퓨터가 인식할 때는 아래와 같다.

var a;
console.log(a);
a = 10;

변수 선언 뿐만 아니라 함수 선언 시에도 똑같다. 

println();
println2();

//함수 선언문
funtion println(){
	console.log("Hello World~ This function is println !");
}

//함수 표현식
var println2 = funtion(){
	console.log("Hello World~ This function is println2 !");
};

var println2;

funtion println(){
	console.log("Hello World~ This function is println !");
}

println();
println2(); // undefined


println2 = funtion(){
	console.log("Hello World~ This function is println2 !");
};

호이스팅은 함수선언문과 함수표현식에서 서로 다르게 동작하기 때문에 주의해야 한다. 이 둘의 차이점은 나중에 알아보자.

하지만 javascript가 es6로 들어오면서 let, const가 생겼고 호이스팅에도 약간의 변화가 생겼다.

호이스팅의 동작을 간단하게 요약하자면 2단계로 볼 수 있다.

1. 변수명만 위로 끌어올린다.
2. undefined를 할당한다.

맨위의 예제의 var를 const으로 바꾼다면 어떨까?

console.log(a);
const a = 20;

위에서도 말 한것과 같이 var에서는 두 단계의 동작을 실행했다. 하지만 const 는 다른 결과를 보여주고 있다.

const는 var에서 동작하는 2 단계 중 첫 번째 단계만 실행한다. 단지 변수명만 위로 끌어 올리고 undefined를 할 당하지 않기 때문에 위와 같은 에러가 발생하는 것이다. 즉 호이스팅은 하나 TDZ에 걸리게 되는 것이다.

📢

게시글은 개인 공부 목적으로 작성되었습니다. 

게시글의 대한 피드백은 언제나 환영하고 감사할 따름입니다.

🐱‍🏍 리액트(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");

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