분류 전체보기
-
우아한테크캠프 4기 최종 합격 후기Activity/우아한테크캠프 4기 2021. 6. 25. 13:59
이 글은 후에 다가오는 우아한 테크캠프를 준비하시는 분들께 도움이 되었으면 하는 의미에서 작성한 글입니다. 저작권 때문에 문제를 알려드릴 수는 없지만, 개인적으로 어떻게 준비를 했는지 최대한 자세하게 작성을 해보겠습니다. 서류 접수 지난 4월 말에 배달의 민족 기술 블로그에 글 하나가 올라왔다. 내가 그토록 기다리던 우아한 테크캠프 4기의 모집이 시작된 것이다. 게임 개발자에서 웹 개발자로 전향한 내게 있어서 큰 전환점이 될 것 같아 바로 지원을 했다. 우테캠에 지원하게 된 세가지 이유는 아래와 같다. 1. 좋은 프론트엔드 동료 개발자들과의 협업 기회 - 지방에 게임 개발자로 살면서 가장 큰 갈증을 느낀 부분이다. 주변에 웹 개발자가 없었고, 때문에 코드리뷰를 하거나 다양한 기술에 대한 의견을 공유 할 ..
-
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 레코드들을 확인 후 응답하는 형식이다. 우선..