분류 전체보기126 Nextjs standalone 빌드 와 nginx 연결 후 font 파일을 찾지 못하는 현상 기록 https://hini7.tistory.com/243#toc-%EB%AC%B8%EC%A0%9C%20%EB%B6%84%EC%84%9D Next의 css에서 쓴 font asset을 빌드 시 제대로 받아오지 못하는 이슈 요약 css 내부의 font asset을 받아오는 path를 절대경로가 아닌 상대경로로 바꾸면 된다. 문제 css에 url로 정의해 둔 font asset이 개발모드(dev)에서는 잘 적용되다가 실서버(production)에서 반영되지 않는 hini7.tistory.com 위의 예시처럼 해결을 해볼까 했지만, 저에게는 맞지 않았습니다. 계속 build 과정에서 에러가 발생했고, 해당 font 파일들을 찾을 수 없다는 에러가 계속 반복되었습니다. docker-compose up으로 nextjs.. 2023. 5. 15. 서울 열린데이터광장 공공데이터 활용 웹 개발 - 6주차 정리 게시글 CRUD 완료 페어 프로그래밍을 통해 진행하는데에 에로사항이 조금 있었습니다. 팀원과 저의 실력차이가 있어서, 페어 프로그래밍을 하는 것에 대한 고민이 있었습니다. build 준비 위한 eslint 수정 eslint를 파일 기반으로 수정했습니다. 수정하면서 tailwindcss 의 클래스명도 정렬이 되도록 설정했습니다. 유저폼 관련 프론트, 백 최종 구현 JWT 발급으로 정보를 받기 위해서 모달창을 만들고, 요청을 처리하는 로직을 구현했습니다. 필터링 기능 최종 구현 사이드바의 날짜, 종류, 가격, 검색어에 따른 react-query의 요청을 처리했습니다. 날짜는 react-datepicker를 사용했습니다. 폰트 서브셋 적용 폰트의 서브셋을 활용해서 폰트 로드시간을 줄였지만, 구글 웹폰트로 교체.. 2023. 5. 15. 서울 열린데이터광장 공공데이터 활용 웹 개발 - 5주차 정리 프론트앤드 CRUD 구현 2가지 진행 중 필터링 기능 추가 구현 폰트 최적화 및 빌드 에러 해결 폰트 최적화에 대한 구현은 좀 더 브라우저의 동작에 대해서 알게 될 수 있었습니다. 제가 폰트 관련해서 글을 작성한 것이 있으니 참고하시면 좋습니다! spring 스케줄러 설정 fastapi에서 모델 업데이트 기능, 데이터 분석 데이터 설정 추가 fastapi를 선택한 것은 매우 잘한 선택이었습니다. django를 선택했었으면, 설정에 시간을 더 들여야 했을 뿐만 아니라, 추가적인 학습이 들어가야 했어서, 각자 할 일이 바쁜 와중에 인공지능용 백엔드가 흐지부지 됐을 가능성이 있었습니다. 인프라 구조 다시 정립 처음으로 체계적인 협업과 배포를 준비하다보니, nginx에 대한 확신이 없었고, nginx를 리버스 .. 2023. 5. 15. Nextjs, Fastapi의 Docker Image 최적화 진행하기 [ Nextjs 이미지 최적화 ] 변경한 부분 설명 multi stage를 활용하여, 불필요한 파일 제외 npm ci를 통해 설치 + package-lock을 통하여 설치되는 버전 고정 환경변수 WORK_DIR 설정으로 유지보수를 고려 보안을 고려해서, group과 user를 추가하여 COPY 명령 시 --chown 사용 next.config.js 파일에 output: "standalone" 설정 추가하여 최적화 standalone은 수동으로 static folder, public 디렉터리 복사 과정이 필요해서 COPY 추가 [ Fastapi 이미지 최적화 ] 당시 mecab이 속도면에서 이득이 있어서 따로 추가적으로 불필요하게 설치를 하면서, base image의 경우에 python:3.10을 그대로 .. 2023. 5. 15. 서울 열린데이터광장 공공데이터 활용 웹 개발 - 4주차 정리 한 일 추천 시스템 초기 버전 캡슐화 진행 시작 검색 기능 및 UI 추가 유저 정보 받기 위한 폼 UI 제작 랜딩 페이지 초안 제작 휴대폰으로 UI 테스트 앞으로 할 일 쿠키에 JWT를 활용하여 비식별화된 유저 정보 담기 추천시스템 구현, fastapi로 데이터 응답하기 성공하기 필터링 기능 추가 구현 느낀점 필터링 기능을 UI로 구현하던 중에, RTK로 만든 search State가 filter State와 애매하게 분리된 부분이 있었습니다. search State에선 localstorage로 검색 기록을 저장 및 불러오는 과정이 있어서 분리를 해주는 것이 맞았으나, 단순하게 search 라고 파일명과 state명을 정한 것이 후에 유지보수에 좋지 않은 부분을 깨닫게 되었습니다. react-hook-f.. 2023. 5. 14. Nextjs 폰트 최적화 시도하기 현재 무한스크롤을 보여주는 educations와 posts의 JS 파일이 용량이 큰 것으로 표시가 됩니다. 이를 해결하기 위해서 여러 가지 최적화를 알아보고 이 게시글에 정리합니다. Noto Sans Kr, Noto Serif KR 폰트 최적화 하기 빠른 3G로 설정하고 받아왔을 때 유일하게 폰트가 혼자서 22.22초가 걸리는 것을 보고 너무 심하다는 것을 느꼈습니다. 그래서 이를 해결하는 방법을 고민했습니다. (현재 파비콘은 아직 코드만 넣고, png 파일을 넣지 않았습니다.) 이 시점에서 font를 가져오는 방법은 public 폴더에 otf 파일을 직접 넣고, css 파일에 @font-face로 정의를 해뒀습니다. next/font 적용하기 올해 1월에 nextjs v13이 등장하고 @next/fon.. 2023. 5. 8. 이전 1 ··· 3 4 5 6 7 8 9 ··· 21 다음
