기타
-
[CSS] position 과 overflow를 활용한 웹 위의 모바일 화면 만들기기타 2022. 7. 24. 22:20
어느날 특이한 요구사항을 받았다. 웹페이지에 모바일 화면 크기로 스크롤되는 화면을 만들어주세요. html과 css만 사용해야 합니다. 나름 프론트엔드 개발자로 일을 하고 있었지만, 리액트와 tailwind의 편리함에 젖어 html이나 css에 대해 공부를 제대로 해본 적이 없는 것 같다. 더군다나 지금 회사는 퍼블리셔까지 있어서 게으름이 정점에 달해 있었다. 이번에 화면을 만들며 여러번 시행착오를 했었는데, 지금 적지 않으면 까먹을 것 같아 내용을 짧게 정리해보았다. 구체적인 css에 대한 설명보다는 이런식으로 구현했다 위주로 글을 썼다. 1. 상태바와 네비게이션바 고정시키기 (position) 처음에 생각한 부분은 상태바와 네비게이션바가 스크롤 할때 고정되어 있어야 한다는 점이었다. 고정은 posit..
-
video src의 썸네일을 추출할 때 canvas의 CORS 이슈(SecurityError) 우회하는 방법기타 2022. 4. 20. 21:13
(코드는 맨 밑에 있으니 코드만 확인하실 분은 맨 밑으로 내리시면 됩니다) React 웹에서 고객이 업로드할 영상을 골랐을 때, 썸네일 파일을 자동으로 생성하는 코드를 작성할 일이 있었다. 원래 React Native에선 라이브러리를 통해 뚝딱 해결했던 일이라 마찬가지로 React 라이브러리를 찾아보려했는데 생각외로 쉽지 않았다. 일단 구글링으로 알아낸 로직은 다음과 같았다. 이미지 파일 추출 로직 특정한 가 존재한다. 에 그 의 src를 그린다. canvas.toDataURL() 을 통해 이미지 데이터를 얻는다. 얻은 이미지 데이터로 파일을 생성한다. 첫번째 문제 : SecurityError 방법을 알고 신나게 시도를 해보았으나.. 아래와 같이 canvas.toDataURL() 부분에서 Security..
-
깃허브 페이지와 한글 도메인 연결하기 (feat.내도메인.한국)기타 2021. 12. 19. 23:32
웹페이지 도메인을 보다보면 간혹 한글로 되어있는 경우가 있다. 이번에 모바일 청첩장을 만드는 과정에서 남자친구의 지인분이 아예 신랑신부 이름으로 도메인을 만들순 없냐는 아이디어를 냈다. 그래서 뭔가 할 수 있지 않을까.. 하는 생각에 일단 OK를 날리고 뒤늦게 연결을 해보았다. 1. 도메인 구매하기(혹은 얻기) 일단 처음 생각한 문제는 도메인을 어떻게 구매하냐였다. 하지만 막상 '도메인 구매'만 검색해도 온갖 사이트가 친절하게 다 나와서 별 문제될게 없었다. 여기저기 사이트를 돌아다니며 원하는 도메인을 검색해보면 된다. 참고로 최상위 도메인에 따라 가격이 많이 다르다. 실제로 내가 원하는 도메인을 검색해봤다. .com의 경우 가비아에선 13,500원, 구글도메인에선 12달러로 가격이 거의 비슷했다. 그와..