자바스크립트에서 불변성 데이터를 다룰 수 있도록 도와주는 것이 바로 Immutable.js입니다. 우선, 객체 불변성에 대해 살펴 보도록 하겠습니다. 12345let a = 5;let b = 5;let object1 = { a: 1, b: 3};let object2 = { a: 1, b: 3}; a, b값은 같으며, =
액션은 스토어에서 상태 변화를 일으킬 때 참조하는 객체입니다. 이 객체는 type 값을 반드시 가지고 있어야 합니다. 아래와 같은 액션은 상태값에 존재하는 수치를 증가 시키는데 사용되며 이 값을 어떻게 업데이트 할지는 리듀서 함수에서 정의합니다. 123{ type: "INCREMENT"} 액션을 좀 더 편하게 사용하기 위해서 액션 생성함
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)는 점과 점 사이의 곡선으로