[CS] Javascript

Yeong·2023년 4월 18일
CSJavaScript

지속적으로 업데이트 중입니다.

📍 호이스팅

호이스팅은 변수를 선언하고 초기화했을 때, 선언 부분이 최상단으로 끌어올려져 코드 실행보다 먼저 메모리에 저장되는 과정입니다.

어디에 선언했느냐에 상관없이 선언을 최상단으로 끌어올려주는 것

📍 this의 용법

this는 함수를 호출할 때 결정되는 것입니다. 전역범위에서 사용될 때 this는 전역객체 window를 가리킵니다. 일반 함수 내부에서도 전역 객체 window를 가리킵니다. 객체에 속한 메서드에서 사용될 때 this는 메서드를 호출한 객체를 가리킵니다. 생성자에서 사용될 때 생성자로 인해 생성된 새로운 객체를 가리킵니다.

📍 var, let, const

var

  • 선언과 초기화를 한번에 하고, 재선언이 가능합니다.
  • 선언하기 전에도 사용할 수 있습니다.
  • 함수의 최상위로 호이스팅 되며 선언은 호이스팅 되지만, 할당은 호이스팅 되지 않습니다.
  • 함수 스코프에 종속됩니다. 블록 스코프에 종속되지않습니다.
    (어디에서나 아무데서나 보임)
<script>
        var a = 'monday'; // a = monday 라고 선언한다.

        var a = 'tuesday'; // tuesday 라는 새로운 값을 할당한다.
				console.log(a); // tueseday가 출력된다.				
       
				var a = 'wedneseday'; // 다시 wedneseday 라는 새로운 값을 할당한다.
        console.log(a);  // wedneseday가 출력된다.
</script>

let (주로 자바스크립트에서 사용)

  • 블록 스코프에 종속됩니다.
    -> 아래 예시에서 { } 안이 블랙스코프의 의미이다. 괄호를 이용해서 코드를 블록안에 작성하면 블럭 밖에서는 블럭 안의 내용을 볼 수 없다. 그래서 블록처리하고 그밖에서 콘솔을 찍으면 값이 없다.
{
let name = 'yeong';
console.log('첫번째:', name);
name = 'chae';
console.log('두번째:', name);
}
console.log('세번째:', name);

결과: 첫번째: yeong, 두번째: chae, 세번째: 빈값이 출력됨
  • 재선언은 불가하며, 재할당은 가능합니다.
    -> name을 선언하였고, 재할당을 했다.
  • 임시변수로 자주 쓰입니다.
<script>
        let b = "blue"; 
        let b = "yellow"; 
        console.log(b); // Uncaught SyntaxError: Identifier 'b' has already been declared

		let c = "red";
		c = "green";
		console.log(c); // green 이 출력된다.
</script>

const

  • 블록 스코프에 종속됩니다.
  • 선언과 동시에 초기화해야만합니다.
  • 재선언과 재할당 모두 불가합니다.

📝 블록 스코프와 함수 스코프

블록스코프는 블록{ }내부에서 선언된 변수는 해당 블록에서만 접근 가능한 것을 말합니다. (let, const)

함수스코프는 함수에서 선언한 변수는 해당 함수 내에서만 접근 가능하다는 것을 의미합니다. (var)

📍 Closure (클로져)

내부함수가 외부함수의 지역변수에 접근 할 수 있고, 외부함수는 외부함수의 지역변수를 사용하는 내부함수가 소멸될 때까지 소멸되지 않는 특성을 의미합니다.

-> 외부 함수 호출이 종료되더라도 외부 함수의 지역 변수 및 변수 스코프 객체의 체인 관계를 유지할 수 있는 구조를 클로저라고 합니다.

++ 클로저는 반환된 내부함수가 자신이 선언됐을 때의 환경(Lexical environment)인 스코프를 기억하여 자신이 선언됐을 때의 환경(스코프) 밖에서 호출되어도 그 환경(스코프)에 접근할 수 있는 함수

  • 클로져의 활용
    - 상태 유지
    - 전역 변수의 사용 억제 => 자신이 생성되었을 때의 lexical 환경을 기억하기 때문이다.
    - 정보의 은닉

📍 전역변수와 지역변수

전역 변수는 특정 지역(중괄호{}) 밖에서, 지역 변수는 특정 지역(중괄호{}) 안에서 선언된 변수를 말한다.

<script>
		var num;
		    // 전역변수

        function hello() {
        //지역변수
        var number = 1;
        alert(number);
        }

        hello();  // 1
        alert(num); // undefinded
</script>

📍 객체지향 프로그래밍

프로그램 구현에 필요한 객체를 파악하고 각각의 객체들의 역할이 무엇인지를 정의하여 객체들 간의 상호작용을 통해 프로그램을 만드는 것을 말합니다.

