좌충우돌 IT이야기

🚀 호이스팅(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에 걸리게 되는 것이다.

📢

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

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

> 이 글에 대한 정리

OOP(Object Oriented Programming)

OOP는 객체의 관점에서 프로그래밍을 하는 것이다. 추상화, 캡슐화, 상속, 다형성과 같은 특징이 있으며 코드의 재사용성과 중복제거가 가장 큰 목적이다.

Exception, Error 차이

Error는 컴파일 시 문법적인 오류와 런타임 시 널 포인트 참조와 같은 오류로 프로세스에 심각한 문제를 야기시켜 프로세스를 종료 시킬 수 있다. 또한, 하드웨어의 오동작, 고장 등 개발자가 미리 예측할 수 없다.

Exception은 시스템 동작 중 예기치 않았던 이상 상태가 발생하여 수행 중인 프로그램이 영향을 받는것으로. JAVA에서는 try문으로 이미 예방할 수 있다.

Statement Prestatement 차이

두 명령어는 아래와 같은 실행 단계를 거친다.

1) 쿼리 문장 분석

2) 컴파일

3) 실행

statement는 매번 쿼리를 수행 할 때 마다 1~3단계를 거친다. 무슨 SQL 인지 파악하지는 좋지만 매번 컴파일 하지 때문에 성능에 좋지 않다. 하지만 Dynamic SQL을 사용할 경우는 statement를 사용해야한다. prestatement는 1~3단계를 캐시에 저장하기 때문에 재사용 측면에서 좋다. 쿼리를 반복적으로 수행한다면 DB에 부하를 줄여준다.

Connection Pool을 사용하는 이유

미리 커넥션을 생성하여 client에서 접속 시 이용가능 하도록 한 후 사용 후 pool을 회수하는 방식. JAVA에서 DB와 Connection을 맺는 일은 매우 느리며 자원을 많이 소비한다. 사전의 일정량의 Connection 객체를 만들어 공유된 저장소에 담아둔다. 이전에는 직접 작성하였다고 한다 지금은 JDBC로 대체 하고 있다. Connection Pool은 큐넷에서 시험을 접수하는 것을 예로 들 수 있다. Pool은 10개 할당했다고 가정하면, 10명의 접속자는 홈페이지에서 DB와 접속하여 작업을 하고 이후에 들어온 사람들은 대기 순번이 생기고 차례를 기다리는 것이다.

DI(Dependency Injection)

DI 의존성 주입. 스프링 IOC 컨테이너의 핵심 개념 중 하나이다. 소스코드의 변경 없이 환경 설정(sprinc config.xml, bean 객체 등) 만으로 프로그램을 제어할 수 있다. 즉 클래스간의 의존관계를 빈 설정  정보를 바탕으로 컨테이너가 자동으로 연결해주는 것을 말한다.

그 외 Spring의 특징

1) AOP - 트랜잭션이나 로깅, 보안과 같이 공통적으로 필요로 하는 모듈을 실제 핵심 모듈로 분리해서 적용 할 수 있다. 공통된 기능을 재사용하는 기법. (이해만 함)

2) POJO - 컨테이너에 저장되는 객체는 특정한 인터페이스를 구현하거나 특정 클래스를 상속받지 않아도 된다.

MVC 패턴이란

Model, View, Controller로 프로젝트를 구성할 때 구성 요소를 세 가지 역할로 구분한 디자인 패턴.

MVC 패턴의 장점

서로 분리되어 각자의 역할에 집중 할 수 있게끔 하여 유지보수성, 애플리케이션의 확장성, 유연성 증가, 중복 코딩 문제점을 사라지게 해준다. 유연성이란 클라이언트의 새로운 요구사항에 대해 최소한의 비용으로 보다 유연하게 대체하는 것을 말한다.

Ouath 2.0 Token이란

인증과 권한부여에 관련된 기능이다. 서버와 클라이언트 사이에 인증을 완료하면 서버는 권한 부여의 결과로써 accee token을 발행한다. ouath 2.0은 외부 서비스의 인증 및 권한 부여를 관리하는 범용 프레임워크이다. 비밀번호를 제공하지 않고 다른 웹싸이트 상의 자신들의 정보에 대해 웹싸이트나 애플리케이션의 접근 권한을 부여할 수 있는 공통적인 수단이다. 예를 들면 페이스북, 카카오, 구글 ID로 회원가입을 하는 것.

Outah 2.0 Token 발생 Flow

client와 resource owner 간 요청과 반응을 3단계로 걸쳐서 부여 및 인증한다. (자세하진 않음)

JWT란?

JWT는 jsonwebtoken의 약어이다.(놀라웠다) JSON 포맷을 이용하여 사용자에 대한 속성을 저장하는 cliam 기반의 Web Token이다. 주로 회원 인증이나 정보 전달에 사용한다. 또한, *Cros를 해결하기 위해 사용한다.

*cros는 cross origin resource sharing의 약어로 port 번호가 다른 환경과 통신한 때 발생하는 이슈.

Ouath 2.0 과 JWT에 대한 차이(뇌피셜)

Ouath 2.0은 권한과 인증에 중점을 두고 있는 것 같다. 그 예시로 ouath를 사용하기 위해서는 릴레이션에 role이라는 필드가 필요하다. 해당 필드로 role이 0이면 일반 회원, 1이면 admin과 같이 구분할 수 있기 때문이다. 그리고 그 권한을 기준으로 자신의 정보를 본인만 조회할 수 있게해준다. JWT는 정보를 안전하게 전달해주는데 초점을 맞추고 있는것 같았다. 해당 정보를 열람하기 위해선 sign key가 필요하고, 이 key를 모르면 jsonwebtoken이 발행해주는 정보를 복호화하여 사용할 수 없기 때문이다. sign key가 특별한 건 아니고 '11111' 또는 'abadjflkjalkdsjf' 과 같이 남들은 모르게 지정해주면 된다.

Hint란

오라클 옵티마이저에게 SQL 문 실행을 위한 데이터 스캐닝하는 경로, 조인하는 방법 등을 알려주기 위해 SQL 사용자가 SQL 구문에 작성하는 것을 말한다. 오라클이 항상 최적의 실행 결로를 만들어 내기는 불가능하기 때문에 개발자가 직접 최적의 실행 경로를 작성한다.

Plan 이란

옵티마이저는 우리에게 어떤 경로로 테이블에 접근할 건지, 어떤 방식으로 조인하는지, 어떤 인덱스 자원을 사용하는지 등에 대한 계획을 알려준다. 해당 계획을 통해 SQL을 수정하여 자원의 낭비를 줄일 수 있다.

테이블 정규화란 ?

정규화는 릴레이션 내에서 중복을 제거하는 과정이다. 즉 중복을 줄이고 무결성을 향상 시킨다.

마치며..

🤦‍♂️ 그당시 질문에 대한 답변을 지금에서야 회고하면서 나 자신에 대해 더욱 반성하게 되었다. 또한, 내가 왜 그동안 면접에서 탈락했는지.. 얼마나 부족한 사람인지 깨달았다. 코딩 능력도 중요하다. 하지만 본질이 더욱 중요하다는 것을 알게되었다. 여기에 없는 답변은 천천히 이어나갈 예정이다

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

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