隣席の開発者群

오늘은 React App을 생성하고 사용하는 세가지의 세계관을 이야기하려고 하는데, 뭐 정확히 어떤 용어를 써야할지 모르겠어서 난 세계관이라고 부른다. React App을 생성하는 방법은 다양하다. 뭐 지금 내가 언급할 이 세가지를 제외하고 더 있을 수도 있음. 근데 주로 이 세가지를 사용하게 된다.  1. 기본 소개첫번째는 CRA (Create React App) 이다. 전통적으로, 가장 기본적으로 React를 시작할 때 사용하게 되는데 진짜 우리가 알고 있는 가장 기본적인 Webpack이라는 번들러랑 Babel이라는 컴파일러등 으로 세팅되어있는 React App을 세팅해준다. React 자체가 SPA, CSR을 목적으로 나왔던 프레임워크이기 때문에 기본적으로 SPA, CSR에 큰 비중을 두고 있다. ..

정말 오랜만에 글을 쓰는 것 같은데 오늘은 패키지 관리자(매니저) 에 대한 이야기를 좀 하려고 한다. 최근에 개인적으로 만드는 프로젝트는 모두 한가지 패키지에서 관리하고 배포해볼까? 라는 생각이 들어서, 모노레포를 활용해볼까 하는 중인데 그러다보니 자연스레 이 yarn 이랑 Npm에 대해서 알아야하다보니 좀 자세히 파보려고 준비를 한다. 저 두가지를 얘기하기 전에 기본적으로 패키지 관리자가 뭐하는 애들인지부터 알아야하기 때문에 일단 이 글로 한번 정리하고 넘어가보자. 1. Package? 먼저 Package에 대한 정의부터 하고 넘어가도록 하자. JavaScript로 개발을 하는 사람들이라면 초급, 신입 개발자라도 Module이라는 말에는 상당히 익숙하겠지만, 그 초급, 신입 개발자의 경우 대부분 이 P..

오랜만에 React 게시물을 가져왔다. 요 근래 이직 준비랍시고 JS 자체에만 너무 많은 관심을 가졌는데, 그래도 React 하면서 알게 된 것들도 정리를 게을리 하면 안되기 때문에 가져왔음.. 오늘 해볼 얘기는 Custom Hook에 대한 이야기인데 이 Hook 에 대한 개념자체가 조금 까다롭다보니, 한번 복습 때리고 커스텀 훅으로 넘어가볼 거다. 1) Hook 난 Hook이라고 하면 "히히 못가" 가 제일 먼저 떠오르는데 그 이유가 뭐냐하면 리액트 컴포넌트를 마운트 시킨다고하면 Hook 이 딸려오는거라고 이미징 했기 때문이다. 당연히 스코프 같은 개념들이 적용되서 만들어지는 효과지만, 컴포넌트 하나를 그리려고 하면 리액트 컴포넌트 내에서 사용한 Hook이 덤으로 딸려오기 때문에 이렇게 이미징을 했다...

요즘 내 최대 관심사가 딱 두가진데, 첫번째는 앱개발이고 두번째가 NEXT.js다 왜 두가지에 관심이 많냐면, 일단 전자에 대한 이유는 앱을 안할 수가 없다. 사람들이 PC를 사용하지 않을 수는 없다만, 결국 제일 쉽고 가볍게 접근 할 수 있는건 모바일 환경이라 일반적인 웹프론트는 구하는데도 상당히 적고 대부분 운영되고 있는 서비스의 Admin 페이지 같은거만 웹프론트로 개발하는 것 같음. 때문에 개발 시장에서 프론트 개발자가 앱 안하면 도태될게 뻔하다는게 보인다. 후자에 대한 이유는 UX 향상에 대한 관심도 때문이기도 한데, 어디서 지나가는 얘기로 대충 일반적으로 화면 렌더링 되는데 3초이상 걸리지 않는게 좋다고 들었어서 생각해보니 지금 주로 내가 개발하는 웹어플리케이션들이 그 시간을 넘어가는 것 같더..

우리가 일반적인 함수의 형태로 컴포넌트에 함수를 선언하게 되면 해당 컴포넌트가 렌더링 될때 (lifeCycle에 따라서) 일반적인 함수로 선언된 모든 함수가 새롭게 렌더링이 된다. 이는 사실상 쓸데 없는 메모리를 잡아먹는 행위이고, 이런 문제를 해결하기 위한 방법으로 React에서는 결과값 하나를 리턴해야하는 것의 경우에는 useMemo, 특정한 동작자체를 리턴해야한다면 useCallBack를 사용해 그 메모리 소모를 줄이는 방법이 있다. 대부분 구글링을 해봐도 콜백을 설명하는게 명확하지가 않고 진짜 애매모호하고 이해가 잘 안돼서 상당히 어려움을 겪었는데(이런 이유로 그냥 콜백 안썼다.) 콜백이라는 개념 자체를 제대로 이해하고, lifecycle에 대한 이해만 명확하다면 제대로 사용할 수 있게 된다. M..

