패턴으로 익히고 설계로 완성하는 리액트

패턴으로 익히고 설계로 완성하는 리액트 - TDD와 리팩터링으로 만드는 효율적이고 유지보수 가능한 클린 코드
준타오 추 지음, 정재명 옮김 / 한빛미디어 / 2025년 2월

"한빛미디어 서평단 <나는리뷰어다> 활동을 위해서 책을 협찬 받아 작성된 서평입니다."

어느 정도 규모 있는 회사는 협업 도구로 Jira를 많이 사용합니다. Jira는 Atlassian이 개발한 이슈 추적 및 프로젝트 관리 소프트웨어입니다. 쉽게 설명하면은 일정 관리 프로그램으로 웹을 통해서 개발자뿐만 아니라 다양한 직군에서 함께 씁니다. 대체제로는 가볍게 Github Issues를 쓰기도 합니다. 하지만 한계는 분명하죠. 더불어 Trello는 칸반 보드 기반으로 많은 기업에서 사용하다가 아틀라시안이 인수한 바 있습니다. ​ 

대부분 지라 외의 대체제는 사용하는 경우가 드뭅니다. 이러한 가운데 Atlassian 개발자인 준타오 추가 패턴으로 익히고 설계로 완성하는 리액트 책이 나왔습니다. 이 책은 저자가 Atlassian Design System의 컴포넌트에 몰두 중 동료들과 디자인 패턴에 대해 고민한 흔적이 묻어 나온 책입니다. 그럼 자세히 알아보도록 하겠습니다.

1) 리액트 안티패턴 찾기

불과 10년 전만 하더라도 프런트엔드 개발이 까다롭거나 어렵게 받아드리지는 않았습니다. 당시 HTML, CSS, JavaScript가 주요 도구였으며, jQuery가 DOM 조작과 브라우저로 충분했습니다. 하지만 현재는 상황이 다르죠. 사용자가 기술에 대한 이해도가 높아져 요구사항 또한 늘어나게 됩니다. 자연스럽게 프런트엔드 개발자는 많이 필요하게 되면서 규모가 커지면 커질수록 복잡성이 배로 증가하게 됩니다. ​ 

이에 따라 새로운 기능을 추가하는데 생각보다 많은 시간이 필요하게 되고 결함을 찾아 수정하는 것도 쉽지 않게 됩니다. 이 책은 문제의 원인을 안티패턴이라고 바라봅니다. 책에서 말한 안티패턴을 이해하고 개선된 방향으로 설계 원칙을 적용하면서 설계에 대한 이해도를 높이는 책입니다.

2) 3가지 원칙

책에서 말한 안티패턴은 명백한 기술적 오류는 아닙니다. 처음에는 코드가 문제가 없이 잘 동작합니다. 그러다 기능이 늘어날수록 문제를 일으킬 확률이 높아집니다. 즉 역할이 늘어날수록 불안정해지면서 수정하기 까다로운 부분일 수 있습니다. 이러한 점은 설계 부분에서 잘못된 확률이 높습니다. 이 책은 리액트 컴포넌트 설계에 대해서 3가지 원칙에 대해 알려줍니다. ​ 

가장 먼저 단일 책임원칙은 각각의 컴포넌트는 하나의 특정한 목적을 가져야 함을 강조하는 원칙입니다. 이 원칙을 지키면 컴포넌트를 읽기 편할 뿐만 아니라 테스트하고 유지 보수하기 쉽습니다. 두 번째는 중복 배제 원칙인데요. 중복을 최소화하고 재사용성을 높여줍니다. 마지막으로 컴포넌트 합성 원칙은 단순하고 재사용할 수 있는 컴포넌트를 조합하여 복잡함 UI를 구성하는 데 효율적으로 사용할 수 있습니다.

인터벌의 정석

인터벌의 정석 - 고강도 인터벌 트레이닝의 과학
마틴 기발라 지음, 김노경 옮김 / 현익출판 / 2025년 2월

시간은 금이라고 말할 정도로 유한하며 사람마다 가치가 다릅니다. 멍하니 하루를 보내는 사람이 있으며, 일분일초라도 헛되게 보내지 않는 사람도 존재합니다. 운동 또한 마찬가지입니다. 같은 시간을 운동하더라도 개인마다의 조건과 방법이 다르면 결과 역시 달라지죠. 가장 관심 있는 운동 방법론은 고강도 인터벌 트레이닝입니다. ​ 

