구버전
-
[Hooks] useEffect구버전/React 2023. 11. 22. 14:19
개요 useEffect와 필수개념 useEffect의 실행순서 부가정보 useEffect side effect를 별도로 처리하기 위해서 사용하는 Hook으로 매번 컴포넌트가 렌더링 될 때 특정 조건에 의해 작업을 실행하며 컴포넌트가 순수 함수를 유지하도록 도와주는 함수 Side effect) 함수 내 특정 동작이 함수 외부에 영향을 끼쳐, 프로그램의 동작을 이해하기 어렵게 만드는행위 서버와의 통신 setTimeOut, setInterval React 외부와 상호작용 순수함수와 참조 투명성) 순수함수란 입력에 대해 항상 같은 결과를 반환해주는 함수로 외부와 관련이 없어 영향을 주지 않는 함수, 이러한 함수들은 참조에 투명하다고 하며 React에서 사용을 권장한다 재사용성의 증가와 예측 및 테스트가 쉽다 /..
-
[Article] React 렌더링 동작에 대한 (거의) 완벽한 가이드(1편)구버전/React 2023. 11. 21. 21:05
개요 랜더링이란? React의 랜더링방식 랜더링 성능 개선 Context와 랜더링 동작 Redux와 랜더링 동작 React의 향후 개선사항 기타 랜더링이란? 현재 porps 및 상태를 기반으로 React가 컴포넌트에게 UI영역이 어떻게 보이길 원하는 지 설명을 요청하는 프로세스 랜더링 프로세스) 프로세스동안 React는 컴포넌트 트리의 루트에서 시작해서 업데이트가 필요한 모든 컴포넌트를 찾기 위해 아래로 순회한다. 컴포넌트 랜더 출력은 일반적으로 JSX구문으로 작성되며 Javascript가 컴파일되고 React.createElemet()를 통해 createElement라는 DOM객체와 유사한 객체로 반환된다. 이후 재조정을 통해서 업데이트 내용을 수집하여 DOM요소에 딱 한번 적용시켜 업데이트 내용을 반..
-
[TailwindCSS] TailwindCSS사용 5가지의 모범사례구버전/CSS 2023. 11. 21. 19:34
개요 프로젝트에 디자인 시스템이 있어야 한다. 컴포넌트 기반 접근 방식을 사용하고 있어야 한다. 유틸리티 클래스 수를 줄여라 디자인토큰을 그룹화하고 의미적으로 이름 짓기 클래스 순서를 유지해라 사용하지 않는 클래스는 빌드에서 제외해봐라 스타일 덮어쓰기 및 확장 시 불일치 방지 1. 2. 재사용가능하게 컴포넌트 만들어서 거기다가 CSS설정해서 반복하는 걸 최대한 줄여라 3. 유틸리티 클래스 수를 줄여라 ex) pt-4 pb-4 => py-4 4. 명확한 변수명과 코드 명확성을 위한 규칙은 클린 코딩습관에 좋다 ex) bright-red와 같은 이름보다 error와 같이 간결하게 일관성을 높여라 5. 클래스 순서를 정렬해서 보기 편하게 만들어라 Doc (tailwindCSS 공식 prettier) 6. ta..
-
[모각CS] DOM과 가상DOM구버전/CS Study 2023. 11. 21. 16:52
개요 브라우저의 동작 Virtual DOM React에서의 동작 브라우저의 동작 브라우저의 동작은 VirtualDOM의 등장과 등장 이전의 RealDOM만의 한계점을 설명해주는 부분으로써 동작형태와 이점을 좀 더 이해하기 쉽게 해주기에 기억하면 좋음 브라우저의 랜더링 과정) DOM tree 생성 브라우저의 렌더 엔진이 HTML을 파싱하여 DOM노드로 이루어진 트리를 생성한다. render tree 생성 CSS 파일과 inline 스타일을 파싱하여 CSSOM을 생성 CSSOM과 렌더 엔진에 의해 만들어진 DOM을 합쳐 render tree를 생성 문서의 시각적인 구조를 나타낸다 Layout viewport에서 생성된 render tree의 각 노드가 스크린상에 어느 공간에 위치할지 결정 position, ..