Frontend

[HTML] 시맨틱 마크업(Semantic Markup)

안녕하세요😎 개발자 재민콩입니다. 이번 시간에는 프론트엔드 개발을 진행할 때 자주 접하는 HTML에 관련된 내용인 시맨틱 마크업(Semantic Markup)이 무엇인지 알아보도록 하겠습니다. 시맨틱 마크업(Semantic Markup)은 웹 페이지의 구조와 콘텐츠를 더욱 의미 있는 방식으로 마크업 하는 것을 말합니다. 즉, HTML 요소를 적절한 의미와 역할에 따라 사용하는 것을 의미합니다. 시맨틱 마크업을 사용하면 검색 엔진이 웹 페이지의 콘텐츠를 더 잘 이해하고 분류할 수 있습니다. 또한, 시각 장애인과 같은 보조 기술을 사용하는 사용자들에게도 웹 페이지의 내용을 더 잘 전달할 수 있습니다. 시맨틱 마크업 태그의 예시로는 , , , , , , 등의 요소가 있습니다. 이러한 요소는 각각 웹 페이지의 ..

[Javascript] Html video currentTime 수정 불가 해결

안녕하세요🫶 개발자 재민콩입니다! 이번엔 동영상 강의 사이트 개발 중 겪었던 오류에 대해 포스팅을 진행하려고 합니다. 해결은 됐지만, 더 나은 방법이 있는지 혹은 잘못된 지식인지 현명한 개발자분 지적 부탁드립니다🙇🏻‍♂️ 발생된 문제는 video 강의를 업로드하고 사용자단에서 video를 불러올 경우 progress로 플레이 타임을 변경할 경우 시작으로(0초)로 돌아가고, Javascript로 currentTime을 수정할 경우에도 같은 결과가 나왔습니다. 다만, Safari에서는 정상적으로 작동하고, firefox는 일부분, 제외 다른 브라우저에선 오류가 났습니다. 생각해 본 오류 이유로는 video를 load 하는 과정에서 문제가 있었던 것 같다고 결론을 내리고, video를 미리 로드하거나, 다른 ..

[PWA] PWA(Progessive Web Applications)의 장단점

안녕하세요🫶 개발자 재민콩입니다. 이번 포스팅에선 PWA의 장단점에 대해 알아보겠습니다. PWA의 장단점을 다루기 전에 먼저 PWA란 무엇인지 알아보겠습니다. 1. PWA란? PWA는 Progressive Web Applications로 웹앱으로 만들어진 사이트를 네이티브 앱과 같은 동작을 가능하게 하는 방법입니다. 그래서 기존 사용하는 사용되는 웹 기술(HTML, CSS, Javascript 등)을 사용하여 어떠한 플랫폼에서도 최적화하여 동작하도록 할 수 있습니다. 또 2016년에 Google에 의해 처음 소개 되었으며 현재까지 활발하게 업데이트가 진행되고 있고, 전 세계 스타트업부터 대기업까지 많은 회사에서 PWA를 사용하여 개발을 진행하고 있습니다. 대표적인 PWA적용 사이트로는 Twitter, I..

[Node.js] MacOS nvm 설치

안녕하세요🦥 개발자 재민콩입니다. 이번 포스팅은 MacOS에서 nvm설치에 대해 알아보겠습니다. nvm이란 Node Version Manager으로 말 그대로 Node의 버전 관리자입니다. 여러 개의 프로젝트를 진행할 경우 node의 버전이 각기 달라지기 마련입니다.(시간이 지남에 따라 node지원이 종료되기 때문에 버전을 업데이트해주는 것이 좋습니다.) 하지만 global에 설치된 node 버전을 항상 재설치하여 변경해 주기란 번거로움이 많습니다. 그렇기 때문에 nvm을 이용하여 커맨드 한 번으로 node 버전을 설치, 변경을 할 수 있습니다. 아래 순서대로 진행해 보겠습니다. 1. brew 설치 brew란 MacOS에서 각종 패키지 설치를 도와주는 시스템입니다. https://brew.sh/index..

[PWA] Android App URL 삭제

안녕하세요🙋🏻 개발자 재민콩입니다. 이번 포스팅에서는 PWA 앱 URL 바 삭제하는 방법에 대해 알아보겠습니다. PWA를 앱으로 빌드 혹은 웹에서 다운로드를 하였을 때, 웹앱을 Native App처럼 보여주기 위해 주소창을 삭제하는데, 이를 가능하게 하는 설정들이 있습니다. 1. meta 태그 추가 // Apple // Android 2. manifest.json display { "lang": ... "dir": ... "name": ... "short_name": ... "display": "standalone", // (fullscreen, standalone, minimal-ui, browser) "categories": ... "description": ... "start_url": ... "t..

[Vue] Axios Global 설정

안녕하세요🙏 개발자 재민콩입니다. JQuery에서는 비동기 데이터 통신을 위해 Ajax를 사용하듯이, Vue에서는 Axios를 사용합니다. Axios를 사용하면서 반복적으로 사용하거나 공통적으로 들어갈 내용들을 Global에서 설정할 수 있는 방법에 대해 알아보겠습니다. 1. main.js import Vue from 'vue'; import Axios from 'axios'; // Axios 설정 Vue.prototype.$axios = Axios; // Django CSRF 설정 Axios.defaults.xsrfCookieName = 'csrftoken'; Axios.defaults.xsrfHeaderName = 'X-CSRFToken'; // 로컬 localhost ip 입력 Axios.defau..

[CSS] Table thead sticky & Scrollbar Custom

안녕하세요🙏 개발자 재민콩입니다. 오늘은 thead가 고정된 table과, scrollbar를 custom 하는 방법을 알아보겠습니다! 1. Sticky // 테이블을 감싸는 div영역에 max-height 지정 .table-wrap { max-height: 332px; } .table-wrap table thead { // ie에서는 지원하지 않습니다. position: sticky; // 이부분을 추가해줘야 적용됩니다. top: 0; } 2. Scrollbar Custom // 스크롤 Custom은 지원하지 않는 브라우저가 많음(적용 안될시 기본 스크롤바가 보임) .table-wrap { // ie에서 지원하지 않음 overflow: overlay; &::-webkit-scrollbar { width..

[Javascript] Daterangepicker Custom

안녕하세요🙏 개발자 재민콩입니다. 오늘은 daterangepicker 자주사용하는 옵션과, 사용법에 대해 알아보겠습니다. 1. daterangepicker 설치 npm i daterangepicker 2. JQuery를 사용한 daterangepicker 사용법 // 오늘 날짜 데이터 const d = new Date(); const day = d.getDate(); const month = d.getMonth(); $('.custom-daterangepicker').daterangepicker({ // datarangepicker은 기본값으로 자동으로 오늘 날짜를 삽입한다. // 값을 비우고 focus가 없어져도 데이터가 오늘 날짜로 입력되면 해제하기 위해 autoUpdateInput: false 사용..