개발공부
-
브라우저 렌더링 원리개발공부/CS 2023. 11. 9. 10:34
오늘은 브라우저 렌더링에 대해 알아보고자 한다. HTML 파싱 후 DOM 트리 구축 CSS 파싱 후 CSSOM 트리 구축 JavaScript 실행 DOM과 CSSOM를 조합하여 렌더트리 구축 뷰포트 기반으로 렌더트리의 각 노드가 가지는 정확한 위치와 크기를 계산 (Layout 단계) 계산한 위치 및 크기를 기반으로 화면에 그림 (Paint 단계) 위에 과정을 통해 브라우저가 렌더링된다고 한다. 하지만 나는 아직 완벽하게 이해하지 못했기 때문에 하나씩 차근 차근 알아보고자 한다. 브라우저란? 동기적으로 HTML, CSS, JS 언어를 해석하여 내용을 화면에 보여주는 프로그램 CSSOM (CSS Object Model) CSS 내용을 파싱하여 자료를 구조화 한 것 즉, CSS 내용을 해석하고 노드를 만들어 ..
-
DOM에 직접 접근하기 (useRef)개발공부/React 2023. 10. 26. 15:55
오늘은~! useRef에 대해 자세하게 공부해보자. 소분소분 프로젝트에서 회원가입을 담당했는데 정말 고민이 많았다. 실시간 유효성 검사하여 사용자에게 안내 메시지도 보여줘야 하고, input 태그가 각자 리렌더링 되도록 해야하고... 허헣.. 나름 신경써서 작업했는데 아쉽게도 라이트 하우스 90점을 넘지 못해 개선중이다. 일단 1차로 해결하고 싶은 부분은 리렌더링이다. 단순하게 컴포넌트를 상세하게 분류하거나, 아니면 커스텀 훅을 활용하거나 등등 여러가지 고민을 했지만 비밀번호 확인 때문에 쉽지가 않다. 사용자가 입력한 비밀번호와 일치하는지 확인하기 위해서는 같은 단에 선언해야 하는데.. 이 경우 하나만 변해도 다른 부분이 같이 리렌더링이 된다... 일단 객체를 활용해서 그나마 리렌더링 덜 하게 바꾸긴 했..
-
리액트 프로젝트 구조개발공부/React 2023. 10. 25. 14:56
오늘은 터미널에 yarn create react-app {프로젝트 이름} 을 입력 했을 때 생성되는 파일 및 폴더에 대해 공부할 예정이다. (중요한 것들 위주로만!) 일단 실행 순서는 index.js > index.html > App.js 이다 src 폴더 index.js: 진입점 JS 파일, 주로 DOM에 렌더링 하는 역할 App.js: 루트 컴포넌트로 여기에서 다른 컴포넌트를 조합 및 렌더링 public 폴더 index.html: 진입점 HTML, 리액트 어플리케이션이 렌더링 되는 곳 그 외 폴더 node_modules: 프로젝트의 의존성 라이브러리가 설치되는 폴더 package.json: 프로젝트에서 어떤 것 (모듈 등)을 사용하는지에 대한 정보가 기록된 파일 처음에 리액트 공부할 때 프로젝트 구조..
-
리액트에서의 메서드 (map, concat, filter)개발공부/React 2023. 10. 20. 11:49
리액트를 기초부터 다시 공부해보려고 한다. 우선 리액트에서 자주 사용하는 JS 메서드부터 시작해보자! :) Map 배열을 순회하면서 각 요소에 대해 주어진 함수를 호출, 반환 값으로 새로운 배열을 생성 원본 배열을 변경하지 않고 새로운 배열을 반환 -> 배열을 변환하거나 재구성할 때 유용~! 이제 위에 내용은 Map의 기본 내용이고, 리액트에서 map 메서드는 반복되는 컴포넌트를 렌더링 할 수 있게 해준다. 이 때, key 값을 넣어줘야지 경고 메시지가 뜨지 않는다. const names = ["눈사람", "얼음"]; const nameList = names.map((name, index)=> {name}); key를 설정해줘야 하는 이유 key는 컴포넌트 배열을 렌더링 했을 때 어떤 원소에 변동이 있었..
-
동기와비동기_2 (Promise)개발공부/React 2023. 10. 18. 12:07
https://hani-develop-history.tistory.com/42 동기와 비동기_1 오늘은 동기와 비동기에 대해 공부했다. 예전 직장에 다닐 때 성능 개선을 위해 비동기 작업에 대해 공부 했던 적이 있었다. 당시에 자사 프로그램이 동기적으로 작동해서 성능 부분에서 문제가 hani-develop-history.tistory.com 위에 글에 이어서 비동기 공부한 내용을 정리하고자 한다. JS에서 비동기 작업을 도와주는 객체 중 하나인 Promise에 대해 공부해봤다. Promise - 비동기 처리를 도와주는 객체 장점 비동기 처리 시점을 명확하게 표현할 수 있음 연속된 비동기 처리 작업을 추가, 삭제, 수정하기 좋음 비동기 작업 상태 종류 Pending: 대기 Fulfilled: 이행 reso..
-
동기와 비동기_1개발공부/React 2023. 10. 17. 14:41
오늘은 동기와 비동기에 대해 공부했다. 예전 직장에 다닐 때 성능 개선을 위해 비동기 작업에 대해 공부 했던 적이 있었다. 당시에 자사 프로그램이 동기적으로 작동해서 성능 부분에서 문제가 있었기 때문이다. 그래서 개념 공부를 하고 코드 작업을 시작하려고 했는데...!! 코드를 확인한 결과 다른 팀의 선작업이 필요한 상황이었다. 아쉽게도 내가 퇴사하기 전까지 다른 팀이 작업해주지 못해서 아쉽게도 성능 개선을 끝내지 못하고 나왔던 기억이 있다. 히히.. 그렇게 시간이 지나고 프로젝트를 하게 되었는데 짧은 기간 냉 기능을 구현해야하다보니 성능면에서 아쉬운 부분이 많았다. 어떻게 하면 성능 개선을 할 수 있을지 찾아보다가 비동기 처리를 해보기로 결정했다. 우선 개념적인 부분을 다시 정리해봤다. 동기 - JS는 ..
-
렌더링 최적화_1 (React.memo)개발공부/React 2023. 10. 16. 20:06
이제부터 본격적으로 렌더링 최적화 관련된 공부를 시작할 예정이다. 최근에 진행했던 1인 가구 플랫폼 소분소분 프로젝트를 리팩토링 하기로 했다! 첫 번째 대상은 바로~! 회원가입 페이지이다. 우선 라이트 하우스를 사용해서 점수를 확인해봤다. 멘토님께서 90점 이상을 받아야지 좋은 페이지라고 했기 때문에 90점을 목표로 성능 개선을 해보기로 했다. 일단 우선 큰 문제였던 리렌더링을 해결해보려고 한다. 회원가입 페이지의 경우 입력되는 데이터 종류만 다를 뿐 동작 방식은 같아 컴포넌트를 분리해서 재사용성을 높였었다. 위에 구조로 되어 있다보니 부모가 리렌더링되면 자식도 리렌더링 되는 문제가 발생했다. 그래서 나는 React.memo를 사용해보기로 했다. 이유는 부모 컴포넌트가 리렌더링 되더라도 자식 컴포넌트가 ..