분류 전체보기99

• 

  5. [React + Express + MongoDB] Perfect Boiler - 이메일 인증을 하는 로컬(자체 로직) 회원가입 구현 이번에는 제대로된 ! 보일러 플레이트를 만들기 위해, 이메일 인증을 하는 자체 회원가입 로직을 작성하였다. 저번 코드를 요모조모 뜯어보니 엉망진창 . . 인 것 같아서, 해당 프로젝트를 보완할 겸 새 프로젝트를 만들어 시작했다. 이번 글에서 약간 수정하기는 했지만, 프런트엔드는 먼저 완성하였다 : https://make-somthing.tistory.com/84 이 과정을 진행하면 굳이 게시판을 만들지 않아도, 회원가입 하나만으로 CRUD를 한번에 경험할 수 있다. 임시 데이터를 생성했다가 수정했다가 지웠다가 읽었다가 해야하기 때문이다... * express와 mongodb를 사용하는 글이기 때문에, express와 몽고db 연결이 되어있다고 가정하고 진행합니다. 소요 기간 - 1일 Frontend - .. 프로젝트/풀스택 프로젝트 2023. 1. 20.

• [Express] express-session express-session 터미널에서 npm install express-session 을 이용해 설치한다. npm install express-session express-session은 세션 관리용 미들웨어이다. 세션은 사용자별로 req.session 객체 안에 저장된다. 이 라이브러리는 세션을 관리할 때 클라이언트에 세션 쿠키를 전송한다. 안전하게 쿠키를 전송하기 위해서는 쿠키에 서명을 추가하는 것이 좋은데, 이때 secret의 값이 필요하다. const session = require("express-session"); app.use( session({ resave: false, saveUninitialized: false, secret: process.env.COOKIE_SECRET, cook.. NODE.JS(Express) 2023. 1. 19.

• [Express] 미들웨어란? 미들 웨어 미들웨어 : 요청과 응답의 중간(middle) 에 위치하여, 미들웨어라고 부른다. 미들웨어를 사용해 요청과 응답을 조작하여 기능을 추가하거나, 올바르지 않은 요청을 걸러낸다. 미들웨어를 만들 때는 req, res, next라는 매개변수를 주어야 한다. req는 요청, res는 응답, next는 미들웨어의 작동을 마치고 다음으로 넘어가라는 뜻이다. 모든 미들웨어는 app.use를 통해 사용할 수 있으며, app.user(미들웨어) 로 사용한다. 이때 첫 번째 인수로 주소를 넣어줄 수도 있는데, 주소를 넣어주면 해당 요청에서만 미들웨어를 실행하게 된다. app.use(미들웨어) 모든 요청이 들어올 때 미들웨어를 실행함 app.use('/login',미들웨어) login로 시작하는 요청이 들어올 때.. NODE.JS(Express) 2023. 1. 19.

• 

  [React] 리액트 실시간 개발 환경 모바일에서 확인하기 IPv4 주소와 현재 리액트 개발을 위해 사용하고 있는 포트 번호를 알면, 모바일 기기에서 웹주소를 통해 바로 화면을 실행해 볼 수 있다. ctrl + s 를 눌러 저장을 할 때마다 화면이 즉각 변동되므로, 웹앱을 개발할 때 편리하다. 1. cmd를 열고, ipconfig를 입력해 IPv4 주소를 알아낸다. 2. 내가 사용하고 있는 리액트 포트는 3000번이다. 만일 IPv4주소가 123.456.78.90 이라면, 휴대폰 주소창에 123.456.78.90:3000 을 입력한다. 내 포트는 리액트를 실행했을 때 나오는 콘솔로 알 수 있다. 카테고리 없음 2023. 1. 19.

• [React] 모바일에서 100vh 맞추기 웹 기준 100vh와 모바일웹 기준 100vh는 조금의 차이를 가지고 있다. 모바일웹은 상단바와 하단바를 포함하여 100vh를 계산하기 때문에, 만일 높이를 100vh로 설정한 컴포넌트가 있다면 아래위 부분이 조금 가려질 수 있다. 이럴 경우 현재 기기의 화면을 계산해서 vh를 설정해주면 된다. 이렇게 할 경우 input을 눌렀을 때, 키보드가 나타나 윗화면을 볼 수 없게 되는 일이 발생하지 않는다. 나는 CRA를 사용했기 때문에 아래와 같은 방법을 사용했다. (CRA, 즉 creat-react-app을 사용했을 때는 아래 코드를 복사해서 설정하면 완료된다.) App.js에 추가 function setScreenSize() { let vh = window.innerHeight * 0.01; documen.. REACT/React-개념정리 2023. 1. 19.

• 

  [React] 보일러 프로젝트 - 프론트 완성 , + (01.20 회원가입 백엔드까지 완성) My Boiler Project 프론트엔드 완성 : 소요기간 : 1.5일 기획 및 디자인 : https://make-somthing.tistory.com/83 Demo : https://web-boiler-frontend-1jx7m2gld43p7bv.gksl2.cloudtype.app/ CHALIE BOILER web-boiler-frontend-1jx7m2gld43p7bv.gksl2.cloudtype.app 사용 언어와 기술, 라이브러리 및 DB Frontend - React, Figma (useNavigator, useState, React-Router-Dom@6, useRef, SCSS(node-sass 라이브러리)) 배포 - Cloudtype 프로젝트 제작 계기 passport, react-que.. 프로젝트/React 프론트 프로젝트 2023. 1. 19.

• 

  [프로젝트 기획 - 풀스택] 회원가입, 로그인, 이메일 인증, 회원 정보 수정 보일러 플레이트 UI 디자인 보일러 플레이트 - 풀스택 프로젝트 express의 passport 라이브러리를 사용하고, React의 redux와 JWT의 refresh Token을 사용해 네이버, 구글, 카카오 로그인이 포함된 더 완벽한 보일러 플레이트를 만들고자 UI를 디자인하였다. 모바일 페이지에서는 화면이 모바일 비율에 맞게 보이도록, 웹앱 디자인으로 구성하였다. 사용할 툴 Frontend - React Backend - Node.js Express DB - MongoDB 와 MySql Figma 와이어프레임 회원가입, 로그인, 아이디/비밀번호 찾기, 회원 정보 수정, 비밀번호 수정, 회원 탈퇴 기능을 제공한다. 프로토타입 https://www.figma.com/file/7kRAyMDHczs7AFVh5tuHXP/%EB%B3%B.. 프로젝트/프로젝트 기획 2023. 1. 17.

• [Javascript] 자바스크립트 정규식 정규식 : 문자를 검토하는 식 ● 사용법 : 슬래시 두 개 사이에 정규식 표현식을 입력한다. /안/.test('안녕하세요') => '안' 이라는 글자가 '안녕하세요' 속에 있는지 검사하는 정규식. (하나만 찾는다) /[a-zA-Z]/.test('abc') =>소문자 a부터 z까지의 글자와 대문자 A-Z까지의 글자 중 단 한개라도 'abc' 속에 들어있는지 검사하는 정규식 /[ㄱ-ㅎ가-힣ㅏ-ㅣ]/.test('안녕하세요') =>'안녕하세요' 속에 한글 문자가 1개 이상 존재하는지 검사하는 정규식 /[0-9]/.test('012') =>'012' 속에 0부터 9까지의 숫자 중 1개 이상의 숫자가 포함되어 있는지 검사하는 정규식 /\S/.test('아무글자$') => \S 는 특수문자를 포함한 그 어떠한 글자가.. JavaScript/JavaScript 기초 2023. 1. 17.

• 

  [jQuery] 사용법 jQuery 설치법 https://releases.jquery.com/ -> jQuery 3.x 의 minified 클릭, 코드 복사하여 붙여넣기 jQuery CDN The integrity and crossorigin attributes are used for Subresource Integrity (SRI) checking. This allows browsers to ensure that resources hosted on third-party servers have not been tampered with. Use of SRI is recommended as a best-practice, whenever libr releases.jquery.com 사용법 ● 제이쿼리 cnd을 붙여넣는다. body태.. JavaScript/JavaScript & JQuery 2023. 1. 17.

• 

  [React + Node.js + Mongo DB Atlas] Netlify(프론트엔드 배포) + Elastic Beanstalk(백엔드 배포) 배포하고 연결하기 풀스택 앱을 배포하는 과정을 연습해보기 위해 진행했는데, 아무리 찾아도 제대로 정리해놓은 글이 없어서.. 내가 작성하기로 했다. React 와 Node.js의 Express 프레임워크를 이용해 만든 프론트, 백엔드를 각각 다른 툴로 배포하여 연결할 것이다. 프론트엔드는 Netlify, 백엔드 배포는 AWS의 Elastic Beanstalk를 이용한다. DB는 몽고DB의 Atlas를 이용하였다. 만고의! 삽질 끝에 확실한 방법을 찾은 것이니 그대로 따라하기만 하면 된다.. ㅠㅠ * AWS 프리티어(무료)에 가입했다는 전제로 진행한다 * 개발 환경 Frontend : React Backend : Node.js Express DB : MongoDB Atlas 배포 환경 Frontend : Netlify Bac.. AWS/Elastic Beanstalk 2023. 1. 15.

• 

  [netlify] - 새로고침 에러 React앱을 배포하고 난 후, 호스팅된 페이지에서 메인 페이지가 아닌 /contact 등의 하위 페이지에서 새로고침을 하면 404 에러가 뜨는 것을 발견했다. Router 설정상 리액트의 첫 페이지 url은 '/' 이다. 이곳에서 index.html을 읽기 때문에, '/' 의 페이지가 index.html로 지정되어 있는 것이나 마찬가지다. 그러나 라우팅된 페이지로 이동했을 경우 각 url에 맞는 별도의 파일이 존재하는것이 아니기 때문에, 404 에러를 띄운다. (리액트는 index.html 하나로만 동작하는 SPA이므로..) 따라서 어떤 경로로 접속하든 index.html을 보내주세요~ 라는 코드를 추가해야 한다. public 폴더에 _redirects 라는 이름의 파일을 생성한다. 확장자는 없다. 그.. 바보일기 2023. 1. 15.

• 

  [React] My Portfolio React 프로젝트 My Portfolio React 프로젝트 소요 기간 : 3일 Figma 기획 : https://make-somthing.tistory.com/77 Github: https://github.com/chalinuna/myweb Demo: https://main--bright-mochi-309946.netlify.app/ 사용 언어와 기술, 라이브러리 및 DB Frontend - React (useNavigator, useState, React-Router-Dom@6, styled-components, SCSS(node-sass 라이브러리)) Unsplash Open api 배포 - Netlify 프로젝트 제작 계기 내 프로젝트와 간단한 이력서, 자기소개를 한꺼번에 보여줄 수 있는 포트폴리오 정리 페이지가 .. 프로젝트/React 프론트 프로젝트 2023. 1. 14.