💡 "객체 파악, 객체 역할 정의하고, 객체들 간의 상호작용"을 통해 프로그램을 만드는 것

  • 장점
    • 코드 재사용이 용이 : 기존에 만들어진 클래스를 재사용 / 상속을 통해 확장
    • 유지 보수가 편리 : 수정해야 할 부분이 클래스 내부에 있으므로 해당부분만 수정
    • 대형 프로젝트에 적합 : 클래스 단위로 모듈화시켜서 개발 → 업무분담의 편리성
  • 단점
    • 처리속도가 상대적으로 느림
    • 객체의 수 증가 → 용량이 커질 수 있음
    • 설계 시, 많은 시간과 노력이 필요

📍 동기 비동기

동기방식은 요청 후, 응답을 받아야 다음 동작을 실행하는 방식을 말하며
비동기 방식은 요청을 보낸 후, 응답과 관계없이 다음 동작을 실행하는 방식. 자바스크립트에서 가장 대표적인 비동기 처리 사례는 setTimeout()이 있습니다.

Promise란?

콜백함수란?

다른 함수의 인자로써 사용되는 함수

📍 Async / Await

비동기적인 작업을 처리할 수 있는 문법으로 promise를 기반으로합니다. async 함수는 항상 Promise 객체를 반환하며, await를 이용하여 비동기 처리 결과를 기다립니다.

promise를 사용할 때는 .catch()문으로 에러 핸들링이 가능하지만 async/await은 에러 핸들링 기능이 따로 없어 try-catch()문을 활용해야합니다.

promise는 .then()지옥의 가능성이 있어, 코드가 길어질수록 async/await문을 사용하면 가독성을 높일 수 있습니다.

📍 브라우저 렌더링 원리

브라우저 렌더링은 HTML, CSS, JavaScript 등의 웹 페이지 자원을 브라우저가 화면에 그리는 과정을 말합니다.
순서)
1. HTML 파일과 CSS 파일을 파싱해서 각각 Tree를 만든다. (Parsing)
파싱: 브라우저가 코드를 이해하고 사용하기 쉬운 구조로 변환하는 것
2. 두 Tree를 결합하여 Rendering Tree를 만든다.(파싱된 결과) (Style)
3. Rendering Tree에서 각 노드의 위치와 크기를 계산한다.
(Layout)
노드(Node) : 트리를 구성하는 객체 하나 하나
4. 계산된 값을 이용해 각 노드를 화면상의 실제 픽셀로 변환하고, 레이어를 만든다. (Paint)
5. 레이어를 합성하여 실제 화면에 나타낸다. (Composite)

공부한 영상 : https://youtu.be/hITJM_t1WWY

📍 == 와 ===의 차이

"=="는 동등 연산자로, 두 값을 비교할 때 형변환을 수행합니다. 즉, 비교하는 값의 데이터 타입이 다르더라도 자동으로 형변환을 수행한 후에 비교합니다. 때로 예측하지 못한 결과를 초래할 수 있으므로, 조심해야 합니다.

"==="는 일치 연산자로, 두 값이 데이터 타입과 값이 모두 같은지 비교합니다. 형변환 없이 정확한 값을 비교할 수 있습니다.

이러한 일치 연산자를 사용하는 것이 더 안전하고 예측 가능한 결과를 얻을 수 있습니다.

📍 이벤트 버블링

어떤 요소에 이벤트가 발생했을 때, 해당 요소의 최상위 부모까지 이벤트가 전파되어지는 현상을 말합니다. HTML 구조 상 자식요소에 발생한 이벤트가 상위 부모요소에 영향을 미치는 것입니다.

이벤트 캡처링과는 반대되는 개념입니다. (최상위 부모에서 이벤트 발생 요소까지 이벤트 전달 되는 것)

이벤트 버블링이나 캡처링을 차단하고 싶을 때는 e.stopPropagation을 호출하면 이벤트 전파를 막고 해당 이벤트만 실행시킬 수 있습니다.

📍 Flex와 Grid의 차이점

Flex는 주로 단일 축 방향의 레이아웃을 구성하는 데 사용되며, 주로 수평 방향으로 레이아웃을 정렬합니다. Grid는 2차원 그리드 시스템을 구성하는 데 사용되며, 수평과 수직 방향으로 모두 레이아웃을 정렬할 수 있습니다. Flex는 아이템들의 크기가 자유로워 유동적으로 변할 수 있습니다. 반면에 Grid는 아이템들의 크기를 미리 정의하여 각 셀의 크기를 일정하게 유지합니다. Flex는 유동적인 레이아웃 변화를 구성하기 적합합니다. 반면에 Grid는 미리 정의된 2차원 그리드 구조를 유지하기 때문에 레이아웃 변화가 적은 경우에 적합합니다.

"flex는 한 방향으로 레이아웃하는 1차원 방식, grid는 두 방향으로 레이아웃할 수 있는 2차원 방식입니다"

풀었던문제 중 제일어려웠던것

profile
Yeong
이전 포스트

[CS] API, Rest API

다음 포스트

[CS] React

0개의 댓글