Experience/- KT AIVLE School42 KT AIVLE School 빅프로젝트 - 프론트에서 S3의 GET요청을 대기하는 로직 S3에 업로드 후 바로 해당 URL을 GET요청 했을 때 실패하는 경우가 생겼습니다. 그래서 이미지가 로드되지 않거나, 영상 재생이 되지 않아 새로고침을 해야하는 상황이 생겼습니다. 이는 업로드 시에 lambda 함수가 작동하는 동안이나, S3 자체의 속도 문제일 것으로 생각이 됩니다. 이는 사실 백엔드에서 작동을 하는지 확인 후에 응답을 해주는 것이 맞는 로직 같았지만, 백엔드에서 처리해주기를 기다리기엔 시간이 부족했어서 프론트에서 처리를 하기로 했습니다. 뿐만 아니라 유저가 버튼을 여러번 눌렀을 때 중복 요청이 생기는 문제가 있었습니다. 그래서 아래의 함수를 통해서 요청 확인 후에 버튼의 로딩 처리를 확실히 해서 요청이 여러번 가지 않도록 했습니다. export default function chec.. 2023. 7. 19. KT AIVLE School 빅프로젝트 - 배포 과정 정리 AWS 설정 IAM User 등록 - group 설정 - MFA 적용 VPC 설정 subnet 2개 생성 인터넷 게이트웨이 생성 (서브넷 2개 연결) EC2 생성 및 설정 t2.medium (linux, cpu 4, 메모리8g 인스턴스, gp2 용량) 인스턴스 생성 보안 그룹 설정 탄력적 IP 주소 연결 ec2 인스턴스 원격 접속 ssh-keygen -t ed25519 -b 4096 으로 pub key 생성 cat ~/.ssh/id_ed25519.pub 해서 키 복사 github의 settings 페이지 안 deploy keys에 키 붙여넣기 EC2에 git 설치 및 레포지토리 클론 git 설치 sudo yum install git git clone 우리의 레포지토리 git pull origin EC2에.. 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. AIVLE School 17주차 정리 - 미니프로젝트 7차 빅프로젝트를 위한 4조 배정 및 조장하기로 결정 빅 프로젝트 전에 미니프로젝트 7차부터 팀이 결정이 됩니다. 저는 이때부터 조장을 맡게 되었습니다. 2회 정도 미니프로젝트에서 조장을 맡으면서 느꼈던 에이블러들과의 협업 방법을 고민했던 것을 토대로 조원들에게 개발 마인드셋과 소통이 왜 중요한지 이야기했습니다. 소통의 중요성 저의 당시의 가치관은 정확한 소통과 소통 에너지 소모를 최소화하는 것이 중요하다입니다. 그 이유는 기한이 짧은 개발을 진행할 때 선택과 집중 및 코드 생산성을 높이려면 소통이 가장 중요하다고 생각했기 때문입니다. 실제로 저는 공모전 경험을 통해서 소통 부재가 큰 시간과 에너지를 소비하게 되는 경우를 팀원들에게 전달했습니다. 협업 체계 정립 먼저 저는 톡방의 게시판에 모두의 휴대전화번호,.. 2023. 5. 27. 이전 1 2 3 4 5 ··· 7 다음
