정적 페이지정의사용자가 페이지에 접속 요청을 보낼때 마다 동일한 HTML 파일을 반환하는 페이지이며, 페이지에 렌더링되는 내용이 서버나 사용자 상태에 따라 바뀌지 않고 정적인 페이지이다. 특징빌드 시점에서 HTML, CSS, JS 파일들이 생성되며 서버에 저장되고, 서버는 해당 파일을 그대로 전송한다. 예시회사의 소개 페이지, 아티클, FAQ 등 자주 바뀌지 않는 콘텐츠를 다룸 동적 페이지정의사용자의 요청, 상태, DB 값 등에 따라 서버 또는 클라이언트에서 페이지가 동적으로 생성되는 페이지 특징SSR 또는 CSR 방식으로 HTML이 런타임에 생성되며, 사용자별 맞춤형 콘텐츠 제공이 가능하다.상용자별 맞춤형 콘텐츠 제공이 가능하다. 사용자의 로그인 상태, 지역 정보, 실시간 데이터를 통한 정보 제공 예..
FE 이모저모 공부
최근 진행중인 프로젝트의 컴포넌트를 수정과 리팩토링하는 어려움이 있는 컴포넌트를 많이 경험했습니다. 대부분의 컴포넌트에서 아래와 같은 공통점이 발견할 수 있었습니다.API, 컨텍스트, 기능 로직 등의 코드가 분리되지 않고 컴포넌트에 몰려있는 점프레젠테이셔널 컴포넌트와 컨테이너 컴포넌트의 구분이 안되어있는 점이러한 문제들은 내가 작성한 코드에서도 확인할 수 있었다..... 관심사별 컴포넌트의 로직을 분리하기전에 SOLID 원칙의 SRP원칙에 대해 알아봅시다. SOLID의 S를 담당하는 SRP원칙 React 3회차: SOLID한 컴포넌트 만들기1. SOLID 원칙 지난 시간에 공부했던 ‘비즈니스 로직’, ‘캡슐화’, ‘모듈성, ‘추상화’ 등을 이번에 배우는 SOLID라는 개념으로 더 확실하게 정리해보자. S..
이전에 호이스팅에 대해 두 번이나 정리한 적이 있지만, 호이스팅이 왜 발생하는지에 대해 다시 정리하고자 이 글을 통해 정리한다. 호이스팅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); ..
이전에 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 문서를 삽입할 ..
