분류 전체보기99

• 

  4. [React + Express] 풀스택 보일러 플레이트 ( 회원가입, 로그인, 로그아웃, 회원 정보 수정, 게시글 CRUD ) 무비 API 이용 풀스택 웹 프로젝트 소요 기간 : 12일 겪었던 문제들 : 에러 하나, 에러 둘, 에러 셋, 에러 넷, 에러 다섯 Github : https://github.com/chalinuna/Boiler 실제 사용 데모 영상 사용 언어와 기술, 라이브러리 및 DB Frontend - React (useState, useEffect, useNavigate, useLocation, useParams, useSelector, useDispatch, Axios, Proxy(Http-proxy-middleware), Route, ReduxToolkit, redux-persist, react-quill, ArrayBuffer, Uint8Array, Blop, FormData, 등... ) Backend -.. 프로젝트/풀스택 프로젝트 2022. 12. 18.

• 

  4-8. [React + Node.js Express] 게시판 - 게시글 리스트, 상세보기, 수정, 삭제 ( React-Quill ) CRUD 풀스택 CRUD 포트폴리오의 마지막 단계, 게시글 리스트 불러오기와 상세보기, 수정 및 삭제 단계이다. 간단해 보여도 은근히 처리해야 할 부분들이 자잘하게 많다. 글을 작성한 작성자만 자신의 글을 수정 및 삭제할 수 있도록 버튼 노출 여부를 설정해 주어야 하고, 데이터가 렌더링 된 이후에 컴포넌트가 그려지도록 해야 한다. 또 ref를 이용해 저장했던 정보는 어떻게 참조해야 하는지도 알아보자. Frontend 먼저 게시글 리스트를 보여주는 페이지를 만든다. 각 제목을 클릭하면, 포스트의 _id를 백엔드로 보내 게시글 상세보기 페이지로 진입시킬 것이다. 하단의 페이지네이션은 아래 코드를 사용했다. 별도의 컴포넌트로 만들고 props를 이용해 값을 전달한 뒤, 게시글의 수에 맞는 만큼만 수를 증가시킨다. 온전.. 프로젝트/풀스택 프로젝트 2022. 12. 15.

• 

  You should call navigate() in a React.useEffect(), not when your component is first rendered. 문제 상황 isAuth를 사용해, 유저가 로그인하지 않은 경우에는 게시물 작성란에 들어가지 못하도록 막으려다 아래 경고를 만났다. You should call navigate() in a React.useEffect(), not when your component is first rendered. 해결 방법 useEffect안에 선언해주라는 뜻이다. 이렇게 해 주면 된다. useEffect(()=>{ if (!isAuth) { navigate('/') } }) 바보일기 2022. 12. 14.

• 

  4-7. [React + Node.js Express] 게시판 - 게시글 작성, 이미지 업로드 ( React-Quill ) 티스토리나 네이버 블로그처럼, 어떤 글을 작성할 때는 글작성 전용 에디터가 필요하다. 에디터를 직접 만들어도 좋겠지만 그랬다가는 마음에 불화가 일어날 것 같아서 라이브러리를 사용하기로 했다. 누구나가 사용하는 위지윅 에디터를 사용했다면 속편했을텐데 Quill을 사용하겠다는 객기를 부려서 강제로 js실력이 업그레이드 되었다. (속터짐은 덤) Quill은 에디터에 이미지를 삽입하면 base64로 이미지에 src를 저장한다. 그러나 base64는 1000자가 넘는 문자열이므로 그대로 db에 저장하기에는 너무나 거대하다. 그렇다고 일반적인 방식으로 handles: { image: imageHandler } 를 커스텀하여 사용하면, 이미지를 업로드 할 때마다 서버에 업로드하게 된다. 이럴 경우 에디터에서 필요없는.. 프로젝트/풀스택 프로젝트 2022. 12. 14.

