div.log('Code Trail')

백엔드 서버 패포용으로 Railway를 선택한 이유 중 하나는 MySQL DB를 지원하기 때문이다.원래는 로컬에서 직접 만든 DB와 똑같은 속성을 갖도록 만들고 싶었는데 아무래도 무료 서비스라 그런지 기능이 너무 제한적이라 아쉬웠다. DB 생성하기 이전 포스팅에서 서버를 만들었던 프로젝트와 동일한 위치에 MySQL DB를 추가할 것이다.우측 상단의 Create 버튼을 클릭하고 Database 서비스를 생성하면 PostgreSQL, Redis, MongoDB, MySQL 중 선택이 가능하다. 테이블 생성하기 DB를 선택하고 조금만 기다리면 서버와 같은 위치에 DB가 생성되고 자동으로 배포되는데 이제 테이블을 추가해주면 된다. 여기서 당황했던 점은 분명히 MySQL DB를 생성했는데 컬럼의 type은 다른 ..

이전 포스팅에서 예고했던대로 이번엔 'Railway'를 이용한 백엔드 서버 배포 과정을 포스팅할것이다.이 과정에서 시행착오가 꽤 많았기 때문에 생각보다 시간이 오래 걸렸다. Railway란?Railway는 개발자들이 코드를 간편하게 배포할 수 있도록 지원하는 클라우드 플랫폼으로, 자동 배포, 다양한 서비스 관리, 사용자 친화적인 인터페이스를 제공한다.팀 협업이 가능하고 컨테이너 기반의 인프라 사용하여 스케일링이 용이해 안정적인 앱 운영을 돕는다. https://railway.com/ RailwayRailway is an infrastructure platform where you can provision infrastructure, develop with that infrastructure locally..

리액트 프로젝트를 배포하기 위해선 단순히 호스팅 서버에 소스파일을 파일을 올리기만 해선 안된다.프로젝트 빌드 과정을 거치고 라우터 에러를 방지하기 위해 서버 설정 파일을 손보는 등 추가적인 여러 절차가 필요하다.서버 설정에 관한 공부가 개인적으로 필요하다면 시도해봐도 좋지만, 지금은 프론트엔드 하나로도 충분히 벅찬 상황이라 이번엔 조금 쉬운 방법을 택했다. Vercel이란?프론트엔드 개발자가 쉽게 웹 애플리케이션을 배포할 수 있도록 해주는 클라우드 서비스이다.글로벌 CDN 사용으로 콘텐츠를 빠르게 전송할 수 있고 Git 저장소와 연동해 자동 배포가 가능하며, 개인 프로젝트같은 소규모 앱을 배포한다면 무료로 사용 가능하다. Vercel 가입하기가입은 hobby 플랜으로 진행하면 되고, GitHub 계정과 ..

최근엔 제작중이던 홈페이지의 게시판을 구현하고 있다.하나의 페이지에 총 5개의 게시판이 등장하는 형태이고, 각각의 게시판마다 더보기 버튼을 클릭하면 해당 게시판의 전체 글을 볼 수 있도록 계획했다. 처음엔 완성하는데 1주일 정도 걸릴 것이라 예상했지만 게시판이라는 것이 생각보다 신경써야 할 부분이 많았고, 시간이 꽤 많이 지나버렸다. 😂아직까지도 디테일한 기능은 부족하지만 이 부분은 계속 보완할 예정이다.그리고 이번 포스팅은 지금까지 구현한 모든 내용을 다 다루면 너무 길어지기 때문에 위 이미지의 '정기 모임' 게시판에 글을 올리고 수정, 삭제하는 것을 중점으로 다루려 한다. 게시판의 기본 기능게시판의 필수적으로 CURD 기능이 구현되어야 한다. 작성자가 글을 쓰고(Create), 수정(Update)을..

