티스토리

yuhun do IT

검색하기

블로그 홈

yuhun do IT

jrepository.tistory.com/m

IT를 좋아하고 하고 싶은 게 많은 유훈입니다.

구독자: 2

방명록 방문하기

주요 글 목록

[Node.js] express에서 정적인 파일 불러오는 방법 (이미지 파일) multer를 이용해 이미지를 업로드하고 이를 불러오려고 하는데 그냥 경로를 쓰면 엑스박스가 떠버립니다. 정적인 파일일을 불러오는데 그냥은 불러올 수가 없는데 express에서 제공하는 static을 사용해 해결할 수 있습니다. 따로 모듈을 설치할 필요는 없고 다음과 같이 사용할 디렉토리와 이름을 지정할 수 있습니다. //server.js app.use('/example', express.static('example')) 이제 프론트에서 example폴더의 이미지를 가져온다고 하면 다음과 같은 식으로 불러오는게 가능해집니다. 공감수 0 댓글수 0 2022. 1. 20.
[React] 리액트 img 태그에서 src 사용 (리액트에서 이미지 사용) 그냥 html에서는 img 태그의 src 속성에 이미지 파일의 경로를 주면 사용 가능했다. 하지만 리액트에서는 import 또는 require() 사용해야 경로를 사용할 수 있다. 이걸 몰라서 계속 엑스박스가 떠 한참을 헤멨다.. 1. import 사용 2. require 사용 1. import 사용법 import 원하는이름 from '경로' 이렇게 해주어야 이미지를 가져와 사용할 수 있다. 2. require 사용법 require('경로').default require를 사용하고 .default를 붙여야 우리가 원하는 대로 경로를 가져올 수 있다. default가 없으면 객체를 가져오는 거라 제대로 사용할 수 없다. 공감수 0 댓글수 0 2022. 1. 20.
[JS] 서버에 이미지 보내기 서버와 json으로 통신은 편리하지만 이미지가 들어가면 조금 복잡해진다.. FormData를 이용해 보내야 한다. const handleImage = () =>{ const formData = new FormData(); // FormData 생성 formData.append('multer에서 쓸 이름', event.target.files[0]); // formData는 그냥 콘솔로 안보여서 value 확인하는 방법 // console.log(formData) 하면 아무것도 안나온다. // for (let value of formData.values()) { // console.log(value); // } // 서버에 formData 보내기 const response = await axios.post(.. 공감수 0 댓글수 0 2022. 1. 20.
[Node.js] dotenv로 환경변수 관리하기 중요한 정보가 있으면 깃에는 올리면 안됩니다. 그래서 .env라는 파일을 만들어 변수를 저장해두고 .gitgnore에 추가해 주어야합니다. 그러면 .env를 이용할 수 있는 dotenv를 알아보겠습니다. 패키지 설치 yarn add dotenv 이제 루트 디렉토리에 .env 파일을 생성해줍니다. 그리고 원하는 key=value로 작성하면 되는데 일반적인 문자열처럼 ' ' 안에 작성하는 것이 아닌 그냥 작성하시면 됩니다. // .env IMPORTANT_KET=value값 그대로 이제 value를 사용할 파일에서는 어떻게 사용하는지 알아보면 다음을 추가해주고 process.env.키값 으로 이용합니다. // server.js require('dotenv').config(); cosnt key = proce.. 공감수 0 댓글수 0 2022. 1. 15.
[React] 사용자 구분 인증 컴포넌트 만들기 사용자 권한에 따라 들어갈 수 있는 페이지와 없는 페이지를 제작해 보도록 하겠습니다. 다음은 구현을 위해 가정한 것입니다. 1. 권한을 단순하게 0 , 1 , 2 로 나눴습니다. 2. 유저 정보에 authority 라는 항목을 두어 권한을 부여했습니다. 3. 유저의 권한가 접속 권한보다 더 높거나 같으면 해당 페이지에 접속이 가능합니다. 먼저 app.js에서의 구성은 다음과 같습니다. function App() { // 컴포넌트를 연결시켜줄 함수 const destination = (user) => { return ; }; // 사용자 권한 가정 const user = { authority: '2' }; // router 부분 return( ) } 이제 Auth로 넘어가서 받아온 props로 권한을 비교.. 공감수 0 댓글수 0 2022. 1. 14.
[React] useState의 비동기성 (state를 남발하지 말자!) 오늘은 동기, 비동기 때문에 고생을 좀 했습니다.. useState는 성능때문에 다른 state를 기다렸다가 한꺼번에 render 한다고 합니다. 그래서 이를 간과하고 useState를 남발해서 코드를 짜면 돌이키기 힘든 문제가 발생합니다. 나는 분명 순서대로 잘 짠 것 같은데 생각처럼 동작하지 않는 경험을 할 수 있기에 state는 해당 컴포넌트에서 중요한 변경사항이 있는 값에 사용하도록 합시다. 제가 고생한 예시를 보겠습니다. 다음의 결과가 어떻게 나올까요? // 중간 발췌 const [a, setA] = useState(null); const [b, setB] = useState(null); useEffect(() => { setA('a'); console.log(a, b); setB('b'); c.. 공감수 0 댓글수 0 2022. 1. 14.
[Node.js] 회원가입을 구현하며 map( )을 사용하다가 난 에러 에러명 [ERR_HTTP_HEADERS_SENT]: Cannot set headers after they are sent to the client 회원가입을 구현하다가 마주친 에러인데 찾아보니 response를 여러번 보내려고 할 때 발생한다고 되어있었습니다 보통은 if 문을 사용할 때 그냥 res.~~~ 가 아니라 return res.~를 해주면 해결되는 문제입니다. 하지만 다음 예시에서는 에러가 해결되지 않았습니다. const users = [] app.post('/sign', (req, res) => { const { id, name, passWord, email } = req.body; users.map((user)=>{ if(user.id === id){ res.json({msg:'중복된 아이디.. 공감수 0 댓글수 0 2022. 1. 14.
[JS] axios.get( ) 사용법 get 요청하는 법 params에 원하는 데이터를 담아 보낼 수 있습니다. axios.get('요청 주소', { params: { ex1 : 1, ex2: 2 } }) // .then((res) => { console.log(res.data) }) .catch(() => { logOut(); }); get요청 처리하는 법 req.query.ex1 같은 방법으로 접근해도 되고 다음 예시처럼 { } 안에 요청과 같은 이름을 사용한다면 간편하게 받아올 수도 있습니다. router.get('요청 주소', (req, res) => { const { ex1 , ex2 } = req.query; // res.query에서 params를 접근한다. const data = '반환' res.status(200).json(.. 공감수 0 댓글수 0 2022. 1. 12.
[Node.js] express에서 json 사용 클라이언트와 서버가 데이터를 주고받을때 json이 참 편리합니다. 그런데 그냥을 사용할 수 없고 다음의 코드를 추가해주셔야 json을 사용할 수 있습니다. const app = express(); app.use(express.json()); // json을 사용할수 있게 해줍니다. 전에는 'body-parser'를 설치해서 사용했다는데 지금은 express에서 지원해주니 편리합니다. 이제 요청을 받았을때 다음처럼 json을 넘겨줄 수 있습니다. app.get('/요청', (req, res) => { res.status(200).json({'오브젝트 전달 가능!!'}) }); 공감수 0 댓글수 0 2022. 1. 12.
[React] axios를 사용할때 동기, 비동기 주의하기 axios 라이브러리를 사용하면서 겪은 몇가지 에러 문제입니다. 1. useEffect( )에서는 async 사용 불가 useEffect( ) 안에서는 async를 사용할 수가 없더군요.. 그래서 따로 함수를 분리해 선언해주고 그 함수를 useEffect에 넣어주었습니다. 2. axios를 사용할때 비동기임으로 데이터가 필요하다면 await 사용하기 사실 1번 문제가 2번 때문에 일어났는데요. 다음 예시를 보며 설명드리겠습니다. let a= 'a' axios.get('요청') .then((res)=> { console.log(res.data.a) a = res.data.a //res.data.a 는 'b'라고 가정하자 }) console.log(a) 이렇게 되면 콘솔에는 어떻게 찍힐까요? b가 두번 찍.. 공감수 0 댓글수 0 2022. 1. 12.
[React] react-cookie를 이용해 쿠키 관리하고 로그인 인증하기 react-cookie를 이용해 쿠키를 관리하고 이를 통해 로그인 인증을 하는 방법을 알아보겠습니다. 일단 리액트 훅을 사용할 예정이기에 react-cookie를 설치해 줍니다. yarn add react-cookie 쿠키 훅을 사용하는 방법을 먼저 살펴보면 다음의 형식으로 사용합니다. const [cookies, setCookie, removeCookie] = useCookies(['쿠키 이름']); cookies는 쿠키가 들어있습니다. 쿠키를 만들고 제거하기 위해선 다음을 사용하는데 옵션은 필요하면 넣을수 있습니다. setCookie()는 쿠기에 값을 넣을때 -> setCookie(쿠키 이름, 쿠키에 넣을 값, 옵션) removeCookie()는 쿠기를 삭제할 때 필요합니다. -> removeCook.. 공감수 3 댓글수 0 2022. 1. 12.
[Node.js] jwt토큰 발급과 인증 (jsonwebtoken 라이브러리) jwt로 토큰을 발급해 사용함으로써 사용자 인증을 할 수 있습니다. 여기서는 발급과 인증을 하는 방법을 알아보겠습니다. 토큰 발급 jwt.sign(토큰화할 것, 토큰키, 옵션, 콜백 함수 ) 이제 1분동안 유효한 id 값을 가진 토큰을 생성해 보겠습니다. const jwt = require('jsonwebtoken'); cosnt tokenKey = '임의의 키 설정' // 물론 실제 개발시에는 따로 숨겨놔야합니다. const id = 'example_id' const token = jwt.sign({ id : id }, tokenKey, { {id:id}면 {id}로 축약 가능 expiresIn: 60, // 1분 유효한 토큰 발급(초 단위) }); 이제 이 token을 응답으로 넘겨주고 사용하면 됩니.. 공감수 0 댓글수 0 2022. 1. 12.
[Node.js] express .Router( ) / 라우터로 파일 정리하기 node로 url을 받아 데이터를 보내줄때 한 파일에 모두 작성하면 파일이 보기 힘들고 관리가 어려워집니다. 그래서 url을 보고 정리할 수 있도록 도와주는게 router인데 미 모듈을 사용해 보도록 하겠습니다. 파일 구성 다음과 같이 메인 server.js 파일이 있고 routing할 것은 routes 폴더를 만들어 test.js 파일로 관리해 보겠습니다. 최대한 간단하게 다음으로 파일을 구성합니다. 서버가 localhost:5000 이라고 가정하겠습니다. 우리가 http://localhost:5000/test/test1 , http://localhost:5000/test/test2 라는 요청을 한다고 할 때 다음의 파일을 보고 설명하겠습니다. server.js const express = requir.. 공감수 0 댓글수 0 2022. 1. 11.
[React] (Proxy) 리액트와 노드 다른 포트 통신 설정 프론트는 localhost:3000에서 서버는 localhost:5000에서 개발하는데 설정을 해주지 않으면 통신 오류가 납니다. 3가지 방법을 소개해 드리도록 하겠습니다. 1. proxy 1 (개인적으로 추천) 2. proxy 2 3. cors 사용 3. 수동 Proxy 설정 ⭐️ 가장 귀찮지만 확실하게 사용자가 정의해 줄 수 있는 방법입니다. 먼저 라이브러리를 설치해 줍니다. # yarn add http-proxy-middleware 리액트 프로젝트의 src 폴더 안에 setupProxy.js 파일을 추가합니다. 파일의 내용은 다음과 같습니다. const { createProxyMiddleware } = require('http-proxy-middleware'); module.exports = (ap.. 공감수 0 댓글수 1 2022. 1. 10.
[React] 리액트, 노드 연동하기 (프론트, 서버) React와 nodejs를 이용해 클라이언트와 서버를 같이 실행시키고 통신하는 것을 해보겠습니다. 1. 라이브러리 소개 2. 클라이언트, 서버 주요 코드 3. 실행 전 준비 4. 실행 1. 라이브러리 사용한 라이브러리 #-- 클라이언트에서 사용 -- # Ajax 통신 라이브러리 yarn add axios # 서로 다른 포트에서 클라이언트와 서버가 통신 가능하게 함 #-- root에서 사용 -- #리액트와 노드를 함께 실행시켜 사용 가능 yarn add concurrently # 변경사항 저장시 반영 yarn add nodemon # express yarn add express 2. 클라이언트, 서버 주요 코드 파일 구성 client에 yarn create react-app으로 만든 리액트 패키지가 들어있.. 공감수 1 댓글수 0 2022. 1. 10.
[React] 조건에 따라 요소를 보이게 하거나 숨기기 (&&, || 연산자) 함수형 컴포넌트를 기준으로 return한다고 할 때 요소를 때로는 보이게 때로는 숨겨서 할 수 있습니다. check라는 변수가 있다고 할때 True이면 보이고 False이면 숨겨보는 코드를 작성해 보겠습니다. import React, {useState} from 'react'; const hello = (props) =>{ const [check,setCheck] = useState(true) return ( {check && World} ); } 이처럼 return을 할때 자바스크립트 코드를 작성하고 싶다면 { } 안에 작성하면 되고 && 는 앞이 True이면 뒤의 것 실행, 반대로 || 앞이 False이면 뒤의 것 실행의 뜻을 담고 있습니다. 꼭 이러한 용도 뿐만이 아니라 더 다채롭게 사용 가능합니다.. 공감수 1 댓글수 0 2022. 1. 9.
[HTML] 페이지 로딩시 마우스 포커스 하는 방법 (autoFocus) 보통 로그인 페이지 같은 곳을 가면 아이디를 입력하는 곳에 마우스 포인터가 올려져 있습니다. 사소하지만 UX에는 큰 영향을 준다고 생각하는데 아주 간단하게 태그에 옵션을 주어 구현 가능합니다. // 마지막 속성값 autoFocus 공감수 0 댓글수 0 2022. 1. 9.
[CSS] antd 프레임워크 (웹,앱 디자인) css 전처리기는 사용했어도 프레임워크는 처음 알게 되었다. antd에서 원하는 컴포넌트를 가지고와 사용할 수 있다. 공감수 0 댓글수 0 2022. 1. 5.
[CSS] flex 요약 정리 * 붙은게 Default Flex container 속성 1. flex-direction * row, column, row-reverse, column-reverse 2. flex-wrap * no-wrap > 넘치면 넘치는 대로 나감 wrap > 넘치면 다음으로 넘어감 3. justify-content * flex-start 기준점 부터 시작 flex-end 기준점 반대 부터 시작 center 가운데 정렬 space-between 양 끝에 붙이고 균일한 여백 생성 space-around 위의 것에서 끝에 여백 생성 space-evenly 위의 것의 모든 여백이 균일 4. align-items * stretch 수직으로 늘림 flex-start 시작 기준 flex-end 끝 기준 center 가운데 정렬.. 공감수 0 댓글수 0 2022. 1. 2.
[JS] Object의 Key를 이용하는 방법 Object라는 내장 객체를 사용할 수 있다. 만약 다음과 같은 object가 있다고 하자 example ={ 1:{} 2:{} 3:{} 4:{} 5:{} } // 위의 것은 다음과 같이 불러 사용할 수 있다. example[번호] // => 해당 번호, 즉 key의 {}가 된다 이제 map 함수로 Object를 이용해 키의 목록에 접근하는 방법은 다음과 같다. Object.keys(example).map((key) =>{ // 이렇게 map 함수로 key를 하나씩 뽑아올 수 있다. // 여기서 key를 이용해 원하는 로직을 짜면 되겠다. }) 공감수 0 댓글수 0 2022. 1. 1.
[React] react-redux의 useSlector() , useDispatch() Hooks 지금까지 connect( , )()를 사용해서 해야하는 줄 알았는데 알고보니 좋은 Hook이 있었다. store에 접근할 때useSlector() , useDispatch() 를 이용해서 값을 받아오고 수정할 수 있다. 아래와 같이 store를 만들어 두었다고 하고 이 훅들을 이용해서 다음을 해보자 1.name을 받아오는 것 2.name의 값을 userA 에서 userB로 바꾸는 것 import { createStore } from 'redux'; const reducer = (state, action) => { if (state === undefined) { return { name: 'userA', }; } if (action.type === 'CHANGE') { return { ...state, n.. 공감수 0 댓글수 0 2022. 1. 1.
[HTML , JS] data- 속성을 이용해 (기본 event로) 처리하기 HTML의 태그에는 data- 라는 속성이 존재한다. 이는 미리 선언해두면 함수의 기본 event 인자에서 뽑아 쓸 수 있는데 데이터를 선별할 때 사용할 수가 있다. 먼저 속성의 선언을 살펴보자 // data- 이후에 key는 임의로 정한것 이렇게 선언해두면 JS에서 함수의 기본 event로 불러올 수 있다. event.target.dataset 안에 들어있고 (임의의 이름)으로 data 속성의 값을 가지고 올 수 있다. 다음은 배열에서 선별을 위한 함수이다. function onButtonClick(event, items) { const dataset = event.target.dataset; const key = dataset.key; const value = dataset.value; if (k.. 공감수 0 댓글수 0 2021. 12. 31.
[JS] async 와 await async async는 promise 처럼 함수를 만들어준다. // 1. async 사용하기 // promise 라면! function a(){ // 데이터를 받아오는데 시간이 걸리는 함수. // promise라면 return new Promise((resolve, reject) => { resolve("a"); }) } const exA = a(); // async나 promise를 사용하지 않으면 여기서 시간을 잡아먹는다. console.log(exA); // ---------------------------------------------------------------- // async 라면! // 함수 앞에 async를 붙인다. 그러면 함수 안의 내용을 promise로 바꿔준다. async fu.. 공감수 0 댓글수 0 2021. 12. 31.
[JS] 비동기 처리 promise( ) promise는 동작을 비동기적으로 처리할 수 있도록 도와주는 역할을 한다. promise를 사용할 때는 producer 와 consumer로 나뉘는데 먼저 producer를 만들어보자. // promise는 클래스로 new를 이용해 선언해 사용할 수 있다. const ex1 = new promise((resolve, reject) => { // 콜백함수로 성공과 실패시의 함수를 인자로 전달한다. // 이 부분은 바로 실행 resolve(value); // 성공시 reject(new Error(“에러 메세지”)); // 실패시 }) consumer는 값을 받아오는데 then / catch / finally를 이용해 받아올 수 있다. // ex1이 정상적으로 수행된다면~ 이라는 뜻의 then // chai.. 공감수 0 댓글수 0 2021. 12. 31.
[JS] 자바스크립트에서의 class - get, set, 상속 CLASS 자바 스크립트에서 class라는 object를 사용할 수 있는데 유효성 검사를 위해 get과 set을 사용하게 된다. 이 부분은 c++의 class와 유사하다고 생각된다. class User{ constructor(P1,P2,P3){ // 생성자를 이용해 class에 값 할당이 가능하다. } // 예를 들어 c의 유효성 검사를 위해 get, set 키워드를 사용한다. get c(){ return this._c; // 언더바를 사용하는 이유는 계속해서 자신을 부르기 때문이다. } set c(value){ if(value < 0 ){ // value가 0보다 작으면 에러 메세지를 출력하고 싶음. throw Error(“0보다 큰 값이 아닙니다.”) } this._c = value; } } 상속 e.. 공감수 0 댓글수 0 2021. 12. 31.
[JS] hoisting과 var let const Hoisting hoisting은 변수를 선언하기 전에 사용하고 후에 변수를 선언해도 순서상 변수 선언을 위로 끌어올리는 것을 말한다. 간단하지만 중요한 개념이니 꼭 알고 넘어가야 한다고 생각한다. a = 10; consoel.log(a); // 10 let a =0 이런게 가능하다는 것 호이스팅은 함수에서도 일어난다. var VS let 전에는 var만 사용했지만 let을 사용하는 것이 코드에 더 좋다. 그 이유는 아래에서 설명되지만 코드를 더 정확히 짤 수있기 때문이다. 지금까지 var를 사용했던 곳이 많은 만큼 두가지 모두 잘 알 필요가 있다. var는 {block scope}를 무시하고 변수를 사용 할 수 있다. let은 { } 안에서 선언되어 진 것은 밖에서 볼 수 없다는 특징을 가지고 있.. 공감수 0 댓글수 0 2021. 12. 31.
[JS] "use strict"; 와 async,defer 자바 스크립트의 효율성 "use strict"; "use strict";은 자바 스크립트를 작성할 때 가장 먼저 작성해주면 좋다. 선언하지 않은 변수를 사용하는 것과 같이 다른 언어에서는 비상식적인 코드를 제어하는 역할을 하고 더 효율적인 작동을 하도록 해준다. “use strict”; // 이렇게만 선언해주고 하던대로 하면 된다. // c++ 에서 # progma once 하는 것 처럼 사용 async 와 defer - html 에서 자바스크립트를 불러오는 방법 이렇게 선언하면 js를 병렬적으로 fetch하고 html parsing이 끝난 후에 js를 실행시켜 속도도 빠르고 오류도 없다. 그냥 태그에 넣고 defer 옵션 주자. 공감수 0 댓글수 0 2021. 12. 31.
[JS] JSON.stringify() 와 JSON.parse() localStorage는 배열을 저장할 수 없다. 그래서 string으로 만들어 저장하고 그 string을 다시 배열로 변환해 사용해야 하는데 그 역할을 이 두 내장 함수가 아주 쉽게 하도록 도와주는 역할을 한다. JSON.stringify() 먼저 JSON.stringify()는 배열을 string으로 변환해 주는 역할을 한다. localStorage.setItem(KEY, JSON.stringify(VALUE)); // 배열 모양의 string이 저장됨. => ['a', 'b', 'c'] 자체의 string value가 배열이라면 이런 식으로 저장할 수 있다. 하지만 localStorage.getItem(Key);처럼 사용한다면 배열을 다시 사용할 수 없는 문제가 있다. 그래서 사용하는 것이 다음과 .. 공감수 0 댓글수 0 2021. 12. 31.
[JS] createElement 와 appendChild + 속성 꿀팁 노드 추가 createElement는 요소를 만드는 메서드이고 appendChild는 요소를 연결해주는 메서드이다. 아래 예시 통해 보자 img 태그를 html에 추가하고 싶다면 다음과 같다. const image = document.createElement("img"); document.body.appendChild(image); 하지만 img엔 src와 alt 등의 값이 필요한데 이는 원래 다음과 같지만 const imgSrc = document.createAttribute("src"); imgSrc.value = `./~` ; 더 간단한 방법이 있다. imgSrc.src = `이미지 주소`; 같은 방식으로 가능하다. 그리고 div 나 p 태그 같은 경우는 text 내용이 필요한데 이는 const a.. 공감수 0 댓글수 0 2021. 12. 31.
[JS] Math( random() , floor() ) Math Math는 숫자에 대해 유용한 객체이다. 그중 random은 많이 사용되는데 예시로 알아보자. Math.random()은 기본적으로 0~1사이 값을 반환한다. 즉 1은 절대 나올 수 없음. 그래서 0 ~ 10을 원한다면(0부터 9까지 나옴) Math.random() * 10 이렇게 사용하고 1 ~ 10 의 숫자를 원한다면 Math.random() * 10 + 1 처럼 사용한다. 하지만 이것은 사실 1.xxxxxx 처럼 소수점 아래 값이 나오기에 버림 올림 반올림중 택해야 한다. 일반적으로 버림이 편하다 생각하는데 Math에서는 floor()를 취급한다. 다음과 같이 쓸 수 있다. // 0 ~ 10 사이의 숫자를 원할 때 0,1,2,3,4,5,6,7,8,9 Math.floor( Math.ran.. 공감수 0 댓글수 0 2021. 12. 31.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.