폰트는 다른 리소스보다 다운로드하는데 용량을 많이 차지하거나 지연되고 브라우저는 리소스를 가져올 때까지 텍스트를 렌더링하지 못하도록 차단될 수 있다. 따라서 WebFont 로드를 최적화하는 방법은 중요하다.현재 페이지에서 사용할 리소스를 우선순위를 높게하여 빠르게 가져

배포 연대기 상편에 이어서.. 접속 했더니 Nginx 500 에러를 마주했다.. 500 에러.. 난감했지만 에러를 잡기 위해서는 어디서 발생한 것인지 힌트를 얻는게 중요하다고 생각한다. 그래서 에러 발생지를 찾기 위해 Nginx 에러 로그를 확인하는 법을 검색했다.

도커로 배포 하면서 겪었던 에러들의 향연과 길고 긴 항해의 여정을 기록으로 남기려고 한다..먼저, 우리 Elice Wiki 서비스 구조도는 이러하다.Front-end는 Nginx 서버를, Back-end는 Node 서버를 Docker Container로 빌드하여 배포하

최종회고 상편에 이어서... modal 위치 > 파트너님은 modal까지 직접 만드시는 능력자 분이셨다. 다만 내가 만들어주신 modal을 사용하면서 오류가 발생하였는데, 모달이 현재 창을 기준으로 뜨는 것이 아니라, 상단에 뜨는 것이었다. modalBackgro

인공지능 웹 서비스 프로젝트가 드디어 끝! 팀원들과 으쌰으쌰하면서 5주라는 기간 동안 어떻게 해왔는지도 모르게 후루룩 지나간 느낌이 제일 강하다. 인간은 망각의 동물이기 때문에 그동안 밀린 이슈들을 모아모아 회고에 적기로 한다.사실 프로젝트 하면서 초기 세팅을 하면서

게시판 페이지 팀원분과 합쳐서 완성!useEffect dependency에 id를 추가해주면 바로 렌더링이 이루어진다! dependency를 주의할 것..!코드 예시height를 100vh가 아니라 auto로 준 후, min-height를 100vh로 준다. 그러면 더

[어? 이게 되네?? 팀] 일일회고 오늘 한 일 [ ] 게시판 페이지 구현 느낀점 소통이 참 중요하다고 느낀 하루다.. 같은 페이지도 각자 다르게 명칭을 하는 일이 종종 생기고, api path와 컴포넌트 네임을 통일하는 등.. get요청을 최소화 하기 위해서

[어? 이게 되네?? 팀] 일일회고 오늘 한 일 오늘은 home에 들어갈 멤버 소개란을 완료했다. 중간에 src={\${}\} 식으로 avatar 컴포넌트에 이미지 src 지정해주는것에 이슈가 조금 있었지만 해결! 이슈 css height 처음 css를 설정 할

[어? 이게 되네?? 팀] 일일회고 오피스아워 이슈 1. 데이터 (Detailpage) 1) 추천 데이터 백에서 주는 방식 2) description 번역 kaggle 데이터의 특성 상, 영어로 되어 있어 이를 한국어로 번역을 해줘야 한다. 기존 워드클라우드를 번

api 요청은 /gameInfo/:id 로 id 별로 게임의 정보를 불러온다. 단 디테일 페이지에서 제공하는 내용에 따라서 DB를 조금(많이) 수정할 필요성을 느꼈다.1) 추천 데이터 백에서 주는 방식디테일 페이지에서는 추천 게임을 5개 던져주는데, 이러한 추천 데이터

오늘은 home에 들어갈 멤버 소개란을 완료했다. 중간에 src={\`${}\`} 식으로 avatar 컴포넌트에 이미지 src 지정해주는것에 이슈가 조금 있었지만 해결!css height처음 css를 설정 할 때 width와 height를 %로 지정해주었다. 그러고 나

data를 get으로 불러와서 mypage > profile 넘겨주고 useState에 할당하는데 넣어지질 않음. 화면은 새로고침을 하면 데이터가 유지되지 않음. useState({}) > useState(undefined)로 변경해준다ownerData?.user_na

OAuth 프론트 코드 적용Boardgame detail 레이아웃 설계Boardgame detail - Breadcrumbs카테고리로 들어가는 보드게임의 특성 상 유저가 도달한 위치를 알려주는 것이 유저 친화적이라고 생각한다. 단 리스트에 링크를 걸어서 navigati

Home page 그래프(데이터 시각화) 넣기그냥 chart.js에 있는 reference 코드는 자바스크립트에서 사용하는 것이어서 리액트로 연동하는 것이 매우 곤란.. 그래서 사용한 것이 react-chartjs-2import 부분chart.js 에서 import를

swith 버튼에 글자를 넣고 싶은데, mui 컴포넌트에 접근하는 법이 어렵다..버튼 background-image에 글자 png를 넣어버리는 방법mui 안쓰고 직접 만들기..🥲::before를 사용해서 content에 글자를 넣어보자!then 요청으로 에러 핸들링을

1주차 정리 (04.18~04.23) 내가 한일 로그인-로그아웃 구현 intro UI 디자인 로그인 로직 설계 어려운 점 MUI를 커스텀할 때, 특정 태그에 접근하는 법 애니메이션이 있는 컴포넌트와 modal 사이의 시간차 해결 방법 (버튼 컨포넌트를 클릭하는 순간

intro components로그인 mvp 구현intro 화면 구현MUI 초기 설치를 위해서는 yarn add @mui/material를 해주면 된다. 그런데 만약 커스터마이징을 위해서는 material-ui에서 제공해주는 함수를 사용해야 한다. 해당 package 명

화면(about,intro) 구현 해보기 @프론트'user/current'로 get요청을 보내 유저데이터가 있다면 = 로그인 상태를 유지해주고 / 없다면 catch 문으로 빠져 토큰이 없다는 콘솔 메세지를 띄어준다.위의 try-catch 문이 종료되면 setIsFetc

about page / login & loginForm page / intro page / board game page - UI 디자인 설계 @프론트엔드refresh token의 사용에 대해서 논의해보았다. 백엔드 영역이긴 하지만, 이전 프로젝트에서는 access to

DB 구조 결정하기(\_id) @백엔드데이터셋 뜯어보기 @백엔드와이어프레임 figma로 그리기 @프론트엔드그래프 시각화 chart.js 사용에 대해서 논의를 해보았다. 결론은 matplotlib으로 그림 해결 한 다음 추가적으로 할 수 있으면 좋을 거 같다.datas