프로그래밍 공부방

🔍 현재 상황 분석1단계에서 탄탄한 데이터 구조를 구축한 후, "거대한 컴포넌트를 어떻게 작은 단위로 나눌 것인가?" 그리고 "사용자가 원하는 인터랙티브한 UI를 어떻게 구현할 것인가?" 라는 두 가지 핵심 문제를 해결해야 합니다. 1. 동일한 코드가 반복되는 문제// Tier4.js - 기존 코드function Tier4(props) { return ( {raidList.map((raidName, index) => ( {raidName} {/* 복잡한 배열 처리 로직 */} {arr[index]?.map(..

🔍 현재 상황 분석더보기 효율 화면은 플레이어들이 어떤 레이드의 "더보기 보상"의 효율을 한눈에 볼 수 있도록 도와주는 서비스입니다. 하지만 현재 효율성 분석 페이지에는 몇 가지 심각한 문제점들이 있었습니다 🚨 발견된 문제점들1. 가독성이 너무 떨어진다 현재 화면에는 이런 식으로 정보가 표시됩니다:사용자 입장에서는 "어떤 보상을 얼마나 받는지", "효율성이 얼마나 되는지" 직관적으로 파악하기 어려웠습니다 2. 어떤 보상을 얼마만큼 얻었는지 확인할 수 없다위의 텍스트에서는 "더보기 보상 골드: 1234.5"라고만 나오지, 실제로 어떤 재료를 몇 개씩 받는지 알 수 없었습니다.3. 레이드별 특수 보상 획득량을 알 수 없다Lost Ark의 각 레이드는 고유한 특수 아이템들을 제공하는데, 이런 정보가 전혀 ..

기존 현황판 화면🎯 문제점 분석현황판 화면은 LostBoard의 핵심 페이지이지만, 여러 문제점들이 있었습니다. 1. 시각적 가독성 문제// 기존 코드 - 단순한 이미지 표시캐릭터 정보가 평면적으로 나열되어 중요도 파악 어려움캐릭터 간 구분이 어려움2. 정보 과부하한 화면에 너무 많은 정보가 동시에 표시캐릭터별 구분이 명확하지 않음시각적 계층 구조 부족3. 구식 UI 요소// 기존 체크박스 - 밋밋한 디자인 handleCheckboxChange(e, characterIndex, raidIndex)}/>{raidName}기본 체크박스로 재미없는 인터페이스상태 변화에 대한 시각적 피드백 부족4. 코드 복잡성현황판 페이지 코드가 300줄 이상으로 유지보수 어려움모든 로직이 한 파일에 집중재사용 가능한 컴포..

기존 초기화면초기화면 변경 이유LostBoard를 처음 만들고 나서 몇 명의 친구들에게 보여줬는데, 공통적으로 나온 피드백이 있었습니다."이게 뭐하는 사이트야?" "Lost Ark 관련 사이트 맞아?" "뭘 해야 할지 모르겠어" 맞는 말이었습니다. 기존 초기화면은 단순히 텍스트 필드와 버튼만 덩그러니 있어서, 처음 방문하는 사용자가 이 사이트의 목적을 파악하기 어려웠습니다.🔍 기존 디자인의 문제점1. 정보 부족// 기존 코드 - 너무 심플함 검색 사이트 제목이나 설명이 전혀 없음무엇을 검색하는 건지, 왜 검색해야 하는지 불분명Lost Ark와의 연관성을 알 수 없음2. 시각적 정체성 부족/* 기존 CSS - 밋밋한 디자인 */.content { background-color: #1f21..

URL 파라미터 문법app.get('/detail/:aaaa', (res, req) => { req.send('detail.ejs')}) URL 입력란에 '/detail/아무문자'로 접속하면 위 코드 실행 '아무문자' 입력란에 글의 id를 입력하면 DB에서 해당 id 글을 가져와서 출력하면 된다. DB에서 특정 document 1개 찾기findOne() 사용// a : 1 인 document를 찾는다await db.collection().findOne({a : 1}) '_id'가 아래와 같은 document를 찾으려면 // _id 번호만 입력하는 것이 아닌 ObjectId까지 같이 입력해야 한다.await db.collection('post').findOne({_id : new ObjectId('64..

글 작성 페이지 생성write.ejs 레이아웃 글쓰기 전송 input에 입력한 내용을 서버로 전송하기 글쓰기 전송input 태그에 name 속성을 넣어야 입력한 내용을 서버로 전달할 수 있다.URL은 /add로 작명 서버에서 글 확인하기app.use(express.json())app.use(express.urlencoded({extended:true})) 서버 상단에 데이터 추출을 도와주는 코드 작성-app.use(express.json()): 클라이언트에서 보낸 요청(Request) 본문이 JSON 형식일 때, 그것을 자동으로 JavaScript 객체로 파싱해서 req.body에 담아줍니다. -app.use(express.urlencoded({extend..

REST API 6가지 원칙1. Uniform Interface - 여러 URL과 method는 일관성이 있어야합니다.- 하나의 URL로는 하나의 데이터를 가져오게 디자인하는게 좋고, 간결하고 예측가능하게 URL과 method를 만드는게 좋다. 2. Client-server 역할 구분 -유저에게 서버역할을 맡기거나 DB를 직접 입출력하게 하면 좋지 않다. 3. Stateless-요청들은 서로 의존성이 있으면 안되고 각각 독립적으로 처리되어야합니다.4. Cacheable-서버가 보내는 자료들은 캐싱이 가능해야합니다. 5. Layered System 서버기능을 만들 때 레이어를 걸쳐서 코드가 실행되도록 만들어도 된다.6. Code on demand서버는 실행가능한 코드를 보낼 수 있습니다. 좋은 URL ..

ejs 세팅1. 터미널에 npm install ejs 입력해서 ejs 설치 2. 서버 파일 상단에 view engine 사용 코드 입력app.set('view engine', 'ejs') ejs 파일 만들어 보내주기*ejs 파일은 views라는 폴더 안에 생성하는 것이 일반적 list.ejs 파일 생성후 간단한 html 코드 작성 글제목1 글내용1 글제목1 글내용2 .grey-bg { background: #eee;}.white-bg { background: white; margin: 20px; border-radius: 5px;}.list-box { padding : 10px; border-bottom: 1px solid..

MongoDB 사이트에서 데이터 생성 MongoDB에 있는 데이터 가져오기// /list 페이지에 접속하면 'post'에 있는 데이터 가져와서 출력하기app.get('/list', async (요청, 응답) => { let result = await db.collection('post').find().toArray() console.log(result) 응답.send(result[0].title)}) 결과 데이터 나눠서 출력하기// 첫번째 게시물만 출력하기app.get('/list', async (요청, 응답) => { let result = await db.collection('post').find().toArray() console.log(result[0]) 응답.send('DB..

MongoDB 데이터 저장 방식- MongoDB는 document 데이터베이스라고 부르기도 하는데, collection을 만들고 그안에 document를 만들어서 데이터를 기록해놓기 때문이다.- 이 document가 자바스크립트 object 자료와 똑같은 모습으로 기록하기 때문에 자바스크립트 코드 짜던것 그대로 데이터베이스에 넣을 수 있어서 저장과 출력이 편하다. MongoDB 호스팅받기MongoDB 가입 후 무료 호스팅 받기. 서버와 MongoDB 연결1. 터미널을 열어서 npm install mongodb@5 입력(mongodb 라이브러리 설치) 2. 호스팅 받은 mongodb 접속const { MongoClient } = require('mongodb')let dbconst url = 'mong..