이에 대해 관련한 책을 찾던 중 캐나다 마틴 기발라 교수님의 책을 알게 됐습니다. 인터벌의 정석 책인데요. 교수님이 관련된 논문도 100편 이상을 쓰셔서 책의 내용이 상당히 기대됐습니다. 책의 내용을 자세히 알아보도록 하겠습니다.

1) 간격 훈련 뽀개기

인터벌 뜻은 문자 그대로 표현하면 간격입니다. 여기에 트레이닝이 붙으면 간격 훈련이겠죠. 폭발적인 고강도 운동과 중간중간 회복 시간을 결합한 것이라고 볼 수 있습니다. 앞서 말한 회복 시간은 완전한 휴식이 될 수 있지만 저강도 훈련으로 대체할 수 있습니다. 즉 일반적 지구력 훈련의 반대라는 것입니다. 

그럼, 지구력 훈련은 무엇이 있을까요? 보통 사람들은 러닝으로 바라봅니다. 또한 수영이나 자전거를 타는 것도 볼 수 있습니다. 마틴 기발라 교수는 인터벌 트레이닝 핵심은 운동 가도를 바꾸는 것이라고 알려줍니다. 힘들게 하다가 조금 쉬다가 다시 온 힘을 다하고 다시 긴장을 풀고 반복합니다. 강도가 높을수록 더 짧은 운동 시간으로 장시간 지구력 훈련을 한 것처럼 같은 효과를 얻을 수 있습니다.

2) 초보, 인터벌 러닝 시간

요즘은 날씨가 풀려서 길가나 방송을 통해서도 걷는 분들을 많이 볼 수 있습니다. 인터벌의 정석 책은 초보분들을 위해서 운동 방법을 자세히 알려줍니다. 제일 먼저 3분 동안 1의 강도로 걸으면서 워밍업을 합니다. 그리고 강도를 3으로 높입니다. 이때의 체감은 숨이 깊어지나 대화는 할 수 있는 정도를 말합니다. 이대로 3분 동안 유지합니다. 

그리고 강도를 2로 되돌려 3분간 유지합니다. 이러한 방법을 총 30분 동안 1~3단계를 반복하면 됩니다. 이때 가장 중요한 점은 처음부터 목표한 30분의 인터벌 러닝을 해내지 못해도 괜찮습니다. 절대 자책하지 말라고 교수님이 말해줍니다. 처음에는 할 수 있는 만큼만 반복해도 좋습니다.

이 포스팅은 현익출판사에서 책을 받아 주관적으로 작성했습니다.

필 스터츠의 내면 강화

필 스터츠의 내면강화 - 흔들리면서도 나아갈 당신을 위한 30가지 마음 훈련
필 스터츠 지음, 박다솜 옮김 / 다산초당 / 2025년 3월

정신과 의사를 직접 대면은 해본적이 없지만 그려지는 이미지는 차분히 환자의 말을 귀담아 들어 줄거라는 막연한 환상이 있었습니다. 하지만 넷플릭스 <스터츠>의 필 스토츠는 전혀 달랐죠. 그는 환자의 마음을 공감하기 보다는 MBTI의 T처럼 단호했습니다. 하소연을 들을려는 자세 보다는 자신의 방법론을 따라보라는 말에 처음엔 당황했습니다. ​ 하지만 그의 방벙론인 툴스는 머니볼 배우인 조나 힐과 대화를 통해 나누어 가면서 효과를 보게 됩니다. 실질적으로 내면이 치유하는 모습을 TV를 통해 간접적으로 나마 느낄 수 있습니다. 이런 그의 능력을 알고 책이 나왔다는 소식에 읽어 보게 됐습니다. 바로 <필 스토츠의 내면 강화> 책인데요. 자세히 알아보도록 하겠습니다.

1) 두려움 극복하기

누구나 익숙하지 않은 행동에 나서는 일은 대부분의 사람에게 원초적 두려움을 유발합니다. 두려움을 극복하려면 행동을 바라보는 새로운 괌점이 필요한데요. 속도, 밀도, 자기 전 성찰입니다. 먼저 속도는 무엇가를 하기로 마음 먹었다면 실제 행동하기까지 걸리는 시간은 짧으면 짧을 수록 좋습니다. 

