웹

    [FeBase S3] SVG, Canvas, viewport와 viewbox

    이번 포스팅에서는 SVG와 Canvas, viewport 그리고 viewbox에 대한 개념을 간단하게 정리해 보려고 한다. 1. SVG란? 바로 찾아볼 수 있는 레퍼런스 중 가장 공신력 있다고 판단되는 Mozilla Developer Network(MDN)에서 SVG에 대해서 다음과 같이 설명하고 있다. SVG(Scalable Vector Graphics)는 2차원 벡터 그래픽을 서술하는 XML 기반의 마크업 언어입니다. SVG는 텍스트 기반의 열린 웹 표준 중 하나로, 모든 사이즈에서 깔끔하게 렌더링되는 이미지를 서술하며 CSS, DOM, JavaScript, SMIL 등 다른 웹 표준과도 잘 동작하도록 설계되었습니다. SVG는 달리 말하면 HTML과 텍스트의 관계를 그래픽에 적용한 것입니다. SVG는..

    Next.js에 대해서 알아보자 #1. Intro

    Next.js는 React에서 기존에 CSR(Client Side Rendering)의 특징에 더하여 SSR(Servers Side Rendering)을 혼합하여 운영환경에서 최적의 퍼포먼스를 낼 수 있게 도와주는 프레임워크이다. 2020년 11월 현재 버전 10.0.1이 나와있으며 다음과 같은 기능들을 지원한다. 페이지 기반 라우팅 (동적 라우팅) 데이터 패칭 빠른 성능을 위한 코드 스플리팅 CSS in JS 이미지 최적화 빠른 컴포넌트 재활성화 정적 파일 처리 타입스크립트 환경 변수 브라우저 지원 각각에 대한 자세한 사항들은 이후에 하나씩 알아보고자 한다. Next.js는 SPA에서 CSR이 가질 수 밖에 없는 한계들을 보완해 주는 도구이다. SSR과 CSR에 대한 포스팅 참고 CSR은 초기 로딩 속..

    JS #14. 스코프(Scope)

    이번 포스팅에서는 자바스크립트의 스코프에 대해서 기본적인 개념을 알아 보려고 한다. 변수의 값은 어디에 저장되는지, 그리고 필요할 때 변수를 어떻게 찾아서 써야 하는지는 프로그래밍에서 중요한 요소이다. 따라서 특정 장소에 변수를 저장하고 나중에 그 변수를 찾는 데는 규칙이 필요하다. 이러한 규칙을 스코프(scope)라고 한다. 자바스크립트를 일반적으로 '동적' 또는 '인터프리터' 언어로 분류하지만 자바스크립트는 사실 '컴파일러' 언어이다. 물론 자바스크립트가 전통적인 많은 컴파일러 언어처럼 코드를 미리 컴파일하거나 컴파일한 결과를 분산 시스템에서 이용할 수 있는 것은 아니다. 하지만 자바스크립트 엔진은 전통적인 컴파일러 언어에서 컴파일러가 하는 일의 상당 부분을 우리가 아는 것보다 더 멋있게(?) 처리한..

    MPA와 SPA, SSR과 CSR, 그리고 SEO

    MPA (Multiple Page Application) 사용자가 페이지를 요청할 때마다, 웹 서버가 요청한 UI와 필요한 데이터를 HTML로 파싱해서 보여주는 방식의 웹 어플리케이션이다. 사용자가 아주 사소한 요청을 해주어도(버튼 클릭 등) 매번 전체 페이지를 렌더링 해주어야 한다. 장점 SEO(Search Engine Optimization, 검색엔진 최적화) 관점에서 유리하다. MPA는 완성된 형태의 HTML 파일을 서버에서 전달받기에 검색엔진이 페이지를 크롤링하기에 적합하다. 단점 매번 페이지 전체를 새로 불러와서 렌더링 해야 하기 때문에 화면이 깜빡이는 등 성능상의 이슈가 있다. 프론트와 백이 밀접하게 연관되어 있어서 개발 복잡도가 증가한다. SPA (Single Page Application)..

    JS #12. 타입과 값(Type and Value)

    이번 포스팅에서는 자바스크립트의 타입과 값에 대한 내용을 정리해 보려고 한다. 기본적인 내용이라 대부분의 자바스크립트 개발자라면 어느 정도 알고 있을만한 내용이지만, 어렴풋이 알고 있는 개념들을 확실하게 정리하고 넘어가기 위해 이 글을 작성했다. 자바스크립트에는 7가지 내장 타입이 있다. null undefined boolean number string object symbol(ES6) 값 타입은 typeof로 알 수 있는데 다른 타입들은 정확하게 매치가 되고 null만 type이 object로 매칭된다. 그리고 자바스크립트 내장 타입에는 없지만 typeof가 반환하는 문자열 중에는 "function"도 있다. function은 object의 하위 타입이다. typeof true === "boolean"..

    [React] 클래스형 컴포넌트 vs 함수형 컴포넌트

    리액트를 사용하여 프론트 개발을 할 때 두 가지 방법으로 컴포넌트를 선언할 수가 있다. 과거에는 클래스형 컴포넌트를 주로 사용했지만, 2019년 v16.8 부터 함수형 컴포넌트에 리액트 훅(hook)을 지원해 주어서 현재는 공식 문서에서 함수형 컴포넌트와 훅을 함께 사용할 것을 권장하고 있다. 두 가지 방법에 대해 모두 다 잘 알고 있으며, 필요한 상황에 맞게 사용하는 것이 중요하므로 각각의 방법에 대해서 좀 더 깊이있게 살펴보도록 한다. 먼저 컴포넌트의 기능을 한 번 짚어보고 가도록 하자. 컴포넌트는 단순한 템플릿 이상의 기능을 수행한다. 데이터가 주어졌을 때 이에 맞추어 UI를 만들어 주는 기능을 하는 것은 물론, 라이프 사이클 API를 통해 컴포넌트가 화면에 나타날 때, 사라질 때, 변할 때 작업들..

    <FE면접질문> #1. 웹 브라우저 & HTML

    프론트엔드 개발자로 면접을 준비하면서 나올 수 있는 질문 리스트를 틈틈이 작성해 보고자 한다. 첫 번째로 웹 브라우저와 HTML 관련된 질문 리스트를 적어 본다. 참고로 이는 화상 면접이나 전화 면접에서 나올 만한 예상 질문들을 정리하는 내용으로, 경력 3년 이하 주니어 개발자 면접을 대비하기 위함이기에 너무 자세하고 깊은 내용보다는 간결하고 핵심적인 내용 위주로 적어보았다. Web Browser 브라우저의 동작 원리를 간단하게 설명해 주세요. 브라우저의 기본적인 역할은 HTML, CSS 명세에 따라 HTML 파일을 해석해서 표시하는 것이다. 브라우저를 구성하는 요소는 사용자 인터페이스, 브라우저 엔진(크롬, 사파리는 Webkit, 파이어폭스는 Gecko), 렌더링 엔진, 통신, UI 백엔드, 자바스크립..

    TypeScript #3 제어문, 연산자 그리고 함수

    오늘은 타입스크립트의 제어문, 연산자, 함수에 대해서 공부한 내용을 정리해 보려고 한다. 참고로 자바스크립트에 나오는 문법과 겹치는 부분은 생략을 하고 타입스크립트에서 새롭게 추가되거나 변경된 문법들에 대해서만 다루려고 한다. 제어문 타입스크립트에서는 자바스크립트에서 사용하는 if문 및 switch문을 사용할 수 있다. if문에서 조금 헷갈릴 수 있는 부분 하나만 짚고 넘어간다. 타입스크립트에서 숫자 타입인데 숫자가 0이면 false를 나타내고, 0이 아닌 나머지 값은 true를 나타낸다. 문자열의 경우 빈 값은 false이고 값이 있으면 true이다. 아래의 예제를 참고하자. let text: string = ""; let statusActive: number = 0; let isEnabled: boo..