홈페이지 방문자가 회원 가입을 진행한다면 입력한 데이터는 DB에 저장된다.이번 포스팅은 DB에서 데이터를 불러오지 않고 반대로 데이터를 추가하는 방법을 다룰 것이다.사실 이 부분은 SQL문만 알고있으면 어려울 부분이 전혀 없다.// authRouter.jsrouter.post('/register_submit', (req, res)=>{ // 클라이언트로부터 전달받은 input 값 const {regId, regPw, regNickname, regEmail, regCar}=req.body.registerSubmit; // DB에 데이터를 추가하기 위한 쿼리문 const sql='insert into users (user_id, user_pw, nickname, email, car) ..

회원 가입 폼을 만들던 중 계속해서 서버가 종료되는 오류가 발생했다.처음엔 중복 확인이 필요한 항목이 세 개니까 query() 매서드 세 개를 써서 각각 응답을 보내면 되겠다고 생각했다.하지만 결과는... "Cannot set headers after they are sent to the client" 오류를 내며 서버가 죽어버렸다. https://duski96.tistory.com/18 [React] 회원 가입 폼 구현하기로그인 기능을 구현하면서 DB 연동까지 마친 상태라 회원 가입을 구현하는 것도  금방 끝낼줄 알았다.회원가입의 필수 기능 중 하나인 '중복 확인' 기능을 동기 방식으로 구현했다면 진작에 완duski96.tistory.com 문제점Express 서버는 한 요청에 하나의 응답만을 보낼 수..

로그인 기능을 구현하면서 DB 연동까지 마친 상태라 회원 가입을 구현하는 것도  금방 끝낼줄 알았다.회원가입의 필수 기능 중 하나인 '중복 확인' 기능을 동기 방식으로 구현했다면 진작에 완성했겠지만 이왕이면 비동기 방식으로 구현하고싶었다. 동기 방식 VS 비동기 방식우선 동기 방식과 비동기 방식의 차이점은 중복 확인 절차가 사용자의 입력이 끝난 시점에 진행하는지 여부에 있다.쉽게 말해 '중복 확인 버튼'이 있을 경우, 사용자가 입력을 마치고 버튼을 눌러야 중복 확인 절차가 진행되므로 동기 방식으로 처리된다고 볼 수 있다. 반대로 비동기 방식의 경우 사용자가 입력을 하는 동안 서버에서 입력값을 실시간으로 감지해 중복 확인 절차가 진행되는 것을 말한다.최근 만들어진 사이트는 대부분 비동기 방식을 채택했을 것..

이전 포스팅에서 로그인 기능을 구현하는 방법에 대해 다루었다.리액트에서 ID, PW 입력을 받아 로그인 버튼을 누르면 로그인 api를 호출하는데 이번 포스팅에선 이 api를 다룰 것이다.이전에 생성해둔 server.js를 사용할 것이다. https://duski96.tistory.com/15 [Node.js] React에 MySQL 연동을 위한 Server 생성React에 MySQL 연동하기 포스팅에 작성했던 내용인데, 내용이 너무 길고 리액트와 연관이 큰 부분은 아니라 새로운 카테고리의 게시글로 분리했다. Server 생성 과정DB로부터 데이터를 불러오기 위duski96.tistory.com authRouter.js 파일 생성 폴더 구조는 동일하지만 routes 폴더의 index.js 파일을 authR..

이전에 커뮤니티 기능을 위해 MySQL과 리액트를 연동하는 방법을 포스팅했다.이제 가장 먼저 구현해볼 것은 로그인 기능이다.React(클라이언트)에서 입력한 ID와 PW를 Server로 넘겨 SQL 쿼리문으로 해당 ID, PW를 가진 회원이 있는지 확인하고 결과를 반환하면 된다. 최상위 컴포넌트에 로그인 유저 정보 Context 생성//App.jsximport { useState, createContext } from 'react';export const LoginUserInfoContext=createContext();// 로그인 할 유저의 초기 상태const loginUserInit={ userId:'', nickname:'', email:'', car:'', isLogin..