본문 바로가기

Programming107

모던 리액트 Deep Dive - 10장 리액트 17 버전 살펴보기 리액트 16 모듈은 promise로 lazy하게 불러와서 호환성 유지 17 내부에서 16 모듈을 렌더링 하나의 웹 사이트에 16, 17버전이 공존하는 방식 이벤트 위임 방식의 변경 click 이벤트에 일반 핸들러가 아닌 ref로 제어하게 되면 click이 아닌 noop라는 핸들러 추가 하지만 동일하게 동작하는데, 그 이유는 이벤트 타입당 하나의 핸들러를 루트에 부착하는 이벤트 위임 방식을 사용하기 때문이다. 16까지는 document에 연결했지만, 17부터는 리액트 컴포넌트 최상단 트리로 변경됐다. document에 이벤트가 부착되면 이벤트 전파를 막을 수 없게 돼 이벤트 버블링에 혼선이 생기기 때문이다. 그래서 16에서는 document - 루트 사이에 stopPropagat.. 2024. 3. 2.
모던 리액트 Deep Dive - 5장 상태 관리는 왜 필요한가? 웹 애플리케이션에서의 상태 분류 UI: 상호 작용이 가능한 모든 요소의 현재 값 URL: 브라우저에서 관리되고 있는 상태값 폼: loading, submit, disabled, validation 등 서버에서 가져온 값: 클라이언트에서 서버로 요청을 통해 가져온 값 리액트 상태 관리의 역사 Flux 패턴이 나오게 된 배경 상태의 변화를 추적하기 어렵게 하는 것은 양방향 데이터 바인딩 뷰가 모델을, 모델이 뷰를 변경하는 방식 페이스북은 이러한 문제를 해결하기 위해 단방향 데이터 흐름인 Flux 패턴을 제안했다. Flux 패턴 액션 어떠한 작업을 처리할 액션과 그 액션 발생 시 함께 포함시킨 데이터 액션 타입과 데이터를 디스패처로 보낸다. 디스패쳐 액션을 스토어로 보내는 역할 콜백.. 2024. 3. 2.
모던 리액트 Deep Dive - 4장 SSR이란? SPA 렌더링, 라우팅에 필요한 대부분의 기능을 서버가 아닌 브라우저의 자바스크립트에 의존하는 방식 최초에 서버에서 최소한의 데이터를 불러온 이후 이미 가지고 있는 JS 리소스와 브라우저 API 기반으로 동작 최초 첫 페이지에 데이터를 불러온 후 페이지 전환은 history.pushState, replaceState로 이뤄진다. body에는 아무런 내용이 없다. 스택의 종류 LAMP Linux, Apache, MySQL, PHP/Python JAM JS, API, Markup MEAN MongoDB, Express.js, Angular.js, Node.js 새로운 패러다임의 웹서비스를 향한 요구 웹페이지를 불러오는데 필요한 부분을 사용자에게 전가해도 기기나 환경의 발전으로 괜찮을거라 생각 그.. 2024. 3. 2.
모던 리액트 Deep Dive - 3장 리액트 훅 useState 초기값이 없으면 undefined다. 변경된 return 값으로 리렌더링을 실행시킨다. 클로저를 사용해 함수 실행이 종료된 후에도 지역변수인 state를 참조할 수 있도록 한다. useState는 useReducer로 구현되어 있다. initialValue에 함수를 넣으면 초기 렌더링 이후 재실행되지 않는다. → 무거운 연산 시 사용 useEffect state, props의 변화 속에서 일어나는 렌더링 과정에서 실행되는 부수 효과 함수 클린업 함수로 이전에 등록했던 이벤트 핸들러를 제거해야 한다. useEffect는 컴포넌트 렌더링 완료 이후 실행한다. (CSR) 반면 직접 실행은 렌더링 도중 실행된다. 따라서 직접 실행은 SSR의 경우 서버에서도 실행된다. useEffect.. 2024. 3. 2.
모던 리액트 Deep Dive - 2장 JSX (Javascript Syntax eXtension) 자바스크립트 확장 문법 HTML이나 XML을 자바스크립트 내부에 표현하는 것이 유일한 목적 x 트랜스파일러에서 다양한 속성을 가진 트리 구조를 토큰화해 ECMAScript로 변환 내부에 트리 구조로 표현하고 싶은 다양한 것들을 작성한 후 자바스크립트가 이해할 수 있는 코드로 변환 JSX의 정의 1. JSXElement JSXElement는 JSX 문법을 사용하여 생성한 React 컴포넌트를 나타낸다. JSXElement는 HTML 태그와 유사한 구조를 가지며, React 컴포넌트를 생성하고 렌더링하는 데 사용된다. 구성 요소설명예시 JSXOpeningElement JSXElement의 시작 부분을 나타내며, 2024. 3. 2.
02. 데이터베이스 개론 요약 (4~6장) 4. 데이터 모델링 01. 데이터 모델링? 현실 세계에 존재하는 데이터를 컴퓨터 세계의 데이터베이스로 옮기는 변환 과정. 개념적 데이터 모델링 : 현실 세계의 중요 데이터를 추출해 개념 세계로 옮김 논리적 데이터 모델링 : 개념 세계의 데이터를 데이터베이스에 저장하는 구조로 표현 02. 데이터 모델 데이터 모델링의 결과물을 표현하는 도구. 개념적 데이터 모델 : 현실 세계를 사람의 머리로 이해할 수 있도록 개념적 모델링의 결과물인 개념적 구조로 표현하는 도구 논리적 데이터 모델 : 개념적 구조를 논리적으로 모델링하여 논리적 구조로 표현하는 도구 03. 개체-관계 모델 개체와 개체 간의 관계를 이용해 현실 세계를 개념적 구조로 표현하는 개념적 데이터 모델 개체 : 현실 세계에서 조직을 운영하는데 꼭 필요한.. 2022. 12. 4.
01. 데이터베이스 개론 요약 (1~3장) 1. 데이터베이스 기본 개념 01. 데이터와 정보 데이터 : 단순히 관찰하거나 측정해 수집한 사실이나 값 정보 : 의사 결정에 유용하게 활용할 수 있도록 데이터를 처리한 결과물 02. 정보 처리, 정보 시스템, 데이터베이스 정보 처리 : 데이터에서 정보를 추출하는 과정 또는 방법 정보 시스템: : 조직을 운영하기 위해 필요한 데이터를 수집해 저장해두었다가 필요할 때 유용한 정보를 만들어주는 수단 데이터베이스 : 정보 시스템 안에서 데이터를 저장하고 있다가 필요할 때 제공하는 역할 수행 03. 데이터베이스의 정의 및 특징 특정 조직의 여러 사용자가 공유해서 사용할 수 있도록 통합해서 저장한 운영 데이터의 집합. 실시간 접근 가능 동시 공유 가능 계속 변화함 내용으로 참조 가능 04. 형태에 따른 데이터 분.. 2022. 12. 3.
서비스에 감정 불어넣기! @emotion 적용기 Prologue 공교롭게도 지난번 글이 '서비스에 Styled-Components를 적용했던 썰' 이었는데, 이번 글이 'Styled-Components를 걷어내고 emotion을 도입하게 된 썰'이 될 줄은 몰랐지만 😂 아무튼! 이번 경험담 또한 스타일에 관한 이야기다. 잠깐 배경 설명을 하자면, 우리 팀은 입사하기 전까지 SCSS로 스타일을 작성하고 있었다. 그리고 팀 내에서는 CSS-in-JS 도입에 관한 논의를 진행하고 있었는데, 마침 내가 입사하면서 도입을 시도하게 됐으니 그것이 바로 Styled-Components였다. 공통 스타일 변수부터 전역 스타일까지 모든 세팅을 마치고 푸터와 레이아웃 일부에 이를 도입하며 성공적으로 안착하는 듯 했으나, 방대한 기존 스타일을 대체하기엔 다소 맞지 않다는.. 2022. 11. 26.
Dynamic without limits! Next.js 13 요약 정리 이제는 13이다 이번 10월 26일 Next.js를 만든 Vercel에서 새로운 버전과 그에 따른 변경사항에 대한 발표를 진행했습니다. 아직 모든 기능들이 stable 버전은 아니지만, 앞으로 정착할 기능들이기에 미리 준비한다는 마음으로 이번 13 버전에서 업데이트된 내용들을 정리해보고자 합니다. ※ 베타 버전과 안정 버전이 혼재돼있기 때문이 베타 버전에는 ⚠️ 아이콘을 붙이도록 하겠습니다. app directory ⚠️ 이전까지 Next를 사용했다면 다음 이미지와 같이 pages 디렉토리를 통해 라우터를 구성한다는 개념에 익숙했을 것입니다. 이번 13 버전을 기점으로 pages 폴더는 점진적으로 app 폴더로 그 이름이 변경될 예정입니다. app 디렉토리에는 다음과 같은 특징들이 지원될 예정입니다. L.. 2022. 11. 13.
원티드 프론트엔드 프리온보딩 챌린지 10월 사전과제 with Next.js 💡 CSR(Client-Side Rendering)이란 무엇이며, 그것의 장단점에 대하여 설명해주세요. CSR( 클라이언트 사이드 렌더링 )은 자바스크립트를 사용해 브라우저에서 직접 페이지를 렌더링하는 것을 뜻합니다. 모든 로직, 데이터 페칭, 라우팅은 서버가 아닌 클라이언트에서 처리됩니다. 장점으로는 초기 로딩 이후에는 빠른 속도를 보여줍니다. 초기 로드가 달성되고 브라우저에서 캐시 및 구문 분석할 수 있는 항목이 완료되면 이후 페이지 로드는 매번 서버에서 모든 정보를 가져와야 하는 SSR보다 빠르고 원활합니다. 두번째로는 SSR에 비해 서버에 부담이 적습니다. 초기 렌더링 이후 페이지를 새로 고치거나 사용자가 다른 페이지로 클릭했을 때 브라우저는 전체 페이지가 아니라 동적으로 필요한 요소만 렌더링합니.. 2022. 9. 28.
SCSS에서 Styled-Components로 변환하며 겪은 썰.txt 입사 후 주어진 첫 과제 어느덧 입사한 지 2주가 다 될 무렵, 드디어 첫 미션이 주어졌다. Nuxt(Vue)에서 Next(React)로 마이그레이션하는 프로젝트에 푸터 파트를 작업하는 것이었다. 로직도 없고 단순히 마크업만 하는 작업이었기에, '이 정도는 거뜬히 할 수 있지!'라고 생각했지만 예상외의 난관에 부딪히게 됐다. 바로 @mixin을 비롯한 수많은 '@'로 이루어진 SCSS 때문이었다. 난관 이 글을 읽는 대다수의 분들이라면 SCSS에 대해 알고 있겠지만, 혹시나 모르는 문들을 위해 간단히 설명하자면 다양한 편의 기능을 갖춘 CSS라고 생각하면 된다. 여러 연산이나 코드의 재사용 등 여러 기능들로 보다 편리하게 스타일 작업을 할 수 있다는 장점이 있지만, Styled-Components로 변환.. 2022. 5. 16.
005_npm ci, npm i 🔥 호락호락하지 않은 프로젝트 설치 입사하고 나서 이래저래 회사 생활에 적응하던 중, 드디어 우리 팀 프로젝트 설치를 하는 순서가 찾아왔다. 이전까지 yarn이라는 패키지 매니저 위주로 사용하다 오랜만에 npm으로 설치하려는데 선임 분께서 'npm i 대신 npm ci로 설치를 진행해주세요' 라고 요청해주셨다. 그동안 npm i만 알고 있던 내게 또 다른 설치 방법이 있다는게 신기하기도 했고, 구체적으로 어떻게 다른지 확인해보기로 했다. ⚡️ npm ci? 우선 npm ci의 'ci' 는 다음 용어의 줄임말이다. ci : clean install 그냥 설치하는 것도 아니고 클린하게 설치한다는 것은 무슨 뜻일까? 이 뜻을 이해하려면 먼저 package.json과 package-lock.json에 대해 이해.. 2022. 5. 8.
반응형

티스토리툴바