이 기술 블로그를 만들기 위해 5년을 미뤘다.

리덕스 강의 과제를 따라하다가 아래와 같은 오류와 직면했다. 오류 내용을 천천히 읽어 보면 action에 직렬화가 불가능한 값을 전달했다는 뜻으로 해석할 수 있다. 여기서 직렬화란 redux에서 값을 주고받을 때 object 형태의 값을 string 형태로 변환하는 것을 말한다. (JSON.stringify) 역직렬화는 직렬화의 반대로, 문자열 형태의 객체를 다시 object 형태로 되돌리는 과정이다. (JSON.parse) Redux는 state, action에 직렬화가 불가능한 값을 전달할 수 없기 때문에 에러가 발생한 것이다. 해결 방법은 다음과 같다. 아래처럼 사용한 코드를 dispatch({ type: setMovies, payload: { movies } }); ↓ dispatch(setMov..

** 이 글은 react 16.2 버전 이후 기준으로 작성되었습니다. ** 리액트에서는 직접적으로 DOM 요소에 접근하는 것을 권장하지 않는다. 부득이하게 DOM 요소에 접근해야 할 때에는 ref 속성을 이용하여 특정 DOM 요소에 접근할 수 있다. 클래스형 컴포넌트에서는 createRef, 함수 컴포넌트에서는 useRef를 사용하여 ref 변수를 생성할 수 있다. 함수 컴포넌트에서도 createRef를 사용할 수는 있지만, 컴포넌트가 리렌더링될 때마다 ref 값이 null로 초기화되어 화면에 표출되는 원하는 값을 얻을 수 없으므로 useRef를 사용하는 것을 권장한다. import React, { useState, createRef } from 'react'; const App = () => { con..

리액트에서 컴포넌트에 style을 적용하는 방법에는 일반적인 CSS를 사용하는 방법도 있지만, 보통 다음과 같은 4가지 방법을 주로 사용한다. 1. Sass(Scss) 2. CSS Module 3. Styled-components 4. Inline style Sass(Syntactically Awesome Style Sheets) SASS는 CSS 전처리기이며, 개발과 유지보수에 용이한 Sass, Scss라는 확장된 CSS 문법을 제공한다. CSS 전처리기(CSS pre-processor)란? CSS를 확장할 수 있는 스크립팅 언어로서, 컴파일러를 통해 브라우저에서 사용할 수 있는 일반 CSS 문법 형태로 변환하여 사용할 수 있음 Node.js 환경에서 SASS 문법은 sass 패키지를 설치하여 사용이 ..

리액트의 특징 - state 값이 변경되면 DOM을 업데이트하지 않고 아예 새로 만듦 - JSX라는 문법을 사용 - Webpack, babel 등 리액트의 Virtual DOM - 브라우저에 실제로 보여지는 DOM이 아니라 메모리에 가상으로 존재하는 DOM - Javascript 객체 => 실제 DOM보다 속도가 굉장히 빠름 JSX - babel을 통해 JSX 문법이 Javascript로 변환 - 닫힌 태그가 꼭 있어야 함(혹은 self closing tag) - 하나의 최상단 태그로 감싸야 함 => 리액트의 Fragment 사용 가능() - JSX 내부에 자바스크립트를 사용해야 할 경우 {}로 감싸서 사용 Babel - 자바스크립트 문법 확장 도구 - 아직 지원되지 않는 최신 문법 혹은 실험적인 문법을..

보통 웹 개발을 할 때 그래프를 다룰 일이 생기면 라이브러리를 찾아서 사용하곤 했다. 이번에도 라이브러리를 이용하여 도넛 그래프 8개를 2행 4열로 배치하는 화면을 만드는 작업을 하게 됐는데, 그래프 배치가 내 맘대로 되지 않는 것이었따...! 동일한 크기의 반응형 사이즈로 도넛 그래프를 배치해야 하는데 반응형도 잘 안되고, 무엇보다 일렬로 그래프 배치가 안되길래 빡쳐서 내가 직접 도넛 그래프를 만들었다. (구글링 조아~~) 도넛 그래프를 만드니 생각보다 쉽고 할 만 하길래 막대 그래프(progress bar)도 만들었다. 사실 트리맵 그래프도 만들 수 있지 않을까 싶었는데 이건 그냥 jquery의 힘을 빌려서 커스텀만 하기로 했다. 나중에 좀 한가해지면 귀염 뽀짝한 트리맵 그래프를 만들어서 codepe..

이건 쓸 때마다 까먹어서 정리를 해놔야겠다.. ㅜㅜ CSS를 이용하여 아래 사진처럼 ... 말 줄임 처리를 할 수 있다. 한 줄 elipsis 처리 .elipsis { display: block; /* 이미 display: block인 요소에 적용할 경우 생략 가능 */ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } 여러 줄 elipsis 처리 .elipsis { height: 20px; /* 높이를 꼭 지정해야 함 */ overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; /* 여기에 제한하고자 하는 줄 수를 입력한다. */ -w..

이번에 좋은 기회가 생겨서 드디어 고대하던 flutter를 공부하게 되었다. flutter는 하이브리드 앱 개발을 위한 SDK(Software Development Kit)로, 기존 네이티브 방식으로 각각 Android, iOS, web 개발을 나누어서 진행하던 불편함을 flutter 하나로 해결할 수 있다는 큰 장점이 있다. 여기서 네이티브 앱, 하이브리드 웹, PWA 웹의 차이점을 간단히 정리하자면 다음과 같다. 네이티브(Native) 앱이란? Android 또는 iOS 같은 어떤 구체적인 플랫폼만을 위해 만들어진 어플리케이션 대표적으로 Android는 Java, Kotlin을 이용하여 개발, iOS는 Swift를 이용해서 네이티브 앱을 개발할 수 있음 장점: 네이티브 기능 사용 가능, 성능 면에서 ..

HTML 요소의 어트리뷰트 값을 받아와서 CSS에서 사용할 수 있다. HTML CSS에서 사용할 어트리뷰트 값을 태그에 지정한다. 어트리뷰트 이름은 아무렇게나 지어도 되지만, 보통은 data-* 형태로 명명하는 것이 국룰이다. 왜냐하면 DOM을 생성할 때 data-* 이름 형태의 어트리뷰트를 모아 dataset이라는 이름의 맵으로 만들어 주고, 이를 자바스크립트에서 사용할 수 있기 때문이다. (대충 효율적이라는 뜻) ... ... CSS 어트리뷰트 값을 CSS 내부 속성에서 사용하고자 할 때는 attr()로 감싸서 사용할 수 있다. ... .donut-chart > .donut::after { color: #fff; width: 70%; padding: calc(35% - .76vw) 0; backgro..

회사 업무로 elasticsearch를 이용한 영화 대사 검색 API를 만들었다. 검색 API 호출 시, 입력한 검색어와 일치하는 부분은 태그로 강조되도록 기능을 만들었다. 브라우저로 호출 테스트를 해 보니 정상적으로 기울여지게 출력되는 것을 확인할 수 있었다! 하지만 문제는 웹에서 발생했으니... 리액트 기반으로 검색 웹 프론트를 만들었는데, 태그가 그대로 문자열로 표출이 된다... 검색해 보니, 리액트는 XSS 공격을 막기 위해 무조건 렌더링할 때 저런 식으로 HTML 태그를 문자열로 변환한다고 한다. 해결법은 입력하고자 하는 상위 HTML 태그에 다음과 같이 써주면 된다. (보안 위험이 있으니 되도록 사용을 지양하자!) 나는 span 태그를 따로 만들어서 영화 대사가 들어가는 부분에 넣어줬다. 결과..

리액트는 클래스형과 함수형으로 컴포넌트를 생성할 수 있는데, 주로 함수형 컴포넌트가 많이 사용된다. 이유가 무엇일까? 함수형 컴포넌트의 가장 큰 장점으로는 간단하게 함축적인 프로그래밍이 가능하다는 것이다. 각각의 특징을 표로 정리해 보았다. 클래스형 컴포넌트 함수형 컴포넌트 특징 render() 메소드와 Component 상속 필수 간편한 컴포넌트 선언 및 프로그래밍 가능 React Hook을 사용 단점 state, props 사용 불편 많은 메모리 사용 state와 생명주기(Life Cycle) 메소드를 별도로 구현해야 함 => useState, useEffect 사용 보통 서점에서 리액트 서적을 구입하면 클래스형 컴포넌트 기준으로 주로 기술되어 있어서 처음 리액트를 공부하는 사람들은 복잡한 코드에 진..