나디아 성장 일기

📌 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] )..

To-do List 업그레이드 (reducer) // 전체 import './App.css' import { useState, useRef, useReducer} from 'react' import Header from './components/Header' import Editor from './components/Editor' import List from './components/List' // 임시 데이터 (기본 데이터) const mockDate = [ { id: 0, // index isDone: false, // 체크박스 content: "React 공부하기", // 글 내용 date: new Date().getTime() // 글 발행 시간 }, { id: 1, isDone: false, ..

📌 useReducer: 컴포넌트 내부에 새로운 state를 생성하는 React Hook 모든 useState는 useReducer로 대체가 가능하다.사실상 useState와 거의 비슷하다.상태 관리 코드를 컴포넌트 외부로 분리할 수 있다. : 컴포넌트 내부에는 state 생성만 해놓고 실제로 state를 관리하는 코드들은 Reducer라는 함수를 통해 컴포넌트 외부에서 관리하도록 코드를 분리할 수 있다. 📌 useReducer 구조const [state, dispatch] = useReducer(reducer, initialArg, init) ◽인자reducer : 상태가 어떻게 업데이트할 지 명시한 함수 순수 함수여야하며, 인자로 상태와 액션을 받아야 하고, 다음 상태값을 반환해야 한다. 상태와 액션..

일정 삭제하기 🔺 App.jsx todos state 배열에서 targetId와 id가 일치하는 요소를 삭제한 배열을 생성하는 함수 삭제할 todo의 id를 가져옴 (targetId) todos 배열에 인자로 todo를 넣고 모든 todo를 순회하여 todo의 id와 targetId가 일치하지 않은 것들만 필터링 👉 삭제 대상이 아닌 것들만 필터링 const onDelete = (targetId) => { // 삭제할 todo의 id를 가져옴(targetId) setTodos(todos.filter((todo) => todo.id !== targetId)) // todos 배열에서 모든 todo를 순회하여 todo의 id와 targetId가 일치하지 않은 것들만 필터링 => 삭제 대상이 아닌 것들만 필터..