IT 엘도라도

CSS3에서는 엘리먼트의 현재 스타일을 다른 스타일로 부드럽게 전환시켜주는 애니메이션 기능을 구현하기 위한 별도의 문법을 제공하고 있다. 이는 JavaScript를 사용하지 않기 때문에 JavaScript를 몰라도 애니메이션을 구현할 수 있다는 장점을 가지며, 무엇보다 JavaScript를 사용하여 구현한 애니메이션보다 성능적으로 최적화가 잘 되어 있다는 특징이 있다. 이러한 애니메이션은 이름이 animation-으로 시작하는 속성을 사용하여 구현할 수 있으며, 애니메이션의 시작과 끝을 포함하여 중간의 특정 시점에 엘리먼트가 어떤 모습을 가져야 하는지에 대한 정보를 담은 @keyframes라는 별도의 규칙을 직접 정의하여 사용하게 된다. 1. animation-name 속성 애니메이션 과정의 각 시점에 ..

0. 책 정보 1. 제목 : 데카르트 & 버클리 (세상에 믿을 놈 하나 없다) 2. 저자 : 최훈 3. 출판사 : 김영사 4. 출간일 : 2019년 07월 01일 5. 쪽수 : 176 페이지 6. 정가 : 95,000원 1. 읽게 된 계기 지식인 마을 시리즈의 책들을 대량으로 구매해놓고 사실 읽은 건 한 권밖에 없었다. 매일 IT 공부에만 매진하다 보니 시간이 없었다고 핑계를 댈 수 있겠다. 그러다가 한 달 전인 2020년 10월 8일, 산업기능요원 복무 때문에 훈련소에 들어가게 되었다. 들어가기 전에 생각한 것이, 들어간 김에 평소에 바빠서 읽지 못했던 책이나 가져가서 읽어야겠다는 것이다. 그래서 가져간 것이 바로 이 책이다. 과감하게 철학 주제의 책을 들고 갔는데, 나쁘지 않은 선택이었던 것 같다. ..

안녕하세요. 필자는 현역 재배정 TO를 받아서 산업기능요원으로 일하고 있는 개발자입니다. 얼마 전 2020년 10월 8일에 훈련소에 입소하였고, 하루 전인 2020년 11월 5일에 4주 훈련을 수료하고 집으로 돌아왔습니다. 이러한 이유로 그동안 티스토리를 전혀 관리하지 못하고 포스팅도 하지 못했었는데, 다녀와서 보니 방문자 수가 꽤 늘어 있어서 기분은 좋네요. 이제 다시 슬슬 포스팅을 시작하며 공부를 이어 나가야겠습니다. 우선 수료 후 첫 번째 포스팅은 IT 산업기능요원 훈련소 권장 준비물 및 꿀팁입니다. 본격적인 포스팅을 시작하기에 앞서, 훈련소와 관련한 기본적인 배경지식을 짚고 넘어가겠습니다. 산업기능요원, 전문연구요원, 사회복무요원(흔히 공익이라고 부르는 것)은 전부 논산 훈련소의 공익 연대에 입소..

AWS EC2는 Elastic Compute Cloud의 약자로, 서버로 사용할 수 있도록 AWS에서 제공해주는 하나의 물리적인 컴퓨터라고 생각하면 된다. 배포를 해본 적 없는 초보 개발자들은 AWS에서 제공해주는 Elastic Beanstalk, Kubernetes 등의 배포 패키지를 이용하면 훨씬 더 간편하게 배포를 해볼 수 있다. 그러나 이러한 패키지들은 배포를 위한 대부분의 중요한 설정들을 내부에 숨겨두었기 때문에 배포의 원리를 이해하고 공부해보기에는 적합하지 않다. 그래서 필자는 초보 개발자도 직접 EC2 인스턴스를 생성하고 배포를 위한 각종 설정들을 따라해 보면서 공부해보기를 권장한다. 참고로 AWS 계정은 가입하고 1년 동안은 무료로 몇 가지 리소스들을 제공해주는데, 그중 하나가 바로 EC2..

