본문 바로가기

javascript8

Javascript 메모리 관리 (가비지 컬렉션) 알고리즘 알아보기 자바스크립트의 메모리 관리 및 가비지 컬렉션과 관련해 공부한 내용에 대해서 포스팅을 작성해 보았습니다. 1. 가비지 컬렉션이란? (GC) 자바스크립트는 객체가 생성되었을 때 자동으로 메모리를 할당하고 쓸모 없어졌을 때 자동으로 해제한다. 그렇다면 메모리는 언제 생겨나고 없어질까? 메모리의 생존주기는 아래와 같다. 1-1. 메모리 생존주기 1) 필요할때 할당한다. 2) 사용한다. (읽기, 쓰기) 3) 필요없을 때 해제한다. 1)과 3)은 가비지 컬렉션을 사용하는 Javascript 에서는 암묵적으로 작동하며, C 언어와 같은 저수준 언어에서는 아래와 같이 명시를 해주어야 한다. #include int main() { int pNum = malloc(sizeof(int)); // 4 byte, int 형 데.. 2020. 10. 19.
AbortController를 사용해 API 비동기요청 취소하기 최근 Javascript 웹 페이지 제작을 하면서 fetch를 통한 비동기요청이 진행되는 동안에 요청을 취소해야하는 기능구현이 필요하게 되었다. 페이지 이동, 취소 요청과 같은 이벤트가 발생하게 되면 이전 비동기요청을 취소하는 방법에 대해서 알아보다 이를 더 잘 이해하기 위해 포스팅을 작성하게 되었습니다. 1. AbortController 개요 Fetch 객체는 promise 객체를 리턴하는 비동기함수입니다. 원래 promise 객체는 자체 abort 기능이 없기 때문에 abortcontroller 를 통해서 비동기 동작 중단 기능을 구현 할 수 있습니다. - 사용해야 하는 이유 1) 필요하지 않은 API 호출을 취소하여 웹페이지 성능개선 2) API 호출로 인해 발생하는 비용 절감 2. 기본적인 사용방.. 2020. 10. 3.
웹 프론트엔드 개발자 면접 - Javascript (2) 웹 프론트엔드 개발자로서 면접을 볼 때 받게 될만한 기술 면접 질문리스트와 적절한 답변에 대해서 검색한 내용을 모두 취합하고 내용을 덧붙여서 포스팅을 작성해 보았습니다. * HTML, CSS, Javascript 카테고리로 나누어서 진행됩니다. (면접 질문과 그에 대한 답변을 얻은 곳의 출처는 하단에 표시하였습니다.) Javascript 15. Closure 함수 독립적인 (자유) 변수를 가리키는 함수, 클로저 안에 정의된 함수는 만들어진 환경을 기억한다. 함수 내에서 함수를 정의하고 사용한 형태, function closure() { let variable = 'hello';// 자유변수 return () => { return variable; } } - 외부에서 변수를 직접 접근하는 것을 제한할 수 .. 2020. 9. 26.
웹 프론트엔드 개발자 면접 - Javascript (1) 웹 프론트엔드 개발자로서 면접을 볼 때 받게 될만한 기술 면접 질문리스트와 적절한 답변에 대해서 검색한 내용을 모두 취합하고 내용을 덧붙여서 포스팅을 작성해 보았습니다. * HTML, CSS, Javascript 카테고리로 나누어서 진행됩니다. (면접 질문과 그에 대한 답변을 얻은 곳의 출처는 하단에 표시하였습니다.) Javascript 1. AJAX (Asynchronous Javascript And XML) - 브라우저에서 페이지 이동 없이 Javascript를 통해 HTTP REQUEST를 보내고 그 응답을 받아 처리할 수 있는 기능, Javascript 를 통한 비동기 통신, 클라이언트 - 서버간 XML 데이터를 주고 받는 기술 장점 및 단점 - 상호 작용성이 좋아짐 - 서버에 대한 요청이 줄어듦.. 2020. 9. 24.
웹 성능 향상을 위한 Throttle과 Debounce 개념부터 활용까지 저는 Javascript 웹 페이지 제작을 하면서 성능 향상을 위해 쓰로틀(Throttle)과 디바운스(Debounce) 기능이라는 것을 알게 되었습니다. 그에 대한 이해를 더욱 깊이있게 하고 배운 것을 공유하기 위해 포스팅 하게되었습니다. 두 가지 기능에 대한 개념부터 활용까지 한 번 알아보겠습니다. 1. 둘의 개념과 사용법은? 1) Throttle 이란? - 개념 : 여러 호출이 발생할 때 일정 시간이 지나기 전에는 기능이 호출 되지 않도록 하는 기능 - 사용예 : 무한 스크롤을 사용한 LazyLoading 기능을 구현할 때 사용, 스크롤로 인한 성능 저하 방지 Throttle을 적용하지 않으면 스크롤이 조금 움직일 때 마다 기능을 계속 호출하게 된다. 스크롤 이동시 많은 기능이 로드되어야 한다면 부.. 2020. 9. 7.
일관성 있는 코드 포맷팅을 위한 ESLint 톺아보기 Javascript 소스코드를 더욱 정확하고 일관성 있게 작성하기 위해 도움이 되는 ESLint라는 도구가 있음을 알게 되었고 포스팅하게 되었습니다. 1. ESLint의 개념 우선, ESLint가 무엇인지 알기 전에 ES와 Lint에 대해서 알 필요가 있습니다. 1-1. ES란? ES는 ECMA Script 와 동일하며, ECMA Script란 ECMA-262 기술 규격에 정의된 표준화된 스크립트 프로그래밍 언어이다. 자바스크립트를 표준화하기 위해 만들어진 규격이다. 이 포스팅에서는 (ES = ECMA Script) => Javascript 언어를 가리킨다고 보면 됩니다. 1-2. Lint란? 린트(lint) 또는 린터(linter)는 소스 코드를 분석하여 프로그램 오류, 버그, 스타일 오류, 의심스러운.. 2020. 8. 19.
트랜스파일을 위한 바벨(Babel) 예제 만들어보기 VSCode 사용법을 익히면서 바벨의 사용법을 알 필요가 생겨서 알아보았고 개념과 사용법에 대해 공유하고자 글을 쓰게 되었다. 1. 바벨(Babel) 이란? - 바벨 공식 홈페이지 Babel · The compiler for next generation JavaScript The compiler for next generation JavaScript babeljs.io 공식홈페이지의 설명에 따르면 자바스크립트 컴파일러라고 한다. 컴파일러(compiler, 순화 용어: 해석기, 번역기)는 특정 프로그래밍 언어로 쓰여 있는 문서를 다른 프로그래밍 언어로 옮기는 프로그램을 말한다. 컴파일러 - 위키백과, 우리 모두의 백과사전 위키백과, 우리 모두의 백과사전. 컴파일은 여기로 연결됩니다. 일본의 기업에 대해서는.. 2020. 8. 13.
FruitFinder 제작 - 깃허브 주소 GitHub - canoe726/FruitFinder: FruitFinder - 검색, 무한 스크롤, 모달창 기능을 가진 과일 검색 페이지 FruitFinder - 검색, 무한 스크롤, 모달창 기능을 가진 과일 검색 페이지. Contribute to canoe726/FruitFinder development by creating an account on GitHub. github.com 1. 소개 FruitFinder - 검색, 무한 스크롤, 모달창 기능을 가진 과일 검색 페이지 - 웹 프론트엔드 실력 향상 토이 프로젝트 2. 개요 1) 사용언어 : HTML, CSS, JavaScript(Vanilla) 2) API : Web Storage API 를 사용하여 화면 스킨, 입력한 검색어 .. 2020. 8. 11.

티스토리툴바