전체 글 (37) 썸네일형 리스트형 [React] gh-pages로 react-router-dom 페이지 업로드할 경우 #gh-pages#react-router-dom 로컬에서 작업하듯이 하고 페이지를 git서버에 올리면 아무것도 없는 흰색 화면이 뜨는 경우가 있다. router의 설정 문제 때문이었다. import { BrowserRouter as Router } from "react-router-dom"; function App() { return ( ); } export default App; 제일 처음 라우터 설정에 basename={process.env.PUBLIC_URL} 설정을 꼭 붙여주자!! [Node] babel-node가 권한 문제로 실행이 안될 경우 #@babel-node sh: /home/ec2-user/폴더이름/node_modules/.bin/babel-node: Permission denied 권한이 없다고 나오는 경우가 있다. $ chmod 755 /home/ec2-user/폴더이름/node_modules/.bin/babel-node 이렇게 권한을 바꿔주면 바로 실행된다!! [MongoDB] 페이징 처리 와 populate #mongoose 보통 게시판에는 쓴 사람의 정보가 들어간다. 그래서 게시판 스키마에는 유저의 ObjectID가 들어가 있다. import mongoose from "mongoose"; const BoardSchema = new mongoose.Schema({ uid: { type: mongoose.Schema.Types.ObjectId, ref: "user"//내 DB에 있는 컬랙션 이름 }, title: { type: String }, content: { type: String }, create_date: { type: Date, default: Date.now }, comments: [ { uid: { type: mongoose.Schema.Types.ObjectId, ref: "user" }, comment: { .. [React] axios 사용하기 #axios 제일 많이 쓰고 있는 axios 사용법을 간단하게 알아보자. 개인적으로 post를 제일 많이 쓰기 때문에 post를 예로 들었다. 서버와의 응답을 주고받는 일이기 때문에 비동기식 처리는 필수!! - 설치 $ npm install axios axios.js import axios from "axios"; export const postLogin = async (email, password) => { try { const response = await axios.post(`http://localhost:4000/login`, { headers: { "Content-Type": "application/x-www-form-urlencoded" }, email: email, password: password }).. [React] Material-ui로 디자인 하기 #@material-ui/core Material-UI: A popular React UI framework React components for faster and easier web development. Build your own design system, or start with Material Design. material-ui.com Material-ui는 나 같은 디자인을 하나도 모르는 개발자에게 단비 같은 존재이다. 아이콘까지 있기 때문에 쉽게 디자인이 가능하다. - 설치 $ npm install @material-ui/core 공식 홈페이지에 있는 Tempate에 있는 소스코드를 참고하면 쉽게 디자인할 수 있다. 나는 class에서 makeStyles을 사용해 디자인을 커스텀 하고 싶었는데 실패했다... 그래서 임시 방편.. [React] ReactJS 페이지 전환 애니메이션 #react-transition-group 설치 $npm install react-transition-group --save 사용법 react-router와 같이 사용했다. App.js import React, { Component } from "react"; import { BrowserRouter as Router } from "react-router-dom"; import Routers from "./Routers"; class App extends Component { render() { return ( ); } } export default App; BrowserRouter로 쓰면 주소창에서 직접 페이지로 접속이 안됐는데 따로 빼서 사용하니까 직접 접속이 된다. (아직 더 알아봐야 함.) 라우터를 이렇게 설정하고 다음으로 넘어가자. Ro.. [React] Ant Design으로 Form 만들기 #antd React로 쉽고 이쁘게 페이지를 만드려고 하다가 찾은 antd. 써보려고 하니 여기저기서 문제가 생겨 이걸 내가 굳이 왜 쓰는거지 라는 생각도 들었지만 일단 열심히 써봤다. Layout 기본적으로 지원하는 레이아웃인데 커스텀하려고 하니 이것저것 꼬이는게 많아서 고생했다. CSS는 아직 너무 어려운 존재다... import { Layout} from "antd"; const { Header, Content, Footer } = Layout; class App extends Component { } 대충 이런식으로 쓰이는데 Footer라고 해서 제일 하단에 붙어있는게 아니였다.... 어짜피 내가 설정해줘야한다. 기본적인 틀만 잡고 Form으로 넘어가자. render() { const { getFieldDe.. [Node] 메일 인증 암호화 #crypto #encoding 이전에 쓴 양방향 암호화 코드를 사용하려고 봤더니 오류가 나서 확인해본 결과 기존에 쓰던 createCipher()와 createDecipher()가 곧 사라질 거라는 소식이 들렸다. 그래서 이번에 새로운 createCipheriv()와 createDecipheriv() 썼는데 아직 잘 모르겠다. 정리하면서 공부해 보자. 알고리즘에는 여러 가지가 있는데 공홈에서는 aes192와 aes-128-ccm정도가 쓰여있었다. 다른 사이트를 찾다가 본 알고리즘이 aes-256-cbc여서 이걸로 해보기로 했다. 256이어서 그런지 key도 256bit가 필요하다. 아니면 오류남... 32글자의 암호키가 필요하다. 여기서는 항상 같은 키로 복호화도 필요하기 때문에 고정값을 사용했다. iv는 처음 보는 녀석이었다. 그래.. 이전 1 2 3 4 5 다음
