탐구소년

개요 폰트어썸(fontawesome)은 개발자, 디자이너, 기획자를 위한 유/무료 아이콘을 제공하는 라이브러리입니다. 사용법이 어렵지는 않으나, 자신의 웹사이트에 외부 리소스를 추가해 본 경험이 없는 초보자들에게는 다소 낯설게 느껴질 수 있는 접근 방식(?)을 요구하기 때문에 그에 대한 내용을 정리해보았습니다. 폰트어썸을 사용해 본 경험이 전혀 없는 사람을 대상으로 설명합니다. 폰트어썸에는 유료 아이콘도 많이 있지만, 여기에서는 무료 아이콘 사용에 대해서만 이야기합니다. 폰트어썸 홈으로 : https://fontawesome.com/ Font Awesome The world’s most popular and easiest to use icon set just got an upgrade. More icon..

심심해서 만들어 본 코드인데, 이것보다 더 좋은 방법이 분명히 있을 거라는 걸 느끼면서도 머리가 안 굴러가서 일단 이대로 올려봅니다. 블로그가 너무 오랫동안 놀고 있다는 사실에 약간의 압박감(또는 자책감)을 느꼈다고나 할까...? 마우스로 브라우저 화면 중 어딘가를 클릭하면, 그 위치에 잠시동안 잔상이 생겼다가 사라지는 프론트엔드 코드입니다. 마우스 클릭 시마다 잔상을 남기는 div.pointer 요소가 새로 생기고, 기존의 div.pointer 요소는 제거되는 방식으로 동작합니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45..

" Sass 는 기능이 뛰어나고 안정적인 CSS 확장 언어이다." - Sass team - Sass란 Sass에 대해 얘기하기에 앞서, CSS에 대한 이야기를 먼저 해야 할 것 같습니다. CSS는 그 자체로도 충분히 재미있고, 훌륭한 형식 언어입니다. CSS는 웹 콘텐츠를 위한 스타일시트 형식 언어로써 (대체 언어가 사실상 존재하지 않는다는 사실이 한 몫 했겠지만)오랜 기간 사랑 받아 왔고, 아마 앞으로도 오래도록 사랑 받을 것입니다. 그러나 CSS를 조금이라도 다뤄 본 경험이 있는 개발자라면, 특유의 치명적 단점에 대해 아주 잘 알고 있을 것입니다. 예상하고 계실 테지만, CSS는 규모가 커질수록 코드가 복잡해지고, 유지보수가 불편해 집니다. CSS 코드 내에서 동일한(혹은 유사한) 코드를 재사용하기 ..

안녕하세요. 자바스크립트 예제 포스팅입니다. 마우스 커서로 특정 요소를 클릭하면 스크롤이 정해진 위치로 이동하는 동작을 구현해보았고요. HTML, CSS, JavaScript 순서로 하나씩 코드를 살펴보겠습니다. 코드가 무척 간단하므로 이해하기 어렵지 않으실 것 같지만, DOM에 대한 이해가 부족하신 분들에게는 다소 어렵게 느껴지실 수 있습니다(직접 해보지 않고 코드만 읽어 볼 경우에도 어렵게 느껴집니다, 꼭 직접 해보세요!). 해당 코드에 대한 설명은 제 유튜브에서 동영상으로도 만나보실 수 있으니 참고해주세요. 감사합니다. => https://youtu.be/r3G0U5fva1c HTML 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 HTML 문서 1번2번3번 1 2 3 0..

