차근차근 개발중

렌더링 과정중에 성능최적화를 고민하기위해서는 리플로우와 리페인트단계를 빼놓을 수 없다 그렇기때문에 리플로우와 리페인트에 대해서 공부해보자   화면이 사용자에게 표출된 후에 노드가 추가되거나 요소의 스타일이 달라졌을때 발생하는게 리플로우(Reflow)와 리페인트(Repaint)입니다  📌 리플로우란(Reflow)?- 요소의 위치나 크기가 변경되어 페이지의 레이아웃을 다시 계산하는 과정입니다. 변경하려는 특정요소의 위치와 크기뿐만 아니라 연관된 요소들의 위치와 크기도 재계산하기 때문에 성능 저하가 일어납니다.  •  발생원인DOM요소 추가/ 제거요소의 크기, 위치 변경폰트변경, 텍스트 내용변경윈도우 크기조정 css 스타일 변경 ex) margin, padding등 •  특징계산 비용이 높다하나의 요소가 리..

1. 변수· 변수(variable) - 데이터를 담을 수 있는 메모리 공간의 이름 · 변수선언(declaration) - 어떤 타입의 데이터를 담을 수 있는 메모리 공간을 할당하도록 명령하는 것// var 변수 선언var name;// let 변수 선언let name;// const 변수 선언(상수)// 상수 선언시 반드시 초기 값 설정, 설정하지 않을 경우 에러 출력const name; // Missing initializer in const declarationconst pi = 3.14; let name = “이름” , age = 20 // 한 번에 여려 변수를 선언 할 수 있다. · 변수 유효 범위(scope) - 선언된 변수가 메모리에서 삭제되지 않고 영향을 미칠 수 ..

항상 아무의식없이 사용했었는데, 갑자기 왜 이걸 선언해야하며, 선언하지 않았을때 어떤 영향이 있는지에 대해 생각해보았다.  📌란?Document Type Declaration의 약자로 '문서 타입 선언'의 시작 태그입니다.HTML 태그는 아니지만, 선언된 페이지의 HTML 버전이 무엇인지를 웹 브라우저에게 알려주는 역할을 하는 선언문으로, 대소문자를 구분하지는 않습니다.HTML 태그보다 먼저 선언된다 . 항상 HTML 문서의 첫 줄에 위치해야 합니다 ● 선언 목적DOCTYPE은 브라우저에게 어떤 HTML버전으로 문서를 해석해야 하는지 알려줍니다DOCTYPE없으면 브라우저가 쿼크모드로 전환되어 이전 버전의 브라우저와 호환되는 방식으로 페이지를 렌더링합니다.현대의 는 "표준 모드(Standards Mo..

📌React Hook이란?React 16.8에서 도입된 기능으로, 함수형 컴포넌트에서 상태(state)관리와 생명주기 기능을 사용할 수 있게 해주는 함수들입니다react가 제공하는 특별한 기능으로, 컴포넌트에 이 기능들을 '추가'할 수 있다. 마치 레고 블록처럼 필요한 기능을 가져다 붙이는거라고 생각하면 쉽게 이해할 수 있습니다.  ◦ HooK사용규칙컴포넌트의 최상위 레벨에서만 호출해야한다.React함수형 컴포넌트 내부에서만 사용가능하다 ◦ Hook의 장점코드가 더 간결하고 읽기쉽다로직 재사용이 쉽다관련 있는 코드들을 한곳에 모을 수 있다.  ◦ 주요 Hook들1) useState - 상태 관리의 기본 변수의 기본값 useState는 항상 두 가지를 반환합니다 현재 값과 그 값을 변경하는 함수초기값은 ..

📍github으로 팀프로젝트할때 필요한 명령어 1. github에서 소스코드 다운로드git clone [repository URL] - git에서 원격 저장소 주소를 복사해오면 됩니다.- 이건 처음에만 해주면 됩니다  2. 작업 시작 전에 최신코드받아오기 git pull origin main- master 또는 main 등 모두의 코드를 정리해둔 마스터 계정의 최신코드를 받아온다  2-1. 작업중이였다면! 먼저 아래작업을 한 후에 pull 해주기 git status # 변경된 파일 확인하기git add . # 변경된 파일 스테이징git commit -m "작업내용 설명" # 변경사항 커밋하기git push origin 브랜치이름  3. 새로운..

