허도경, limewhale

우리는 데이터의 값을 출력할 때 최초의 값에서 값이 추가되거나 삭제, 수정이 발생하는 경우가 생기게 됩니다. 이럴 경우 원본 데이터의 값에 바로 접근하여 사용하는 방법도 있지만 이와 같은 방법은 추후에 원본 데이터가 변경되었기 때문에 다양한 오류를 발생시킬 가능성이 있습니다. 그래서 효과적인 방법은 원본 데이터의 값을 복사하여 가공하거나 수정하는 방법을 사용하는 것이 좋습니다. 이런 경우에 사용하는 것이 바로 얕은 복사(shallow copy)와 깊은 복사(deep copy) 입니다. 자바스크립트에서 원시 타입(primitive type)의 값은 새로운 메모리 공간에 독립적인 값을 저장하기 때문에 깊은 복사가 되고 참조 타입(reference type)값은 얕은 복사가 됩니다. 잠깐..... 아직 얕은 ..

인터섹션 옵저버(Intersection Observer)에 관해서 이전에 한번 정리했던 적이 있습니다. IntersectionObserver(인터섹션 옵저버) const io = new IntersectionObserver(callback, options) // 관찰자 초기화 io.observe(element) // 관찰할 대상(요소) 등록 Intersection observer는 기본적으로 브라우저 뷰포트(Viewport)와 설정한 요소(Elem.. whales.tistory.com 우리말로 하면 "교차 관찰자" 정도로 정의될 거 같습니다. 인터섹션 옵저버가 무엇인지 모르거나 해당 요소를 좀 더 자세히 이해하고 싶으시면 이전 글을 한번 읽어보시고 다시 여기로 돌아와 공부를 하셔도 좋을 것 같습니다. 그..

