Front-end
-
자바스크립트의 메모리 관리Front-end/Javascript 2022. 6. 29. 19:38
메모리란? 하드웨어에서 메모리는 다수의 flip flop으로 구성되어 있습니다. 각각의 flip flop은 unique identifeier를 통해 위치를 알 수있기 때문에 읽거나 쓰는것이 가능해집니다. - text영역이 코드가 들어가는 영역입니다. 컴파일이 끝난 기계어가 들어갑니다. 프로세스가 종료될때까지 계속 유지됩니다. - data영역은 전역 변수, 정적변수, 배열 등이 저장되어 프로그램이 끝날때까지 존재합니다. * initialized data (data) - 런타임 이전에 초기화 * unitialize data (bss) - 런타임 이후 초기화 - heap 영역은 프로그래머가 동적으로 사용하는 영역입니다. 런타임시 크기가결정됩니다. - stack 영역은 지역변수, 매개변수들이 저장되고 함수 호출..
-
[React] useMemo와 useCallbackFront-end/React 2022. 6. 28. 23:55
Memoization 이란? Memoization이란 동일한 입력이 들어와서 기존에 수행된 연산이 반복될때, 중복된 결과를 저장하고 캐시된 결과를 반환하는 프로그래밍 최적화 기법입니다. 중복 연산을 피하여 성능을 최적화 할수있습니다. Hooks는 리액트 16.8 버전에서 새로 추가된 기능입니다. Hooks는 함수 컴포넌트에서도 리액트의 상태와 라이프사이클 특징들을 사용할수 있게 해줍니다. useMemo - useMemo를 사용하지 않았을때 각 렌더링마다 새 배열이 선언되기 때문에 자바스크립트는 filterItems에 어떤 변화가 있다고 추측합니다. 따라서, 각 렌더링 과정마다 console.log('render')가 invoke ( 간접호출 : 어딘가에 레퍼런스를 유지한 다음 호출) 됩니다. 이러한 불필..
-
SSR과 CSRFront-end 2022. 6. 27. 14:06
SSR : 서버에서 필요한 HTML 파일을 만들어 브라우저에 보내는 방식 서버로부터 완성된 페이지를 받아 화면에 렌더링하는 방식이다. 렌더링 된 페이지를 받아야 하기 때문에 페이지 이동시 깜빡거리는 현상이 발생한다. 하지만 SEO 에 용이하고서 서버에서 필요한 만큼만의 자원을 받기 때문에 네트워크가 느리거나 서버 상태가 좋지 않을 경우 장점을 발휘합니다. CSR : 서버에서 내용이 비어있고 JS 가 링크된 HTML 파일을 클라이언트에 보내는 방식 웹사이트에 필요한 모든 데이터를 초기 접속시 한번에 다운로드 받은 뒤 , 그 이후에 필요한 데이터는 서버로 요청하여 클라이언트에서 모든 렌더링을 제어하는 방식이다. 초기 렌더링 속도는 느리지만 이후에는 빠른 렌더링이 가능하다. 초기 페이지 HTML 바디는 비어져..
-
class 내부 메서드에서 화살표 함수를 사용한다면Front-end/Javascript 2022. 5. 12. 01:18
[ 1 ] constructor 메서드 내부에서 화살표 함수를 사용하여 속성을 추가했을때. 결과 : [ 2 ] 클래스 내부의 메서드를 화살표 함수로 작성했을때. 결과 : babel class properties transform 변환시 생성자 constructor 메서드 내부의 속성으로 이동한다. 참고 : https://babeljs.io/docs/en/babel-plugin-proposal-class-properties https://medium.com/@charpeni/arrow-functions-in-class-properties-might-not-be-as-great-as-we-think-3b3551c440b1 Arrow Functions in Class Properties Might Not Be..
-
화살표함수와 thisFront-end/Javascript 2022. 4. 30. 12:24
this 콜백함수 내부의 this가 외부 함수의 this와 다르기 때문에 발생하는 문제 고차 함수(함수를 받아서 함수를 리턴할수있는 함수) 의 인수로 전달되어 고차 함수 내부에서 호출되는 콜백함수의 예제이다. 프로토타입 메서드 add의 내부에서 this는 메서드를 호출한 객체를 가리킨다. (위 예제에서는 coffee 객체). 클래스 내부의 모든코드에는 strict mode가 암묵적으로 적용된다. 따라서 map 메서드의 콜백함수에도 strict mode가 적용된다. 클래스 내부의 모든 코드에는 strict mode가 암묵적으로 적용된다. strict mode에서 일반 함수로서 호출된 모든 함수 내부의 this에는 전역 객체가 아니라 undefined가 바인딩 되므로 위 예제에서 map 메서드의 콜백함수 내..
-
클래스 (3)Front-end/Javascript 2022. 4. 29. 17:06
상속에 의한 클래스 확장 클래스 상속 상속에 의한 클래스 호가장은 기존 클래스를 상속받아 새로운 클래스를 확장하여 정의하는 것이다. 상속을 통해 자신만의 고유한 속성만 추가하여 확장할 수 있다. extends 키워드 extends 키워드를 통해 상속받을 클래스를 정의한다. 상속을 통해 확장된 클래스를 subclass 라고 하고, 서브클래스에게 상속된 클래스를 superclass라고 부른다. 수퍼클래스와 서브클래스는 클래스간의 프로토타입 체인도 생성한다. 이를 통해 프로토타입 메서드, 정적 메서드 모두 상속이 가능하다. 동적 상속 extends 키워드를 사용해 생성자 함수를 상속받아 클래스를 확장할 수도 있다. super 키워드 함수처럼 호출할 수도 있고 식별자처럼 참조할 수 있는 키워드다. super를 ..
-
클래스 (2)Front-end/Javascript 2022. 4. 29. 09:33
프로퍼티 인스턴스 프로퍼티 constructor 내부 코드가 실행되기 이전에 constructor 내부의 this에는 이미 빈 객체가 바인딩 되어있다. constructor 내부에서 this 인스턴스 프로퍼티를 추가함으로써 클래스가 생성한 빈 객체, 즉 인스턴스에 프로퍼티가 추가되어 인스턴스가 초기화 된다. 접근자 프로퍼티 접근자 프로퍼티는 클래스에서도 사용할 수 있다. 접근자 프로퍼티는 자체적으로 는 값을 갖지 않고 다른 데이터 프로퍼티의 값을 읽거나 저장할 때 사용하는 접근자 함수 ( getter , setter ) 로 구성되어 있다. getter와 setter 이름은 인스턴스 프로퍼티처럼 사용된다. getter는 호출하는 것이 아니라 프로퍼티처럼 참조하는 형식으로 사용한다. getter는 반드시 무..
-
클래스 (1)Front-end/Javascript 2022. 4. 28. 13:41
클래스의 정의 class 키워드를 사용하여 정의한다. 일반적이진 않지만 표현식으로 클래스를 정의할 수 있다. 즉, 클래스가 값으로 사용할 수 있는 일급 객체라는 것을 의미한다. 클래스 호이스팅 클래스 선언문도 호이스팅이 발생한다. 단, let,const 키워드로 선원한 변수처럼 호이스팅되기 때문에 호이스팅이 발생하지 않는 것처럼 동작한다. 인스턴스 생성 클래스 표현식으로 정의된 경우 클래스를 가리키는 식별자를 사용해 인스턴스를 생성해야한다. 표현식에서 사용한 클래스 이름은 외부 코드에서 접근이 불가능하기 때문이다. (함수 표현식으로 표현한 함수 이름은 함수 몸체 내부에서만 유효한 식별자이므로 함수 이름으로 호출시 Reference Error가 발생한다) 메서드 클래스의 몸체에서 정의할 수 있는 메서드는 ..