JNarin Development Story

안녕하세요. 제이나린 입니다. 오늘은 우측에 있는 사이드 비디오를 만드는 과정을 적어보려고 합니다. 1. SideoVideo 템플릿 만들기 먼저 SideVideo 템플릿을 만들기 위해서는 다음과 같은 경로가 필요하다. VideoDetailPage 폴더 안에 Sections라는 폴더를 만든 후 그 안에 SideVideo.js를 만든다. // src > components > views > VideoDetailPage > Sections > SideVideo.js import React from "react"; function SideVideo() { return ( {/* 이미지 */} {/* 이미지에 대한 정보 */} videoTitle videoWriterName videoViews Time ); } ..

SPA Single Page Application 최초 한번 페이지 전체를 로딩한 이후 부터는 데이터만 변경하여 사용할 수 있는 웹 애플리케이션을 의미한다. SPA단점 앱의 규모가 커지면서 자바스크립트 파일이 너무 커지는 것이다. 페이지 로딩시 사용자가 실제로 방문하지 않을 수 도 있는 페이지의 스크립트도 불러오는데 그로인한 개선방법을 스플리팅(code splitting)을 트래픽과 로딩 속도를 개선할 수 있다. Router 다른 조수에 다른 화면을 보여주는 것으로 자체에 기능이 내장되어 있지는 않다. 그 대신 브라우저의 API를 직접 사용하여 관리하거나 라이브러리를 사용하여 쉽게 구현할 수 있다. 설치하는 방법은 다음과 같이 작성하면 된다. $ yarn add react-router-dom 이 명령어를..

오늘은 서버에 비디오를 업로드하는 공부를 하려 한다. 1. 비디오 Collection 만들기 먼저 서버에 Video.js 모델 기본 세팅을 해준다. 그런 후 필요한 collection을 설정한다. // server > models > Video.js const mongoose = require('mongoose'); const Schema = mongoose.Schema; const videoShema = mongoose.Schema({ writer: { type: Schema.Types.ObjectId, ref: 'User' }, title : { type: String, maxlength: 50 }, description : { type: String }, privacy: { type: Number ..

이전에 조금 어렵게 느껴졌던 React hook를 좀 더 쉽게 설명이 된 자료가 있어서 참고하여 작성을 해보았다. class Components function Components class component의 경우 라이프사이클을 사용을 할 수 있어 성능적인 면은 좋으나, 속도가 느려진다. 반대로 function component의 경우 라이프사이클의 성능은 못쓰지만, 속도는 빠르고 간결한 코드작성이 용이하다. 이를 업그레이드 하기 위해 hook이 탄생하게 된 것이다. React 16.8이 업그레이드 된 후 Hook이 탄생하게 되었다. class Components function Components 여기서 constructor = useState, componentDidMount = useEffect라..

오늘은 리액트의 핵심이라고 할 수도 있는 리덕스를 정리해보았다. 1. 라이브러리 설치 yarn add redux react-redux redux-promise redux-thunk 여러 개를 한 번에 설치하고 싶을 때는 스페이스로 구분을 하여 명령어를 한 번에 할 수 있다. 여기서 redux-promise, redux-thunk는 redux를 오류를 최소화하기 위해 추가적으로 설치하는 middleware다. 2. 리덕스와 어플리케이션을 감싸줄 provider 개선하기 // client > src > index.js // 생략 import {Provider} from 'react-redux'; import 'antd/dist/antd.css'; import { applyMiddleware, createSt..

이 내용은 이미 필자가 많이 알고 있어서 조금 간략하게 정리하고 넘어가려고 한다. 자세한 내용은 다른 블로그를 참고하시길 바라며 추가적으로 또 무언가 알게 될 경우 업데이트를 할 예정이다. 라우터 관리를 좀 더 편리하기 위해 라이브러리를 설치한다. yarn add react-router-dom react-router-dom을 import를 한 후 다음과 같은 코드를 작성한다. // client > src > App.js import React from 'react'; import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom"; import LandingPage from './components/views/LandingPa..

비밀번호는 아무리 판매자라 하여도 사용자의 비밀번호를 보아서도 알아서도 안된다. 그렇기에 비밀번호를 암호화하는 것이 중요하다. 이번에는 bcrypt 패키지를 이용하여 회원가입 시 암호화를 진행하려 한다. 일단 mongoDB를 확인하면 맨 처음 가입 시 테스트했던 것을 확인하면, 비밀번호가 너무 잘 보인다. 그래서 그 부분을 보완하기 위해서 bcrypt패키지를 설치해야 한다. yarn add bcrypt OR npm install bcrypt moduls/User.js ... const bcrypt = require('bcrypt'); const saltRounds = 10; ... userSchema.pre('save', function(next){ // 회원가입할 정보를 저장하기 전에 함수 실행 let..

저번 시간에는 nodemon을 설치함으로써 서버다운 없이 리프레시를 할 수 있는 모듈을 설치하였다. 또한 package에 대해 개발/배포에 따라 구별을 하는 방법을 알았다. 그래서 이번에는 서버 설정을 하다 보면 깃에 올리지 말아야 할 것이 있다. 보완성을 더욱 높이는 방법에 대해 정리를 해보았다. index.js ... const config = require('./config/key'); ... mongoose.connect(config.mongoURI, { useNewUrlParser: true, useUnifiedTopology: true, useCreateIndex: true, useFindAndModify: false // 미사용시 에러발생 }).then(() => console.log('Mo..