안녕하세요! 오늘은 심심풀이로 CSS 애니메이션을 활용해 타이핑 효과를 구현하는 코드를 작성해보았습니다. 표시하고자 하는 텍스트를 미리 정해 둔 상태에서 시작해야 하므로 가정 먼저 다음과 같은 HTML 코드를 작성해주어야 합니다. 1 00000 정말로 초간단한.. 숫자 0 다섯개입니다. 숫자 0 크기를 기준으로 한 글자의 크기를 정할 예정이므로 0 외에 다른 문자는 사용하지 않았습니다. 목표는 이 숫자들이 하나씩 타이핑되는 것처럼 보여지는 페이지를 만드는 것입니다. 그럼 다음, CSS 코드입니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 @keyframes typing{ from{ width: 0; } } @keyframes cursor{ 50%{ border-color: t..

리덕스(redux)는 자바스크립트 어플리케이션을 위한 상태 관리 프레임워크입니다. 그리고 리액트 리덕스는 리액트 컴포넌트의 상태 관리를 위한 리액트 전용 리덕스입니다. 이를 사용하면 리액트 컴포넌트들이 리덕스로부터 데이터를 읽고 리덕스 스토어를 통해 데이터를 관리할 수 있게 됩니다. 리덕스를 사용해 상태값을 변경하는 과정은 다음과 같은 흐름을 따릅니다. 각각의 객체가 각자의 역할을 순서대로(그러나 대개 비동기적으로) 수행합니다. 이번 글에서는 각 파트마다 어떤 역할을 수행하는지에 대해서 소개하도록 하겠습니다. 뷰 뷰(view)는 리액트의 컴포넌트의 의미합니다. 리액트 컴포넌트로부터 상태값의 변경이 시작되고, 변경된 값을 최종적으로 표시하는 역할 또한 리액트 컴포넌트가 담당하게 됩니다. 액션 리액트에서 상..

리액트 어플리케이션을 작업하다 보면 가상 DOM요소에 직접 접근해야 하는 상황이 있을 수 있습니다. 이와 같은 상황에서 순수 자바스크립트의 경우에는 다음과 같은 접근을 사용합니다. 1 document.getElementById('ID') 위와 같이 요소에 대한 직접 접근을 하고자 할 때, 리액트 컴포넌트에서는 ref 속성값을 이용하면 됩니다. ref 속성값을 이용하면 자식 요소에 직접 접근이 가능합니다. 다음은 ref를 이용한 간단한 예입니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 import React from 'react'; import './App.css'; class App extends React.Component{ textRef = Reac..

리액트 어플리케이션에 라우팅 기능을 추가하는 간단한 방법을 알아보도록 하겠습니다. 리액트를 사용해 SPA(Single Page App)를 만들면 index.html이라는 정적 파일에 가상 DOM 객체가 동적으로 렌더링되는 방식으로 앱을 동작시키게 됩니다. 이러한 리액트 SPA에 라우팅 기능을 추가하기 위해 많이 사용하는 것이 바로 react-router-dom이라는 이름의 패키지인데요. 여기에서는 create-react-app을 통해 만든 앱에 해당 패키지를 설치하여 라우팅 기능을 구현해보는 예제를 소개하겠습니다. 먼저 프로젝트를 만들 폴더로 이동을 한 다음, 아래의 명령어들을 차례대로 진행해줍니다. 1 npx create-react-app rrd-demo 1 cd rrd-demo 1 npm instal..

create-react-app 수정하기 CRA가 만든 리액트 앱의 구조는 단지 구조일 뿐이므로, 사용자가 원하는 형태의 앱을 만들기 위해서는 많은 부분의 수정이 필요합니다. 여기에서는 리액트 앱을 자동 생성된 상태에서 아무 기능도 없는 상태로 수정하는 방법을 보도록 하겠습니다. 먼저 기본적으로 완성되어있는 구조를 보겠습니다. public을 먼저 살펴보겠습니다. public에는 클라이언트 측에 제공되는 요소들이 주로 자리하고 있습니다. 여기에서 현재 주목할 것은 favicon.ico와 index.html 정도입니다. favicon.ico는 브라우저의 탭에 웹문서의 타이틀과 함께 표시되는 작은 이미지입니다. index.html은 웹문서를 표시할 수 있는 기본 내용만이 작성되어 있는데, 앱 동작시 자바스크립트..

create-react-app(CRA)이란? CRA는 리액트 개발을 바로 시작할 수 있도록 프로젝트 구조 작업, 설정 작업 등을 자동으로 진행해주는 도구이자 명령어입니다. 특정 환경의 개발을 바로 진행할 수 있도록 만든 기초 환경을 통틀어 보일러 플레이트(boiler plate)라고 부르기도 하는데, CRA는 그러한 보일러 플레이트의 일종입니다. 사용자는 CRA를 통해 훨씬 빠르고 간편하게 리액트 어플리케이션을 개발할 수 있습니다. create-react-app 시작하기 CRA를 시작하기에 앞서 확인해야할 것은, PC에 npm(노드)이 정상적으로 설치되어 있는지 여부입니다. 명령 프롬프트를 열고 위의 명령어를 실행하면 PC에 설치된 npm의 버전이 나타나게 됩니다. 이때 버전이 나타나지 않으면 설치가 제..