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

Next.js는 서버 사이드 렌더링 방식(SSR)을 제공하는 React의 풀스택 프레임워크이다. 초기 접근 시에는 SSR 방식으로 페이지를 생성하고, 페이지 이동을 할 때는 CSR 방식으로 동작하기 때문에 부드러운 화면 전환이 가능하다. SSR와 CSR 방식의 특징 및 차이점은 아래 블로그 글에 정리해 놓았다. 페이지 렌더링 방식 비교: SSR vs CSR vs SSG SSR(Server-side Rendering) SSR은 서버에서 페이지를 렌더링하는 방식으로, Next.js와 PHP, ASP 등이 이에 속한다. SSR의 동작 방식은 다음과 같다. 1. 클라이언트가 특정 페이지를 요청한다. 2. 서버에서는 해. guiyomi.tistory.com Next.js는 일반적인 리액트 어플리케이션과는 달리 서..

React로 개발을 하다 보면 정말 유용하게 많이 사용되고 있는 useEffect 훅에 대해 알아보자. useEffect 훅은 클래스형 컴포넌트의 componentDidMount + componentDidUpdate + componentWillUnmount의 기능을 담당하는 훅이다. 함수 컴포넌트 내에서 사이드 이펙트를 일으키는 함수들을 실행시키고자 할 때 사용된다. // 클래스형 컴포넌트 예시 class Example extends Component { componentDidMount() { // 컴포넌트가 마운트 되었을 때 실행되는 코드 } componentDidUpdate() { // 컴포넌트 리렌더링이 완료되었을 때 실행되는 코드 } componentWillUnmount() { // 컴포넌트가 언..

2021년 11월에 드디어 react-router-dom v6 정식 버전이 출시되었다. 기존에 사용되던 버전 5와 비교하여 다양한 기능이 추가/삭제되면서 자잘한 문법 수정이 이루어졌으며, 패키지 번들 사이즈도 약 70% 이상 감소했다. 그리고 react-router-dom v6은 React 16.8 이상 버전에서 사용이 가능하다. 이 두 버전의 차이점에 대해 먼저 알아보고, react-router-dom 사용 꿀팁도 알아보자. Redirect 컴포넌트 삭제 버전 5에서 유용하게 사용되던 Redirect 컴포넌트가 삭제됐다. Redirect는 사용자가 유효하지 않은 path로 접근했을 때, 올바른 특정 path로 이동시킬 수 있도록 하는 컴포넌트이다. 따라서 버전 6에서는 서버 측에서 리다이렉트 처리를 하..

리덕스 강의 과제를 따라하다가 아래와 같은 오류와 직면했다. 오류 내용을 천천히 읽어 보면 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를 이용해서 네이티브 앱을 개발할 수 있음 장점: 네이티브 기능 사용 가능, 성능 면에서 ..