프로젝트 작업을 진행하다 보면 같은 디자인인데 색상 컬러값만 다른 경우가 발생합니다. 이렇게 아이콘이 추가될 때마다 동일한 요소임에도 이미지는 계속해서 추가되는 문제가 발생하게 됩니다. 또 화살표(꺽쇠) 아이콘은 디자인을 하는 사람에 따라 크기나 색상이 차이가 발생하는 경우도 있습니다. 이런 꾸밈요소들이 이미지가 아닌 코드로 관리된다면 수정도 편하고 범용적으로 사용도 쉽게 됩니다. 이를 도와주는 것이 Svg입니다. SVG란? SVG(Scalable Vector Graphics)는 '벡터 그래픽'을 표현하기 위한 XML 기반의 포맷입니다. JPEG, PNG 등 픽셀 기반 이미지와 다르게 SVG는 '읽을 수 있는 코드'이므로 정보 접근성이 좋습니다. SVG 가져오기 - 포토샵 포토샵의 경우 벡터 도형(pat..

컴포넌트 기반 프론트엔드 개발 방법이 발전하면서 CSS 개발 방법도 새로운 방법론과 생겨나고 있습니다. 웹이 점점 복잡해지고 CSS를 보다 전문적이고 체계적으로 관리하고 싶은 욕구는 2014년 페이스북 개발자인 개발자인 Christopher Chedeau aka Vjeux 의 발표에서 CSS-in-JS를 세상에 공개했고 이는 CSS 코드 작성의 새로운 대안으로 떠올랐습니다. 이 발표에서 Vjeux는 다음의 항목을 들어 CSS를 작성하는 어려움을 설명하였습니다. Global namespace: 모든 스타일이 global에 선언되어 별도의 class 명명 규칙을 적용해야 하는 문제(클래스 이름 중복 문제) Dependencies: css간의 의존관계를 관리하기 힘든 문제(스타일 상속에 의한 중복 문제) De..

const io = new IntersectionObserver(callback, options) // 관찰자 초기화 io.observe(element) // 관찰할 대상(요소) 등록 Intersection observer는 기본적으로 브라우저 뷰포트(Viewport)와 설정한 요소(Element)의 교차점을 관찰하며, 요소가 뷰포트에 포함되는지 포함되지 않는지, 더 쉽게는 사용자 화면에 지금 보이는 요소인지 아닌지를 구별하는 기능을 제공합니다. 조금 더 쉽게 이해하면 특정 영역이 현재 유저가 바라보는 브라우저 화면에서 보이는 영역인지 아닌지를 구별할 수 있습니다. 이 기능은 비동기적으로 실행되기 때문에, scroll 같은 이벤트 기반의 요소 관찰에서 발생하는 성능 이슈 없이 사용할 수 있다는 장점이 있..

Sass(Syntactically Awesome Style Sheets)의 3 버전에서 새롭게 등장한 SCSS는 CSS 구문과 완전히 호환되도록 새로운 구문을 도입해 만든 Sass의 모든 기능을 지원하는 CSS의 상위 집합입니다. SCSS는 CSS에서 사용하던 비슷한 문법으로 Sass 기능을 사용할 수 있습니다. Sass와 Scss의 눈에 보이는 차이는 {}(중괄호)와 ;(세미콜론)의 유무입니다. sass .list float: left li color: red &:first-child margin-right: -10px scss .list { float: left; li { color: red; &:first-child { margin-right: -10px; } } } Sass는 선택자의 유효 범위를..

이전 컴포넌트에서 잠깐 다룬 적이 있는 함수형 컴포넌트의 새로운 기능 Hooks를 알아보려고 합니다. Hooks는 리액트 v16.8에 새로 도입된 기능으로 함수형 컴포넌트에서도 상태 관리를 할 수 있는 useState, 랜더링 직후 작업을 설정하는 useEffect 등의 기능을 제공하여 기존의 함수형 컴포넌트에서 할 수 없었던 다양한 작업을 할 수 있게 도와줍니다. 1.useState useState를 사용하기 위해서는 React에 useState를 선언해 주어야 합니다. import React, { useState } from 'react'; useState 함수는 파라미터에 상태의 기본값을 넣어줍니다. 이 함수는 배열을 반환하며 첫 번째 원소는 상태 값, 두 번째 원소는 상태를 설정하는 함수를 나타냅..

컴포넌트의 수명은 페이지에서 랜더링되기 전인 준비 과정에서 시작하여 페이지에서 사라질 때 끝납니다. 조금 쉽게 이해를 하기 위해서는 생명주기에 사용되는 접두사를 확인하면 조금 이해하기가 쉽습니다. Will 접두사 : 어떤 작업을 동작하기 전 Did 접두사 : 어떤 작업을 동작한 후 라이프 사이클은 3가지 카테고리(마운트, 업데이트, 언마운트) 구분됩니다. 아래 리액트 생명주기 표를 보시면 조금 더 이해하기 쉬울거 같습니다. 리액트 생명주기 도표 1.마운트 DOM이 생성되고 웹 브라우저 상에서 나타나는 것을 마운트라고 합니다. constructor() - 컴포넌트를 새로 만들때만다 호출되는 생성자 getDerivedStateFromProps() - props에 있는 값을 state에 넣을 때 사용 rend..

리액트에 반복문을 사용할 때 Map함수를 사용합니다. Map함수를 조금 더 자세히 알고 싶으시면 Mozilla에서 제공하는 Map Docs를 살펴보거나 이전에 제가 작성한 Map 매서드 이해하기 글을 한번 읽어보시면 조금 더 이해하기 쉬울거에요. 같이 읽어보면 조금 더 도움이 되는 내용으로는 전개연산자와 filter 매서드 도 같이 한번 읽어 보시면 앞으로 우리가 React에서 반복문을 사용할 때 많은 도움이 될거라 생각합니다. 우선 오늘의 주인공인 Map에 대해서 간략히 살펴보겠습니다. arr.map( callback, [thisArg]) callback : 새로운 배열의 요소를 생성하는 함수. currentValue : 처리할 현재 요소 index : 처리할 현재 요소의 인덱스 array : 현재 처..

리액트에서는 ID 사용을 권장하지 않습니다. 컴포넌트 단위로 사용을 하는 주된 목적은 재사용성을 높이기 위한 게 가장 큰 목적인데 ID를 사용하게 되면 DOM에서 중복 ID값이 생길 수가 있게 되기 때문입니다. 그래서 리액트에서는 요소에 접근하기 위해 ref를 사용합니다. ref는 컴포넌트 내부에서만 동작하기 때문에 중복의 문제가 발생되지 않습니다. 예제코드 1 class ValidationSample extends Component { state = { password: '', clicked: false, validated: false, }; handleChange = (e) => { this.setState({ password: e.target.value, }); }; handleButtonClick..