양씨

js에서 this는 자바와 같은 일반 프로그래밍 언어와 다르게 특이하게 작동한다.js에서 this는 현재 실행 중인 코드에서 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수이다. 다만, 함수 호출 방식에 따라 동적으로 결정된다. 함수를 선언할 때 this가 결정되는 것이 아닌 함수를 호출할 때 this가 결정된다는 의미 함수를 어디서 호출하느냐에 따라 그 의미가 달라지기 때문에 좀 세분화 해보았다(굉장히 오묘하게 작동하긴한다..js 개발자가 오류라고 인정했다는,.) this 바인딩전역 컨텍스트: 전역 범위에서 this는 전역 객체를 참조(브라우저에서는 window 객체)일반 함수 호출: 일반 함수 호출 시, this는 전역 객체를 참조(엄격 모드에서는 undefined)생성자 호..

타입과 인터페이스는 우리가 원하는 식으로 타입을 설정해줄 수 있게 도와준다. 사실 둘의 역할이 비슷해보이기도 한다. 이 둘의 차이를 명확히 알아보려한다!  타입스크립트에서 type과 intertace는 값의 타입에 대한 구조를 정의하기 위해 사용한다.비슷해보이지만 각 타입을 정의 가능여부나 확장, 병합을 할 때의 차이가 있다.//타입type User = { name: string; id: number;};//인터페이스interface User { name: string; id: number;}  원시, 유니온, 튜플 타입을 정의할 때type을 이용하면 원시, 유니온, 튜플 타입을 정의할 수 있지만,//원시 타입type MyString = string;const str: MyString = 'Hel..

초기 웹사이트는 텍스트와 링크로만 구성된 정적인 페이지였다. 사용자가 하이퍼텍스트를 통해 문서 간을 이동하는 것이 전부였고, 동적인 상호작용은 불가능했다. 그러나 웹사이트가 많아지고 사람들이 웹사이트에서 더 많은 액션을 원하게 되면서, 단순한 하이퍼텍스트의 한계를 넘어서는 동적인 페이지가 필요해졌다. 자바스크립트는 이러한 요구를 충족시키기 위해 탄생한 언어이다. 자바스크립트는 1995년 넷스케이프(Netscape)의 브렌던 아이크(Brendan Eich)가 10일 만에 만들었다고 알려져 있다. 초기에는 간단한 스크립트 언어로 시작했지만, 다음과 같은 발전을 통해 그 성능과 활용 범위가 크게 확장되었습니다.V8 엔진: 2008년 구글이 만들었고 js를 컴파일하여 매우 빠른 실행 속도를 제공한다. Node...

템플릿 리터럴은 ES6에서 도입된 기능으로 문자열을 더 쉽게 다룰 수 있게 해주는 문법이다.  템플릿 리터럴 도입 전문자열 여러줄const multiLine = "이것은 여러 줄에 걸쳐\n" + "작성된 문자열입니다.";console.log(multiLine); 문자열에 변수 포함const name = 'yang';const greeting = 'hello, ' + name + '!';console.log(greeting); //hello, yang!   템플릿 리터럴(Template Literals)템플릿 리터럴은 백틱(``)을 사용하여, 이전과 달리 아래와 같이 가독성 좋고, 간결하게 사용할 수 있게 되었다. 문자열 여러줄const multiLine = `이것..

먼저, 클로저에 대해 살펴보기 전에 스코프에 대한 개념을 간단히 정리해보자 스코프(scope)스코프는 변수가 접근할 수 있는 범위를 뜻한다. 자바스크립트에서는 전역 스코프와 지역 스코프가 있다. 전역 스코프전역 스코프에 선언된 변수는 코드 어디서든 접근 가능하다. 전역 스코프에 변수를 선언하려면 함수나 블록 외부에서 선언하면 된다.var globalVar = 'I am global'; // 전역 변수function globalExample() { console.log(globalVar); // 'I am global'}globalExample();console.log(globalVar); // 'I am global' 지역 스코프js에서 지역 스코프는 블록 스코프와 함수 스코프로 나뉘어진다.보통의 경우..

