index.html

1. 회원가입, 로그인, 로그아웃 구현

빛장 — Tue, 19 May 2020 01:15:53 +0900

개요

Frontend next.js, Redux, Redux-saga를 사용하였고

Backend는 mongoDB, express 를 이용해 구현했다.

왜 Next.js 인가?

기존 CRA(create react application) 은 클라이언트 사이드 렌더링방식으로 초기 렌더링시에 HTML을 받고 리소스를 받아 렌더링 하기에 맨처음 로딩까지의 시간이 SSR보다 느리다. 또한 빈 HTML에 JS로 VIEW를 구성하기에 SEO부분에서도 검색엔진이 데이터를 수집하는데에 문제가 있다. 때문에 CRA에서 SSR 구성을 어찌어찌 해야하는데, 반면 Next.js 는 기본적으로 서버사이드 렌더링을 제공하며, 코드스플리팅을 자동화 해주고(여기서 코드스플리팅이란 하나의 작은 번들을 잘개 쪼개어 사용자가 필요한 코드만 로드하여 성능을 향상시켜주는 것을 말한다) SSR이기에 SEO에서도 최적화되어있고 초기 로딩속도또한 빠르다고 한다.

https://velog.io/@rjs1197/SSR%EA%B3%BC-CSR%EC%9D%98-%EC%B0%A8%EC%9D%B4%EB%A5%BC-%EC%95%8C%EC%95%84%EB%B3%B4%EC%9E%90

SPA에서의 SSR과 CSR

이 글은 SPA(Single Page Application)에서의 SSR과 CSR을 비교하기 위해 작성되었다(편의를 위해 반말 사용). - 최근 수정: 2019. 09. 22 초기 View 로딩 속도 먼저 전통적인 SSR과 CSR의 가장 큰 차이 중 하나인 '�

velog.io

어쨌든 만들껀?

간단하게 매일 주제를 던져주고 그에 맞는 사진을 사용자가

업로드하는 갤러리형 사이트를 만든다.

1. Front

프론트에서 미리 회원가입 폼을 작성해 놓았다.

이는 리덕스와 리덕스 사가로 더미데이터를 넣어

가상으로 회원가입 후 자동 로그인되는 방식으로 구현해 놓았다.

 const signUp = (e) => { //onSubmit 시 동작하는 함수
    e.preventDefault();
    if (userPassword !== userPasswordCheck) { //미리 password 의 일치여부를 파악한다.
      return setPasswordCheckError(true);
    }
    return dispatch({
      type: SIGN_UP_REQUEST,
      data: {
        email: userEmail,
        password: userPassword,
        name: userName,
      },
    });
  };

SignUp 페이지에서 폼데이터가 onSubmit 되는 순간

리듀서 중 SIGN_UP_REQUEST 가 dispatch 되어 지고 action data 로 폼 안의 email, password, userName 이 전달된다.

function signUpAPI(signUpData) {
  return axios.post('http://localhost:5000/signup', signUpData, { //signUpAPI로 요청을 보낸다
    withCredentials: true,//cors 쿠키 교환을 위한것. back에서 cors 를 사용해 credentials: true 한번더 처리해줘야한다
  });
}

function* signUp(action) {
  try {
    const result = yield call(signUpAPI, action.data); //signUpAPI 를 호출하고 돌아오는 데이터도 받는다.
    yield put({
      type: SIGN_UP_SUCCESS,
      data: result.data,
    });
  } catch (e) {
    console.log(e);
    yield put({
      type: SIGN_UP_FAILURE,
    });
  }
}

function* watchSignUp() {
  yield takeEvery(SIGN_UP_REQUEST, signUp); //리듀서 감지
}

그럼 동시에 redux-saga 에서 비동기로

SIGN_UP_REQUEST 를 감지하고 넘어온 action data 를 backend 서버로 전달한다.

1. Back

import mongoose from 'mongoose';
import passportLocalMongoose from 'passport-local-mongoose';
const UserSchema = new mongoose.Schema({
  name: String,
  writer: String,
  email: String,
  userInfo: String,
  likeList: [
    {
      type: mongoose.Schema.Types.ObjectId,
      ref: 'Photo',
    },
  ],
});

UserSchema.plugin(passportLocalMongoose, { usernameField: 'email' });

const model = mongoose.model('User', UserSchema);

export default model;

User 모델을 만들어 놓았다. likeList는 좋아요를 구성하기 위함이다.

일전에 로그인구현하는 예제에서 사용한 그대로 썼다.

편하게 하기위하여 passport-local-mongoose 사용도 잊지 않았다.

globalRouter.post(routes.signup, signup, login); //routes.signup = /signup

회원가입 후 자동으로 로그인되는 순서다.

export const signup = async (req, res, next) => {
  const { email, name, password } = req.body;
  try {
    const user = await User({
      name,
      email,
      userInfo: '',
      writer: '',
    });
    await User.register(user, password);
    next();
  } catch (e) {
    console.log(e);
    res.send('가입실패');
  }
};

아까 front 에서 데이터를 넘겨주면 back 에서는 그 데이터를

req.body 안에서 확인할 수 있다.

가입방법은 예전에 쓴 그 글을 참고하면 된다.

2020/03/23 - [Study/script.js] - [Node.js] 회원가입 구현(로그인,로그아웃,회원가입,passport, Mongo Store)

[Node.js] 회원가입 구현(로그인,로그아웃,회원가입,passport, Mongo Store)

Passport 로컬 로그인 뿐만아니라 소셜 로그인에서까지 쉽게 인증이 가능한 미들웨어이다. http://www.passportjs.org/ Passport.js Simple, unobtrusive authentication for Node.js www.passportjs.org ** mongo..

andwinter.tistory.com

근데 왜 userInfo와 writer 을 남겨놓았냐면

회원가입이 완료되면 모달창이 뜨고 그 모달에서 작가명과 자기소개를

작성할 수 있는 기능을 원했기 때문이다.

쓸대없어 보이겠지만 그냥 그걸 원했다.

그리고 이 모달창은 이후에 editProfile 에서도 동일하게 이용할것이다.

아무튼 회원가입을 누르게되면 로그인으로 가야하니 로그인까지 구현한다.

export const login = (req, res, next) => {
  passport.authenticate('local', (err, user, info) => {
    if (err) {
      console.log(err);
      return next(err);
    }
    if (info) {
      return res.status(401).send(info);
    }
    req.login(user, (loginErr) => {
      if (loginErr) {
        return next(loginErr);
      }
      const userData = Object.assign({}, user.toJSON());
      delete userData.password; //객체안의 password 정보를 지운다.
      return res.json(userData);
    });
  })(req, res, next);
};

예전에 작성했던 회원가입글과 다른점이 이거 하나다.

여기서는 custom callback 를 이용했다는점.

이는 프론트와 백이 나누어져있고 프론트는 next.js 로 이루어져있기때문에

redirect 가 필요하지 않았다. 해서 custom callback 를 이용해서

로그인이 성공하면 해당 유저 데이터를 프론트서버로 다시 돌려보내주게

만들었다.

이렇게 signUp 이 완료되고 next() 로 login 으로와서 로그인까지 된 상태가 되면

res.json(userData) 가 실행되어 프론트로 로그인된 사용자 정보가 넘어가게 된다.

2. 다시 Front

프론트에선 그 json 데이터를

try {
    const result = yield call(signUpAPI, action.data);
    yield put({
      type: SIGN_UP_SUCCESS,
      data: result.data,
    });
  }

아까 try catch 문의 try 에서 result 로 받게 되고