• 

  [node.js Express] code: "LIMIT_UNEXPECTED_FILE" name: "MulterError" message: "Unexpected field" 문제 상황 프론트인 리액트에서 img url을 추출해, base64 파일을 Blop으로 변환한 뒤, 다시 FormData 형식으로 백엔드의 multer에 보내주었다가 만나게 된 에러이다. 파일 크기가 컸다기에는 자그마한 이미지 파일이었기 때문에 서치를 했더니.. 원인 파악 multer 패키지는 input 태그로 파일을 받았을 경우에는 name 을, FormData 객체로 받았을 경우에는 key 값을 통해 업로드된 파일을 식별한다. 이 값을 multer.single("key값") 의 "key값" 에 제대로 넣어주어야 하는데, 그렇지 않아서 발생한 문제이다. 해결 방법 React에서 formData.append(첫번째 인자, file) 에서 "첫번째 인자" 값과, Express의 multer.single(인.. 바보일기 2022. 12. 13.

• 

  4-6. [React + Node.js Express] 프로필 사진 업로드 서버에 사진을 업로드하려면 multer 라이브러리를 이용해야 한다. 여기서 서버는 로컬 서버를 가리킨다. 로컬 서버가 아닌 클라우드에 업로드를 하려면 AWS와 같은 클라우드 서비스와 함께 다른 라이브러리를 사용해야 한다. 일단은 로컬 서버, 즉 서버를 만든 폴더에 업로드하는 것으로 진행해본다. Frontend input태그에 type 속성을 file로 설정했을 경우, 크롬에서의 기본 스타일은 이렇게 생겼다. 파일 선택 버튼을 기본으로 제공해주고, 파일을 업로드하면 파일의 정보가 오른쪽에 뜨는 형태이다. 하지만 프로필 업로드를 위해 사용하기에는 너무나 못생겼다. React는 uesRef()라는 훅을 가지고 있는데, 이 훅을 이용하면 다른 DOM 요소에 접근할 수 있다. 따라서 태그와 태그를 사용하여, 태그.. 프로젝트/풀스택 프로젝트 2022. 12. 10.

• 

  [Javascript ES6] 기초 문법 3. 변수 var, let, const var, let, const, window js ES6에는 var, let, const라는 세 개의 변수 선언 키워드가 존재한다. var은 안정성이 매우 좋지 않기 때문에 거의 사용하지 않으며(옛날에나 사용했음), let과 const를 사용하는 것이 유즘 추세이다. 후에 값을 변경하게 될 경우는 let, 변경하지 않을 경우는 const로 구분해서 쓰면 좋다. 재선언 재할당 오브젝트 내 데이터 변경 var O O O let X O O const X X O * 수정 불가능한 오브젝트를 원할 경우, Object.freeze(오브젝트명) 을 사용한다. 이 경우 오브젝트 내의 데이터 변경이 불가능하다. Hoisting 현상 : 변수의 선언을 변수 범위 맨 위로 끌고 오는 현상. window를 이용해 전역변수를 만.. JavaScript/JavaScript 기초 2022. 12. 7.

• 

  [Javascript ES6] 기초 문법 2. Arrow Function Arrow Function ES6에서 새롭게 추가된 함수 작성법으로 화살표 함수가 있다. function 키워드를 괄호()가 대신하는 것이다. let 결괏값 = () => { } 과 같은 형식으로 작성하는데, 파라미터가 하나밖에 없을 때는 소괄호를 생략할 수 있고, 코드가 한줄이면 중괄호와 return을 생략할 수 있다. 다음 아래 두 문장은 같은 문장이다. Arrow function은 저번 글에서 설명했던 것 처럼 바깥에 있던 this값을 내부에서 그대로 사용한다. 따라서 이벤트 리스너 안에서 사용할 때는 this가 아닌, e를 사용해야 한다. 테스트 버튼 마찬가지로 오브젝트 내에서 this를 호출해도 window가 나오게 되니 화살표 함수에서 this 키워드를 사용할 때에는 조심해야 한다. JavaScript/JavaScript 기초 2022. 12. 7.

• 

  [Javascript ES6] 기초 문법 1. this 대학생때와 졸업 후 1년간 오직 JAVA만 사용해 안드로이드 개발을 했더니 머릿속에서 자바스크립트가 일정부분 날아간 기분이 든다. 그래서 오랜만에 프로그래머스 1단계 문제를 풀어봤다가 생각보다 심하다는걸 깨달았다.. React, node.js에서는 사실 늘 쓰는 function과 Mongoose함수만 주구장창 사용하기 때문에 JS 실력이 늘어날 수 없었던 것 ㅠㅠ 게다가 React는 아주 기초적인 js 문법만으로도 휘황찬란한 웹을 만들 수 있다. 이게 나의 뇌를 마취시킨 주 원인이었던듯 하다.. 기념삼아 JS ES6 문법을 공부하고 기록하기로 했다. 평생 할 줄 알았던 Java는 이제 안녕~~...(회사들어가면 하게 될지도 모르겠지만..~) this 자바스크립트에서 this는 상황에 따라 다른 것을 가리.. JavaScript/JavaScript 기초 2022. 12. 7.

• 

  4-5. [React + Node.js Express] 회원 정보 수정 기능 모든 사이트의 핵심 기능에는 회원가입, 로그인, 로그아웃이 있다. 그리고 회원가입이 가능한 웹사이트는 '아이디 찾기, 비밀번호 찾기, 회원정보 수정'이 가능해야 한다. 이번에는 세가지 중 회원정보 수정 기능을 만들어본다. 프로필 사진은 multer 등을 이용하여 여러가지 복잡한 과정을 거쳐야 하기 때문에, 틀만 만들어놓고 다음에 구현할 것이다. Frontend Topbar의 닉네임을 클릭하면 회원 정보를 누를 수 있는 메뉴가 뜬다. 회원 정보는 /user/about 라우터로 구현했다. Redux에 저장된 회원 정보를 불러오는 식이다. 저번에는 localStorage에 redux의 내용을 모두 저장했는데, 혹시 모를 위험을 방지하기 위해 브라우저가 꺼지면 회원 정보가 브라우저에서 지워지도록 하기 위해 Re.. 프로젝트/풀스택 프로젝트 2022. 12. 6.

• 

  [React] React Templates 리액트 템플릿이란 홈페이지 디자인 중 자주 쓰이는 React 모델을 제작하여, 수정이 가능하도록 배포되는 디자인 템플릿. 특히 리액트 템플릿은 무료로 배포되고 있는 것이 많기 때문에 bootstrap과 적절히 섞어 사용하면 빠른 시간 안에 프론트를 마무리할 수 있어 편리하다. 아래는 내가 자주 사용하는 리액트 템플릿 사이트이다. https://www.creative-tim.com/templates/react-free 29+ React Free Themes And Templates @ Creative Tim www.creative-tim.com https://dev.to/davidepacilio/35-free-react-templates-and-themes-32ci 35+ Free React templat.. REACT/React-개념정리 2022. 12. 6.

• 

  [Node.js] body-parser 사용법 사용법 2021년도 이후 Express 프로젝트들은 body-parser 라이브러리가 express에 기본으로 포함된다. 따라서 별도로 라이브러리를 설치할 필요 없이, 아래 코드만 최상위 server.js에 작성해주면 된다. app.use(express.urlencoded({extended: true})) 라우터를 사용할 경우, 해당 코드 밑에 라우터를 app.use 해주면 라우터들에서도 body-parser의 사용이 가능하다. server.js에 테스트용 board 라우터를 만들고 아래와 같이 app.use로 불러와본다. app.use('/api/board', require('./routes/board')) board 라우터에 /write 라우터를 만들어 작성한다. 버튼을 누르면 콘솔에 req가 보내준.. NODE.JS(Express) 2022. 12. 5.