# data web project

songgaram

[어? 이게 되네?? 팀] 일일회고 오늘 한 일 [ ] 게시판 페이지 팀원분과 합쳐서 완성! 이슈 (오피스 아워 질문) 추천데이터를 클릭하면 주소 변화는 생기는데, 페이지 변동이 없는 오류 useEffect dependency에 id를 추가해주면 바로 렌더링이 이루어진다! dependency를 주의할 것..! 코드 예시 디테일 페이지 레이아웃 고정 height를 100vh가 아니라 auto로 준 후, min-height를 100vh로 준다. 그러면 더이상 이미지가 움직이지 않는다. 또한 이미지는 img태그 보다 div태그의 백그라운드 이미지로 넣는다. 게시판 보드의 정렬 고정 list 말고 테이블을 쓰는 것이 낫다. map 안에서 async ![](https://velog.velcdn.com/images/songgaram/post/65ece62c-2862-4840-8

songgaram

[어? 이게 되네?? 팀] 일일회고 오늘 한 일 [ ] 게시판 페이지 구현 느낀점 소통이 참 중요하다고 느낀 하루다.. 같은 페이지도 각자 다르게 명칭을 하는 일이 종종 생기고, api path와 컴포넌트 네임을 통일하는 등.. get요청을 최소화 하기 위해서 전역상태로 데이터를 저장하는 것보다 props로 전달하는 것이 더 나을 때도 있다는 점을 깨달았다..! 이슈 (오피스 아워 질문) [ ] 추천데이터를 클릭하면 주소 변화는 생기는데, 페이지 변동이 없는 오류 [ ] 디테일 페이지 레이아웃 고정.. [ ] 어제 캡쳐한 오류 질문하기 내일 할 일 [ ] 전체 css 다듬고 리팩토링

songgaram

[어? 이게 되네?? 팀] 일일회고 오늘 한 일 [ ] gamedetail 페이지 서버 연결하고 좋아요 기능 넣기 이슈 데이터 통신을 map함수 안에서 했을 때 원래 boardgame 스키마에는 추천 데이터가 id array가 들어와서 이를 가지고 get요청을 여러번 보내기 위해서 map함수를 썼었다. 결과는 처참.. 계속 이런 에러가 뜨는데,,, 결론은 object가 아닌 array를 쓰라는 말 같다. 좋아요 토글 버튼 코드 처음에는 데이터 자체를 못불러와서 애를 먹었는데, useParams를 쓰는것이 아닌 그냥 데이터에서 game_id를 보내주니 put요청은 잘 보내졌다. 다만 get요청의 응답은 boolean 값이 들어오는데, `

songgaram

[어? 이게 되네?? 팀] 일일회고 이슈 1. 데이터 (Detailpage) 1) 추천 데이터 백에서 주는 방식 > 가장 좋은 방법은 백에서 api를 주는 것! 만약에 그게 불가능해서 요청을 여러번 해야하는 상태라면 연달아(순차적)으로 요청을 보내는 방식이 무리가 덜 가는 방법임. 또는 백엔드 쪽에서 node DB와 티키타카를 하는 것이 훨씬 효율적이다. 2) description 번역 > 번역은 테마와 description 모두 마친 상태 3) 워드클라우드 경로 > 워드클라우드 이미지를 깃헙에 저장하고 경로를 끌고오는 방식은 현업에서도 잘 쓰는 꼼수다! 2. 렌더링 데이터를 불러와서 이를 State로 할당해주었을 때, console을 찍어보면 초기값(={})이 찍히는 현상 발생 > 일단 초기값은 빈배열 {} 보다는 undefined를 주는 것이 좋다! 그리고 async같은 함수와 useState의 set함수도 데이터가 바뀌

songgaram

[어? 이게 되네?? 팀] 일일회고 이슈 1. 데이터 (Detailpage) > api 요청은 /gameInfo/:id 로 id 별로 게임의 정보를 불러온다. 단 디테일 페이지에서 제공하는 내용에 따라서 DB를 조금(많이) 수정할 필요성을 느꼈다. 1) 추천 데이터 백에서 주는 방식 디테일 페이지에서는 추천 게임을 5개 던져주는데, 이러한 추천 데이터를 백에서 부터 받아오는 방법에 대해서 이야기를 나누어 보았다. 첫번째로는 요청을 5번하는 방식. 너무 비효율적이다. 두번째는 처음 get요청으로 데이터를 받아올 때 RecommendID 로 받아오는 것이 아니라, 객체로 추천 데이터를 받아오는 것. 그렇게 한다면 데이터 페이지에서 보여주고 싶은 내용 (Game Title, Thumbnail, ...)를 한번에 받아올 수 있으므로 이를 사용하면 된다. 마지막으로는 새로운 api를 받아오는 방식. 추천 데이터 api를 받아오는 것이다. 내일 스크럼을 통해서

songgaram

[어? 이게 되네?? 팀] 일일회고 오늘 한 일 오늘은 home에 들어갈 멤버 소개란을 완료했다. 중간에 src={\${}\} 식으로 avatar 컴포넌트에 이미지 src 지정해주는것에 이슈가 조금 있었지만 해결! 이슈 css height 처음 css를 설정 할 때 width와 height를 %로 지정해주었다. 그러고 나서 position relative / absolute 로 `태그의 위치를 정해주었다. 그런데 창을 줄이면 내가 원하는 위치로 고정되지 않고 변하였던 것.. 해결법은 사이즈를 지정해주는 sizer `를 하나 생성해서 height를 0을 주고 padding bottom을 이미지 비율대로 주는 것. 리액트 컴포넌트의 재사용에 관하여.. 생각보다 리액트를 리액트스럽게 사용하지 않았다는 것을 깨달았다.. 컴포넌트의 재사용을 늘리기 위해서 prop을 적극적으로 사용하고 잘게 쪼개는 연습을 더 해야될거 같다.. +

songgaram

[어? 이게 되네?? 팀] 일일회고 이슈 1. 데이터 useState 할당 문제 data를 get으로 불러와서 mypage > profile 넘겨주고 useState에 할당하는데 넣어지질 않음. 화면은 새로고침을 하면 데이터가 유지되지 않음. 코드 > useState({}) > useState(undefined)로 변경해준다 > ownerData?.user_name, ownerData?.image 에도 ?를 넣어 optional chaining을 적용해준다. optional chaining 해주는 이유 : 초기값은 undefined로 컴퓨터는 js코드를 읽을 때 undefined의 . 다음을 찾지 못해 오류를 뱉어내기 때문에.. 2. React Rendering mui switch와 modal을 클릭핸들러로 연동하는 중 동작 animation이 매끄럽지 못한 이슈가 발생했다. 코드 > 결

songgaram

[어? 이게되네?? 팀] 일일회고 오늘 한 일 [ ] OAuth 프론트 코드 적용 [ ] Boardgame detail 레이아웃 설계 어려운 점 Boardgame detail - Breadcrumbs >카테고리로 들어가는 보드게임의 특성 상 유저가 도달한 위치를 알려주는 것이 유저 친화적이라고 생각한다. 단 리스트에 링크를 걸어서 navigation을 해줘야 하는데, 이 부분의 구현이 매우 고민된다. api path, url 등등.. 워드 클라우드 >이미지를 받아와야 하는데, 이를 aws에 모두 저장하기는 너무 부담스럽고,, git lab에 넣는 방식을 일단 고려해보는 것으로..! 보드게임 추천 리스트 > 비슷한 테마의 보드게임을 뿌려주는 방식이다. 이 또한 서버로 부터 데이터를 받아 렌더링을 시켜준다. 대신 보드게임 카드도 모두

songgaram

[어? 이게 되네?? 팀] 일일회고 오늘 한 일 [ ] Home page 그래프(데이터 시각화) 넣기 이슈 chart.js > 그냥 chart.js에 있는 reference 코드는 자바스크립트에서 사용하는 것이어서 리액트로 연동하는 것이 매우 곤란.. 그래서 사용한 것이 react-chartjs-2 react-chartjs-2 예시코드 import 부분 > chart.js 에서 import를 해주고 다시 ChartJS에 register를 해준다. option 부분 > option은 chart에 여러가지 옵션을 줄 수 있다. responsive의 경우 크기를 변경하기 위해서는 false로 지정. interaction의 mode를 index로 설정할 경우 index를 기준으로 tooltip을 띄어준다. plugins은 legend를 위, 아래로 지정해줄 수 있다. scales은 x축, y축의 기준선을 지워줄

songgaram

[어? 이게 되네?? 팀] 일일회고 어려운 점 swith 버튼에 글자를 넣고 싶은데, mui 컴포넌트에 접근하는 법이 어렵다.. 내가 생각한 방법 버튼 background-image에 글자 png를 넣어버리는 방법 mui 안쓰고 직접 만들기..🥲 switch 버튼 코드 해결책 ::before를 사용해서 content에 글자를 넣어보자! front 코드 then 요청으로 에러 핸들링을 해줬다. 해결책 interceptors 사용하기! interceptors란? > axios interceptors는 then이나 catch로 처리되기 전에

songgaram

1주차 정리 (04.18~04.23) 내가 한일 로그인-로그아웃 구현 intro UI 디자인 로그인 로직 설계 어려운 점 MUI를 커스텀할 때, 특정 태그에 접근하는 법 애니메이션이 있는 컴포넌트와 modal 사이의 시간차 해결 방법 (버튼 컨포넌트를 클릭하는 순간 clickhandler로 모달이 나오는 방식인데, 애니메이션이 작동하지 않는다.) refresh token (아래에 자세히) Refresh Token [프론트] - [서버] [프론트엔드] 로그인을 한다. 🔽 [백엔드] Access Token과 Refresh Token 반환. 이 때 생성한 RefreshToken은 DB에 저장함. 🔽 [프론트엔드] Access Token과 Refresh Token을 session storage에 저장. 반환받은 Access Token을 매 api 호출마다 헤더에 넣어 전송. IF : AccessToken 만료 [프론

songgaram

[어? 이게 되네?? 팀] 일일회고 어제 한 일 [x] intro components 오늘 할 일 [x] 로그인 mvp 구현 [x] intro 화면 구현 이슈 MUI MUI 초기 설치를 위해서는 yarn add @mui/material를 해주면 된다. 그런데 만약 커스터마이징을 위해서는 material-ui에서 제공해주는 함수를 사용해야 한다. 해당 package 명령어 : yarn add @mui/styles 이후에는 css를 만들어서 해당 컴포넌트에 적용하면 된다. MUI는 기본으로 제공되는 코드가 styled-component여서 수정을 하기에 조금 어려움이 있어 그냥 쓰기로 했고, 추가적으로 @emotion/react 와 @emotion/styled도 설치해줘야 동작했다.. MUI 컴포넌트가 `` 태그를 생성해주는데, 이 안에 글자를 넣는 방법을 계속 해서 찾고 있다.. 지금까지 해본 방법

songgaram

[어? 이게 되네?? 팀] 일일회고 어제 한일 [x] 화면(about,intro) 구현 해보기 @프론트 오피스아워 이슈 : 1. 로그인 로직 로그인을 구현하기 위해서 웹서비스 프로젝트의 비동기 통신 코드를 차용할 예정이었다. 기존 코드는 아래와 같다. 스켈레톤 코드 배경 📁 front/src/App.js 'user/current'로 get요청을 보내 유저데이터가 있다면 = 로그인 상태를 유지해주고 / 없다면 catch 문으로 빠져 토큰이 없다는 콘솔 메세지를 띄어준다. ![](https://velog.velcdn.com/images/songgaram/post/68702ce8-b8f5-4eaf-83d6-25097ec51

songgaram

[어? 이게 되네??팀] 일일회고 어제 한 일 [ ] about page / login & loginForm page / intro page / board game page - UI 디자인 설계 @프론트엔드 issue Refresh Token 사용! refresh token의 사용에 대해서 논의해보았다. 백엔드 영역이긴 하지만, 이전 프로젝트에서는 access token만 사용해서 이번에는 프론트에서 처리 해줘야하는 부분이 생기기 때문에 공부가 필요하다..! JWT이란? 내가 jmt..ㅎ 라고 부르는 JWT는 클라이언트와 서버 사이 통신시 권한을 인가하기 위해 사용하는 토큰이다. 위 그림은 acess token만을 이용했을 시 클라이언트와 서버간의 서

songgaram

[어? 이게 되네??팀] 일일회고 어제 한 일 [x] DB 구조 결정하기(_id) @백엔드 [x] 데이터셋 뜯어보기 @백엔드 [x] 와이어프레임 figma로 그리기 @프론트엔드 issue 그래프 시각화 chart.js 사용에 대해서 논의를 해보았다. 결론은 matplotlib으로 그림 해결 한 다음 추가적으로 할 수 있으면 좋을 거 같다. dataset 대표 데이터를 어떻게 결정하면 좋을 까?에 대해서 고민해 보았다. name값은 같은데 출시 날짜가 다른 값을 지닌 데이터들이 있었기 때문이다. 대표 데이터를 날짜순으로 선택할지, 랭크가 높은 것을 선택할지 고민하다가 코치님의 코멘트로 랭크 순으로 결정했다. 이후에는 인풋으로 넣어줄 카테고리를 결정해야 한다.. 어려운 점 로그인 로직.. 또 비동기 통신.. 로그인 로직으로 엘리스 코드를 인용할지 정말 고민이 된다.. 현업에서는 어떻게 사용하는지를 모르니까 관련된 질문

songgaram

[어? 이게 되네??팀] 일일회고 오늘 한 일 프로젝트 주제 선정 (데이터셋 종류 결정) 프로젝트 타겟 설정 데이터셋 활용 방법 논의 프론트 와이어프레임 그리기 issue 데이터 종류를 결정하는데 있어서 오랜 시간이 들었다. 한국 데이터를 사용하고 싶었지만 kaggle로는 한계가 있었다..🥲 결국 데이터셋을 결정하고 이를 어떻게 활용할 것인지에 관해 논의해보았다. 엘리스에서는 단순히 데이터를 분석하고 이를 시각화하여 웹 서비스에 더 초점을 두는 것을 권장했다. 그래서 우리 팀은 데이터의 키워드를 카테고리화하여 중복 선택하는 것을 제외하고, 정렬하는 방식을 채택했다. 중복 선택을 가능하게 하려면 모델링을 해야하는데, 이는 아무래도 시간을 많이 잡아먹을거 같다.. 프론트에서 해야 할 일 그래프 시각화 라이브러리 선택하기 UI 툴 선택하기 내일 할 일 구현할 기능과 각자 역할에 대해 의사결정하기 데이터 인풋 값의 디테일 정