📍. git 환경설정하는 방법 - Mac OS 기준 기본 cmd를 사용하면됩니다. 저는 iTerm2를 사용했습니다. git환경 설정 상태 확인 git config --list  이렇게 git 설정값을 확인 할 수 있습니다. 유저 이름 설정git config --global user.name "name"유저 이메일 설정 (github 가입시 사용한 이메일을 작성)git config --global user.email "email address" 📍. Github에 프로젝트를 처음 올리기1. 초기화git init  2. 프로젝트안에 올릴 파일 추가git add ..(점)을 작성하는건 모든 파일을 올리겠다는 의미입니다. 파일을 선택해서 올리고싶으면 . 대신에 파일이름을 작성해주시면 됩니다. (ex - gi..

▪️ setTimeout이란?나중에 실행하기 기능이라고 생각하면 된다.1회성 실행 : 지정된 시간이 지난 후 코드를 단 한번만 실행합니다. 실행 패턴: 딜레이 → 실행 → 종료// setTimeout을 변수에 저장const timer = setTimeout(() => { console.log("setTimeout 실행");}, 3000);// 타이머 취소clearTimeout(timer); 주요 특징 :첫번째 인자: 실행할 함수 (뭘 할지)두번째 인자: 지연 시간 (milliseconds) (언제 할지)한 번만 실행됨⚠️  주의할 점 :시간은 밀리초(1000 = 1초) 단위입니다0을 넣어도 바로 실행되지 않고 최소한의 지연이 발생합니다clearTimeout()으로 예약된 작업을 취소할 수 있습니다c..

1) 함수(funcrtion)란?- 독립적으로 실행할 수 있는 코드 블록입니다- 전역 스코프나 다른 함수 내에서 선언할 수 있습니다//함수 선언식function add1(a, b){ return a + b;}//함수 표현식const add2 = function(a, b){ return a * b;}//화살표 함수const add3 = (a, b) => a + b;   2) 메서드(Method)란?- 객체에 속한 함수를 메서드라고 합니다.- 객체의 프로퍼티로써 존재하며, 해당 객체의 컨텍스트 내에서 실행됩니다. const cat = { name : '나비', // 이것이 메서드입니다. sound : function(){ console.log(this.name + " : 야옹 "); }}co..

1) React 생명주기란?- 컴포넌트가 생성되고 화면에 나타나고 사라지는 과정을 설명하는 메서드의 연속- 마운트(Mounting), 업데이트(Updating), 언마운트(Unmounting) 일반적으로 3단계로 구분되어 있고, 각 단계마다 특정한 메서드를 사용- class components에서 사용하고,  함수형 컴포넌트는 hooks를 이용해서 상태변화를 관리   2) 생명주기 3단계2-1. 마운트(Mounting)- 마운트는 컴포넌트가 DOM에 삽입되어 화면에 나타나는 것을 말합니다. 생명주기의 마운트는 컴포넌트가 생성되어 DOM에 삽입되는 과정을 다루고, 컴포넌트가 처음으로 화면에 나타나는 작업을 수행하는 단계입니다.  1. constructor 컴포넌트의 생성자 메서드로, 컴포넌트가 생성될 때 ..

📍. CRA란? Create React App(CRA)는 리액트 애플리케이션 개발 도구입니다. CAR를 사용하면 webpack이나 babel과 같은 도구를 설치하거나 구성할 필요 없이 간편하게 리액트 애플리케이션을 시작할 수 있습니다. 📍. CRA를 사용하는 이유 간편한 설정 React 앱을 만들때, Babel이나 webpack같은 build 도구를 사용한다. 이런 다양한 라이브러리를 일일이 다운받아야하지만 CRA을 통해 복잡한 설정 없이 간단히 리액트 애플리케이션을 시작 할 수있다. 프로덕션을 배포할 준비가 되었을 때, npm run build 를 실행하면 build 폴더 안에 제작한 앱의 최적화된 Build를 생성합니다. 성능 최적화 코드 번들링, 코드 분할, 자원 압축 등의 작업을 자동으로 수행하여..