모노레포 언제 씀?  모노레포 적용부터 yarn berry까지 – 화해 블로그 | 기술 블로그모노레포 적용부터 yarn berry까지 frontend 플랫폼에서 진행할 과제를 도출했습니다. 목표는 두 가지입니다. 1)모노레포 적용부터 yarn berry까지 빠른 실행력을 갖추면서 높은 퀄리티 결과물을 내는blog-wp.hwahae.co.krhttps://seunghyum.github.io/design%20pattern/Monorepo/ [Design Pattern] Monorepo 공부결론seunghyum.github.iohttps://medium.com/hcleedev/dev-monorepo-개념-알아보기-33fd3ce2b767 Dev: MonoRepo 개념 알아보기여러 프로젝트를 한 레포지토리에서 관..

Next.js란 리액트 전용의 다양한 기능을 제공하는 웹 개발 프레임워크 vercel이 직접 개발 및 운영 중인 오픈소스이다. Next.js vs React Next.js는 프레임워크이고 React는 라이브러리이다. 프레임워크는 프레임워크가 지원하는 기능 중 하나를 골라 사용하는 것을 권장한다. 자유도가 낮고 기능 구현의 주도권이 프레임워크에 있다. 라이브러리는 어떤 기능을 가져다 쓰든 개발자 마음이다. 자유도가 높고 기능 구현의 주도권이 개발자에게 있다. 그러면 자유도가 낮은 Next를 왜 사용할까? 다양한 기능을 공식적으로 제공해준다는 장점과 함께 다음의 기능들이 매우 편리하고 성능향상에 좋기 때문이다. 1. 파일 시스템 기반 라우팅 next.js는 두 가지 버전의 라우터를 제공한다. Page Rou..

글의 목적 typeScript가 어떤 과정을 거쳐 js 코드가 되는지 알아본다. 트랜스파일링 JSX코드는 브라우저에서 바로 실행할 수 없다. typeScript 코드도 마찬가지이다. 그러면 JSX코드나 ts 코드 ( TSX )를 js 코드로 바꾸어주어야 하는데 이 과정이 트랜스파일링 과정이다. 이때 TSX 코드를 브라우저가 해석할 수 있는 js코드로 바꾸는 방법은 두 가지가 있다. 1. TSX 코드를 바로 js 코드로 번역 2. TSX 코드를 JSX 코드로 번역하고 번들러가 JSX 코드를 js 코드로 번역 이 파일의 jsx 옵션이 위의 방식을 결정한다. react나 react-jsx의 경우 1번 방법으로 번역하고 preserve의 경우 2번 방법으로 번역한다. vite, react-create-app, ..

효과적인 개발 루틴을 알게 된 한 주, 팀원들을 인간적으로 바라보게 된 한 주 개발만 집중해서 할 수 있었던 한 주이다. 팀 프로젝트를 시작한지는 일주일이 지났다. 개발 로직이 복잡해지면서 머리속으로 생각만해서는 구현이 어려워졌다. 따라서 노트에 컴포넌트 구조와 props들을 그려가며 구상을 하기 시작했다. 이렇게 요구사항, 관리해야 할 state, 함수 등등을 정리해보고 어떻게 구현할 지 생각하니 빠르게 개발이 가능했다. 로직이 복잡한 경우, 특히 컴포넌트 간의 prop을 주고받거나 하는 경우에는 개발하다가 길을 잃는 경우가 많았는데 이렇게 구조를 파악하고 개발을 시작하니 방향을 잃지 않았다. 팀원들도 처음 대면으로 만났다. 비대면 회의를 할 때도 농담도 많이하고 이야기도 많이 했지만 대면으로 만나니 ..

SSR 서버가 웹 화면을 그리는 주체가 된다. 관련 프레임워크 ex) Next.js, Flask Static Sites 방식에 영감을 얻어 SSR방식이 도입된다. 서버에서 필요한 데이터 모두를 가져와서 서버 안에서 html을 만들고, 만들어진 html 파일을 동적으로 제어할 수 있는 소스코드와 함께 클라이언트에 보낸다. 클라이언트로 전달된 html문서는 바로 유저에게 보여줄 수 있게 된다. 통신 과정 사용자가 클라이언트에 요청을 보냄 서버는 리소스를 확인하고 이를 해석하고 변환하는 컴파일링 과정을 통하여 즉시 렌더링 가능한 HTML 파일을 생성 클라이언트에 전달되는 순간 이미 렌더링 될 준비가 되어 있으므로 즉시 렌더링 이때 JS파일은 읽히기 전 이므로 사이트 자체의 조작은 불가능한 상태 클라이언트가 J..