그 이유는 꾸물걸려서 시간을 허비 하는 것보다 빠르게 성취하면 자신감이 얻기 때문입니다. ​ 밀도는 사람마다 다릅니다. 누군가는 하루에 여러가지의 일을 처리할 수 있고 마음이 힘들면 한 두가지만 겨우 할 수 있습니다. 점차적으로 늘려가 보는 것은 어떨까요? 마지막으로 필 스토츠의 내면 강화 책에서 강조하는 것은 자기 전 10분 성찰입니다. 그날 한 행동과 다음 날 하고 싶은 행동을 글로 적어 보는 것입니다. 글로 적다보면은 무엇이든 더 묵직하게 다가옵니다.

2) 새로운 걸 창조 할 때 느끼는 활력

막연히 돈 많은 부자는 행복하다는 생각을 하는 사람들이 참 많습니다. 마치 부자들은 세상을 다가진 것처럼 소비하고 다른 세계에 있어 보이기도 합니다. 필 스토츠의 내면 강화 책은 사회가 돈에 보이는 집착은 단순히 탐욕만으로는 설명할 수 없다고 알려줍니다. 우리가 느끼고 행동하는 방식은 무엇을 현실이라고 생각하는지에 따라 결정됩니다. 즉 자신이 행동하고 생각하는 대로 기분이 달라지는 것처럼 말이죠. ​ 필 스토츠 정신과 의사는 진정한 성공의 정의를 새로운 걸 창종 할때 느끼는 활력이라고 말합니다. 또한 그는 창조 활동에서 어떠한 외적 결과를 얻는가는 성공과 전혀 무관 하지만, 미래가 무한한 가능성이 있다는 점을 강조합니다. 반면 실패 세계도 있습니다. 그곳은 창조가 되지 않고 제한된 곳으로 부담과 피해의식을 느끼고 긍정적인 미래는 꿈꿀수 없는 곳이라고 표현합니다. 즉 가진 것에 감사한 자가 일류로 보입니다.

이 포스팅은 다산초당에서 책을 받아 주관적으로 작성했습니다.

릿LIT, 완전한 몰입

릿LIT, 완전한 몰입 - 성공의 불을 밝히는 하버드 몰입 혁명
제프 카프 지음, 김미정 옮김 / 비즈니스북스 / 2025년 3월

아직까지도 국내에서 대두되는 의대 열풍은 식을 줄 모릅니다. 수도권을 제외한 지방에 의대는 증원까지 한 가운데 올해 신입생들은 선배들과 함께 휴학을 선택 했습니다. 하지만 대학은 학칙에 따른 제적 할 계획 중이며 이에 따른 편입까지 고려해 학원가들과 의대를 준비하는 사람들의 발길은 끊이지 않고 있습니다. ​ 

이러한 가운데 잠을 줄여서라도 도둑 맞은 집중력을 끌어 오르기 위해 ADHD 치료제를 먹으면서 공부하는 학생들도 많은데요. 캐나다에서는 한 한생이 산만하고 집중을 하지 못해 선생님들은 ADHD 증상 청소년을 포기 했습니다. 하지만 그는 릿을 발견하고 인생이 달라지게 됩니다. 그리고 책을 씁니다. 릿LIT, 완전한 몰입 책은 하버드 몰입혁명으로 유명한 제프 카프 교수님이 쓴 책입니다. 자세히 알아보도록 하겠습니다.

1) 누구에게나 바닥은 있다

누구나 집중력이 무너지고 도파민에 이끌려 멍하니 시간을 보내는 사람이 늘어납니다. 비단 스마트폰과 콘텐츠 기술의 발전으로 꼬리에 꼬리를 무는 알고리즘에 정신을 못차리고 더 더 더 자극적인 매력에 의식적인 행동이 무의식적으로 이끌리게 되는 것이죠. 삶에 목적과 목표는 사라지고 그저 일락에 빠져 살게 되는 경우도 많습니다. ​ 

그는 인생의 큰 문제점을 발견하고 올바른 길을 인도해주는 사람은 부모거나 아니면 자신이 깨닫고 방향을 찾아야 합니다. 릿LIT, 완전한 몰입 책의 저자인 제프 카프 교수는 어린 시절 ADHD 증상을 극복할 수 있었던 점은 어머니의 헌신과 7학년 담임인 라일 카우치 선생님의 장점을 눈여겨보고 격려해주는 점이었습니다. 그 이외 사람들은 포기하거나 비관적으로 말하는 사람들 뿐이었습니다.

2) 몸이 움직이게 하기

