이전에 호이스팅에 대해 두 번이나 정리한 적이 있지만, 호이스팅이 왜 발생하는지에 대해 다시 정리하고자 이 글을 통해 정리한다. 호이스팅JS에서의 호이스팅이란 변수 선언과 함수 선언이 코드의 최상단으로 끌어올려지는 것처럼 동작하는 특성을 의미한다.console.log(x); // undefinedconsole.log(y); // ReferenceError: Cannot access 'constance' before initializationconsole.log(z); // ReferenceError: Cannot access 'variable' before initializationvar x = 5;const y = 0;let z = 20;console.log(x); // 5console.log(y); ..
FE 이모저모 공부
이전에 JS의 이벤트 루프에 대해 정리해봤다. 이번에는 조금 더 깊게 공부해보자. JS는 싱글스레드 언어싱글 스레드는 한 번에 하나의 작업만 수행할 수 있다. Python과 Java는 멀티 스레드를 지워해 여러 코드 로직은 동시에 실행할 수 있지만, JS는 싱글 스레드 언어이기 때문에 하나의 코드만 실행할 수 있다. 하지만 웹 애플리케이션에서는 네트워크 요청, 타이머, 이벤트 처리와 같은 작업을 비동기적으로 병렬 처리하는 경우가 있다. JS가 하나의 동작씩 동작한다면 위와 같은 동작을 하는 웹 애플리케이션은 굉장히 느릴것이다. 이러한 속도 저하 문제를 해결하기 위해서 JS 언어 엔진에서가 아닌 브라우저 내부의 멀티 스레드인 Web APIs에서 비동기 및 논블로킹으로 작업을 처리한다. 위와 같은 방법은 메..
동기(Synchronous) 방식 동기 방식은 코드가 작성된 순서대로 작업이 순차대로 진행되는 방식을 의미하며, 이전 작업이 완료되기 전까지 다음 작업을 진행하지 않는 특징이 있다. 동기적으로 코드를 작성하면 직관적인 코드를 작성하기 쉽다는 장점이 있다. 하지만, 한꺼번에 여러 작업을 수행하는 코드에서는 이전 작업의 완료를 기다리며 전체 프로세스의 성능이 저하될 수 있다는 단점이 있다. 웹에서는 API 혹은 서버와의 통신에서 위와같은 문제가 발생해 성능 저하가 발생할 수 있다. 이러한 문제는 페이지 로딩 속도 저하, 상호작용의 반응 속도 저하 등의 원인이 될 수 있다. 비동기(Asynchronous) 방식비동기 방식은 코드가 작성된 순서대로 동작은 하지만 이전 작업의 완료 여부에 따라 기다리지 않고 독..
나는 IT 학원에서 학생들을 대상으로 FE 강사를 하고있다. 물론 React와 같은 프레임워크 강의를 진행하지 않지만, HTML, CSS, JS, Python 등 기초 웹 프론트엔드와 언어들을 강의하고있다. 최근 한 학생이 물어본 HTML의 iframe 태그에 대해 정리하고자 이 글을 사용한다. 학생의 질문은 다음과 같다.현제 프로젝트에서 iframe을 이용해 다른 웹 사이트를 띄우려고 하는데, 인스타그램을 비롯한 많은 서비스에서 iframe을 통한 접근을 금지하는데 왜 금지하는가? 라는 질문이였다. 프론트엔드 강사라는 사람이 해당 질문에 대한 답을 제대로 하지 못했다...... 학생에게 정말 미안한 마음이다... iframe이란?iframe 태그는 HTML 문서내에서 또 다른 HTML 문서를 삽입할 ..
지난 프로젝트에서 TanstackQuery의 캐싱를 사용하며 "TanstackQuery를 왜 사용해야 하나" 라고 든 생각이 계속해서 머리속에 남아 내 생각을 정리하고자 이 글을 쓰기로 했다. Tanstack Query가 뭔데?Tanstack Query(구 React-Query)는 Tanstack에서 출시한 강력한 비동기 상태 관리를 지원하는 도구이다.상태란?애플리케이션에 저장된 문자열, 배열, 객체 등의 다양한 형태의 데이터이며,페이지가 렌더링된 이후 사용자 상호작용의 모든 동작과 결과를 의미한다. 그럼 왜 사용하는데? React에서 로짓은 위의 사진과 같이 동작한다. View 컴포넌트를 화면에 표현하여(렌더링) 사용자에게 보여주고, Action 상호작용으로 사용자와의 상호작용을 구현, 이렇게 받은..
비즈니스와 기술적, 두 관점으로 나뉜다. 비즈니스적 관점1. 온라인 상의 상점이나 건물을 만드는 작업이다.이는 회사의 서비스를 소개, 고객에게 어필하여 고객이 유입 가능한 통로를 만드는 것. 2. 또한 퍼널 단계에서 사용자가 각 구매 단계별 적절한 UI를 단계별로 보여주고, 각 퍼널의 전환 비율과 이를 개선시키기 위한 고민을하는 것. 3. 최적화된 프로세스로 UI/UX 반영에서 Backend Service 까지 전달하는 것. 기술 관점크게 4가지가 있다.1. 퍼블리싱: 전반적인 웹 페이지의 화면을 만듬 => HTML 마크업, CSS 스타일링2. 재사용 가능한 UI 컴포넌트 제작(React), 디자인 시스템 구축(Storybook)3. 클라이언트와 서버 상태 관리: 각 상황에 맞는 데이터를 서버에서 가져..
