강디너의 개발 일지

사용자가 이미지를 선택할 때부터 백엔드 API, AWS S3로 들어가는 과정입니다. 토이 프로젝트에서 진행중인, 리뷰 등록하는 것을 보여드리면서 설명하겠습니다. 기술 스텍: Vue.js, Node.js, AWS S3, MYSQL 보통 파일 선택하는 input type=file 은 전혀 이쁘지 않아서 디자인을 입힙니다. 그래서 그 아이는 display: none 하고, 이쁜 디자인을 만들어서 누르면 input file이 열리도록 코딩합니다. 디자인된 이미지를 누르면 숨겨진 input이 클릭되도록 합니다. 이미지가 선택되면 changeFile 이벤트를 통해서 preview 이미지를 만들고, 서버에 보낼 이미지 데이터를 갖고 있으면 됩니다. // 파일 이름 const imgName = ref(''); // 파..

웹 버전 관리 시스템 만든 이유는 단 한 가지입니다. 사용자가 이전 버전의 API 규격, 데이터 타입으로 호출해서 오류가 생기기 시작 웹 서비스 배포 후, 사용자가 이전 버전의 웹을 보고 있어서 이슈 발생하는 것을 감지했습니다. 딱 담당하고 있던 프로젝트 두 개에서 같은 이유로 이슈가 발생해서 해결해야 한다고 생각했습니다. 우선 원인은 SPA 특성 때문에 발생한 이슈였습니다. 생각지 못한 곳에서 나타났는데, SPA의 장단점은 여러 가지 있지만 그중 크게 중요하지 않게 생각 한 문장이 있습니다. 처음 접속했을 때 웹에 필요한 대부분의 리소스를 다운로드하기 때문에 초기 로딩 속도가 느리다. 하지만 그 후 필요한 리소스만 다운로드하기 때문에 빠른 렌더링이 가능하다. "초기 로딩 속도가 느리다"라는 것만 이슈하..

준비물 Front-end 파일 (빌드된것) Back-end 파일 AWS Nginx 까지 띄운 것 Putty (원격접속) 환경 Window 10 1. Front-end Build 빌드가 끝난 후 dist 폴더가 만들어졌는지 확인해주세요 2. 압축도 해줍니다. 3. 자신의 EC2 에 파일을 전송합니다. pscp -i C:\path\my-key-pair.ppk C:\path\Sample_file.txt ec2-user@public_dns:/home/ec2-user/Sample_file.txt 참조 : https://docs.aws.amazon.com/ko_kr/AWSEC2/latest/UserGuide/putty.html 4. 확인하기 ! 5. 압축 해제 unzip vue-project.zip (사진은 생략)..

AWS EC2에서 Nginx 를 설치해서 웹서버를 띄워보겠습니다. 1. AWS 가입... 인증 1달라...! 2. https://aws.amazon.com/ko/getting-started/tutorials/launch-a-virtual-machine/ 에서 학습하면서 인스턴스 만들기 ! - 인스턴스 만들면 기본적인 리눅스가 뜹니다 ! 3. ssh ~~~~ 어쩌구 저쩌구로 로그인합니다 로그인 완료 이제 본격적인 시작입니다.sudo yum 을 업데이트 해달라고 하니.. 업데이트 한번 해주시고 (안해도 상관없음) sudo yum install nginx설치하다가 중간에 물어보는게 있는데 y 누르시면 됩니다. 설치가 완료 되셨으면 sudo service nginx start 를 하시면 ! 짠 ! 하지만 끝이 ..

프론트부터 배포까지 기획_v5 1. AWS 가입2. AWS 에 Linux 셋팅3. Nginx 설치4. vue, express 셋팅5. docker 설치6. docker 이미지 만든거 불러오기 (도커허브에 올려야겠다 미리) 7. 다 연동시키기 8. jenkins 셋팅?