제프 카프 교수는 자기 자신을 실험 합니다. 방황하는 마음을 가다듬고 의도적으로 시냅스 메시지를 재종하는 몇가지 기본적인 방법들을 발견합니다. 점차 이 방법을 고도화 시켜 의도적으로 뇌에서 일어나는 과정을 가로채서 필요에 따라 덜 반응하거나 더 예리하게 집중하는 방법을 자세히 인식하게 됩니다. ​

즉 가장 중요한 목적에 집중하고 기회가 생회가 생기면 이를 실행하면서 영향력을 극대화하는 방법인 릿을 발견합니다. 그리고 인생이 달라지죠. 그는 ADHD증상을 어느 정도 극복하고 자신이 부족한 암기 방법도 집중할 수 있는 방법도 터득하게 됩니다. 그리고 몸이 움직일 수 있게끔 뇌에 대서 정확하게 이해했기 때문에 가능 했을 것입니다.

이 포스팅은 비즈니스북스에서 책을 받아 읽고 주관적으로 작성했습니다.

전문가를 위한 리액트

전문가를 위한 리액트 - 빠르고 성능이 뛰어난 직관적인 애플리케이션 구축하기 ㅣ O'reilly 오라일리 (한빛미디어)
테자스 쿠마르 지음, 김태곤 옮김 / 한빛미디어 / 2024년 12월

"한빛미디어 서평단 <나는리뷰어다> 활동을 위해서 책을 협찬 받아 작성된 서평입니다."

React는 웹 개발 분야에서 혁신적인 도구로 자리잡았습니다. 2010년 Facebook의 Jordan Walke가 FaxJS라는 프로토타입을 만들면서 시작된 React는 2011년 Facebook의 뉴스피드에 처음 도입됐습니다. 그러다 2013년 오픈소스로 공개 이후 React는 지속적으로 발전하여 2022년 3월 React 18 출시, 2024년 12월 React 19 출시 등 주요 업데이트를 거치며 현재까지 개발자들에게 사랑받는 라이브러리로 성장했습니다. ​ 

이러한 배경 속에서 리액트 전문가인 테자스 쿠마르의 책이 출간되었습니다. 전문가를 위한 리액트 책은 React의 근본적인 개념과 내부 동작 원리를 깊이 있게 다루고 있습니다. 자세히 알아보도록 하겠습니다.

1) 리액트 필요성

React의 컴포넌트 기반 아키텍처는 재사용 가능한 UI 요소를 만들 수 있게 해줍니다. 이는 개발 효율성을 높이고 유지보수를 용이하게 만듭니다. 모듈화된 구조는 복잡한 인터페이스를 관리 가능한 단위로 나누어 개발 프로세스를 간소화합니다. 또한 React는 동적이고 반응적인 사용자 인터페이스를 만드는 데 탁월합니다. ​ 이 때 가상 DOM을 활용해 효율적인 업데이트를 수행하며, 이는 사용자 경험을 향상시키고 실시간 애플리케이션 개발을 가능하게 합니다. 또한 불필요한 DOM 조작을 최소화하여 렌더링 속도를 높입니다. 즉 성능, 신뢰성, 보안 등의 웹 초창기의정적 페이지 문제에 대해 즉각적인 업데이트가 가능해 많은 기업에서 사용하고 하고 있습니다.

2) 가상 돔의 중요성

가상 DOM의 도입으로 React는 선언적 프로그래밍을 가능합니다. 개발자들은 UI의 원하는 상태를 직관적으로 정의할 수 있게 되었고, 복잡한 DOM 조작에 대한 부담에서 벗어나 애플리케이션 로직에 더 집중할 수 있게 됐습니다. 이는 코드의 가독성을 높이고 유지보수를 용이하게 만듭니다. React의 재조정 과정은 가상 DOM의 효율성을 극대화합니다. ​

이전 상태와 새로운 상태를 비교하여 최소한의 변경사항만을 실제 DOM에 적용함으로써, UI 업데이트의 성능을 획기적으로 개선했습니다. 이는 특히 복잡하고 동적인 웹 애플리케이션에서 눈에 띄는 성능 향상을 가져옵니다. 가상 DOM의 추상화 계층은 크로스 플랫폼 개발을 지원해 웹, 모바일, 데스크톱 등 다양한 환경에서 일관된 개발 경험을 제공하며, React의 활용 범위를 크게 확장시켰습니다.