Projects
-
04. 모바일 관련 문제들 해결하기 (우클릭 방지, input range 등)Projects/뮤직 플레이 리스트 2021. 6. 14. 14:06
body { ... -webkit-touch-callout: none; } 모바일에서 안되는 것 투성이...? 이 전 포스트에서 CI / CD 툴을 연동한 이유는 사실 이번 포스팅의 문제를 해결하기 위해 구축한 사전 작업이다. 분명 PC 브라우저에서 화면의 레이아웃이나 동작들이 모두 이상없이 잘 작동했는데, 모바일로 들어가보니 되는 기능이 하나 없었다. 그 중 대표적인 몇 가지를 적어 보자면 아래와 같다. 1. 화면 레이아웃 깨짐 (100vh 문제 포함) 2. 이미지 버튼을 꾹 누르면 브라우저의 이미지 저장 창이 나타나서 음악을 5초뒤, 5초 전으로 건너 뛸 수 없음 3. 에서 드래그 작동 안함 4. javascript로 volume 컨트롤이 안됨 5. drag & drop 기능 작동 안함 설렌다... ..
-
03. CI / CD 툴을 적용해 단순 반복 작업 해결하기 (Jenkins)Projects/뮤직 플레이 리스트 2021. 6. 12. 15:33
단순 반복 작업의 연속... 그 전까지 나는 앱을 배포하기위해 다음과 같은 과정을 거쳤다. 1. 로컬 환경에서 테스트 하기 2. 이상이 없는 최종 버전 build하기 3. build로 나온 결과물인 dist폴더에 있는 내부 작업물들을 복사해서 build버전이 있는 git 레포지토리 폴더에 옮겨넣기. 4. build 프로젝트 git push 하기 5. 터미널에서 내 서버로 접근한 뒤(ssh) build 프로젝트 pull 받기 6. 배포 버전에 이상이 있다면 위 과정 반복하기. 모바일 환경에서 테스트할 수 밖에 없는 상황이면 다음과 같은 과정을 수 없이 반복해야 했고, 그러한 단순 작업에 들어가는 시간적, 감정적 비용이 상당했다. CI / CD란? 이러한 문제를 해결하기 위해 우리의 위대한 개발자들은 코드 ..
-
03. 모바일 <video>태그 자동 재생 관련 이슈Projects/우주 심리 테스트 2021. 6. 11. 14:38
이번 프로젝트에서 가장 골치아팠던 부분은 바로 일부 페이지에서 사용되는 동영상을 자동재생하는 기능이었다. 쉽게 될 줄 알았는데 아무래도 브라우저에서 사용자가 원하지 않는 동영상이 자동으로 재생되는것을 막아서 발생하는 문제였는데, 이를 한번 정리해보겠다. video 태그에 autoplay가 작동하기 위해서는 muted 요소와, playsinline 요소(iOS)가 추가되어야 한다. 많은 브라우저에서 정책상의 문제로 소리가 나오는 동영상은 자동 재생 하지 않는다. 즉 음소거 영상의 경우에만 자동재생이 허용된다. 이를 위해 자동재생이 필요한 video 태그에는 muted 요소를 추가해줘야한다. * video파일에 audio track이 존재하지 않으면 muted속성이 없어도 자동재생이 된다. (출처: http..
-
02. 모바일 100vh 스크롤 문제 해결하기Projects/우주 심리 테스트 2021. 6. 9. 20:10
문제발견 모바일 화면에서 전체화면을 만들기 위해 100vw, 100vh로 설정을 했다. 브라우저에서 확인 하면 이상이 없지만, 실제 모바일 브라우저에서는 스크롤이 생기는 현상이 발견되었다...! vw와 vh 우리는 종종 스크린 사이즈의 너비를 혹은 높이 이용해 css 스타일링을 하곤 한다. 이 때 사용하는 단위가 바로 vw, vh 인데 1vw는 스크린 너비의 1%, 1vh는 스크린 높이의 1%를 말한다. 다시 말해, 100vw는 스크린 가로 사이즈, 100vh는 스크린 세로 사이즈를 의미한다. 이번 mbti 페이지에는 이 vw, vh라는 단위를 자주 사용했다. 브라우저의 관리자 모드에서 모바일 환경에서의 해상도를 미리 확인 해 볼수 있는데, 처음에 우리는 이 모드로 계속해서 확인 하면서 화면에 딱 맞는 ..
-
02. SSL 적용하기 (AWS Certificate Manager, Route 53)Projects/뮤직 플레이 리스트 2021. 6. 6. 17:11
이제 도메인(http://music.leehov.in)을 입력하면 내가 만든 music player 앱을 확인할 수 있다. 하지만 https가 아닌 http로만 접속이 가능하다. 조금더 안전한 사이트로 만들기 위해 ssl 인증서를 발급받아서 https로만 접근을 할 수 있도록 만들어보자! 1. 네임 서버 변경하기 (Route 53) 우선 아마존에서 무료로 제공하는 SSL인증서를 이용하기 위해서는 내 도메인의 네임서버(NS)를 변경해주어야한다. 네임서버(NS)는 A나 CNAME등의 특정 도메인에 관한 DNS 레코드를 저장하는 서버다. 그래서 사실 내가 music.leehov.in라고 쳤을때에는 leehov.in에 등록되어있는 NS에 먼저 접근을 해서 관련 DNS 레코드들을 확인 후 응답하는 형식이다. 우선..
-
01. 앱 내 서버에 배포하기 (AWS EC2, nginx)Projects/뮤직 플레이 리스트 2021. 6. 6. 15:16
mbti 프로젝트에서 배포에 대해서 다루긴 했지만 이번 포스팅에서는 AWS와 관련해서 조금 더 자세하게 다뤄보고자 한다. 해당 포스팅은 도메인을 구매했다는 가정하에 나머지 내용을 다룬다. (나는 Gabia에서 도메인을 구매를 했다.) 1. react build로 배포버전 생성하기 npm run build 우선 명령어를 통해 react 앱을 빌드한 뒤 형성된 build 폴더를 git에 푸쉬했다. 2. 인스턴스 (EC2) 생성하기 인스턴스란 쉽게 말해 서버 컴퓨터를 말한다. AWS에서 제공하는 클라우드 인스턴스를 EC2라고 한다. 우선 인스턴스를 만들어 배포할 App을 올려보자! EC2 > 인스턴스 > 우측 상단의 인스턴스 시작 버튼 클릭 > 원하는 사양의 인스턴스 선택 인스턴스는 내가 원하는 사양으로 선택..