Unwound Developer

Arcane프로젝트 - netlify.toml 프로젝트 배포시에 서버는 AWS, 클라이언트는 netlify를 통해 배포했는데, 어려울 것만 같던 AWS배포는 오히려 생각보다 간단했고, 간단할 줄 알았던 netlify배포가 엄청나게 애를 먹였습니다. 원인은 proxy에 있었습니다. 기존에 localhost 에서 작업할 땐, cors오류를 해결하기 위해 proxy-middle-ware를 통해 // setupproxy.js const { createProxyMiddleware } = require("http-proxy-middleware"); module.exports = (app) => { app.use( "/api/summoners", createProxyMiddleware({ //도메인 api로 호출 t..

Arcane 프로젝트에서 가장 핵심적인 라이브러리를 꼽으라면 아마 Axios일 것 입니다. Arcane에서 클라이언트와 서버 간 통신은 모두 Axios를 통해서 이루어집니다. 이전에도 Axios 통신 방식에 대해서 간략하게 설명했지만, 이번엔 더 자세하게 알아보도록 하겠습니다. Axios는 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리입니다Axios 공식문서에서 Axios를 소개하는 글입니다. 저번에 비동기 통신을 소개했듯이 클라이언트 측에서 서버에 무언가 요청을 할 때, 응답을 듣지도 않았는데, 계속해서 진행해버린다면, 당연히 오류가 날 것입니다. Axios는 Promise를 활용하는 비동기 통신을 요청하기 때문에, 서버의 응답을 듣고 나서야 다음으로 ..

이번에는 클라이언트 쪽 코드 구조입니다. 가장먼저 Root에 제일 가까운 App.jsx입니다. jsx는 자바스크립트의 확장 문법을 지원하는 확장자로써, 자바스크립트안에서 HTML문법을 사용가능하도록 합니다. 기본적으로 Arcane 웹페이지 작동방식은 다음과 같아요. Page폴더에있는 파일들 중 하나를 App.jsx에서 불러냅니다. 예를들어, Main.jsx 페이지를 불러냈다고 하면, 그 메인 페이지는 다시 필요한 컴포넌트들을 불러냅니다. Main의 경우에는 Tobbar컴포넌트, 메인메뉴 컴포넌트 등을 부릅니다. 이렇게, 페이지는 상황에따라 여러 컴포넌트들을 갈아끼우는식으로 사용자에게 다른 모습을 보여줍니다. 마치 퍼즐조각을 끼웠다 뺐다 하는 느낌이에요. // App.jsx import { Routes, ..

위 사진은 서버 쪽 구조입니다. app.js가 서버의 기본이 되는 파일입니다. // app.js import express from "express"; import { connectDB } from "./db/db.js"; import summonersRouter from "./router/summoners.js"; import mypageRouter from "./router/mypage.js"; import authRouter from "./router/auth.js"; const app = express(); // 회원가입 & 로그인 & 유저관련 디비 설정 app.use("/auth", authRouter); // 글 작성 app.use("/post", postRouter); // 유저 전적 검색 ..