프론트엔드 시작 코드

프론트엔드 개발자는 여러 가지 코드를 만든다. 대부분은 브라우저에서 해석되는 특징이 있다. 프로젝트 시작을 위한 코드를 만들기 위해 여러 툴과 다른 코드를 사용하는데 한 줄의 코드도 만들지 않고 기본 코드를 가져다 프로젝트를 시작할 수 있다. 대분분의 프로젝트를 이런 방식으로 시작했다. Index.html 파일로 개발을 시작하는 것은 C 프로그램을 main.c 파일 하나로 시작하는 것과 비슷하게 어렵다. 혼자 일하든 … 프론트엔드 시작 코드 계속 읽기

처음으로 프론트엔드

몇 년 전으로 돌아가서 처음으로 프론트엔드 개발을 시작할 때라면 지금의 나에게 이런 질문을 할 수 있다. “저도 그 일을 한번 해보려고 하는데요 간단하게 프론트엔드 개발이 뭔가요?” 내가 생각하는 프론트엔드가 당신이 생각하는 것과 다를 수 있다. 오랫동안 어려운 개발을 한 것도 아니어서 정답을 알지도 못한다. 다만 나의 경험을 잠깐 이야기는 할 수는 있겠다. 이 글은 위 … 처음으로 프론트엔드 계속 읽기

마커와 무전기

브라우저에서 할 수 있는 일이 많다. 지도에 마커를 표시하고 현재 위치를 얻고 마이크를 사용하여 음성을 전송할 수 있다. 그렇다면 이 기능들을 모아서 마커끼리 무전기 사용하듯이 대화할 수 있을까? Why not? 위치 정보는 여러 가지 방법으로 표현되는데 대표적인 것이 마커다. 지도의 특별한 위치에 동그랗지만 아래가 뾰족하게 뻗어 나온 이미지를 표시한다. 이 이미지를 마커라고 한다. 마커는 실시간 … 마커와 무전기 계속 읽기

모바일 브라우저에서 확대를 막을 수 있을까?

모바일 브라우저에서 확대를 막을 수 있을까요? 고객이 이런 질문을 한다면 한 문장으로 대답하기 어렵다. 모바일 브라우저에서 사용하는 뷰 포트의 의미를 간단하게 설명하는 것은 어렵기 때문이다. 이런 질문은 중요하다. 이 기회에 좀 더 자세한 정보를 고객에게 제공할 필요가 있다. 고객이 사용하는 브라우저에 따라서 동작이 달라질 수 있음으로 어떤 브라우저를 사용하려는지 꼭 물어보아야 한다. 안드로이드 폰이라고 가정하면 … 모바일 브라우저에서 확대를 막을 수 있을까? 계속 읽기

지금 사용하는 크롬 확장 16 가지

크롬 브라우저에서 동작하는 작은 프로그램을 크롬 확장이라고 한다. 크롬 웹 스토어에서 골라 설치할 수 있다. 프론트엔드 개발할 때 사용하는 확장들을 정리했다. 당신이 일할 때 크롬 브라우저를 사용한다면 몇 가지는 도움이 될 수 있다. Auto Text Expander for Google Chrome™, 브라우저에서 문자열 확장 Full Page Screen Capture, 브라우저 전체 화면 캡쳐 Lightshot, 브라우저 일부 화면 캡쳐 … 지금 사용하는 크롬 확장 16 가지 계속 읽기

Bulma를 선택한 이유

웹 UI를 만들때 적당한 CSS Framework를 사용하는 것은 좋은 선택이다. Bootstrap과 Foundation은 유명하지만 기능이 너무 많아서 내가 만들려는 작은 서비스와 어울리지 않았다. mini css framework를 구글에서 검색하여 Bulma를 발견했다. 각 프레임워크가 자신을 어떻게 설명하는지 비교했다. Bootstrap Bootstrap is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build … Bulma를 선택한 이유 계속 읽기