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..

이번에는 클라이언트 쪽 코드 구조입니다. 가장먼저 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); // 유저 전적 검색 ..

개요 https://github.com/ysh038/Arcane https://project-arcane.netlify.app (Riot API가 잘 최신화 되지 않고, 컨벤션이 일정하지 않은 관계로 API로 받아오는 정보들이 잘 나타나지 않을 수도 있습니다.) 이번에 Node.js를 공부하면서 친구 한 명과 2인이서 프로젝트를 진행했습니다. 진행할 때, 차근차근 글을 작성하면서 했어야하는데, Node.js, Express 등등 프로젝트를 진행하면서 필요한 부분을 그때 그때 공부하면서 진행하느라 다 하고 나서야 글을 작성합니다. 프로젝트 주제로 Riot API를 활용한 웹페이지를 선정하게 된 이유는 첫번째로, 친구랑 같이 개발하는 첫 번째 프로젝트였기에 너무 무거운 주제보단 주위에서 가볍게 볼 수 있는 ..