Lost with Redux and sagas? Implement them yourself! - Sébastien Castiel You can use everyday a library such as React, Redux or Redux-Saga. You can be perfectly efficient with it. You can be able to tell others why it is nice or not, and wether they should use it or not. But at the same time it’s possible you consider it a bi scastiel.dev 본 포스팅은 위 링크의 포스팅을 번역(자체 의역)한 것입니다. 문제가 될 시 즉시 삭제하겠습니다. 당신은..

Building Your Own Hooks – React A JavaScript library for building user interfaces reactjs.org * React 공식 문서를 꼼꼼히 읽으면서 개인적으로 요약한 내용입니다. 잘못된 내용이 있다면 지적 부탁드립니다. 1. 개요 - 커스텀 Hook이 필요한 경우 기존의 React에서는 컴포넌트 내에 존재하는 상태 관련 로직을 다른 컴포넌트에서도 재사용하려면 고차 컴포넌트나 Render Props와 같은 패턴을 사용해야 했다. 그러나 이러한 패턴들은 컴포넌트 트리에 부가적인 컴포넌트를 추가시킴으로써 래퍼 지옥(Wrapper Hell)과 같은 현상을 유발했다. React 16.8.0부터 도입된 Hook을 이용하면 이러한 문제없이 컴포넌트의 상태..

Rules of Hooks – React A JavaScript library for building user interfaces reactjs.org * React 공식 문서를 꼼꼼히 읽으면서 개인적으로 요약한 내용입니다. 잘못된 내용이 있다면 지적 부탁드립니다. 1. 컴포넌트의 최상위(Top Level)에서만 Hook을 호출해야 한다. 반복문, 조건문, 혹은 중첩된 함수 내에서 Hook을 호출하면 안 된다. 대신 React 함수형 컴포넌트의 최상위에서만 호출해야 한다. 이 규칙을 따르면 해당 컴포넌트가 렌더링 될 때마다 항상 동일한 순서로 여러 개의 Hook이 호출되는 것을 보장할 수 있다. 이는 React가 여러 개의 Hook이 호출되는 경우에도 각 Hook의 상태를 렌더링 간에 제대로 유지할 수 ..

Using the Effect Hook – React A JavaScript library for building user interfaces reactjs.org * React 공식 문서를 꼼꼼히 읽으면서 개인적으로 요약한 내용입니다. 잘못된 내용이 있다면 지적 부탁드립니다. 1. 사이드 이펙트와 useEffect() 함수 클래스형 컴포넌트에서는 데이터를 가져오거나, 어떠한 이벤트를 구독하거나, DOM을 직접 조작하는 등의 작업이 가능하다. 이러한 작업들은 자기 자신뿐 아니라 외부에도 영향을 준다는 의미에서 사이드 이펙트(Side Effect) 또는 간단히 이펙트(Effect)라고 부른다. 이때 useEffect() 함수를 사용하면 함수형 컴포넌트에서도 이러한 이펙트를 수행할 수 있도록 해준다. 그리고..

Using the State Hook – React A JavaScript library for building user interfaces reactjs.org * React 공식 문서를 꼼꼼히 읽으면서 개인적으로 요약한 내용입니다. 잘못된 내용이 있다면 지적 부탁드립니다. 1. 클래스형 컴포넌트와의 비교 다음은 버튼을 클릭할 때마다 화면에 표시되는 숫자가 1씩 증가하는 카운터를 렌더링 하는 예시이다. 첫 번째 코드는 클래스형 컴포넌트로 구현한 것, 두 번째 코드는 함수형 컴포넌트와 Hook으로 구현한 것이다. 이 둘을 비교하면서 이 포스팅의 설명을 이해해보도록 하자. ▼ 클래스형 컴포넌트 class Example extends React.Component { constructor(props) { su..

Hooks at a Glance – React A JavaScript library for building user interfaces reactjs.org * React 공식 문서를 꼼꼼히 읽으면서 개인적으로 요약한 내용입니다. 잘못된 내용이 있다면 지적 부탁드립니다. 1. State Hook : useState() State Hook은 함수형 컴포넌트가 클래스형 컴포넌트처럼 지역 상태를 가질 수 있도록 한다. 자세한 설명은 'State Hook 사용하기' 포스팅을 참조하자. 다음은 버튼을 클릭할 때마다 화면에 표시되는 숫자가 1씩 증가하는 카운터를 렌더링 하는 예시이다. import React, { useState } from 'react'; function Example() { // Declare ..