Project History/- Seoul Dev Competition18 Nextjs에서 React-Query를 사용한 무한 스크롤 구현 경험 정리 무한 스크롤 선택 이유 웹 개발 공모전에서 기획이 나온 것이 자유게시판과 교육정보게시판이었습니다. 각각의 게시판을 어르신 친화적으로 UI를 생각해 봤을 때, 현재 서비스되는 대기업들의 앱만 봐도 무한스크롤이 많았습니다. 사람들을 중독되게 만드는 유튜브 숏츠마저도 엄지로 드레그 하여 무한으로 영상을 보는 방식이었습니다. 이 방식이 휴대폰으로 가장 손쉽게 연령 불문하고 목록들을 보여주는 방법이라는 생각이 들었습니다. 실패한 과정 무한스크롤을 구현하는 방법으로 처음에는 Redux-toolkit의 createAsyncThunk를 이용하려고 시도했었습니다. 그 이유는 기존에 상태관리툴로 Redux-toolkit을 사용하고 있었습니다. 그래서 이미 boilerplate code들이 구성되어 있어서, createAs.. 2023. 5. 27. cypress 사용 경험 및 정리 이번 공모전 프로젝트에서 저의 실력 향상을 위한 시도로 docker, nginx, 백엔드와의 협업, 배포를 새롭게 배우고 시도를 하고 있지만, 에이블스쿨 일정과 병행하다보니 하지 못했던 테스트 코드 작성을 시도해봤습니다! cypress 설치 및 세팅 npm init # package.json 생성 npm i cypress @testing-library/cypress # cypress 설치 npx cypress open # cypress 브라우저로 열기 설치 및 실행 방법은 매우 간단합니다. npx cypress open을 하면 랜덤하게 포트번호를 선정하여 브라우저를 열어줍니다. 여기서 E2E Testing을 누르면 디렉토리에 cypress 폴더와 config 파일이 생성됩니다. 자동으로 생성되는 파일과 .. 2023. 5. 18. Nextjs 빌드 후 이미지 경로를 못 찾는 문제 해결 현재 Dockerfile을 통해서 nextjs를 standalone 설정으로 이미지를 가볍게 만들어놓은 상황입니다. 그런데 유일하게 이미지가 적용되어 있는 챗봇의 프로필의 경로를 못 잡고 있는 상황이었습니다. standalone 옵션을 주게 되면 public, static 폴더를 같이 빌드하지 않기 때문에 인위적으로 dockerfile에서 COPY 명령으로 붙여주다 보니 경로설정의 문제가 생겼습니다. 챗봇의 프로필 이미지가 보이지 않아서 왜 안되는지 원인을 찾아보기 시작했습니다. 일단 네트워크탭에서 보니 경로가 /_next/image로 되고, 그 뒤로 src에 설저해준 경로가 붙는 것을 보고 어떻게 하면 저 경로를 바꿔줄 수 있을지 고민했습니다. 원래의 설정은 이런식으로 했었습니다. 이 설정은 npm r.. 2023. 5. 16. 서울 열린데이터광장 공공데이터 활용 웹 개발 - 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. 이전 1 2 3 다음
