nextjs10 KT AIVLE School 빅프로젝트 - 프론트에서 S3의 GET요청을 대기하는 로직 S3에 업로드 후 바로 해당 URL을 GET요청 했을 때 실패하는 경우가 생겼습니다. 그래서 이미지가 로드되지 않거나, 영상 재생이 되지 않아 새로고침을 해야하는 상황이 생겼습니다. 이는 업로드 시에 lambda 함수가 작동하는 동안이나, S3 자체의 속도 문제일 것으로 생각이 됩니다. 이는 사실 백엔드에서 작동을 하는지 확인 후에 응답을 해주는 것이 맞는 로직 같았지만, 백엔드에서 처리해주기를 기다리기엔 시간이 부족했어서 프론트에서 처리를 하기로 했습니다. 뿐만 아니라 유저가 버튼을 여러번 눌렀을 때 중복 요청이 생기는 문제가 있었습니다. 그래서 아래의 함수를 통해서 요청 확인 후에 버튼의 로딩 처리를 확실히 해서 요청이 여러번 가지 않도록 했습니다. export default function chec.. 2023. 7. 19. KT AIVLE School 빅프로젝트 - 프로필 수정 로직에 대한 고민 올해 nextjs로 개발하면서 form, input에 대해 고민 없이 개발을 했던 제가 이번 빅프로젝트를 통해서 배운 것을 정리했습니다. 제가 사용한 패키지들이 다소 에이블러분들에게 생소하실 수 있으니, 경험이 없으시면 넘어가시는 것을 추천드립니다. 사용한 패키지 nextjs typescript redux-toolkit tailwindcss shadcn/ui react-hook-form, zodResolver, zod axios 추가 설명으로 사용 @tanstack/react-query 구현 과정 shadcn/ui과 useForm, zod 설정 위와 같이 zodResolver를 사용하기 위해서 설정을 해주어야 합니다. Validation을 zod로 설정해주는 것입니다. 추가로 Interface도 설정하여.. 2023. 7. 19. KT AIVLE School 빅프로젝트 - 개발 환경 설정 Dockerfile, docker-compose, 환경변수(.env) 설정 가장 먼저 한 것은 docker 관련 설정들 입니다. 웹 개발 공모전 경험을 바탕으로 가장 먼저 해야하는 것은 docker 설정을 통해 개발자들간의 환경을 일치시키는 것이었습니다. 팀원들의 docker에 대한 이해도를 높여주기 위해서 틈틈히 사용방법을 알려주고 docker desktop 설치를 권했습니다. backend/Dockerfile 코드 # backend/Dockerfile FROM python:3.10.10 # opencv 설치를 위한 라이브러리 설치 RUN apt-get update && apt-get install -y libgl1-mesa-glx # 영상 자르기 위한 ffmpeg 설치 RUN apt-get updat.. 2023. 7. 19. KT AIVLE School 빅프로젝트 - Django와 React 소통하기 미니프로젝트에서 저희 조를 고생시켰던 Django - Nextjs CORS 설정을 해서 이곳에 공유해 둡니다! Nextjs 설정 axios를 주로 쓰기 때문 에 axios instance를 만들어서 모든 요청에 동일하게 적용하도록 설정했습니다. import axios from "axios"; // 환경변수 불러오기 const API_DOMAIN = process.env.NEXT_PUBLIC_ENV_API_DOMAIN; const API_URL = process.env.NEXT_PUBLIC_ENV_API_URL; // axios 인스턴스 생성 const instance = axios.create({ baseURL: API_URL, // 도메인 허용 withCredentials: true, // CORS 허.. 2023. 7. 19. Nextjs SEO 개선 과정 정리 2023년 온라인 졸업전시 웹사이트를 배포한 후 검색 엔진 최적화를 진행하고 프로젝트를 마무리한 과정을 기록해두기 위해서 글을 작성했습니다. 전 과정을 기록하지 않고 출처에 나와있는 과정들을 따라했기에 생략이 되어있을 수도 있습니다! sitemap.xml과 robots.txt 설정 티스토리 블로그의 검색 최적화와 비슷했습니다. robots.txt를 생성하고, Sitemap 정보에 대해서 특정 url로 진입하라는 내용을 넣어주면 됐습니다. sitemap의 경우에 블로그는 동적으로 생성되는 로직이 자동으로 되어있었습니다. 하지만 Nextjs는 Sitemap을 직접 넣어주거나, 동적으로 생성되게 하기 위해서 pages/api 폴더를 사용했습니다. 그리고 api 폴더로 강제되는 url을 next.config.j.. 2023. 7. 17. Nextjs에서 React-Query를 사용한 무한 스크롤 구현 경험 정리 무한 스크롤 선택 이유 웹 개발 공모전에서 기획이 나온 것이 자유게시판과 교육정보게시판이었습니다. 각각의 게시판을 어르신 친화적으로 UI를 생각해 봤을 때, 현재 서비스되는 대기업들의 앱만 봐도 무한스크롤이 많았습니다. 사람들을 중독되게 만드는 유튜브 숏츠마저도 엄지로 드레그 하여 무한으로 영상을 보는 방식이었습니다. 이 방식이 휴대폰으로 가장 손쉽게 연령 불문하고 목록들을 보여주는 방법이라는 생각이 들었습니다. 실패한 과정 무한스크롤을 구현하는 방법으로 처음에는 Redux-toolkit의 createAsyncThunk를 이용하려고 시도했었습니다. 그 이유는 기존에 상태관리툴로 Redux-toolkit을 사용하고 있었습니다. 그래서 이미 boilerplate code들이 구성되어 있어서, createAs.. 2023. 5. 27. 이전 1 2 다음
