분류 전체보기
[HTML5] <audio> 요소
[HTML5] <audio> 요소
2020.04.12HTML 요소는 문서의 소리 콘텐츠를 포함할 때 사용한다. HTML5 이전에는 웹 페이지에서 오디오를 들려주기 위한 표준안이 없어서 오디오를 삽입하기 위해서는 플래시와 같은 외부 플러그인에 의존해야했다. 하지만 HTML5에서는 요소를 이용하여 웹 페이지에 오디오를 삽입하는 표준화된 방식을 제공한다. src 값 또는 요소를 사용하여 하나 이상의 오디오 소스를 지정할 수 있으며, 다수를 지정한 경우 가장 적절한 소스를 브라우저가 자동으로 선택한다. MediaStream을 사용하면 미디어 스트림을 할 수도 있다. 오디오 파일 형식 HTML5 표준이 공식적으로 지원하는 오디오 파일 형식은 MP3, WAV, OGG이다. 오디오 관련 요소 요소 설명 오디오와 음악 등 오디오 파일을 명시한다. audio 요소의 원본..
20.04.10
20.04.10
2020.04.10
코로나에 대처하는 지도앱의 자세 🗺
코로나에 대처하는 지도앱의 자세 🗺
2020.04.05👋 들어가며 이전에 중국을 포함한 아시아 국가들만의 문제인줄 알았던 코로나가 유럽과 미국으로 확산해가면서 세계는 이제 코로나는 전세계적인 전염병이 되었다. 이와 관련해서 여러 지도앱을 쓰면서 알게 된 코로나 관련 지도앱들의 자세를 비교하고 정리해보고자한다. 좀 더 다양한 지도앱이 있겠지만, 글쓴이가 가장 자주 사용하는 구글 지도, 네이버 지도, 카카오 지도 이 세가지 지도앱을 비교해보겠다. 🗺 구글 지도 - 독수리의 피가 흐르는 글로벌 공룡 구글에 자주 붙여지는 수식어는 글로벌 IT 공룡이다. 그만큼 여러 나라에 퍼져있고 매우 거대하다. 구글 지도는 코로나와 관련해서 글쓴이가 생각하기에 굉장히 놀랍고 멋진 방법으로 대응하고 있다. 바로 지도에서 찾고자하는 가게의 우선순위를 바꾼 것이다. 구글 지도에서 특..
ORM(Object Relational Mapping)이 뭘까? 🤔
ORM(Object Relational Mapping)이 뭘까? 🤔
2020.04.03ORM이란? ORM은 Object Relational Mapping 즉, 객체-관계 매핑의 줄임말이다. 객체-관계 매핑을 풀어서 설명하자면 우리가 OOP(Object Oriented Programming)에서 쓰이는 객체라는 개념을 구현한 클래스와 RDB(Relational DataBase)에서 쓰이는 데이터인 테이블 자동으로 매핑(연결)하는 것을 의미한다. 그러나 클래스와 테이블은 서로가 기존부터 호환가능성을 두고 만들어진 것이 아니기 때문에 불일치가 발생하는데, 이를 ORM을 통해 객체 간의 관계를 바탕으로 SQL문을 자동으로 생성하여 불일치를 해결한다. 따라서 ORM을 이용하면 따로 SQL문을 짤 필요없이 객체를 통해 간접적으로 데이터베이스를 조작할 수 있게 된다. ORM의 장단점 장점 완벽한 객체..
당신의 Github을 매력적으로 보일 수 있는 방법들 ✨
당신의 Github을 매력적으로 보일 수 있는 방법들 ✨
2020.03.29👋 들어가며 개발자에게 Github이란 어떤 공간일까? 나의 코드를 공유하는 저장소이자, 남들의 코드를 쉽게 다운로드 받고 쓸 수 있는 마켓이면서, 멋진 개발자들을 볼 수 있는 만남의 공간이다. 나는 거기에 나아가서 나를 표현할 수 있는 인스타그램같은 소셜 미디어의 성격도 띈다고 본다. 일상을 기록하진 않지만, 매일 매일 내가 어떤 작업을 하고 어떤 식으로 오픈소스에 공헌하는 지 알 수 있기 때문이다. 이러한 Github의 특성때문에 취업 시장이나 개발자들끼리도 학교 성적을 보기보다 실제 작업물을 보면서 이 사람이 어떻게 작업을 했는 지 알 수 있는 Github을 통해 개발자로서의 역량을 파악하곤한다. 글쓴이도 2018년 무렵부터 틈틈이 Github의 풀밭을 푸르게 가꾸면서 나름 꾸준히 작업을 해왔다. ..
내가 메인 브라우저를 크롬에서 네이버 웨일로 갈아 탄 이유 🐋
내가 메인 브라우저를 크롬에서 네이버 웨일로 갈아 탄 이유 🐋
2020.03.22⏳ 브라우저 연대기 웹 브라우저는 인터넷을 사용하는 통로이기 때문에 사용자와 뗄래야 뗄 수 없는 관계이다. 인터넷 사용 초창기부터 지금까지 글쓴이는 많은 브라우저들을 접해왔다. 시작은 누구나 그렇듯이 인터넷 익스플로러였다. 그러다가 한 때 internet explorer is EVIL!이라는 사이트도 나올 정도로 인터넷 익스플로러에 대한 발발이 크던 때에 나도 다른 브라우저를 찾아나섰다. 그렇게 사용한 것이 파이어폭스로 속도와 확장프로그램의 신세계를 맛보고 몇 년 쓰다가, 그 이후에는 더 많은 확장 프로그램에 이끌려 크롬을 선택하고 작년까지 언제나와 같이 내가 사용하는 브라우저는 크롬이였다. 크롬을 사용하면서 웨일이 나왔다는 사실은 알았지만, 한국에서 브라우저를 왜 만들까라는 생각부터 다른 거대 IT 공..
직접 제작한 리액트-타입스크립트-보일러플레이트 소개
직접 제작한 리액트-타입스크립트-보일러플레이트 소개
2020.03.15👋 들어가며 오늘은 필자가 간단한 프로젝트를 시작할때마다 사용하는 React와 TypeScript를 이용한 보일러플레이트를 소개하고자한다. 해당 보일러플레이트의 링크는 다음과 같다. react-typescript-boilerplate 🏗 기본구조 기본은 create-react-app의 타입스크립트 템플릿 기본적으로 create-react-app의 타입스크립트 템플릿 기반이다. 해당 템플릿은 다음 커맨드로 설치할 수 있다. npx create-react-app my-app --template typescript # or yarn create react-app my-app --template typescript global-styles.ts 전역으로 쓰이는 CSS 파일은 global-styles.ts라는 파..
✍️ 재택근무를 위한 협업 툴 모음
✍️ 재택근무를 위한 협업 툴 모음
2020.03.08👋 들어가며 기존에 재택근무 시스템이 없었던 회사들의 경우 카카오톡을 사용할텐데, 사적으로 사용하는 카카오톡이 업무공간이 되는 경험은 답답하고 귀찮을 수 있다. 자연스럽게 협업툴에 대한 필요가 생겨나는데, 어떤 걸 사용해야 할 지 막막할 것이다. 그런 이들을 위하여 재택근무를 하면서 느낀 점를 작성하며 자료를 조사하던 중 찾은 코로나로 무료가 된 협업툴 모음 + 원래 무료 - 재택근무 장기전 대비라는 글을 참고하여 재택근무시 사용할 수 있는 협업툴을 글로 정리해보려한다. 라인 웍스 네이버의 자회사중 하나로 네이버에서 사내 협업툴로 사용하던 웍스를 B2B 서비스로 만든 협업툴 가격: 무료 (Lite 상품 기준, 2월 1일 ~ 6월 30일까지 한시적) 특징 메시지 - 관리자가 허용한 임직원만 접근 가능한 기..
코로나 시국 재택근무, 무조건 좋기만 할까? 👨💻
코로나 시국 재택근무, 무조건 좋기만 할까? 👨💻
2020.03.08👋 들어가며 이전에 코로나19 관련 사이트를 모은 글도 썼던 것처럼 코로나19에 대한 공포가 계속되고 있다. 코로나19에 대한 공포는 직장내 근무문화에도 영향을 줬는데, 바로 재택근무하는 회사들이 많아졌고, 글쓴이의 회사도 현재 2주정도 재택근무체제를 시행하고 있다. 코로나 이전에 자체 재택근무를 진행하는 회사들에 대한 호기심이 있어서 언젠가는 우리 회사도 재택근무체제가 도입되었으면 했는데, 이렇게 입사한 지 얼마 안돼서 재택근무를 하게될 줄은 몰랐다. 그렇게 얼떨결에 해보게 된 재택근무를 약 2주정도 하면서 느낀 점에 대해 적어보려한다. ⚠️ 정확히하자면 원격근무가 맞는 표현이지만, 재택근무라는 표현을 많이 쓰기 때문에 이 글에서는 재택근무로 통일하려한다. 😷 심적 안도감 우선 가장 큰 부분은 코로나1..
리액트에서 새로고침을 해야 함수가 작동하는 경우
리액트에서 새로고침을 해야 함수가 작동하는 경우
2020.03.02문제 webstomp-client라는 라이브러리를 이용중인데 Opening Web Socket... 위 콘솔만 찍히고, 소켓에 연결이 안되는 버그가 있었습니다. 그런데, 새로고침 이후에는 제대로 연결이 되었습니다. 해결 여러 삽질을 한 결과, react-router-dom의 의 props인 history를 이용한 코드가 문제였습니다. history.push("/"); react-router-dom의 경우 SPA(Single Page Application)에서 CSR(Client Side Routing)을 구현하기위한 라이브러리이기 때문에 history.push("/")를 이용해 url이 변경된 것처럼 보이지만, 실제로는 변경되지 않은 상태입니다. 따라서 실제로 url을 변경하기 위해서, 여기에서는 아래의..
git 커밋 어떻게 써야하는가? 🤔
git 커밋 어떻게 써야하는가? 🤔
2020.03.01👋 들어가며 규모가 있는 프로젝트를 작업할때, 혼자든 여럿이 팀으로 하든 git을 이용한 프로젝트의 버전 관리는 필수적이다. 그래서 프로그래밍 언어, 알고리즘 풀이 능력 이외에도 "프로젝트를 어떻게 끝까지 끌고 나갈 것인가?" 즉, git을 얼마나 잘 사용할 것인가가 개발자의 덕목중의 하나가 되었다. 이번 글에서는 git의 여러 기능 중 커밋에 대해 알아보고자한다. 🤔 커밋이란? 커밋이란 개발자가 정한 특정 시점에 작업물의 변화를 메시지와 함께 기록하는 한 포인트를 만드는 기능이다. ⏰ 특정 시점 여기에서 개발자가 정한 특정 시점의 기준은 여러가지가 될 수 있다. 엄청 잘게 쪼개서 패키지를 설치한 때가 될 수도 있고, 타이포를 고친 경우, 아니면 아주 긴 기능이 추가된 경우로도 시점을 정할 수 있다. 필..
20.02.23