Unwound Developer

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); // 유저 전적 검색 ..

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