저번 React Query에 이어서 Mobx를 가져와봤다. 솔직히 상태관리 도구 하나만 해도 써야할 얘기가 수두룩 빽빽한데 굳이 여러 개를 다 써두는 이유는, 다 써봐서 그렇다. 학원 수료하고 개발자가 커리어 시작하면 React할거라고 생각도 안했는데, 대뜸 첫회사에서 우리는 MSA로 React 개발한다. 이렇게 말을 할 줄은 나도 몰랐지. 거기다 하필 처음한 프로젝트가 Redux로 만들어진 Legacy 추가기능 개발, 그 다음 프로젝트가 React Query로 전환하는 첫 마루타일줄은 난 몰랐지. 그래서 진짜 초단기로 상태관리 툴 3개를 써버렸는데, 솔직히 하나만 주구장창 써온 나보다 더 경력 있으신 분들 생각하면 난 개똥이겠지만 그래도 괜찮다. 다양하게 얕게 아는거도 일단 당장 내가 할 수 있는 최선..

기본적인 상태관리에 이어서 상태관리 라이브러리에 대해서 이야기를 시작해보고자 한다. 상태관리 라이브러리라고 하면 React Query를 제외하고라도 상당히 종류가 많은데, 굳이 React Query로 상태관리 라이브러리에 대한 이야기를 시작하는 이유는 그냥 내가 가장 최근에 썼기 때문이다. 나는 다른 분들이 써둔 글처럼 공식 Doc에 근거하기 보다는 일단 내가 이해한 방식대로 정리를 할 예정인데 아마 무조건 틀릴거긴하다. 그래도 일단 기록은 남겨야지 이런 삽질을 했다~ 라는 느낌으로 다가. 1. React Query란? 캐싱 기반의 상태관리를 해주는 라이브러리다. (캐싱 이해 잘해야한다.) useQuery라는 hook을 통해서 querykey라는 고유값의 이름을 가진 글로벌 상태를 만들어두고, query..

오늘은 React 에서 빼놓을 수가 없는 상태관리 이야기를 하러왔다. 상태관리라고 하면 처음 리액트를 접하는 사람들 기준에서 글로벌이니 지역이니, redux면 dispatch니 어쩌구 저쩌구, 상당히 많은 어려움을 느끼는데 쉽게 한번 정리해보려고 한다. 0. 전역? 지역? React 초심자 기준 이게 진짜 어지러운데, 상태관리 라이브러리를 쓰는 이유는 전역상태를 잘 관리하기 위함이다. 그럼 전역이 뭘까? 쉽게 얘기하면 서버가 전달해준 데이터들을 따로 창고에 박아두고, 필요할때마다 App 전체 컴포넌트에서 자유롭게 꺼내 쓸 수 있도록 하는게 전역이다. 반대로 지역은 굳이 창고에 넣어둘 필요없이 특정컴포넌트만 사용하고 안쓸거다! 라고 하는걸 주로 지역으로 사용한다. 1. useState (가장 기본!) Re..

React 프로젝트를 만들어봤다면 다들 알겠지만, .js와 .jsx 파일이 공존한다. 물론 타입스크립트를 사용했을 경우에는 .ts 와 .tsx다. 처음 봤을 때는 그냥 직감상으로만 생각했었는데, 컴포넌트를 만들때는 .jsx(.tsx)를 사용하고, 그냥 일반 JavaScript문서를 만들땐 .js(ts)를 만드는 것 정도? 의 차이라고만 생각했지, 정확히 어떤 의미인지 생각해보려고 하지는 않았던 것 같다. 그래서 이번에 정리해두려 한다. 1. JSX (JavaScript XML) const Component = () => { return ( // 요게 JSX )} 제목에서도 알겠지만, jsx는 JavaScript XML 을 줄인 말이다. JavaScript에서 HTML 문법을 사용할 수 있도록 해주는 그런..

2023.04.20 - [Dev/JavaScript] - [JavaScript] Scope & Closure 저번 글에서 React의 컴포넌트 생명주기 이야기를 했었는데, 어찌 됐던 초창기 리액트의 클래스형 컴포넌트와 지금 많이 사용하고 있는 함수형 컴포넌트의 이야기를 안할 수가 없었다. 대부분 주변 개발입문자들의 경우 React를 처음 접하거나, Java를 통해 개발을 해왔던 사람들의 경우에 이 부분에서 이해를 어려워하는 것 같았는데, 이 이야기를 한번 이해하기 쉽도록 해보고자 한다. 1. React의 원래 이름? React Native 라는 것도 있지만, 웹프론트개발자가 주로 사용하게 되는 React의 원래 이름, 즉 React의 풀네임은 뭔가? React.Js다. 뒤에 Js가 붙어있는 것으로 봐선 ..