클래스형 컴포넌트의 생명주기 컴포넌트의 생명주기 과정은 컴포넌트가 실행되거나 업데이트 또는 제거될 때 특정한 이벤트들을 호출하는 과정을 설명합니다. 크게 Mount, Update, UnMount로 나누어집니다. Mount 컴포넌트가 처음 실행되는 시기입니다. 컴포넌트는 초기화 되고 DOM에 최초로 그려집니다. 1. 컴포넌트의 base state가 constructor에 의해서 초기화됩니다. (constructor : 컴포넌트의 생성자 메서드로, 가장 먼저 실행하는 메서드입니다. state와 props를 접근하여 값을 할당할 수 있습니다.) 2. getDerivedStateFromProps 실행합니다. (props로) 3. 초기화가 완료되면 render() 메서드가 실행이 됩니다. 컴포넌트를 렌더링 해주는..

글의 목적 state를 공부하다 보니 비동기처리 시 state가 어떻게 동작하는지가 궁금해졌다. 따라서 React가 state를 처리하는 과정을 알아보게 되었다. 이 글은 모두 공식 문서에 명시된 내용만 참고해 적었다.   State는 스냅샷리액트를 공부 중이라면 state를 바꾸면 컴포넌트가 리렌더링이 된다는 것을 알고 있을 것이다. 이때 렌더링의 개념을 이해하는 것이 중요하다.  렌더링이란, react가 컴포넌트를 호출한다는 뜻이다. 이 컴포넌트가 반환하는 것은 당시의 화면 스냅숏이다.쉽게 생각해 당시의 상태를 사진으로 찍어둔다고 이해하면 된다. 렌더링시의 변수 등의 값이다. prop, 이벤트 핸들러, 로컬 변수는 모두 렌더링 당시의 state를 이용해서 계산된다.  1. react가 함수를 다시 호..

리액트에서는 배열을 렌더링 시 배열 요소의 고유한 key값을 통해 컴포넌트의 변화를 빠르게 식별하고 파악하는 것을 돕는다. key값을 설정해주지 않으면 리액트 자체적으로 error를 발생시키는데 이는 key 값을 설정해주지 않았을 때 발생하는 부작용을 막기 위해서이다. 예를 들어 다음과 같은 배열이 있다고 해보자 const list = [1, 2]; 이 배열의 맨 앞에 3을 추가해보자. list = [3, 1, 2]; 가장 효율적으로 배열을 수정하는 방법은 맨 앞에 3을 추가해 주는 방법일 것이다. 그러나 리액트 DOM이 렌더링 될 때는 이전 virtual dom과 변화가 일어난 후의 virtual dom을 비교하므로, 즉 변화한 부분을 비교하므로 1번이 3번으로 바뀐 것인지, 3이 맨 앞에 추가된 것인..

상황 emotion 라이브러리를 사용해서 react개발을 할 때 위의 에러가 발생하면 css를 적용한 컴포넌트나 요소가 화면에 렌더링 되지 않는다. 에러 메세지 해석 에러 메세지를 해석해 보면 css function에 대입되는 객체를 직접 stringify 하지 말라는 내용이다. 나의 경우 css를 컴포넌트 body에 작성했는데 이 css가 return문의 중괄호 안으로 대입되면서 객체 형태가 된다. 지금의 경우는 직접 중괄호 안에 대입했기 때문에 오류가 발생한다. emotion 내부에서 처리를 해주어야 하기 때문이다. 해결 1. 태그 내부에 css 속성으로 잘 썼다면 /** @jsxImportSource @emotion/react */ 를 코드 맨 위에 추가하기 2. 혹시 className 혹은 sty..

real DOM vs virtual DOM real DOM 브라우저에서 웹 페이지를 렌더링할 때 사용하는 트리 구조로, HTML 요소와 그 속성, 텍스트 등을 나타낸다. 실제 DOM을 조작하면 웹 페이지가 다시 그려지고 업데이트되는데, 이 과정이 비교적 비용이 크다. Virtual DOM React에서는 UI를 표현하는 가상의 DOM 트리를 생성한다. 이는 실제 DOM과 동일한 구조를 가지지만, 브라우저에 직접 적용되지 않고 메모리 상에 존재한다. 렌더링 과정 HTML을 파싱하여 DOM 객체를 생성하고, CSS를 파싱하여 스타일 규칙을 만듦 이 두개를 합쳐서 실제로 웹 브라우저에 보여져야할 요소를 표현한 "렌더 트리" 라는 것을 만듦 이 렌더 트리를 기준으로 레이아웃을 배치하고 색을 칠하는 등의 작업을 ..