나디아 성장 일기

📌 현상VS Code에서 git bash로 파일을 생성하고 log를 실행했는데 한글이 깨진 현상이 발생했다.    📌 노력1번 방법code ~/.bashrc를 열어서 아래 코드 붙여넣기LANG=ko_KR.UTF-8LC_CTYPE="ko_KR.UTF-8"LC_NUMERIC="ko_KR.UTF-8"LC_TIME="ko_KR.UTF-8"LC_COLLATE="ko_KR.UTF-8"LC_MONETARY="ko_KR.UTF-8"LC_MESSAGES="ko_KR.UTF-8"LC_ALL=ko_KR.UTF-8=> 실패 ❌  2번 방법git config --global i18n.commitencoding "UTF-8" git config --global i18n.l..

📌 writing-mode : 텍스트 정렬 방향을 지정한다. horizontal-tb : 가로 정렬 - 초기값 (기본값) vertical-rl : 세로 정렬 - 블록 컨테이너의 표시 방향: 왼쪽 ⬅ 오른쪽 vertical-lr : 세로 정렬 - 블록 컨테이너의 표시 방향: 왼쪽 ➡ 오른쪽 📌 text-orientation : 한 줄에 있는 텍스트의 방향을 설정한다. 세로 쓰기 모드(writing-mode)인 경우에 효과가 있으며 수직 방향의 제목을 달때 유용하다. mixed : 우측 방향으로 세로 정렬 + 영어는 정방향 sideways : 우측 방향으로 세로 정렬 upright : 세로 정렬 출처 CSS writing-mode 속성 – 텍스트 세로 쓰기 모드 설정 - 코딩에브리바디 writing-mode..

📌 Arlet창 UI 만들기 ✨ UI 만드는 단계 1. HTML/CSS로 미리 디자인 2. 언제, 어떻게 보여줄 지 JS로 구현 목차 1. JS로 HTML 조작하는 법 2. function 함수 3. class로 찾기 4. event 실행하기 📌 JS로 HTML 조작하는 법 document.getElementById("변경할 html의 id").변경 요소 = "변경 내용"; : 변경할 html의 id의 요소를 찾아 내부의 html 변경 요소를 "변경 내용"으로 변경 HTML 요소 ⇒ Element getElementById("변경할 html요소의 id") ⇒ 셀렉터(Selector) document.getElementById("hello").style.color = "red"; 📌 JS 조작 문법 HTM..

📌 object-fit : 요소의 크기에 맞게 태그와 태그의 크기를 조정하는 속성 📍속성 contain 비율을 유지하면서 요소의 콘텐츠 박스 내부에 들어가도록 크기를 맞춤 조절한다. 딱 맞추기 때문에 남는 공간이 발생할 수 있다. cover 비율을 유지하면서 요소 콘텐츠 박스를 가득 채운다. 비율이 맞지 않으면 일부가 잘린다. fill 기본값 박스 크기에 맞춰 요소 크기를 조절한다. none 크기 조절 ❌ scale-down none과 contain 중 대체 콘텐츠의 크기가 더 작아지는 값을 선택한다. 출처 object-fit - CSS: Cascading Style Sheets | MDN CSS object-fit 속성은 나 요소와 같은 대체 요소의 콘텐츠 크기를 어떤 방식으로 조절해 요소에 맞출 것인..

📌 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"; ..