나디아 성장 일기

📌 BEM (Block, Element, Modifier) : HTML 요소들을 block과 그에 포함된 element로 구분하고, 거기에 적용시킬 개별적 디자인 특성을 modifier로 구분해서 클래스명을 지어주는 규칙 기본 구조 block__element--modifier 📍 Block (블록) : block(블록)은 페이지 전체 요소를 감싸는 컨테이너 블록끼리는 상호작용할 수 있지만, 우선순위나 계층이 없다 ❌ 클래스를 적용할 수 있는 DOM 노드라면 뭐든 블록이 될 수 있다 ⭕ 🔺 Naming 그냥 원하는 이름으로 표기 🔺 CSS 클래명만 사용 ⭕ 태그 이름, ID 중첩 사용 금지 ❌ /* O */ .block { color: #e5e5e5; } /* X */ div.block { color: #..

📌 [SCSS] 문법 모음 📌 색상 rgba($color: #색상 코드, $alpha: 불투명도(소수)); 불투명도: 0.8 -> 80% SCSS 문법으로 CSS에선 동작 X .list-item { border: 1px solid rgba($color: #fff, $alpha: 0.5); // 불투명도 50% padding: 10px; border-radius: 20px; } 📌 css 스타일링을 리셋 시키는 방법 브라우저 기본값에 신경쓰고 싶지 않을 때 사용 모든 태그의 스타일을 동일하게 만듦 1. 링크의 코드를 복사해서 reset 파일(reset.scss)에 붙여넣기 CSS Tools: Reset CSS CSS Tools: Reset CSS The goal of a reset stylesheet is..

📌 box-sizing : 박스 크기(width, height)를 계산하는 방법을 지정하는 속성 속성 content-box : 콘텐트 영역을 기준으로 크기를 정한다. - 기본값 - 요소의 크기에 테두리와 안쪽 여백은 넣지 않는다. border-box : 테두리를 기준으로 크기를 정한다. - 요소의 크기에 안쪽 여백과 테두리는 포함하고, 바깥 여백은 포함하지 않는다. initial : 기본값으로 설정한다. inherit : 부모 요소의 속성값을 상속받는다. 출처 CSS / box-sizing / 박스의 크기를 어떤 것을 기준으로 계산할지를 정하는 속성 목차1 개요2 문법3 예제 개요 box-sizing은 박스의 크기를 어떤 것을 기준으로 계산할지를 정하는 속성이다. 기본값 : content-box 상속 :..

📌 context : 컴포넌트 간의 데이터를 전달할 수 있는 기능 데이터 보관소(객체) 역할 props의 단점인 부모 👉 자식으로만 데이터를 전달하는 것을 해결한다. ✨ Props Drilling : 컴포넌트 트리에서 데이터를 하위 컴포넌트로 전달하기 위해 중간 컴포넌트를 통해 프로퍼티를 내려주는 것 context는 여러 개 / 분리하여 설정할 수 있다. 📌 context 생성하기 📍 context 생성 메서드 불러오기 import { createContext } from 'react' 📍 context 선언하기 const 변수명 = createContext(); 컴포넌트 외부에 선언 👉 굳이 App 컴포넌트가 리렌더링 될 때마다 재생성 될 필요가 없기 때문 📍 컴포넌트 감싸기 Provider 컴포넌트 ..

📌 useCallback : 불필요한 함수의 재생성 방지 객체 타입을 최적화 하는 방법 리렌더링 되더라도 다시 생성되지 않게 방지하는 기능 📌 useCallback 사용하기 📍 useCallback 불러오기 import { useState, useRef, useReducer, useCallback} from 'react' 📍useCallback 구조 useCallback( function, [deps] ) function: 최적화 할 함수 (재생성을 방지할 함수) deps: 최적화 기준이 될 배열 deps를 빈 배열로 놔둠 👉 Mount(탄생) 될 때에만 함수 생성, 그 뒤로는 생성 X function을 그대로 생성해서 반환해준다. deps가 변경되었을 때만 최적화 한다. // CREATE (일정 추가 ..

📌 memo : 컴포넌트를 인수로 받아 최적화된 컴포넌트로 만들어 반환 React의 내장 함수 얕은 복사 ('==='로 비교, 주소값 X) 최적화된 컴포넌트는 props를 기준으로 메모이제이션 된다. 메모이즈드 컴포넌트(Memoized Componenet, 최적화된 컴포넌트)는 부모 컴포넌트가 리렌더링 되더라도, 자신이 받는 props가 바뀌지 않으면 다시는 리렌더링이 실행되지 않도록 함 👉 불필요한 리렌더링 방지 ✨ 고차 컴포넌트(HOC, Higher Order Component) : 컴포넌트를 인수로 받아 해당 컴포넌트에 추가적인 기능(최적화, 메모이제이션)을 덧붙여 새로운 컴포넌트를 반환해주는 컴포넌트 📌 memo 사용하기 📍 memo 불러오기 import { memo } from "react"; ..

📍 최적화(Optimization) : 웹 서비스의 성능을 개선하는 모든 행위서버의 응답 속도 개선 정적 파일(이미지, 동영상 등) 로딩 개선 불필요한 네트워크 요청 줄임 불필요한 리렌더링 방지 최적화 하는 순서 기능 구현 🔜 완성최적화 기능 추가, 수정이 힘들기 때문에 기능 구현이 완성된 후 마지막에 최적화 진행 최적화 대상 꼭 필요한 부분에만 최적화 적용 📌 useMemo : 메모이제이션(memoization) 기법을 기반으로 불필요한 연산을 최적화하는 React Hook ✨ 메모이제이션(memoization) : 최초의 연산 값을 메모리에 보관, 동일한 연산이 다시 발생하면 다시 계산하지 않고 저장되어 있던 결과값을 반환하는 기술 📌useMemo 구조useMemo( function, [deps] )..