분류 전체보기33 Nuxt.js 첫걸음: 초보자도 이해할 수 있는 핵심 개념 정리 보호되어 있는 글 입니다. 2025. 2. 25. [모던 리액트 Deep Dive] 2.2 가상 DOM과 리액트 파이버 2.2.1 DOM과 브라우저 렌더링 과정DOM이란, 웹페이지에 대한 인터페이스로 브라우저가 웹페이지의 콘텐츠와 구조를 어떻게 보여줄지에 대한 정보를 담고 있다. [브라우저 렌더링 과정]1.브라우저가 사용자가 요청한 주소를 방문해 HTML 다운로드2.브라우저의 렌더링 엔진은 HTML을 파싱해 DOM노드로 구성된 트리를 만든다.(DOM)3.이 과정에서 CSS 파일을 만나면 CSS 다운로드4.CSS도 파싱해 CSS 노드로 구성된 트리(CSSOM)을 만든다.5.2번에서 만든 DOM을 순회하는데, display: none인 노드는 제외하고 방문한다. 이는 트리를 분석하는 과정을 조금이라도 빠르게 하기 위해서다.6.눈에 보이는 노드를 대상으로 해당 노드에 대한 CSSOM 정보를 찾고 스타일 정보를 이 노드에 적용한.. 2025. 2. 4. 퍼널 패턴 적용기: 잘못 구현된 페이지 흐름 개선하기 https://youtu.be/NwLWX2RNVcw?si=MXMWsc5Fb821aJjn 저는 최근 두잇투게더라는 프로젝트에 사용자의 청소 성향을 수집하는 온보딩 파트 부분을 담당했습니다. 총 4단계로 이루어진 설문조사였는데요, 처음에는 단계마다 페이지를 파고 사용자가 고르는 답변을 전역으로 관리했습니다.그리고 결과페이지에서 모든 답변을 불러와 청소 성향을 return하는 API를 호출했습니다. 근데 문득, 이렇게 하는 방법이 과연 효율적인가? 실무에서도 이렇게 개발을 하는가? 라는 의문이 들었습니다.그러다가 토스의 퍼널 패턴에 대해 알게 되었는데요. 퍼널 패턴이란, 단계를 지역 상태로 관리하고 한 페이지에서 단계 별로 컴포넌트를 띄워주는 방법이었습니다.흩뿌려져있던 상태와 페이지를 이렇게 하나로 모으다니!.. 2025. 1. 26. [모던 리액트 Deep Dive] 03장 리액트 훅 깊게 살펴보기 리액트로 개발하면서 훅은 항상 사용하는데, 정확히 이 훅이 어떤 의미이고 왜 이렇게 사용하는지에 대해 잘 모르는 것 같아서 한번 모던 리액트 Deep Dive에 있는 내용을 정리해보겠습니다.훅(hook)이 뭐냐?클래스형 컴포넌트에서만 할 수 있었던 상태 관리와 라이프사이클(생명주기) 메서드를 함수형 컴포넌트에서도 사용할 수 있게 해주는 함수죠. 대표적인 훅에 대해 알아봅시다. 1.useState함수 컴포넌트 내부에서 상태를 정의하고, 이 상태를 관리할 수 있도록 해주는 훅이다.import {useState} from 'react';const [state, setState] = useState(initialState); 리액트는 useState를 사용하지 않고 함수 내부에서 자체적으로 변수를 사용해 상태값.. 2025. 1. 18. [모던 리액트 Deep Dive] 2.4 렌더링은 어떻게 일어나는가? 리액트의 렌더링은 브라우저가 렌더링에 필요한 DOM 트리를 만드는 과정을 의미한다.이 렌더링 과정은 시간과 리소스를 소비해 수행되는 과정으로, 이 비용은 사용자에게 청구되며 시간이 길어지고 복잡해질수록 유저의 사용자 경험을 저해하기 때문에 이러한 렌더링 과정을 최소한으로 줄여야 한다. 2.4.1 리액트의 렌더링이란?리액트에서의 렌더링이란 리액트 애플리케이션 트리 안에 있는 모든 컴포넌트들이 현재 자신들이 가지고있는 props와 state의 값을 기반으로 어떻게 UI를 구성하고 이를 바탕으로 어떤 DOM 결과를 브라우저에 제공할 것인지 계산하는 일련의 과정을 의미한다. 2.4.2 리액트의 렌더링이 일어나는 이유1.최초 렌더링 : 처음 진입하면 렌더링해야 할 결과물이 필요한다. 리액트는 브라우저에 이 정보를.. 2025. 1. 17. 👋두잇투게더만의 온라인 협업을 위한 컨벤션을 정리해보자(Git, Code, 폴더 구조 및 네이밍) 안녕하세요. 성공적으로 '두잇투게더'를 끝마치고 저희 팀이 열심히 정한 컨벤션을 정리하기 위해 오랜만에 블로그에 글을 적습니다.두잇투게더는 무려 프로젝트 1등, 인기 프로젝트 1등을 했는데요. 노력한만큼 결과가 너무 좋아서 정말 기분이 좋았습니다. Git ConventionGit Branch 전략https://s2ylvia.tistory.com/26 우리 프로젝트에 제대로 된 Git 브랜치 전략을 세우는 게 어때요?안녕하세요. 이 포스트는 제가 프론트엔드 개발자로 참여 중인 가사분담 플랫폼 '두잇투게더'의 Git 브랜치 전략을 팀원들과 함께 세우기 위해 정리한 내용입니다. 나, 지금까지 Git branch를 어떻s2ylvia.tistory.com CommitGitmoji를 사용하여 시각적으로 구분을 .. 2024. 12. 19. 이전 1 2 3 4 ··· 6 다음
