본문 바로가기

Front-End Study89

모던 자바 스크립트 기본 개념 정리 Symbol과 BigInt 🔖ES6+ 이후 추가된 새로운 데이터타입 // Symbol 고유한 값을 만들 때 사용 const symbol = Symbol('this is a Symbol'); // 다른 어떤 값과 비교해도 무조건 false // BigInt JS가 안전하게 표기할 수 있는 최대 정수형을 넘어선 표현을 위해 사용 const bigint = 9007199254740993n; const bigint = BigInt(9007199254740993); // 소수 표현에는 사용 불가, 같은 타입끼리만 연산 가능! typeof 연산자 🔖변수의 데이터타입을 확인하기 위해 사용하는 연산자 // typeof 변수 or typeof(변수) 의 형태로 사용 typeof 'Codeit&#39.. 2024. 3. 27.
자바스크립트의 var, let, const 비교 중복 선언 허용에서의 비교 🔖기본적으로 var, let은 중복 선언을 허용하며, const는 허용하지 않는다. ❗중복 선언은 허용하되, let은 재선언을 허용하지 않는다. ❗const는 선언과 동시에 초기화 해주어야 한다. // var 키드드 var a = 'JavaScript'; var a = 'Python'; // 허용 a = 'JAVA'; // 허용 // let 키워드 let a = 'JavaScript'; let a = 'Python'; // 미허용 a = 'JAVA'; // 허용 // const 키워드 const a = 'JavaScript'; const a = 'Python'; // 미허용 a = 'JAVA'; // 미허용 ✅기존의 var 키워드는 중복 선언으로 인해 다양한 문제(버그, 출력값.. 2024. 3. 25.
JS의 얕은 복사 & 깊은 복사 자바스크립트의 값 🔖기본적으로 자바스크립트의 값은 원시값과 참조값으로 나뉜다. 원시값 : Number, String, Boolean, Null, Undefined 참조값 : Object, Symbol ✅원시값은 복사한 값을 다른 메모리에 할당하여 기존 값에 영향을 끼치지 않는다. (깊은 복사) ✅참조값은 주소를 복사하기 때문에 복사한 값을 변경하면 기존 값도 변경된다. (얕은 복사) 얕은 복사(Shllow Copy) 🔖객체의 참조(주소)값을 복사하는 것 const a = { one : 'one', two : 'two', } const b = a; b.one = 1; console.log(a.one); // 1 ✅객체의 주소를 복사하여 변수에 할당하기 때문에, 변수의 값을 수정하면 기존 객체도 변경된다. .. 2024. 3. 25.
Git branch & merge 개요 및 Git Flow 전략 branch의 개념 🔖git에서 어떠한 작업을 독립적으로 진행하기 위한 개념 git branch mybranch ⬆️이와 같이 특정 디렉토리 안에서 신규 브랜치를 생성한다. 🔖브랜치를 이동하는 커맨드로는 ==checkout==이 있으나, 현재는 기능별로 분리 (switch, restore) git checkout mybranch git switch mybranch git checkout -b mybranch (구버전) git switch -c mybranch ⬆️생성과 이동을 동시에 하는 커맨드 git branch -d mybranch git branch -D mybranch (강제 삭제) ⬆️브랜치를 삭제하는 커맨드 🔖신규생성한 branch를 원격 레포지토리에 push하기 위해서 커맨드를 이용한 설정이.. 2024. 3. 18.
[1주차] CSS Cascading Cascading은 기본적으로 "폭포, 위에서 아래로 떨어지는" 이라는 뜻을 가진다. CSS에서의 Cascading CSS의 맨 앞 글자의 의미이기도 하듯이 가장 중요하게 적용되는 원리이다. 같은 요소에 대해 여러 스타일이 중복되는 경우의 어떤 스타일을 기준으로 적용할지 결정하는 규칙 "스타일 우선순위"와 "스타일 상속"을 기반으로 규칙을 설정 스타일 우선순위 스타일 요소는 우선순위를 가지고 있는데, 우선순위에 따라서 적용되는 스타일이 결정된다. 1. 중요도 스타일을 선언한 주체(작성자, 사용자, 사용자 도구)에 따라 우선순위를 설정 작성자 > 사용자 > 사용자 도구 순서로 결정 (!important를 사용해 최우선순위 설정 가능) 2. 명시도 셀렉터가 가리키는 것이 명확할 수록.. 2024. 3. 11.
페이지 라우팅 브라우저를 거쳐 웹 서버에 원하는 http를 요청하고 이에 맞는 html 파일을 받아와 렌더링하는 과정 원리 전통적인 방식 : MPA (요청한 페이지의 html을 다 받아오는 방식) -> 페이지를 변경할 때마다 기존의 렌더링했던 페이지를 모두 제거하고 다시 받아옴(효율성 X) 리액트의 방식 : SPA (하나의 페이지를 통해 모든 라우팅을 처리) -> HTML (빈 껍데기) + JS Files (.jsx등의 모듈, etc…) = Bundling (파일묶음) => React App -> Bundling된 컴포넌트 단위의 모든 파일이 제공되어 요청이 필요없이 페이지 스스로 변경 하나의 HTML파일만 존재하고 JS로 여러 요소를 그려내는 것 : CSR (Client Side Rendering) // Router.. 2024. 2. 22.