본문 바로가기

Programming149

[배리어프리] #12 최종 발표와 수상 이번 2월, 드디어 배리어프리 앱개발 콘테스트를 마무리했다. 시간은 조금 지났지만 아직 생생한 최종 발표의 순간을 회고해보고자 한다. 최종 발표는 오프라인으로 진행되었다. 오프라인 발표 자체가 굉장히 오랜만이라 긴장되면서도 설레는 기분이었다. 발표 장소에 도착하자 후드집업과 뱃지, 급속 충전기를 하나씩 배부해주셨다🙊 이런 굿즈(?) 참 좋아하는 나.....열심히 쓰겠습니다 하핳 각 팀이 발표 + 시연 영상으로 이루어진 최종 발표를 진행하고, 질의 응답을 하는 시간을 가졌다. 발표가 모두 종료된 후, 당일 바로 시상식까지 진행된다. 이 순간이 가장 긴장되었다. 오랜 기간 진행된 공모전이라 끝난다는게 시원섭섭한 마음도 들었지만, 열심히 준비했고, 준비한 모든 걸 다 보여드려서 후회는 없었다. 그래도 팀원 모.. 2023. 6. 23.
[React] 클라이언트 배포 : Vercel편 오늘은 vercel을 이용하여 React 프로젝트를 배포해볼 것이다. 준비물 : 구매 후 AWS Route53 등록 완료한 도메인 : 배포하고자 하는 프론트 github repository 1. Vercel 가입 vercel 사이트에 접속한다. https://vercel.com/login (계정이 없으면 회원가입한다.) Login – Vercel Welcome to Vercel. Log in with GitHub, GitLab, Bitbucket, or email to deploy websites for free with zero configuration, automatic SSL, and global CDN. vercel.com 2. Project 생성 https://vercel.com/new 에서 본.. 2023. 5. 15.
[React & Spring Boot] 클라이언트 배포(2) : Nginx, EC2 이번 글에서는 EC2 인스턴스에서 Nginx, pm2를 이용해 리액트 프로젝트를 배포해볼 것이다. 글 중간중간에 EC2에서 다운받으라는 것이 있으면 apt-get install로 다운받으면 된다. 본인은 sudo su 후 root에서 모든 명령어를 진행하였다. 목차 1. Clone React Project Repository 2. Nginx 설정 3. PM2로 빌드 파일 배포 1. 리액트 프로젝트 Clone EC2 인스턴스에서 리액트 프로젝트를 클론해서 받아올 것이다. $ git clone 깃허브레포지토리주소 클론 후, 해당 프로젝트 폴더로 이동한다. $ cd 리액트프로젝트폴더명 원래는 클론 후에 npm run build 명령어로 EC2에서 리액트 프로젝트 빌드를 하는 방법도 있지만, 내가 가진 인스턴스.. 2023. 5. 5.
[React & Spring Boot] 클라이언트 배포(1) : Route 53, EC2 프론트엔드, 백엔드 각 팀의 개발이 마무리 되어가서 최종 도메인 배포를 진행했다. 최종 목표는 (EC2 인스턴스 1개) + (도메인 1개) 에 프론트, 백 프로젝트를 모두 배포하는것이다. 백엔드는 이미 Github Actions로 배포되어 있는 상태여서, 프론트 배포에 초점을 맞춰서 진행할 예정이다. 최종적으로는 EC2 인스턴스와 연결된 hello.com 도메인 하나를 사용하면서 www.hello.com은 리액트 프로젝트용 3000 포트를, api.hello.com은 스프링 프로젝트용 8080 포트를 포워딩하도록 구현할 것이다. (여기서 hello.com은 임의의 예시 도메인이다. 본인은 babyakmate.com이라는 도메인을 사용했다.) 이번 글에서는 Route 53, EC2 관련 설정을 한다. ▷ .. 2023. 5. 5.
[React] EC2 인스턴스에 React 프로젝트 배포 모든 과정은 EC2 인스턴스 ssh에서 진행한다. 0. React Project를 담을 폴더 생성 나는 'client'라는 이름의 폴더를 만들고, 해당 폴더로 이동했다. $ mkdir client $ cd client 1. Github에 있는 React 프로젝트 클론 $ git clone 레포지토리 주소 $ cd 레포지토리명 ( /client/myRepository ) 나는 /home/ubuntu/client/babyak-front-ts 경로였다. 2. Nginx 설정 (1) Nginx 다운로드 (2) config 파일 수정 $ cd /etc/nginx/sites-enabled $ sudo vim default server { # listen 80 default_server; # listen [::]:8.. 2023. 5. 3.
[캡스톤디자인프로젝트] YOLOv5 & Flask YOLOv5 & Flask 이번에는 Flask를 이용하여 custom YOLOv5가 돌아가는 모델 서버를 만들어 볼 것이다. [참고한 자료] Python 3.7.9 Flask 2.2.3 1. 실행 환경 설정 1-1. Flask 설치 설치하면서 Module Not Found가 뜨면 시키는대로 라이브러리를 install 해준다. $ pip3 install Flask 1-2. 프로젝트 폴더 생성 원하는 위치에 프로젝트 폴더를 만든다. $ mkdir 프로젝트명 1-3. app.py 만들기 생성된 프로젝트 안에 app.py 파일을 만든다. 테스트용으로 "Hello World!"를 출력하는 코드를 작성해봤다. from flask import Flask # App INIT app = Flask(__name__) @a.. 2023. 4. 19.
[캡스톤디자인프로젝트 | 그로쓰] Tencent Cloud GPU 서버 접속 학교에서 발급 받은 Tencent Cloud GPU 서버에 프로젝트 환경 설정을 진행할 것이다. 1. Tencent Cloud 로그인 https://www.tencentcloud.com/en/account/login?s_url=https%3A%2F%2Fwww.tencentcloud.com%2Fko%2Fdocument%2Fproduct%2F213%2F17278 Sign in - Tencent Cloud www.tencentcloud.com 나는 학교에서 발급받은 CAM User 계정으로 로그인하였다. 2. 콘솔 접속 우측 상단의 '콘솔'을 클릭 3. 인스턴스 접속 3-1. 인스턴스 Region 선택 내가 할당 받은 서버는 싱가폴을 메인으로 해서, Region에서 선택해줬다. 3-2. 인스턴스 Start 인.. 2023. 4. 11.
[Cors] Cors 에러 삽질 기록 드디어 배포된 스프링 부트 API를 프론트팀이 연결하는 과정이었다. 그런데 계속 Cors 에러가 떴다. 엄청난 시간동안 머리를 싸맸는데 결론은 시시콜콜한 문제였다. 영광의 삽질을 기록한다. 1. 이름만 같은 CorsFilter, 넌 누구냐 임마 내 프로젝트는 CorsConfig에서 CorsFilter를 정의해서 사용했다. import org.springframework.context.annotation.Bean; import org.springframework.context.annotation.Configuration; import org.springframework.web.cors.CorsConfiguration; import org.springframework.web.cors.UrlBasedCorsC.. 2023. 3. 7.
[Spring boot - OAuth2] Naver Login 구현 #2 오늘은 인가 코드를 이용해 사용자 정보를 받아오는 코드를 작성해볼 것이다. [참고] Naver Developers https://developers.naver.com/docs/login/devguide/devguide.md#3-1-3-%ED%95%84%EC%88%98-%ED%95%AD%EB%AA%A9-%ED%99%95%EC%9D%B8 네이버 로그인 개발가이드 - LOGIN 네이버 로그인 개발가이드 1. 개요 4,200만 네이버 회원을 여러분의 사용자로! 네이버 회원이라면, 여러분의 사이트를 간편하게 이용할 수 있습니다. 전 국민 모두가 가지고 있는 네이버 아이디 developers.naver.com 1. 환경설정 (1) build.gradle (2) SecurityConfig (3) application.. 2023. 3. 4.

티스토리툴바