IT계열 구직 사이트를 보면, 웹퍼블리셔, 마크업 개발자 등 혼용되어 사용될 때가 종종있습니다. 제가 처음 UI개발자로 일을 시작할 때는, 단순히 HTML, CSS로 페이지를 화면에 만들어내는 일이 대부분이였습니다. 지금 생각해보면 단순 퍼블리싱을 했던 것 같습니다. 성능 및 스타일 최적화, 컴포넌트화 등에 중점을 두기는 했지만, 그 정도가 프론트앤드 전
자바스크립트는 웹에서 사용되는 언어이며 사용자의 요청에 맞게 DB에 저장되어 있는 데이터를 보여줘야합니다. 자바스크립트 언어는 단일 스레드 언어(위에서 아래로 단방향으로 함수가 해석 되며 실행)이기 때문에, 행여 필요한 데이터가 클라이언트 쪽으로 전달되지 않은 채로 사용자에게 보여진다면 서비스상 큰 오류가 생길 수 있습니다. 그렇기 때문에 이러한 문제점을
자바스크립트 이벤트 버블링/캡처링은 이벤트 전달/차단과 관련해서 매우 중요합니다. 우선 간단한 예를 살펴 보도록 하겠습니다. 123<div onclick="alert('The handler!')"> <em>click</em></div> 다음 코드를 실행하면 클릭 시 <div>에 있는 alert() 함
생명주기(life cycle)컴포넌트와 지시자는 생명주기(life cycle) 를 가집니다. 생명주기란, 컴포넌트나 지시자가 생성되고 파괴될 때까지의 일련의 과정을 말합니다. 생명주기 안에서는 특정 시점에 훅 메서드(hook method)를 호출할 수 있습니다. 예를들어, 컴포넌트와 지시자가 초기화되면 ngOnInit() 훅 메서드가 호출됩니다. 만약 이
설치12sudo npm install -g vue-clivue init simple hellovuejs // 애플리케이션 생성 애플리케이션을 생성하고 index.html 파일을 아래처럼 수정하도록 하겠습니다. 리액트나 앵귤러와 달리 초기 환경설정이 매우 간편하다는 장점이 있습니다. 1234567891011121314151617181920212223&
일상속에서 휴대폰으로 찍은 사진은 어떤 이미지 타입으로 저장이 될까요? 이 물음에 답하기 위해서는 먼저 이미지 파일에 대한 기본적인 이해가 필요합니다. 우리가 컴퓨터 모니터 상에서 사용하는 그래픽은 크게 Raster와 Vector 두 가지 타입으로 존재합니다. 많은 이미지들이 이 두가지 형태로 생성되며 때로는 매우 비슷하거나 동일하게 보일때도 있습니다.
Lottie는 After Effects 애니메이션을 실시간으로 렌더링하는 iOS, Android 및 React Native 라이브러리입니다. 평소, gif, css 애니메이션을 사용한 결과물보다 더욱더 만족스러운 퀄리티를 만들어 낼 수 있다는 장점을 가지고 있습니다. 또 다른 장점으로는 디자이너가 원하는 완성된 결과물을 바로 적용하기 때문에, 개발자가 애
평소 clipping과 masking 속성의 차이점을 알고 계시나요? CSS 속성을 다시 공부할 때마다, “아, 이런게 있었구나!”할 정도로, 매번 업무에 적용하기에는 특별한 속성인 것 같습니다. 우선, 결론적으로, 두 속성의 차이점은 clipping은 벡터 패스이고, masking은 래스터 이미지입니다. 벡터(Vector)는 점과 점 사이의 곡선으로
현재, 네이버 예약은 앉은 자리에서 주문과 결제를 한 번에 진행할 수 있는 로컬페이 CBT를 진행중에 있습니다(보시면 많이 이용해주세요^^). 이번 로컬페이 UI개발을 진행하면서 개인적으로 가장 중점을 둔 부분이 애니메이션 입니다. 애니메이션 효과는 사용자로 하여금 인터렉션에 대한 피드백은 물론 소소한 재미를 선사해 줍니다. 아래는 이번 로컬페이에 적용한
PhamtomJS는 헤드리스 브라우저(사용자 인터페이스 미제공)이며 웹페이지 자동화에 사용됩니다. 브라우저(IE, Chrome, Safari, etc.) 화면없이 자바스크립트 API를 통해 웹을 컨트롤 할 수 있는 강력한 도구입니다. 오늘은, 팬텀JS의 다양한 기능 중 스크린 캡쳐에 대해 알아 보도록 하겠습니다. 서비스 개발 시 스크린 캡쳐는 왜 필요한가