나만보는개발공부블로그

CRA에서 NextJS로 마이그레이션 react에서 SEO관련한 문제로 해결하는 방법을 여러가지 찾다가 현재 CRA로 만들어진 웹을 nextjs로 마이그레이션을 해야하는 상황이 생겼다. react에서 server폴더를 만들고 express서버에서 renderToString와 react-helmet을 이용해 어느정도 SEO 관련 문제를 해결할 수 있었지만 typescript를 이용한 예시가 많이 존재하지 않고 webpack 등의 설정의 복잡하고 구조도 지저분해진다는 느낌이 들어서 구조가 잡혀있고 많은 문서들도 존재하는 NextJS를 이용하기로 하였다. 큰 이유로는 아마 hot-reload 지원 때문인 것 같다.. create-react-app을 사용한 프로젝트에서 nextjs로 마이그레이션을 하는 방법은..

현재 프로젝트에서 사용중인 컴포넌트들을 Atomic하게 나눠 디자이너와 공유하고 컴포넌트별로 더욱 활용하기 위해서 Storybook을 사용하게 되었습니다. 그렇게 해서 적용하고 배운 내용들을 정리하고자 합니다. Storybook이란? - 회사에서 UI 라이브러리를 내부 개발자과 디자이너 및 기획자들을 위해서 문서화 하기 위해서 사용할 수 있고 공개용 디자인 시스템을 개발하기 위한 플랫폼으로도 사용할 수 있습니다. - 각각 독립적으로 어떤 방식으로 렌더링되는지 시각적으로 테스트하면서 개발을 진행할 수 있습니다. 스토리북 적용방법은 현재 진행중인 프로젝트 폴더 디렉토리 안에서 아래 명령어를 실행하게 되면 cli에 자동적으로 package.json과 각종 필요한 파일들을 설치합니다. npx @storybook..

forwardRef란? React 컴포넌트에서의 ref 사용이 필요해서 내부 ref 엘리먼트에 접근하게 해주는 함수입니다. 사용하게 된 계기? ref를 사용하게 된 이유는 웹에서의 채팅 메시지 박스를 만들어야 하는 상황에서 사용자가 상단의 이전 메시지를 보는 상황에서 새로운 메시지가 나타났을 경우 스크롤 이벤트를 얻기위해서 ref가 필요한 상황이 있었습니다. 먼저 ref에 대해서 알아보자면 HTML Element의 레퍼런스를 변수에 저장하기 위해 사용됩니다. 다른말로 리액트에서 DOM에 이름을 달아주는 방법이라고 합니다. ref를 이용해 DOM API를 다룰수 있고 주로 사용되는 상황에서는 input 포커스, 오디오 파일 재생, Canvas 그림 제어, 스크롤 제어가 있다고 합니다. 클래스형과 함수형 컴..

React.cloneElement() - 지정한 Element를 복사해 반환한다. 추가적으로 children과 props를 같이 넘겨줄 수 있어서 필요시에 부모에서의 props를 자식에게 props를 전달해야하는 경우 사용할 수 있다. React.cloneElement( element, [props], [...children] ) 사용 예시 - Parent.tsx {React.Children.map(props.children, (child) => { if (child) { return React.cloneElement(child as ReactElement, { onDragHandle: provided.dragHandleProps ?? null }); } else { return child; } })} ..

State? - 화면에서의 현재 데이터들의 저장된것을 조작하기 위한 것이라 생각하면 된다. - 예시로 객체간의 메세지 상호작용을 통해 프로그램을 구현할 때 객체가 가지고 있는 데이터들을 상태라고 할 수 있다. Class Message{ data: string; type: MessageType; constructor(data: string, type: MessageType) { this.data = data; this.type = type } } 위의 코드에서의 data와 type이 상태이다. - 또다른 예시로 CheckBox에서 데이터를 저장할때 on과 off가 있는 있는 경우로 들 수 있다. 프론트엔드의 상태관리란? - 데이터에 맞춰서 적절하게 UX와 UI를 설계하고 구현하는 것 Example) 어느 ..

데이터 바인딩 웹 애플리케이션을 구축하는데 있어서 뷰와 모델의 분리는 필수적이다. 분리된 뷰와 모델은 유기적으로 동작하여야하는데 데이터 바인딩이 이러한 모순을 해결해준다. 데이터 바인딩은? 뷰와 모델을 하나로 연결하는 것 Angular에서의 데이터 바인딩은 템플릿(View)와 컴포넌트 클래스의 데이터(Model)를 하나로 연결해서 유기적으로 동작하게 한다. jQuery에 의한 DOM을 도작하는 경우 뷰와 모델 간의 관계를 느슨하게 결합하기 어려운 구조를 갖아서 뷰가 변경되면 로직도 변경될 가능성이 매우 높다. 하지만 Angular는 DOM에 직접 접근하지 않고 템플릿과 컴포넌트 클래스의 상호 관계를 선언하는 방식(선언형 프로그래밍)으로 뷰와 모델의 관계를 관리한다. 이때 사용하는 것이 데이터 바인딩이다...