분류 전체보기101

• 

  [cloudType] Boiler - 클라우드 타입에서 React 프런트와 Express 백엔드 배포하고, 연결하기 EB_썼으면_압축만_450번함 aws는 안정성이 뛰어나고 효율적인 관리가 가능한데다 유명하지만, 나같은 프리티어 개발자에게는 언제 과금의 위험이 생길지 모른다는 크나큰 두려움이 있다. 배포 자동화를 해도 되는데 그럼 과금당할 여지가 너무 커짐.. 그렇다고 백엔드를 수정할 때마다 압축파일을 업로드하자니 너무 번거롭다. 예전에는 이런 과정을 해결해주는 헤로쿠를 통해 배포가 가능했지만, 프리티어 서비스를 종료한 헤로쿠로는 더이상 백엔드를 무료로 배포할 수 없다. 헤로쿠의 차세대로 요즘은 Fly.io 를 많이 선택하는 것 같았는데, 찾아보니 국내에! 일정 용량의 무료 배포를 지원하는 클라우드 서비스가 있다고 해서 한번 사용해 보기로 했다. 깃허브 연결도 되고, 깃허브 액션을 통해 배포 자동화도 할 수 있다고 한.. 프로젝트/배포일기 2023. 1. 21.

• 

  배포 중 axios 의 CORS 오류 Axios와 Express의 cors에서 POST 요청이 충돌하고 있다. axios설정과 서버의 index.js에서 cors 설정을 모두 바꾸어 주어야 한다.. 리액트에서 AXIOS 요청을 보낼 때 크리덴셜을 true로 하고, 백엔드를 설정했는데 그때마다 다른 오류를 만났다 ㅠㅠ 구글링한 결과를 따라 아래 코드를 사용하였더니, 와일드카드 에러가 남았다. app.use( cors({ origin: "*", // 출처 허용 옵션 credential: "true", // 사용자 인증이 필요한 리소스(쿠키 ..등) 접근 }) ); true로 바꾸면 된다는 말이 있어서 해보았는데 해결이 되지 않음.. app.use( cors({ origin: true, credential: true, }) ); true를 문자열.. 바보일기 2023. 1. 21.

• 

  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.