그 데이터를 put(dispatch 와 동일) 을통해 SIGN_UP_SUCCESS 를 호출하여 데이터를 넘긴다.

    case SIGN_UP_SUCCESS: {
      return {
        ...state,
        isUserLoadding: false,
        me: action.data,
        editing: true,
      };

리덕스에서는 미리 설정해놓은 action에 따라서 그 유저데이터를 me 라는 state 에 저장하게된다.

또, editing 이라는 state 의 값을 true 로 바꾸어 모달창을 띄운다.

그럼 이러한 모달창이 뜨게된다.

여기서 아까 말했듯, 이름과 별개로 작가명, 작가소개를 작성할 수 있다.

여기서 작성되는 데이터는 마찬가지로 onSubmit 되어지면

 const handleSubmit = (e) => {
    e.preventDefault();
    const writerData = {
      userInfo: info.userInfo,
      writer: info.name,
    };
    dispatch({
      type: EDITING_PROFILE_REQUEST,
      data: { me, writerData },
    });
  };

이 함수가 실행된다.

회원가입할때와 비슷한 구조로 dispatch 되고

function editingAPI(userID) {
  return axios.post('http://localhost:5000/editing', userID, {
    withCredentials: true,
  });
}

function* editing(action) {
  try {
    const result = yield call(editingAPI, action.data);
    const userData = JSON.parse(result.config.data);
    const { me, writerData } = userData;
    yield put({
      type: EDITING_PROFILE_SUCCESS,
      data: { ...me, ...writerData },
    });
  } catch (e) {
    console.log(e);
    yield put({
      type: EDITING_PROFILE_FAILURE,
    });
  }
}

function* watchEditing() {
  yield takeEvery(EDITING_PROFILE_REQUEST, editing);
}

redux-saga 에서는 이러한 과정으로 비동기요청을 한다.

3. 다시 back

export const editing = async (req, res) => {
  const {
    me: { _id, email, name },
    writerData: { userInfo, writer },
  } = req.body;
  try {
    await User.findByIdAndUpdate(_id, {
      name,
      email,
      userInfo,
      writer,
    });
    const user = req.user;
    return res.json(user);
  } catch (e) {
    console.log(e);
    res.send('프로필 업데이트 실패');
  }
};

back 에서는 그 데이터를 받아서 mongoose 의 findByIdAndUpdate 를 통하여

아까 비어있던 userInfo 와 writer 을 채우게 된다.

그리고 다시 프론트로 정보를 넘겨주고

4. 다시다시 Front

프론트에서는 그 정보를 받아서 사용자 정보를 업데이트 한다.

    case EDITING_PROFILE_SUCCESS: {
      return {
        ...state,
        isLoggedIn: true,
        editing: false,
        isUserLoadding: false,
        me: action.data,
      };
    }

이렇게 회원가입은 끝나게 된다.

이미 위에 back서버의 로그인은 만들어져있기때문에 그 api를 이용하는

프론트 서버의 무언가를 만들어주기만 하면된다.

요런 로그인창을 이용할 것이고,

onsubmit 되어지면 회원가입과 똑같은 패턴으로 back 서버의 loginapi 를 이용하여 로그인시키면 된다.

대신 로그인으로 넘길때에는 email과 password 라는 이름으로 넘겨야 한다.

5. 여기서 문제는? 로그인이 풀리는것!

여기까진 반쪽짜리 회원가입, 로그인이다. 왜냐하면

새로고침하면 로그인이 풀려버리기 때문이다.

이는 프론트에서 만들어진 쿠키를 백서버로 서로 교환하지 못하기 때문인데,

위에서 적어줬던 axios 의

withCredentials: true,

이 옵션과

app.use(
  cors({
    origin: true,
    credentials: true,
  }),
);

백의 app.js 에서 cors 를 이용하여 이 옵션들을 설정해주면 쿠키가 올바르게

생성되는걸 볼 수 있다.

6. 하지만 그래도 로그인이 풀리는걸?

하지만 쿠키생성만으로는 로그인이 풀리는걸 막을순 없다.

쿠키는 단지 사용자의 정보 일부분을 가지고있을뿐이다.

때문에 이 쿠키를 back으로 보내고 express session과 passport의 deserializeUser를 통해 이 쿠키를 해석하고 req.user에 로그인된 유저의 정보가 담기면 그 정보를 프론트로 다시 보내주는 작업을 해야 로그인이 풀려버리는걸 막을 수 있다.

(아 맞아 미리 세션은 다 설정해놓았다. 설정하는 방법은 저번 글(위에글) 참고 )

즉 모든 페이지에서 쿠키를 이용해서 로그인된 사용자 정보를 매번 불러와주는것이 필요한 것이다.

이를위해 모든 페이지의 상위에있는 Layout 에다가 작업을 해줄 것이다.

useEffect 를 사용하여 페이지가 로드되는 맨처음에(componentDidMount() 와 같음)

LOAD_USER_REQUEST 를 호출하는 작업을 해줄것이다.

  useEffect(() => {
    dispatch({
      type: LOAD_USER_REQUEST,
    });
  }, []);

layout 에 위와같은 코드를 적어주었고, saga에서는

function loadUserAPI() {
  return axios.get('http://localhost:5000/load', {
    withCredentials: true,
  });
}
function* loadUser() {
  try {
    const result = yield call(loadUserAPI);
    yield put({
      type: LOAD_USER_SUCCESS,
      data: result.data,
    });
  } catch (e) {
    console.log(e);
    yield put({
      type: LOAD_USER_FAILURE,
    });
  }
}
function* watchloadUser() {
  yield takeEvery(LOAD_USER_REQUEST, loadUser);
}

이렇게 get 요청을 보낼것이다.

이미 사전작업으로 인해 쿠키가 존재하기때문에 프론트에서 뭔가를 넘겨줄 필요가 없고 단지 로그인된 유저의 정보만을 불러오면 되기 때문이다.

7. 마지막으로 Back

백에서는

export const loadUser = (req, res) => {
  if (!req.user) {
    return res.status(401).send('로그인 되어있지 않음.');
  }
  return res.json(req.user);
};

이렇게 req.user 를 넘겨주기만 하면 끝이다. 간단하쥬?

8. 진짜 마지막으로 로그아웃

로그아웃은 정말 간단하다.

버튼하나 만들고

  const handleLogout = () => {
    dispatch({
      type: LOG_OUT_REQUEST,
    });
  };

// 로그아웃
function logOutAPI() {
  return axios.post(
    'http://localhost:5000/logout',
    {},
    {
      withCredentials: true,
    },
  );
}
function* logOut() {
  try {
    yield call(logOutAPI);
    yield put({
      type: LOG_OUT_SUCCESS,
    });
  } catch (e) {
    console.log(e);
    yield put({
      type: LOG_OUT_FAILURE,
    });
  }
}
function* watchLogOut() {
  yield takeEvery(LOG_OUT_REQUEST, logOut);
}

이렇게 해주고(매번똑같다)

백에서는

export const logout = (req, res) => {
  req.logout();
  req.session.destroy(() => {
    res.clearCookie('connect.sid');
    res.send('로그아웃 성공');
  });
};

요렇게 세션을 파괴하고 쿠키를 지워주면 끝이다!

[express Error]Route.get() requires a callback function but got a [object Undefined]

빛장 — Wed, 13 May 2020 02:18:55 +0900

Route.get() requires a callback function but got a [object Undefined]

뒤에 컨트롤러가 존재하지 않을때 생기는 오류

app.get(routes.getpost, getpost)

이런식으로 라우터와 컨트롤러를 따로 import 해와서 쓸때

콜백인 getpost 가 정의되어있지 않으면 생기는 오류임.

[express Error]UnhandledPromiseRejectionWarning: Error [ERR_HTTP_HEADERS_SENT]: Cannot set headers after they are sent to the client

빛장 — Tue, 12 May 2020 00:42:42 +0900

header 를 설정할 수 없다는 의미심장한 에러가 떴다.

이게 뭘까 뭘까 생각해보다가 검색해보니

express controller 에서 try catch 문을 써준뒤 마지막에 리턴을 안붙여서 생기는 오류였다.

리턴만 잘 붙여주면 끝

[알고리즘] 프로그래머스 코딩테스트연습 (2016년) Lv.1

빛장 — Mon, 4 May 2020 02:40:21 +0900

문제

문제 설명

2016년 1월 1일은 금요일입니다. 2016년 a월 b일은 무슨 요일일까요? 두 수 a ,b를 입력받아 2016년 a월 b일이 무슨 요일인지 리턴하는 함수, solution을 완성하세요. 요일의 이름은 일요일부터 토요일까지 각각 SUN,MON,TUE,WED,THU,FRI,SAT

입니다. 예를 들어 a=5, b=24라면 5월 24일은 화요일이므로 문자열 TUE를 반환하세요.

제한 조건

2016년은 윤년입니다.
2016년 a월 b일은 실제로 있는 날입니다. (13월 26일이나 2월 45일같은 날짜는 주어지지 않습니다)

입출력 예

a b result

TUE

과정

function solution(a, b) {
    var answer = new Date(2016, (a-1), b);
    return String(answer).slice(0,3).toUpperCase();
}

1. 변수 answer 에 new Date 를 생성한다. 문제였던 2016년을 넣고 a-1 를 한 이유는 0 부터 January 이기 때문이다. 들어오는 값은 실제 달이므로 -1을 해서 맞춰준다.(day 의 경우 0은 이전달 마지막일이 된다. 1은 그냥 1일임)

2. answer 은 문자열이 아니므로 String 을 통해 문자열로 바꿔준다

3. 그결과로 나온 문자열('Tue May 24 2016 00:00:00 GMT+0000 (Asia)') 중 0부터 3번째 자리까지를 slice 를 통해 잘라준다.

4. toUpperCase()를 통해 최종적으로 답에서 원한 대문자로 만들어주면 끝.

결과

[알고리즘] 프로그래머스 코딩테스트연습 (가운데 글자 가져오기) Lv.1

빛장 — Fri, 1 May 2020 02:49:17 +0900

문제

문제 설명

단어 s의 가운데 글자를 반환하는 함수, solution을 만들어 보세요. 단어의 길이가 짝수라면 가운데 두글자를 반환하면 됩니다.

재한사항

s는 길이가 1 이상, 100이하인 스트링입니다.

입출력 예

s return

"abcde"	"c"
"qwer"	"we"

과정

function solution(s) {
    let answer = ''
    const middleSNumber = s.length/2
    middleSNumber%1 !== 0 
    ? answer = s[Math.floor(middleSNumber)] 
    : answer = `${s[middleSNumber - 1]}${s[middleSNumber]}`
    return answer
}

1. middleSNumber 를 입력되는 s의 길이를 2로 나누어 저장한다.

이때 홀수면 소숫점 .5 로 저장될테고 짝수면 소숫점이 없을것이다.

2. 만약 % 1 을해서 0으로 떨어지지 않는다면 소숫점이 있다는 소리이므로 s의 가운데 자리 인덱스번호는middleSNumber의 반내림 수가 될것이고 그놈을 찾아서 answer에 담는다.

그게 아니라면 정수라는 소리니까 리터럴템플릿을 이용해서 s의 길이를 2로 나눈 수와 -1한 수를 s의 인덱스번호로 찾아서 answer에 담는다.

결과

[알고리즘] 프로그래머스 코딩테스트연습 (나누어 떨어지는 숫자 배열) Lv.1

빛장 — Fri, 1 May 2020 01:31:36 +0900

문제

문제 설명

array의 각 element 중 divisor로 나누어 떨어지는 값을 오름차순으로 정렬한 배열을 반환하는 함수, solution을 작성해주세요.
divisor로 나누어 떨어지는 element가 하나도 없다면 배열에 -1을 담아 반환하세요.

제한사항

arr은 자연수를 담은 배열입니다.
정수 i, j에 대해 i ≠ j 이면 arr[i] ≠ arr[j] 입니다.
divisor는 자연수입니다.
array는 길이 1 이상인 배열입니다.

입출력 예

arrdivisorreturn

[5, 9, 7, 10]	5	[5, 10]
[2, 36, 1, 3]	1	[1, 2, 3, 36]
[3,2,6]	10	[-1]

입출력 예 설명

입출력 예#1
arr의 원소 중 5로 나누어 떨어지는 원소는 5와 10입니다. 따라서 [5, 10]을 리턴합니다.

입출력 예#2
arr의 모든 원소는 1으로 나누어 떨어집니다. 원소를 오름차순으로 정렬해 [1, 2, 3, 36]을 리턴합니다.

입출력 예#3
3, 2, 6은 10으로 나누어 떨어지지 않습니다. 나누어 떨어지는 원소가 없으므로 [-1]을 리턴합니다.

과정

function solution(arr, divisor) {
  var result = [];
    
  arr.forEach((item) => {
    const div = item % divisor;
    if (div === 0) {
      result.push(item);
    }
  });
    result.length === 0 ? result.push(-1) :  result.sort((a, b) => a - b)
    return result;
}

1. result 배열을 생성

2. 자연수를 담은 배열 arr 을 돌며 각 인자를 나눌값(divisor) 로 나눈 나머지 값(%)을 div에 담는다.

만약 div 가 0이라면 result 배열에 해당 인자를 담는다.(divisor로 나누어 딱 떨어지는 값이니까)

3. 만약 나누어 떨어진 값이 없다면 (result 배열에 담긴 값이 없다면) answer 에 -1 을 담고,

result 에 값이 담겨 있다면 오름차순으로 정렬한뒤 리턴한다.

결과

[알고리즘]프로그래머스 코딩테스트연습 (완주하지 못한 선수) Lv.1

빛장 — Fri, 1 May 2020 01:04:17 +0900

문제

문제 설명

수많은 마라톤 선수들이 마라톤에 참여하였습니다. 단 한 명의 선수를 제외하고는 모든 선수가 마라톤을 완주하였습니다.

마라톤에 참여한 선수들의 이름이 담긴 배열 participant와 완주한 선수들의 이름이 담긴 배열 completion이 주어질 때, 완주하지 못한 선수의 이름을 return 하도록 solution 함수를 작성해주세요.

제한사항

마라톤 경기에 참여한 선수의 수는 1명 이상 100,000명 이하입니다.
completion의 길이는 participant의 길이보다 1 작습니다.
참가자의 이름은 1개 이상 20개 이하의 알파벳 소문자로 이루어져 있습니다.
참가자 중에는 동명이인이 있을 수 있습니다.

입출력 예

participant completion return

[leo, kiki, eden]	[eden, kiki]	leo
[marina, josipa, nikola, vinko, filipa]	[josipa, filipa, marina, nikola]	vinko
[mislav, stanko, mislav, ana]	[stanko, ana, mislav]	mislav

입출력 예 설명

예제 #1
leo는 참여자 명단에는 있지만, 완주자 명단에는 없기 때문에 완주하지 못했습니다.

예제 #2
vinko는 참여자 명단에는 있지만, 완주자 명단에는 없기 때문에 완주하지 못했습니다.

예제 #3
mislav는 참여자 명단에는 두 명이 있지만, 완주자 명단에는 한 명밖에 없기 때문에 한명은 완주하지 못했습니다.

출처

불러오는 중입니다...

과정

function solution(participant, completion) {
    var answer = '';
    
    let myMap = new Map();
    
    for(const person of participant){
        if(!myMap.get(person)){
            myMap.set(person, 1)
        }else{
            myMap.set(person, myMap.get(person) + 1)
        }
    }
    for(const person of completion){
            myMap.set(person, myMap.get(person) - 1)
    }
    for(const person of participant){
        if(myMap.get(person)){
           return person
        }
    }
}

1. 새로운 맵을 생성한다.( new Map(); )

2. for of 문을 이용하여 참가자 명단을 돌며 인자를 가지고 맵을 생성하는데

만약 내가 생성한 맵에 해당인자(person)가 없다면 map 에 person 의 key 를 가진 value 는 1의 프로퍼티를 생성

하고,

만약 해당값이 이미 존재한다면(이는 동명이인이 있다는 것을 뜻함)

이미 있는 프로퍼티의 value 에 +1 을 함.

3. 이번엔 for of 문으로 완주자명단을 돌며

해당 인자(person)와 생성된 맵에서 key값이 동일한 프로퍼티의 value 값에서 -1을함.

4. 마지막으로 참가자명단을 한번더 돌며 참가자들의 이름을 map 에 대입하여 value 가 0 이 아닌 대상을 리턴함.

결과

[알고리즘] 프로그래머스 코딩테스트연습 (체육복) Lv.1

빛장 — Thu, 30 Apr 2020 21:54:47 +0900

문제

점심시간에 도둑이 들어, 일부 학생이 체육복을 도난당했습니다. 다행히 여벌 체육복이 있는 학생이 이들에게 체육복을 빌려주려 합니다. 학생들의 번호는 체격 순으로 매겨져 있어, 바로 앞번호의 학생이나 바로 뒷번호의 학생에게만 체육복을 빌려줄 수 있습니다. 예를 들어, 4번 학생은 3번 학생이나 5번 학생에게만 체육복을 빌려줄 수 있습니다. 체육복이 없으면 수업을 들을 수 없기 때문에 체육복을 적절히 빌려 최대한 많은 학생이 체육수업을 들어야 합니다.

전체 학생의 수 n, 체육복을 도난당한 학생들의 번호가 담긴 배열 lost, 여벌의 체육복을 가져온 학생들의 번호가 담긴 배열 reserve가 매개변수로 주어질 때, 체육수업을 들을 수 있는 학생의 최댓값을 return 하도록 solution 함수를 작성해주세요.

제한사항

전체 학생의 수는 2명 이상 30명 이하입니다.
체육복을 도난당한 학생의 수는 1명 이상 n명 이하이고 중복되는 번호는 없습니다.
여벌의 체육복을 가져온 학생의 수는 1명 이상 n명 이하이고 중복되는 번호는 없습니다.
여벌 체육복이 있는 학생만 다른 학생에게 체육복을 빌려줄 수 있습니다.
여벌 체육복을 가져온 학생이 체육복을 도난당했을 수 있습니다. 이때 이 학생은 체육복을 하나만 도난당했다고 가정하며, 남은 체육복이 하나이기에 다른 학생에게는 체육복을 빌려줄 수 없습니다.

입출력 예

n lost reserve return

5	[2, 4]	[1, 3, 5]	5
5	[2, 4]	[3]	4
3	[3]	[1]	2

입출력 예 설명

예제 #1
1번 학생이 2번 학생에게 체육복을 빌려주고, 3번 학생이나 5번 학생이 4번 학생에게 체육복을 빌려주면 학생 5명이 체육수업을 들을 수 있습니다.

예제 #2
3번 학생이 2번 학생이나 4번 학생에게 체육복을 빌려주면 학생 4명이 체육수업을 들을 수 있습니다.

출처

과정

function solution(n, lost, reserve) {
    var answer = 0;
    let result = [];
  for (let i = 0; i < n; i++) {
    result.push(1);
  }
  lost.forEach((element) => {
    result[element - 1] = 0;
  });
  reserve.forEach((element) => {
    result[element - 1] = result[element - 1] + 1;
  });
    reserve.forEach((element) => {
    if (element !== 1 && result[element - 2] === 0 && result[element - 1] > 1) {
      result[element - 1] = result[element - 1] - 1;
      result[element - 2] = result[element - 2] + 1;
    } else if (element !== 1 && result[element] === 0 && result[element - 1] > 1) {
      result[element - 1] = result[element - 1] - 1;
      result[element] = result[element] + 1;
    } else if (element === 1 && result[element] === 0 && result[element] > 1) {
      result[element - 1] = result[element - 1] - 1;
      result[element] = result[element] + 1;
    } else if (element === n && result[element-2] === 0 && result[element-1] > 1){
      result[element-1] = result[element-1] - 1;
      result[element-2] = result[element-2] + 1;
    }
  });
      result.forEach(element => {
      if(element > 0){
          answer++
      }
  })
return answer;
}

1. n 만큼의 길이를 가지고 각각 요소가 1인 배열 result를 만듦(init)

2. result 안에서 lost 의 index 번호를 찾아서 해당 학생의 값을 -1 함(도난)

3. result 배열 중 reserve 의 index 번호에 있는 값에 + 1을 함(여분)

4. reserve 배열(여분) 을 반복하여 돌면서

만약 여분을 가진 학생의 인덱스가 1이 아니고(첫번째가 아니고) 자신의 앞의 학생이 도난을 당했으며, 자기 자신이 1보다 크다면(이는 여분을 가지고 있었다가 도난 당한 경우를 대비함)

자기자신의 값에서 1을 빼고 앞에 학생에게 1을 더함.

만약 위의 경우가 아니고(앞학생이 도난당하지 않았고) 자신의 인덱스가 1이 아니며, 뒤의 학생이 도난당한경우

자신에서 -1을하고 뒤에 학생에게 +1을 해줌.

만약 내가 첫번째 학생이고 뒤에 학생이 도난 당하였으며 나 자신이 여분을 가지고 있다면

뒤에 학생에게 +1 을 하고 자신에서 -1을 함.

만약 내가 맨 마지막 학생이고 앞의 학생이 도난을 당했으며 내가 여분을 가지고 있다면

앞의 학생에게 +1, 나자신은 -1을 함.

5. 끝으로 result 를 돌며 요소의 값이 0이 아닌경우 answer 에 +1 씩 더해주며 인원수를 세고 종료.

결과

[styled component] 가상선택자와 참조

빛장 — Sun, 26 Apr 2020 00:07:18 +0900

.parent {
width:300px;
height:300px;
background:#eee;
}

.child {
width:50px;
height:50px;
background:#fff;
}


.parent:hover .child{
background:#000
}

부모태그(parent)에게 hover 시 자식태그(child) 의 background color 가 바뀌는 css

이를 react 의 styled component 에서 사용시

const Child = styled.div`
  width:50px;
  height:50px;
  background:#fff;
`

const Parent = styled.div`
  width:300px;
  height:300px;
  background:#eee;
  
  &:hover ${Child}{
  background:#000;
  }
`;

SCSS 식으로 작성 가능하다.

위와같이 다른 styled component 를 참조할 수 있다.

[VSCODE]eslint 쌩 쑈를 해도 안먹던 eslint가..

빛장 — Wed, 8 Apr 2020 22:47:30 +0900

글로벌 설치 후 eslint가 적용이 안되더라.

무슨 짓을 해도 안됐다.

경로가 바탕화면의 a 라는 폴더에 front 와 back 을 나누었고

front 에 npm 을 init 하고 그 안에서 eslint 를 설치했고 글로벌로도 설치했다.

바탕화면

| ＼

front back

(npm)

이렇게 되어있었던건데..

front 에서 next 가 실행되고 있었고

뭘해도 eslint 가 교정을 해주지 않길래... 뭘해야하나 싶었는데

setting.json 에서

    "eslint.workingDirectories": [

        "front"

    ]

이놈으로 경로를 설정해주니까 그제서 되더라.........

에러메세지를 잘 봤어야하는데 ㅠ

[Node.js]express, mongoDB, mongoose 를 통한 게시판 구현

빛장 — Mon, 30 Mar 2020 18:14:31 +0900

이전에 작성한 회원가입 구현 파일을 그대로 사용하여

게시판 구현도 해보려 한다.

우선 구현할 기능은 정말 간단한 게시판이고 로그인된 상태로만 글쓰기가 가능하게 만들것이다.

우선 템플릿의 수정과 생성이 필요하다.

									//header.pug

    .header__colume
        a(href="/notice") 게시판
       
       
									//mixins/post.pug
 
 mixin post(video = {})
    a(href=`/notice/${video.id}`)=video.title
    if video.description
        p=video.description
       
       
									//notice.pug
 
extends layout/main
include mixins/post

block content
    a(href="/posting") 게시물 작성
    ul
        each posting in postList
            li
                +post({
                    title:posting.title,
                    id:posting._id
                })
 
									//postDetail.pug

extends layout/main
include mixins/post

block content
    h1=postList.title
    p=postList.description

									//posting.pug
                                    
extends layout/main
include mixins/post

block content
    form(action=`/posting`, method="post")
        input(type="text", name="title", placeholder="제목")
        textarea(name="description", placeholder="Description")
        input(type="submit", name="submit")

1. 헤더에 게시판으로 갈 수 있는 a 태그를 만들어 줬다.

2. 게시판은 notice.pug 템플릿이다.

3. 게시판에 글은 mixin 으로 post.pug 템플릿을 사용한다.

4. 해당 게시물을 클릭하면 postDetail.pug 가 렌더된다.

5. 게시글 작성은 posting.pug 에 있는 form 을 통해 method post 로 submit 된다.

사실 mixin 을 사용해서 post와 postDetail 을 같이 쓸 수 도 있었는데

만들고 나서 생각났다...

템플릿은 준비되었으니 라우터를 만들어 본다.

기존에 쓰던 globalRouter 가 있어서 따로 만들려 했지만 또 귀찮아서

그냥 한꺼번에 쓰기로 한다. 이럴꺼면 굳이 왜 이름을 globalRouter로 지었는지..

globalRouter.get("/notice", getNotice); //게시판 접근시

globalRouter.get("/postnotice", getPosting); //게시글 작성 화면에 접근시
globalRouter.post("/postnotice", postPosting); //게시글작성 후 submit 되었을시

globalRouter.get("/notice/:id", postDetail); //게시글을 클릭시

이제 라우터에 맞는 컨트롤러를 만들어보자.

export const getNotice = (req, res) => {};

export const getPosting = (req, res) => {};
export const postPosting = (req, res) => {};

export const postDetail = (req, res) => {};

이렇게 된다.

이제 필요한건 mongoose를 이용해 DB에 들어갈 모델을 만들어 준다.

//Post.js

import mongoose from "mongoose";

const PostSchema = new mongoose.Schema({
  title: {
    type: String,
    required: "title is required"
  },
  description: {
    type: String,
    required: "description is required"
  },
  createdAt: {
    type: Date,
    default: Date.now
  },
  comments: [
    {
      type: mongoose.Schema.Types.ObjectId,
      ref: "Comment"
    }
  ],
  creator: {
    type: mongoose.Schema.Types.ObjectId,
    ref: "User"
  }
});

const model = mongoose.model("Post", PostSchema);
export default model;

크게 이렇게 필요할 것 같다. 코멘트를 달 수 있게 만들(예정)것 이고 작성자도 구분할 수 있었으면 좋겠어서

Schema는 이정도 만들었다.

모델도 생겼겠다 이제 다시 컨트롤러 작업을 시작해 본다.

우선 작성된 게시글이 있을때 게시판에 넘겨주는것부터 시작한다.

export const getNotice = async (req, res) => {
  const postList = await Post.find({});
  res.render("notice", { postList });
};

Post.find 는 Post 안에 있는 모든 정보들을 꺼내줄 것이고 그것을 postList 라는 변수에 담아 게시판 템플릿으로 전달한다. 앞서 템플릿에서는 이미 postList 를 받아서 그릴 준비가 되어있으므로 이름만 맞춰주면된다.

이제 게시물 작성부분을 작업해보자.

우선 게시글 작성 템플릿을 렌더해줄 get 을 먼저 만든다

export const getPosting = (req, res) => {
  res.render("postnotice");
};

getPosting 은 그저 게시글 작성 폼을 렌더하는 역할이므로 이게 전부이다.

이제 form 에서 submit되었을때 즉 post 되었을때를 작성해준다.

export const postPosting = async (req, res) => {
  const {
    body: { title, description }
  } = req;

  const newPosting = await Post.create({
    title,
    description,
    creator: req.user.id
  });

  res.redirect("/notice");
};

이전에 설치했던 미들웨어인 body-parser 에 의하여 submit 되었을시

form 에 입력했던 정보들을 쉽게 조회할 수 있는데

이를 구조분해 할당으로 필요한 정보만 뺀다.

이제 mongoDB에 데이터를 만들 수 있게 이전에 작성했던 모델에 양식 맞춰서

Post.create 를 이용하여 작성해 준다.

뭔가 말이 어려운데 그냥 폼에서 넘어온 정보를 미리 지정해놓은 서식에 맞춰서

꾸민다음에 DB에 넘기는것 쯤으로 생각하면 될것같다.

이후 res.redirect 를 이용해 게시판 처음화면으로 이동하도록 해준다.

작성한 게시물로 이동하게 하려면

res.redirect(`/notice/${newPosting.id}`);

redirect 부분을 요런식으로 바꿔주기만 하면된다. 쉽다 쉬워

(라우터를 만들때 /notice/:id 로 만들어놨기때문에 해당 게시물의 id가 무엇이든 이렇게 연결되는것)

근데 이렇게하고 테스트하면 해당 url에 대한 컨트롤러를 아직 만들지 않았기때문에

무한로딩 혹은 에러가 날것이다.

얼른 만들어 주자

export const postDetail = async (req, res) => {
  const {
    params: { id }
  } = req;

  const postList = await Post.findById(id)
  res.render("postDetail", { postList });
};

여기서 params 란 express route parameter를 이용해 추출 할 수 있는 것인데,

앞서 라우터를 말할때 /notice/:id 이것을 예로 들어보면

express 에서 url 에 :id 라고 작성했다면 콜론 뒤에 id 가 key값이 되는 것 이다.

때문에 req.params 를 콘솔에 출력해보면 { "id":"dqwdd12312fqwe" } 이런식으로 출력되어진다.

id 가 아니라도 어느 이름이건 상관없이 작명한대로 불러올 수 있다.

내가 작성한게 key값이 되어지고

실제 그 자리에 들어가는 정보가 value가 되는 것 이다.

때문에 실제로는 게시글의 DB id가 그 자리에 들어갈꺼고 그 실제 id 를 가지고

findById 를 통하여 DB내에서 조회하여 찾아내고 그놈을 변수에 담아

템플릿에 전달한다.

그럼 아주 쉽게 이런 게시판을 만들 수 있다.

이제 미들웨어를 하나 만들고 로그인한 사람만 게시물을 작성 할 수 있게 만들어본다.

middleware.js 에 아래처럼 하나 만들어준다.

export const private = (req, res, next) => {
  if (req.user) {
    next();
  } else {
    res.redirect("/");
  }
};

passport 에 의하여 현재 로그인한 사용자의 정보를 어디서든 req.user 로 조회할 수 있기 때문에

가능한 일이다.

이렇게 만약 현재 사용자가 로그인 되어져있다면 다음 작업을 실행하고 아니라면 홈으로

redirect 되도록 만들어주고

globalRouter.get("/posting", private, getPosting);

이렇게 가운대에 꽂아주면 된다.

다음은 코멘트기능과 스타일링을 좀 해봐야 겠다.

[Node.js] 회원가입 구현(로그인,로그아웃,회원가입,passport, Mongo Store)

빛장 — Mon, 23 Mar 2020 18:17:01 +0900

Passport

로컬 로그인 뿐만아니라 소셜 로그인에서까지 쉽게 인증이 가능한 미들웨어이다.

http://www.passportjs.org/

Passport.js

Simple, unobtrusive authentication for Node.js

www.passportjs.org

** mongoDB 와 mongoose 를 사용하고 있는 환경에서, 보다 쉽게 passport 를 이용한 사용자 인증이 가능하도록 만들어주는 플러그인인

passport-local-mongoose 를 사용한다. 이는 기본적인 설정을(패스워드 확인 등) 미리 다 구성해놓았기때문에

편리하다.

https://github.com/saintedlama/passport-local-mongoose

saintedlama/passport-local-mongoose

Passport-Local Mongoose is a Mongoose plugin that simplifies building username and password login with Passport - saintedlama/passport-local-mongoose

github.com

회원가입, 로그인 구현

준비사항

1. 로그인과 조인을 위한 템플릿

//main 템플릿
    
    Doctype <!DOCTYPE html>
	html(lang="en")
    head
        meta(charset="UTF-8")
        meta(name="viewport", content="width=device-width, initial-scale=1.0")
        title Document
    body
        include ../partials/header
        block content
    
    
//home 템플릿
    
	extends layout/main

	block content
	h1 로그인을 해보자
    
    
//join 템플릿
   
   form(action="/join", method="post")
            input(type="text", name="name", placeholder="Full Name", required=true)
            input(type="email", name="email", placeholder="Email", required=true)
            input(type="password", name="password", placeholder="Password", required=true)
            input(type="password", name="password2", placeholder="Verify password", required=true)
            input(type="submit", value="Join now")
            
            
//login 템플릿
   
           form(action="/login", method="post")
            input(type="email", name="email", placeholder="Email", required=true)
            input(type="password", name="password", placeholder="password", required=true)
            input(type="submit", value="Log in")

2. 몽고db, 몽구스가 설치되어있고, db.js 도 구성되어있어야함.

2020/02/29 - [Study/script.js] - [full]mongoDB, mongoose

[full]mongoDB, mongoose

mongoDB = NoSQL Databass mongoose = mongoDB와 자바스크립트를 연결 시켜줌 장점 - 적은 규칙과 절차가 간편하게 작업이 가능한 데이터 베이스 이다. 1. mongoDB 다운로드 https://www.mongodb.com/cloud/atlas/..

andwinter.tistory.com

3. 라우터와 컨트롤러의 준비

//라우터

globalRouter.get("/join", getJoin);
globalRouter.post("/join", postJoin, getLogin);

globalRouter.get("/login", getLogin);
globalRouter.post("/login", postLogin);

//컨트롤러

export const getJoin = (req, res) => {
  res.render("join");
};
export const postJoin = (req, res, next) => {};

export const getLogin = (req, res) => {
  res.render("login");
};
export const postLogin = (req, res) => {};

당연한거니까..

회원가입(Join)

우선 User 모델을 만들어준다

이때 passportLocalMongoose 가 쓰이기 때문에 설치해준다.

npm i passport-local-mongoose

import mongoose from "mongoose";
import passportLocalMongoose from "passport-local-mongoose"
const UserSchema = new mongoose.Schema({
  name: String,
  email: String
});

UserSchema.plugin(passportLocalMongoose, { usernameField: "email" });

const model = mongoose.model("User", UserSchema);

export default model;

여기서 passportLocalMongoose의 usernameField 는 사용자의 이름이 어떤놈이 될지를 정하는 것이다.

이렇게 세팅해놓으면 알아서 passportLocalMongoose 가 패스워드 인증이라던지 회원 이름의 변경이라던지 잡다한 일들을 알아서 해줄것이다.

이후에 passport를 설치해준다.

npm i passport passport-local

passport 와 passport-local 둘다 설치해준다.

그리고 passport.js 를 상위 디렉토리에 생성한뒤

import passport from "passport"
import User from "./model/User"

passport.use(User.createStrategy())

passport.serializeUser(User.serializeUser());
passport.deserializeUser(User.deserializeUser());

위와같이 적는다.

여기서 createStrategy() 란 passportLocalMongoose 의 메소드로

passport-local 의 LocalStrategy 인스텐스를 만든다(원래는 조금더 귀찮고 복잡한 passport의 과정이지만 passportLocalMongoose 에의해 한줄로 구현가능하다.

serializeUser, deserializeUser 또한 마찬가지로 serialization 은 현재 브라우저의 유저에 대하여 어떠한 정보를 쿠키가 가질수 있는가 를 의미(보안상의 이유로 user.id 만을 넘겨주길 권장) 하며(쿠키에 어떤 필드만을 넘겨 저장시킬것인가) deserialization 은 쿠키의 정보를 통하여 어떻게 유저를 찾을것인가 를 의미한다.

원래는 직접 설정해 주어야 하지만 이역시 passportLocalMongoose 에 의하여 간단하게 위처럼 작성 가능하다.

이제 컨트롤러 부분(postJoin)을 수정한다.

import User from '../model/User';
import passport from 'passport';

export const postJoin = async (req, res, next) => {
  const {
    body: { name, email, password, password2 }
  } = req;
  //body-parser 에 의하여 request 에서 폼의 데이터를 가져올수 있다.
  
  if (password !== password2) { //입력한 두 패스워드가 일치하지 않다면
    res.render("join"); //다시 가입화면으로 돌려보낸다.
  } else { //만약 일치하다면
    try {
      const user = await User({ //model 에 등록된 User 스키마에 맞추어 객체 생성
        name,
        email
      });
      await User.register(user, password); //mongoDB에 등록
      next(); //다음으로 넘김(login 화면으로)
    } catch (error) {
      console.log(error);
      res.redirect("/"); //실패할 경우 홈으로 redirect
    }
  }
};

postJoin 즉 사용자가 가입 양식을 모두 채워 post 했을때

1. body-parser 에 의하여 폼의 데이터가 넘어온다

2. 사용자가 입력한 폼의 데이터중 password 가 일치한지 검사한다.

3. 일치하지 않다면 join 화면으로 돌려보내고 일치하다면

4. mongoose 의 model 안에 있는 User Schema 에 맞추어 object 를 생성한다.

4-1.여기서 Model() 과 Model.create() 의 차이는 객체만 만드는지 객체를 생성후 db에 저장까지 할 것인가의 차이이다. 여기서 create 를 한다면 register 전에 이미 db에 등록되어버려 이미 사용자가 등록되어있다는 오류가 뜨게 되기 때문에 Model() method 를 사용한다.

5. User.register를 이용해 db에 사용자를 등록한다.

6. 이후 next() 를 이용해 다음 컨트롤러가 작동하게 만든다.(postLogin)

6-1. 만약 error 가 있다면 에러메세지를 출력후 home 으로 이동한다.

이제 join 을 통해 회원가입을 진행하면

mongoDB에서 방금 가입한 회원을 확인 할 수 있다.

로그인(Login)

postJoin 에서 회원가입이 이루어진 뒤, next 를 통해 다음으로 넘기게 했었는데,

라우터에서 그 다음이 무엇인지를 설정해준다.

globalRouter.post("/join", postJoin, postLogin);

이 다음은 postLogin 이다.

postJoin 은 next 를 가진 미들웨어로써 자신이 사용한 정보를 다음으로 넘겨줄 수있는데

그 정보를 postLogin 에서 받아서 사용자를 로그인 시키게 될 것이다.

우선 userController 에서 passport 를 import 해준뒤,

아래처럼 코드를 작성한다.

import passport from "passport";

//중략

export const postLogin = passport.authenticate("local", {
  failureRedirect: "/login",
  successRedirect: "/"
})

passport.authenticate() 기본적으로 userName 과 password 를 찾아보도록 설정되어있고,

passport-local 의 인증을 실행하고 이후 인증이 성공했을때의 redirect 와 실패했을때의 redirect 를 설정 할 수 있다.

나 같은경우는 인증이 성공했을때 홈으로, 실패했을때는 다시 로그인 화면으로 가게 구성했다.

그리고 app.js로 가서

import passport from "passport";
import "./passport";


//미들웨어 마지막에
app.use(passport.initialize());

이렇게 passport 를 임폴트 하고 미들웨어의 맨 마지막에 passport.initialize() 를 붙여준다.

initialize 는 passport 를 초기화시키고 구동시키는 역할을 한다. 이놈이 없다면 오류가 뜬다.

이후 회원가입을 시도해보자.

그럼 홈화면으로 이동될텐데, 이는 postLogin 에서 인증이 성공했을때 successRedirect를 이용해 홈으로 가게 했기 때문이다.

근데좀 뭔가 로그인이 된지 안된지 모르겠고 꺼림칙하니 템플릿과 미들웨어를 추가하여 로그인 되었는지를 확인해 보자.

우선 미들웨어를 작성한다.

middleware.js 파일을 만들고(귀찮다면 app.js에 직접 작성해도 된다.)

export const localMiddleware = (req, res, next) => {
  res.locals.user = req.user || null;
  console.log(req.user);
  next();
};

위처럼 작성한다.

기본적으로 passport 는 인증이 성공하면 req.user 에 인증성공한 사용자의 정보를 어느 라우터에서든 반환하게 된다.

때문에 console.log(req.user) 을 사용하면 현재 로그인한 사용자의 정보를 조회할 수 있다.

이제 템플릿에서 user 을 사용하여 홈화면에 출력되는 로그인을 해보자!! 를 로그인 되었다!! 로 바꾸도록 할것이다.

extends layout/main

block content
    if !user
        h1 로그인을 해보자
    else
        h1 로그인이 되었습니다!!!

if else 문을 사용하여 미들웨어에서 보내주는 user에 대한 정보가 있다면 로그인이 되었습니다! 를 출력하도록 바꿔준다.

이 후 가입했던 아이디와 비밀번호로 로그인을 해보자.

홈으로 redirect 되긴 하지만, 메세지가 바뀌질 않는다. 이는 req,user 가 존재하지 않는다는 뜻이다.

이는 세션에 사용자에 대한 정보가 담긴 쿠키가 없기 때문이다. 그렇기 때문에 passport.session 이라는 놈이 필요하고, 또 express-session 이라는 패키지가 필요하다.

npm i express-session

으로 패키지를 설치한 뒤, app.js 에서 아래와 같이 세팅해준다.

import session from "express-session";

//중략

app.use(
session({
      secret: "dwdasjfu123@#@fc",
      resave: true,
      saveUninitialized: false
    })
  );
app.use(passport.initialize());
app.use(passport.session());

//생략

express-session 의 secret 는 특정 문자열을 이용하여 사용자의 정보를 암호화한 후 쿠키에 저장하게된다.(필수 옵션)

그리고 passport.session() 은 로그인상태가 유지될 수 있게 만들어 준다.

이렇게까지 해주면 다른 라우터로 이동하여도 쿠키에 저장된 사용자의 정보를 passport가 매번

deserialize 하며 로그인 상태를 유지시킬 수 있게 한다.

이제 확인해 보면,

쿠키가 저장되고 메세지도 바뀌는걸 볼 수 있다. 즉 로그인 된 상태라는걸 알 수 있다.

또한 콘솔로그에서

로그인한 사용자의 정보를 확인할 수 있다(req.user)

로그아웃(Log out)

로그아웃은 생각보다 간단하다.

req.logout() 을 이용하면 된다. 이는 passport 에서 권장하는 방법이란다.

하지만.. 쿠키가 지워지지 않는다. 또 어디서보니 세션이 완전히 지워지지 않는다는 얘기가 있기때문에

req.session.destroy 를 이용하여 세션도 파괴하고 남는 쿠키까지 지워보자.

export const logout = (req, res) => {
  req.logout(); //사용자 로그아웃
  req.session.destroy(() => { //세션 파괴
    res.clearCookie('connect.sid'); //쿠키 삭제
    res.redirect('/'); //홈으로 redirect
});
};

Session Store

이제 마지막으로 세션의 정보를 서버가 재실행되었을때도 사용자의 로그인정보가 그대로 남아있도록 만들어 보자.

일단 지금까지 한 상태로 로그인을하고 서버를 재실행 시켜보자.

로그인이 해제된다. 이는 세션이 날라가버리는것이다.

이를 해결하기 위하여 connect-mongo 를 이용할 것이다.

세션 스토어 라는 개념은 세션이 데이터를 저장하는 곳으로써 기본값은 memory store 이다.

memory store 는 기본적으로 휘발성으로서 서버가 재실행되면 세션이 날라가버린다.

이를 Mongo store 로 하여, DB에 세션 저장소를 만들고 아무리 서버가 재실행 되더라도

로그인정보가 유지되도록 만들어 본다.

필요한 것으로 connect-mongo 가 있다.

npm i connect-mongo

로 설치해준다.

app.js 에서 설치한놈을 import 하고 mongoose 도 import 한다.

https://github.com/jdesboeufs/connect-mongo

jdesboeufs/connect-mongo

MongoDB session store for Express. Contribute to jdesboeufs/connect-mongo development by creating an account on GitHub.

github.com

connect-mongo 의 사용법에 따라서 한다.

import mongoose from "mongoose"
import MongoStore from "connect-mongo"

const Store = MongoStore(session)

app.use(
    session({
      secret: "dwdasjfu123@#@fc",
      resave: false,
      saveUninitialized: false,
      store:new Store({mongooseConnection:mongoose.connection})
    })
  );

session 부분에 store 까지 추가하고나면 이제 서버가 재실행되더라도 로그인상태가 유지된다.

[error]node_modules\path-to-regexp 에러(Cannot read property 'length' of undefined)

빛장 — Thu, 19 Mar 2020 23:18:58 +0900

 path = ('^' + path + (strict ? '' : path[path.length - 1] === '/' ? '?' : '/?'))
                                                ^

TypeError: Cannot read property 'length' of undefined
    at pathtoRegexp (D:\wetubeStudy\node_modules\path-to-regexp\index.js:63:49)
    at new Layer (D:\wetubeStudy\node_modules\express\lib\router\layer.js:45:17)
    at Function.route (D:\wetubeStudy\node_modules\express\lib\router\index.js:494:15)
    at Function.get (D:\wetubeStudy\node_modules\express\lib\router\index.js:509:22)
    at Object.<anonymous> (D:\wetubeStudy\routers/apiRouter.js:7:11)
    at Module._compile (internal/modules/cjs/loader.js:1158:30)
    at Module._compile (D:\wetubeStudy\node_modules\pirates\lib\index.js:99:24)
    at Module._extensions..js (internal/modules/cjs/loader.js:1178:10)
    at Object.newLoader [as .js] (D:\wetubeStudy\node_modules\pirates\lib\index.js:104:7)
    at Module.load (internal/modules/cjs/loader.js:1002:32)
    at Function.Module._load (internal/modules/cjs/loader.js:901:14)
    at Module.require (internal/modules/cjs/loader.js:1044:19)
    at require (internal/modules/cjs/helpers.js:77:18)
    at Object.<anonymous> (D:\wetubeStudy/app.js:15:1)
    at Module._compile (internal/modules/cjs/loader.js:1158:30)
    at Module._compile (D:\wetubeStudy\node_modules\pirates\lib\index.js:99:24)

위같은 에러내용은

정의되지 않은 경로로 get이나 post 를 할때 발생한다.

발생한 과정

apiRouter.get(routes.registerView, postRegisterView);

이게 맞는데

apiRouter.get(routes.postRegisterView, postRegisterView);

이렇게 써서 에러가 났슴.

[full]mongoDB, mongoose

빛장 — Sat, 29 Feb 2020 19:26:26 +0900

mongoDB = NoSQL Databass

mongoose = mongoDB와 자바스크립트를 연결 시켜줌

장점 - 적은 규칙과 절차가 간편하게 작업이 가능한 데이터 베이스 이다.

1. mongoDB 다운로드

https://www.mongodb.com/cloud/atlas/lp/general/try?utm_source=google&utm_campaign=gs_apac_south%20korea_search_brand_atlas_desktop&utm_term=mongodb&utm_medium=cpc_paid_search&utm_ad=e&gclid=Cj0KCQiAtOjyBRC0ARIsAIpJyGMvYxKQniYgoFDGes0ZPNVUgX9b0MbFRK0-Z3AWieqZ5OFsul7we-gaAvPJEALw_wcB

MongoDB

MongoDB Atlas Cloud-hosted MongoDB service on AWS, Azure, and GCP. Deploy, operate, and scale a MongoDB database in just a few clicks. Trusted by thousands of companies, from startup to enterprise “With MongoDB Atlas, time is being spent on development and

www.mongodb.com

2. 실행해보기

vsc 터미널에서 mongod => mongo 실행

실행이 안된다면 아래 과정 실행

1. [내컴퓨터] 우클릭 > [고급시스템설정] > [환경변수(N)]

2. 시스템변수 리스트 중 'Path'를 선택하고 편집을 선택한 후 'Mongodb의 설치경로￦bin'을 추가

3. vscode 재실행 후 터미널에 'mongod'입력

3. db.js 에 연결시키기

import mongoose from "mongoose";

mongoose.connect("mongodb://localhost:포트번호/Databass이름", {
   useUnifiedTopology: true,
  useNewUrlParser: true
});

const db = mongoose.connection;

const handleOpen = () => console.log("Connected to DB");
const handleError = error => console.log(`error on DB connection:${error}`);

db.once("open", handleOpen);
db.on("error", handleError);

useNewUrlParser, useUnifiedTopology는 이걸 안적고 실행해보면

mongoose에서 자꾸 에러를 뱉는데(아래같은)

즉 이놈은 사용되지 않고, 신버전에서 제거될꺼다. 사용하려면 추가해라. 이런느낌이다.

경고가 자꾸 뜨니까 추가해준다.

export 되어질 mongoose.connection 를 만들고 거기에

서버가 연결되었을때 메세지를 출력하는 함수와 에러가 났을때의 메세지출력 함수를 만들어

.once와 .on 으로 적어준다.

여기서 once와 on 은 mongoose 의 Quick start 가이드에 설명되어있다

.https://mongoosejs.com/docs/index.html

Mongoose v5.9.2: Getting Started

Getting Started First be sure you have MongoDB and Node.js installed. Next install Mongoose from the command line using npm: $ npm install mongoose Now say we like fuzzy kittens and want to record every kitten we ever meet in MongoDB. The first thing we ne

mongoosejs.com

[string]문자열 정렬(split, sort, reverse)

빛장 — Wed, 26 Feb 2020 22:47:00 +0900

1. split()

2020/02/26 - [Study/script.js] - [string] split - 문자열 분할

[string] split - 문자열 분할

문자열 분할 메소드 예시 const splitString = (e) => { const split = e.split(' ') return split } console.log(splitString('가나 다라 마바 사')) // ["가나", "다라", "마바", "사"] split의 인자로 어느 기..

andwinter.tistory.com

2.sort()

배열의 정렬이 가능하다.

기본 오름차순 정렬인데, 아래처럼 쓸 수 있다.

let a = ["c", "d", "a"]

console.log(a.sort())

//["a","c","d"]

3. reverse()

배열 뒤집기.

위의 정렬된 배열에 reverse를 쓰면

let a = ["c", "d", "a"]

console.log(a.sort().reverse())

//["d", "c", "a"]

이렇게 반전된다.

예제

입력되는 문자열을 내림차순으로 정렬

const arrSort = s => {
   let a = s.split('').sort().reverse().reduce((a,b) => a+b)
   console.log(a)
}

arrSort("ceasgwZ")



// "wsgecaZ"

1. 들어온 문자열을 쪼개어 배열로 만든다.(split)

2. 오름차순으로 정렬한다.(sort)

3. 반전시킨다(reverse)

4. 문자 하나하나 들어가있는 배열을 합친다.(reduce)

[string] split - 문자열 분할

빛장 — Wed, 26 Feb 2020 19:26:51 +0900

문자열 분할 메소드

예시

const splitString = (e) => {
  const split = e.split(' ')
  return split
}

console.log(splitString('가나 다라 마바 사'))

// ["가나", "다라", "마바", "사"]

split의 인자로 어느 기준을 가지고 분할 할 것인지(위에서는 공백=스페이스바)를 첫번째로 받고

두번째 인자로는 분할 개수를 정한다.

만약 위 코드를 두번째 인자를 주어 아래처럼 변경하면

const splitString = (e) => {
  const split = e.split(' ', 2)
  return split
}

console.log(splitString('가나 다라 마바 사'))

// ["가나", "다라"]

위와같은 결과가 나온다.

[배열] 배열과 배열을 비교하여 한쪽에 없는값 찾기.

빛장 — Wed, 26 Feb 2020 19:11:30 +0900

const arrFunction = (participant, completion) => {
  var arr = [];
  
  participant.forEach(element => {
  let name = completion.indexOf(element);
  if(name === -1){
  arr.push(element);
  }
  });
  
  return arr;
  }

  console.log(arrFunction(["ee", "aa", "cc"], ["ee"]))
  
  //결과 ["aa", "cc"]

배열 completion 을 전체배열 participant 에 비교하여 가지고 있지 않은 배열만을

반환하는 문제이다.

우선 전체배열에서 값을 순서대로 빼와서(forEach) 그 값이 completion 에 있는지

indexOf 로 검사한다.

만약 대상이 없다면 -1 을 반환할 것이고 -1이 반환된 element는 answer 배열에 push 한다.

[express] View - PUG

빛장 — Mon, 24 Feb 2020 23:52:40 +0900

express 로 서버를 만들고 해당 주소로

request 가 들어왔을때 response 를 주는 방법은 저번 글에서도 작성했듯

기본형은 아래와 같다.

app.get("/join", (req, res) => res.send("join"))

이 응답은 단순히 화면에 join 이라는 문구만 출력되게 된다.

우리가 어떠한 요청이 들어와서 특정 화면을 그리고싶을때,

express 에서는 템플릿엔진을 설치하여

렌더링을 할 수 있다.

http://expressjs.com/ko/guide/using-template-engines.html

Express와 함께 템플리트 엔진 사용

Express와 함께 템플리트 엔진을 사용 Express가 템플리트를 렌더링하려면 다음과 같은 애플리케이션 설정이 필요합니다. views, 템플리트가 있는 디렉토리. 예: app.set('views', './views') view engine, 사용할 템플리트 엔진. 예: app.set('view engine', 'pug') 이후 그에 맞는 템플리트 엔진 npm 패키지를 다음과 같이 설치하십시오. $ npm install pug --save Express

expressjs.com

npm i pug 로 pug 를 설치해 준 뒤,

app.set('view engine', 'pug');

위의 명령을 작성하여 모듈을 불러온다.

이다음 기본적으로 view engine 은 views 폴더를 기본 경로로 인식하기때문에

package.json 이 있는 경로에 views 폴더를 생성후 안쪽에 pug 문서를 작성한다.

이제 요청에대한 응답으로 해당템플릿을 렌더하려면

app.get("/join", (req, res) => res.render("join"))

이런식으로 작성하면 된다. 안쪽에 join은 알아서 views 폴더안에서

동일한 이름의 템플릿을 찾아서 렌더링 해주게 된다.

[express] router

빛장 — Sat, 22 Feb 2020 00:40:44 +0900

express router

//index.js

import express from "express";

app.listen(3000);

app.get("/", (req, res) => res.send("Hi from home"));

// http://localhost:3000 으로 GET 되면 response 로 Hi from home 메세지 출력

조각조각 분할하여

route, router, controller 로 나눌 수 있다.

// routes.js

const HOME = "/"

const routes = {
home:HOME
}

export default routes

// controller.js

export const home = (req, res) => res.send("Hi from home")

// homeRouter.js

import express from "express"
import routes from "routes"
import { home }  from "controller"

const homeRouter = express.Router();

homeRouter.get(routes.home, home)

//index.js

import express from "express";
import routes from "routes";
import homeRouter from "homeRouter";

app.listen(3000);

app.use(routes.home, homeRouter);
//router 를 쓸때는 app.use 로 사용함
//여기서 homeRouter 로 연결되고 라우터에서 컨트롤러로 연결

[자바스크립트] 한글 깨짐문제

빛장 — Fri, 14 Feb 2020 23:08:04 +0900

문제

평범하게 문서를 작성할때

meta 태그로 UTF-8 을 설정하면

한글이 깨지지 않고 잘 나온다. 다만,

이번에 겪은 문제는 현재 문서의 주소를 가져와서

콘솔에 찍으려 했을때 한글이 깨지는 문제였다.

http://localhost:3000/category#뷰티

위와같은 주소였고 나는 해쉬가 붙은 저 뷰티라는 부분을

추출하고 싶었다.

해서 작성한 코드는 아래와 같다.

    const address = document.location.hash;
    console.log(address)

하지만 이렇게 하고 실행해보면

한글이 깨진다. ( #%EB%B7%B0%ED%8B%B0 ) 이렇게.

해결

이때 아래와 같이 변환해주면 정상적으로 출력된다.

console.log(decodeURI(address))

참고

escape / unescape

encodeURI / decodeURI

encodeURIComponent / decodeURIComponent

[자바스크립트]indexOf, findIndex

빛장 — Sun, 9 Feb 2020 00:35:01 +0900

1. indexOf

let e = ["a", "b", "b", "b", "c"]
e.indexOf("b")
// 1

일반 배열안에서 값 찾아서 인덱스 번호 반환

2. findIndex

let Arr = [{name:"aa", id:4},{name:"aa", id:2},{name:"aa", id:3},{name:"aa", id:4}]
Arr.findIndex(i => i.id == 2)
//1

배열안의 객체에서 특정값을 조회하여

인덱스 번호를 반환

[자바스크립트] map

빛장 — Mon, 3 Feb 2020 23:00:02 +0900

배열에 담긴놈들을 하나하나 꺼내어 어떠한 작업을 한 뒤 새로운 배열을 반환한다.

여기서 하나하나 꺼내는기능을 활용할 수 도 있고 실제로 새로운 배열이 필요할때도 쓴다.

하나하나 꺼내서 쓰는경우는 리액트에서 많이 썼으므로 따로 언급하지 않고,

새로운 배열을 반환한다는 뜻은

let Arr = [{name:"aa", id:1},{name:"aa", id:2},{name:"aa", id:3},{name:"aa", id:4}]

const newArr = Arr.map((element)=>(element.id))
//newArr 은 [1, 2, 3, 4] 이런 모습의 배열이 된다.

이런것이다.

map으로 각각 객체들을 돌며 그놈들의 id값만 빼내어 새로운 배열을 만들었다.

위를 보면 알 수 있듯이 새로운 배열을 만들어 냈을뿐, 기존 배열을 건드리진 않는다.

[react]조건부 렌더링

빛장 — Thu, 30 Jan 2020 15:44:20 +0900

리턴 부분에

return(
	{state
		?(
			<>
			<div>true</div>
			</>
		)
		:(
			<>
			<div>false</div>
			</>
        )
     }
)

이렇게 삼항연산자를 써서 state 값이 true 냐 false 이냐에 따라서 렌더링하는 방법도 있고

  const rendering = (state) => {
    switch(state){
      case 0:{
          return(
            <Text size="tiny" message style={{ marginTop: "-10px" }}>
                추가할 상품이 존재하지 않습니다.
              </Text>
          )
      }
      case 1:{
        return(
              <div
                style={{
                  position: "relative",
                  display: "flex",
                  flexDirection: "column",
                  alignItems: "center"
                }}
              >
                <Text size="tiny" message>
                  상품이 장바구니에 추가되었습니다.
                </Text>
                <Button subButton>장바구니 바로가기</Button>
              </div>
        )
      }
      case 3:{
        return(
          <Text size="tiny" message style={{ marginTop: "-10px" }}>
              이미 장바구니에 담긴 상품입니다.
            </Text>
        )
    }
    }
  }
  
  
  -----------------------------
  
  
  return({rendering(state)})

이런식으로 분리해주는 방법도 있슴.

[배열, react state]배열안에 객체 중복 파악하기

빛장 — Wed, 29 Jan 2020 03:13:01 +0900

장바구니 담기 기능을 구현하던중

해당 상품이 이미 장바구니에 담겨있는가를 파악해야 했다.

장바구니에담길배열.map(element => {
const id = element.item;
const value = element.value;
비교대상배열.map(elem => {
if(elem.item === id && elem.value === value){
return(console.log(elem, "해당상품이 이미담겨있습니다"))
}else{
return(console.log("unoverLap"))
}})
})

장바구니 담기를 누르면 해당 상품들이 장바구니에 담길 배열에 들어간체로

비교대상배열과 비교가 이루어져 중복된 객체만을 뽑아낸다.

이 상태에서 문제가 있었다. 뽑아내긴 하는데 리턴부분에 스프레드 연산자로

상태값을 변경시키는놈을 넣으니 작동이 이상하게 되는것

(각각 비교해보다가 처음엔 잘 거르고 다음번에 다시 추가를 시키는둥 아무튼 이상함)

  const saveOptions = value => {
    value.map(element => {
      const id = element.itemid;
      const valued = element.value;
      let AA = cartValue.findIndex(i => i.itemid === id && i.value === valued);
      if (AA === -1) {
        setCartValue([...cartValue, element]);
      }else{
        setState(3)
      }
    });
  };

그래서 다음번 수정한 코드는 이렇다.

map으로 장바구니에 추가될 옵션들을 하나씩 뽑아와서 기존 장바구니에 담긴 배열에 있는 객체들과 비교하여 이미 값이 중복되어있다면 거르고(setState(3)) 중복되어있지 않다면 findIndex 가 -1 을 반환해서 if의 true 부분이 실행되게 한것.

하지만 또 문제가 있었다. 하나씩 각각 추가하면 정상적으로 작동하지만, 인자로 들어오는 추가할 옵션(value)이 1개가 아닌경우에는 인자 배열 안의 맨 마지막놈만 추가가 되는것.

그래서 고민하다가 질문글을 올려보았는데 간단한 문제였다.

setCartValue가 비동기적이라 첫번째 map을 돌아서 변경된 상태로 생각해야하는것이 아닌 초기상태 그대로이기 때문..

그래서 마지막 구문을 돌때만 호출이 되고 마지막놈만 추가가 된 것이었다.

  const saveOptions = value => {
    value.map(element => {
      const id = element.itemid;
      const valued = element.value;
      let AA = cartValue.findIndex(i => i.itemid === id && i.value === valued);
      if (AA === -1) {
        setCartValue(cartValue => [...cartValue, element]);
      }else{
        setState(3)
      }
    });
  };

그래서 이렇게 인자를 받게 만들어놓으면 이전 state를 인자로 받아서 처리하게 된다.

다른 방법

map으로 돌며 setState 를 하는 방법은 좋은 방법이 아니라고 한다.

의도치 못한 결과를 만들어 낼 수 있다고..

map보다는 forEach를 사용하고 빈 배열을 선언한뒤

배열안에 push를 하고 반복문이 종료된후 배열을 setState에 넣는방법을

쓰라고 하셨다.

  const saveOptions = value => {
    const newCartArr = []
     value.forEach( element => {
      const id = element.itemid;
      const valued = element.value;
      let ExistenceStatus = customerOrder.findIndex(i => i.itemid === id && i.value === valued);
       if (ExistenceStatus === -1) {
        newCartArr.push(element)
        console.log("장바구니 추가 실행");
      } else {
        setCartState(3);
      }
    });
    handleUpdateCart(newCartArr)
  };

이런식으로 만들었다. 잘되고 이상한 문제들도 다 해결되었다.

굳굳

[context API]기본

빛장 — Tue, 28 Jan 2020 20:42:26 +0900

리덕스와 마찬가지로 글로벌하게 상태관리가 가능하다.

다만 따로 설치하지 않아도 리액트에서 기본으로

지원하는 API기 때문에 호출해서 쓰기만 하면된다.

사용법

예제) 인풋과 텍스트는 형제 컴포넌트이지만 context api를 이용하여

인풋에서 작성한 값을 텍스트가 받아 폰트 크기를 변화시킴.

1. 먼저 글로벌하게 관리할 state를 모아놓을 provider(store)를 만든다.

application_context.js

import React from 'react';
import { createContext, useContext, useState } from 'react';

const Context = createContext(); //createContext 선언

export function ApplicationContextProvider({ children, font: init }) {//관리대상들을 감쌀놈
	const [font, setFont] = useState(init); //글로벌하게 관리할 state

	const value = {
		font,
		setFont
	};

	return <Context.Provider value={value}>{children}</Context.Provider>;
    //children 자리에 감싸질 컴포넌트가 들어올 것
}
export function useApplicationContext() {//형제 컴포넌트에서 context 를 사용할때 쓸놈
	return useContext(Context);
}

app.js

import React from 'react';
import Bro from './components/bro';
import Brotwo from './components/brotwo';
import { ApplicationContextProvider } from './application_context'; //provider 를 불러옴
function App() {
	return (
		<ApplicationContextProvider font={20}> //형제들을 감싸줌
			<Bro />
			<Brotwo />
		</ApplicationContextProvider>
	);
}

export default App;

위와같이 아까 만든 provider로 글로벌한 상태값이 필요한 컴포넌트를 감싸준다.

bro.js

import React from 'react';
import Child from './childBro';

function View() {
	return (
		<div>
			<Child />
		</div>
	);
}

export default View;

조금더 꼬아보려고 bro 안에 child 라는 컴포넌트를 넣었다.

childbro.js

(text)

import React from 'react';
import { useApplicationContext } from '../application_context';

function Child() {
	const { font } = useApplicationContext();

	return <div style={{ fontSize: `${font}px` }}>Child..</div>;
}

export default Child;

그리고 그 안에 child 에선 위와같이 useApplicationContext 를 불러와서 그안의 state 를 가져와서 사용한다.

brotwo.js

(input)

import React from 'react';
import { useApplicationContext } from '../application_context';

function Input() {
	const { setFont } = useApplicationContext();

	const handleChange = ({ target: { value } }) => {
		setFont(value);
	};

	return <input placeholder="fontSize" onChange={handleChange} />;
}

export default Input;

마찬가지로 store에 있는 state 중 setFont 를 불러와서 인풋에서 적히는 값이 state에 전달될 수 있게 만들어준다.

이런식이면 형제간의 state 공유가 가능해 진다.

[warning]Use the `defaultValue` or `value` props on <select> instead of setting `selected` on <option>.

빛장 — Mon, 27 Jan 2020 16:02:44 +0900

    <select
      onChange={handleChange}
      name="selectBox"
      aria-label="옵션선택"
      style={{
        border: "1px solid #eee",
        width: "100%",
        height: "50px",
        color: "#ccc",
        marginBottom: "15px",
        padding: "16px"
      }}
    >
      <option selected disabled style={{ color: "#ccc" }}>
        ---옵션선택---
      </option>
      {(optionValue || []).map((options, idx) => (
        <option key={idx} value={options} style={{ color: "#000" }}>
          {options}
        </option>
      ))}
    </select>

위와같이 selected 를 사용했을시 나타나는 경고이다.

react에서는 selected 를 사용하는 대신 최상위 select 에 defaultValue 를 지정하여

그놈을 맨처음 보이게 할 수 있다.

    <select
      defaultValue="default"
      onChange={handleChange}
      name="selectBox"
      aria-label="옵션선택"
      style={{
        border: "1px solid #eee",
        width: "100%",
        height: "50px",
        color: "#ccc",
        marginBottom: "15px",
        padding: "16px"
      }}
    >
      <option value="default" disabled style={{ color: "#ccc" }}>
        ---옵션선택---
      </option>
      {(optionValue || []).map((options, idx) => (
        <option key={idx} value={options} style={{ color: "#000" }}>
          {options}
        </option>
      ))}
    </select>

요런식으로. disabled 는 선택 안되게 막아주려고 넣음

https://ko.reactjs.org/docs/forms.html

[warning]Nested block is redundant no-lone-blocks

빛장 — Mon, 27 Jan 2020 15:50:14 +0900

  const handleCartValue = () => {
      {selectOption[0] ? setState(true) : setState(false)}
    }

이 과정에서 뜨는 문법 오류(경고)

정상 작동은하지만 짜증나게 노랗게 떠있으니 여간 거슬리는게 아니다.

esLint 쓰면 자동으로 교정해주니 좋지만

이 경우의 오류는 본질적으로 뭘 고치길 원하는 것일까?

그냥 써있는 그대로다. 중첩되어있다는것이니까 풀어주면 사라진다.

	const handleCartValue = () => {
		selectOption[0] ? setState(true) : setState(false);
	};

이런식이나

const handleCartValue = () => selectOption[0] ? setState(true) : setState(false)

이런식으로.

[노드패키지매니져]npm 과 npx 의 차이점

빛장 — Mon, 27 Jan 2020 15:36:44 +0900

NPM(Node Package Manager)

Node.js 에서 사용할 수 있는 모듈을 패키지화 하여 모아둔 저장소같은 개념.

개인이 자신이 만든 패키지를 공개할 수 있으며, 사용또한 쉽다.

보통 npm install -g create-react-app myreact

이런식으로 쓴다. install 대신 i 라고 써도 무방, 편한대로 쓰면 된다.

이렇게 리액트를 npm을 통해 설치하게 되면 온갖것들을 다 끌고와서 react를 설치하게 되고, 그놈들은 계속 컴퓨터에 남아있는 상태가 된다. 또한 버전의 업데이트가 이루어졌을시, 스스로 삭제후 재설치를 해주어야 하는 번거로움이 발생한다.

이때 사용할 수 있는것이

NPX(Npm Package Runner)

이놈을 이용해 create-react-app을 설치할 경우, 무거운 CRA 패키지를 설치하는동안 받아 쓴 후 다시 삭제해준다. 또한 항상 최신의 버전을 이용할 수 있게 된다.

https://helloinyong.tistory.com/177

[자바스크립트 es6]구조분해할당(Destructuring)

빛장 — Wed, 15 Jan 2020 02:15:43 +0900

객체나 배열을 풀어 쓸 수 있다.

배열

const arr = ["a", "b", "c", "d"];

위 배열을 각각의 변수에 담아야 한다고 치자.

원래의 방법이라면

const arr = ["a", "b", "c", "d"];

const first = arr[0];
const second = arr[1];
const third  = arr[2];
const fourth = arr[3];

console.log(first, second, third, fourth)

이렇게 써야 하지만

구조분해할당을 쓰게되면

const arr = ["a", "b", "c", "d"];
const [first, second, third, fourth] = arr

console.log(first, second, third, fourth)

이런 방법으로 써줄 수 있다.

왼쪽부터 차례대로 배열의 순서대로 할당된다.

let a, b, c
[a, b, c] = ["a", "b", "c"];

console.log(a, b, c)

이런식의 할당도 가능하다.

객체

const OBJ = {name:"kim", age:23}

const name = OBJ.name
const age = OBJ.age

console.log(name, age)

기존의 객체에서 값을 빼와서 변수에 담으려면

이렇게 했지만

구조분해 할당을 이용하면

const OBJ = {name:"kim", age:23}

const {name, age} = OBJ

console.log(name, age)

이런식으로 쓸 수 있다.

배열과 다른점은

변수로 지정한 2번째 열에서 객체의 순서대로 변수에 담는것이아닌,

객체의 프로퍼티를 빼는 것이다.

그렇기때문에

const OBJ = {name:"kim", age:23}

const {a, b} = OBJ

console.log(a, b)

이런식으로 쓰면 undefined 를 출력하는것을 볼 수 있다.

중첩된 객체의 경우에는

const event = {
  target:{
    name:"kim",
    age:23
  }
}

const {target : {name}} = event

console.log(name)

이런식으로 꺼내 줄 수 있다.(필요한 부분만 꺼내는것도 가능하기에 위에서 name만 꺼냈다.)

만약 중첩이 여러개 겹친다면

const event = {
  target:{
    name:"kim",
    age:23,
   another:{
      help:{
        memo:{
          listOne:"힘들다"
        }
      }
    } 
  }
}

const {target : {another:{help:{memo:{listOne}}}}} = event

console.log(listOne)

이런 경악스러운 모습이 되지만 아무튼 이렇게도 쓸 수 있다.

[react]useRef 사용

빛장 — Tue, 14 Jan 2020 17:27:08 +0900

리액트를 사용하여 해당 돔에 직접 접근해야할때

useRef 를 사용할 수 있다.

밑은 과격한 예시이다.

기존의 200px 검은 정사각형이 버튼을 누르면 300px 빨간색 정사각형으로 바꾸는 예제이다.

import React, { useRef } from "react"; //1. useRef 를 불러온다

const styled = {
  width: "200px",
  height: "200px",
  background: "black"
};

export default function App() {
  const handleChange = () => {
    colorChange.current.style = "width:300px; height:300px; background:red;"
    //4. 해당 ref 이름과 current 를이용해 직접 조정할 수 있다.
  };

  const colorChange = useRef(); //2. useRef 를 지정해준다.


//3. ref 를 이용해 지정한 useRef를 넣는다
  return (
    <>
      <div ref={colorChange} style={styled} />
      <button onClick={handleChange}>클릭</button>
    </>
  );
  
}