본문 바로가기

전체 글101

SCSS 기본 정리 SCSS란✏️SCSS는 CSS 전처리기 라이브러리 중 하나로, 컴파일을 통해 CSS의 확장 문법을 다룰 수 있다.// 기존 CSS에선 불가능한 여러가지 문법을 지원.container { width: 50px; .box { color: red; }}SCSS 데이터 종류데이터설명예시Numbers숫자1, .82, 20px, 2em...Strings문자bold, relative, "/images/a.png", "dotum"Colors색상 표현red, blue, #FFFF00, rgba(255,0,0,.5)Booleans논리true, falseNulls아무것도 없음nullLists공백이나 ,로 구분된 값의 목록(apple, orange, banana), apple orangeMapsLists와 유사하.. 2024. 4. 27.
CSS-IN-JS에 대하여 CSS in JS🔖CSS in JS는 CSS 스타일을 JS 코드 안에 포함하여 작성하는 패턴을 의미한다. 대표적인 라이브러리로 "Styled-components"가 있다.✅장점스타일을 JS 파일에 직접 작성함으로서 캡슐화에 유리하다. 이를 통해 스타일 간의 충돌을 완화하고 유지보수를 용이하게 만든다.JS코드와 비슷한 작성법을 이용하여 동적으로 스타일링하기에도 용이하다.CSS 로드 우선순위 이슈 또한 해결할 수 있다.🚫단점기존의 CSS 작성법과는 어느정도 차이가 있다보니 학습 곡선이 높다.(실제로 내가 그렇다.)JS를 통해 스타일이 동적으로 생성되어 성능 오버헤드가 발생할 수 있다.일부 브라우저에서 지원되지 않을 수 있다.➡️솔직히 아직까진 기존의 작성법이 편하기도 하고, 현재는 Tailwind 등 간.. 2024. 4. 25.
CSR, SSR, SSG 렌더링 CSR🔖브라우저(클라이언트)에서 전적으로 웹 렌더링을 책임지는 보편화된 방식이며, 최초에 서버가 보내준 빈 HTML에 브라우저가 요소를 채워 렌더링한다.➡️서버로부터 HTML를 받는 것 이외에 별도의 통신을 할 필요가 없다.(SPA) 따라서 한번 렌더링 후 필요한 부분만 렌더링하여 효율적이다. ✅초기 로딩 후 빠른 렌더링을 통해 UX를 증대시키며, 서버의 부담이 덜하다. 또한 TTV와 TTI의 간극이 없다.🚫모든 파일이 처음에 전부 로드되어야 하므로 초기 로딩속도가 느리고, 검색엔진 최적화에 불리하다. 👍초기 로딩만 제외하면 빠른 속도와 필요한 데이터만 받아와 렌더링한다는 장점이 있어 사용자 간 상호작용이 많고 동적으로 데이터를 받아올 일이 많은 SNS피드, 채팅앱 등과 같은 페이지에서 사용하기 좋.. 2024. 4. 25.
리액트의 key 사용 이유 key값으로 적절한 값과 key지정 위치 🔖 보통 key는 각 데이터를 고유하게 나타내는 값이 되어야한다. 데이터를 외부에서 받아오는 경우, 지정된 고유한 id값 등이 그 예이다. 또한 map으로 렌더링할 경우, 가장 바깥쪽 태그에 지정한다. arr.map((el, idx) => { return {el}; }); UI 렌더링 🔖 key를 지정하면 UI가 변경될 때 리액트가 어떤 부분이 변경된 것인지 식별할 수 있어 불필요한 리렌더링이 방지된다. ✅ ex. 특정 배열에서 요소를 추가하거나 삭제하는 경우, 리액트의 관점에서는 어느부분이 변화했는지 모르기 때문에 전체 요소를 렌더링하여 불필요한 비용이 생긴다. key를 이용해 기준을 부여하면 이를 방지할 수 있다. 직관성 🔖 key를 지정하면 배열의 변화를 리.. 2024. 4. 20.
리액트의 라이프사이클 LifeCycle Method 리액트의 라이프 사이클 개념은 컴포넌트가 생기고, 바뀌고, 사라지는 각각의 시점을 통해 리액트를 효율적으로 다루기 위한 일종의 개념이다. 이를 통해 상황에 맞는 다양한 로직을 구현할 수 있고, 사용한 메모리를 효과적으로 반환하여 비용 문제 또한 해결할 수 있다. 🔖 컴포넌트가 브라우저 상에 나타나고, 업데이트되고, 사라질 때 호출되는 메서드들의 집합을 의미한다. lifecycle 메서드는 클래스형 컴포넌트에서만 사용하며, 함수형 컴포넌트에서는 useEffect()를 통해 이를 구현 가능하다. 1. Mount 🔖 첫번째 단계는 Mount로, 컴포넌트가 생성될 때 시점의 생명주기를 의미한다. ✅ 이때 호출되는 메서드는 총 4가지이다. // 1. constructor constr.. 2024. 4. 20.
React - Virtual DOM DOM 🔖각각의 Element를 담은 웹페이지를 Document라고 하며, 브라우저는 이를 분석하여 화면상에서 보여준다. ✅DOM은 이러한 Element들을 tree 형태로 표현한 것으로 이에 해당하는 Node로 구성되어 있으며, DIM이 제공하는 API를 통해 구조에 접근하고 Element를 관리한다. Virtual DOM 🔖Virtual DOM은 실제 DOM과 같은 내용을 담고 있는 복사본이라 할 수 있으며, 자바스크립트 객체의 형태로 존재한다. ✅변화를 감지하면 재조정(re-Rendering) 과정을 통해 실제 DOM과 동기화한다. 1. UI 변경 감지 및 Virtual DOM 렌더링 2. 현재 Virtual DOM과 이전 Virtual DOM을 비교해 차이 계산(Diffing) 3. 변경된 부분 .. 2024. 4. 8.

티스토리툴바