npm과 npx의 차이점에 대해 자세히 알아보자! npmnpm(Node Package Manager)는 Node.js 패키지 매니저이다. npm을 사용하면 다양한 패키지(모듈)을 쉽게 설치하고 관리하는 것이 중점이다. npm은 아래와 같이 사용하는데 패키지 설치: npm install 명령어를 사용하여 패키지를 설치모든 의존성 패키지는 package.json에서 npm install로 설치하여 원하는 패키지를 로컬(node_modules)에 설치글로벌 설치: -g 옵션을 사용하여 패키지를 전역(global)으로 설치스크립트 실행: package.json 파일에 정의된 스크립트를 실행예를 들어, npm run build는 build 스크립트를 실행패키지 관리: 의존성 버전 관리, 업데이트 등을 쉽게 가능..

어디서 잘못된 글을 몇번봐서인가..let, const는 호이스팅 되지 않는다고 알고 있던 사람이었다부끄럽긴 하지만 이참에 다시 자세히 알아보았다 먼저 js에서 변수는 선언, 초기화, 할당 3가지 단계를 거친다선언: 변수의 이름을 등록(var, let, const로 변수를 선언)초기화: 메모리 공간을 확보하고 초기값을 설정할당: 변수에 실제 값을 할당var x; // 선언console.log(x); // undefinedx = 5; // 할당 console.log(x); // 5let y; // 선언y = 10; // 할당console.log(y); // 10const z = 15; console.log(z); // 15 여기서 특징은 var는 선언과 초기화가 동시에 이루어지고, const는 선언과 동시에..

얼마전 다른사람의 포트폴리오를 구경하던중 "useLayoutEffect 로 렌더링 속도 향상" 이라는 문구를 보고 이것은 뭘까.. 생각이 들어서관련해서 무엇인지 알아보기로 했다 관련하여 살펴보니 브라우저 렌더링 과정과 어느정도 관련이 있었다https://yangwonjoon.tistory.com/69 [Web] 랜더링이란 무엇인가?개발자라면 한번정도 들어봤을 단어이자 면접 단골질문인 CSR과 SSR에 대해 자세히 알아보려한다.CSR(클라이언트 사이드 랜더링)과 SSR(서버 사이드 랜더링)을 알아보기 앞서 랜더링에 대해 자세히yangwonjoon.tistory.com이 포스팅에서는 브라우저 랜더링 과정을 아래와 같이 구분 지었다DOM 트리, CSSOM 트리 생성랜더링 트리 생성레이아웃페인팅이 과정중 3번..

인간도 탄생, 성장, 죽음의 단계가 있듯이, 컴포넌트도 생성, 업데이트, 소멸되는 과정이 있다. 이를 컴포넌트의 라이프 사이클이라고 한다.리액트에서 컴포넌트의 라이프 사이클은 크게 세 단계로 나뉜다 Mount: 컴포넌트가 생성된 순간Update: 컴포넌트가 업데이트되어 재렌더링 되는 순간Unmount: 컴포넌트가 소멸되는 순간 이러한 단계마다 특정 작업을 수행하는 것을 라이프 사이클 제어(생명주기 메서드)라고 한다.원래 이는 클래스형 컴포넌트에서만 사용 가능했지만, 훅의 등장으로 useEffect를 통해 함수형 컴포넌트에서도 쉽게 사용할 수 있게 되었다 더보기클래스형 컴포넌트에서 사용되는 생명주기 메서드를 간단히 살펴보자면(지금은 거의 안쓰이니)원래 총 9가지의 단계가 있는데 주요한 단계는 다음과 같다 ..

useRef는 함수형 컴포넌트에서 변수를 생성하고 이를 DOM 요소나 다른 값에 참조할 때 사용한다.상태가 변경되더라도 리렌더링이 되지 않으며 특정 DOM 요소에 접근이 가능하다 아래와 같이 사용하며 useRef에 초기값을 넣으면 {current: 초기값} 이라는 객체를 반환하고current 키 값을 이용해서 값을 변경한다const refObject = useRef(초기값)console.log(refObject.current) //초기값 이렇게 생성한 useRef 객체는 아래와 같은 특징이 있다DOM 요소에 직접 접근 가능컴포넌트가 랜더링이 계속 되어도 언마운트 되기 전까지 값이 그대로 유지객체 값을 변경해도 리렌더링 되지 않는다위 특징들 때문에 변경시 렌더링이 발생하지 않게 하기 위함Dom 을 조작하기..