Frontend

🪴 라이브러리란라이브러리란 특정 기능을 수행하는 코드의 집합으로, 개발자가 필요에 따라 라이브러리를 선택하여 사용할 수 있습니다.따라서 라이브러리를 사용하는 상황이라면 애플리케이션의 흐름을 제어하는 것은 개발자입니다.- F-Lab라이브러리는 특정 기능을 모듈화 한 것으로, 이미 작성된 변수나 함수, 클래스를 포함하고 있습니다.라이브러리는 애플리케이션의 구성요소가 되며, 적용되는 대상에서 바로 실행될 수 있는 형태로 제공됩니다.따라서 개발자는 목적에 따라 필요한 라이브러리를 고르고 설치하여 프로젝트에 적용시킵니다.개발자가 먼저 프로젝트의 흐름을 구성하고, 구현 과정에서 필요한 라이브러리를 가지고 와서 사용하게 되는 것입니다. 쉬운 예시로 많이 소개되는 것은 라이브러리를 가구에 비유하는 예시입니다.예를 들..

구글 검색창에 '신입 프론트엔드 개발자 면접 질문'이라고 검색하여 나온 상위 10개의 블로그에서2번 이상 언급된 질문 리스트입니다. 브라우저의 렌더링 원리: 브라우저가 html, css, javascript 등의 자원을 화면에 렌더링 하는 과정SPA(single page application)와 SSG(server side rendering)의 차이점: 각 렌더링 방식의 장단점과 사용이유CSR(client side rendering)과 SSG(server side rendering)의 차이점: 각 렌더링 방식의 장단점과 사용이유리액트의 라이프사이클: 리액트 컴포넌트의 생명주기와 각 단계(mount, update, unmount)에서 수행되는 작업var, let, const의 차이점: 자바스크립트에서 변수..

📖 테스트란소프트웨어 테스트란 개발한 소프트웨어의 기능 및 동작을 검증하여 결함을 찾아내고 수정하는 과정입니다.이때 테스트를 위해 작성하는 코드가 테스트 코드이고, 테스트 코드를 수행함으로써 개발자가 예상한 결과가 나오는지 확인합니다.대표적인 테스트의 종류는 다음과 같습니다.정적 테스트(static test): 코드를 실행하지 않고 테스트합니다. 기능이 구현되기 전과 같이 개발 프로세스 초기에 결함을 발견하기 위한 목적으로 수행합니다. 타입스크립트로 함수의 파라미터 타입을 검사하는 것도 정적 테스트에 해당합니다.단위 테스트(unit test): 개별적인 코드 단위가 의도한 대로 동작하는지 테스트합니다. 보통 함수나 메서드가 알맞은 입력값과 출력값을 반환하는지 확인합니다. 그 밖에도 유틸성 함수, 커스텀..

📖 스토리북이란스토리북이란 UI 구성 요소(컴포넌트)를 독립적으로 개발/테스트/문서화하기 위한 도구입니다.전체 애플리케이션을 실행하지 않고도, 각각의 컴포넌트가 특정 상태나 실행 시나리오별로 어떻게 렌더링 되는지 테스트할 수 있습니다. 애플리케이션에 오류가 발생해 UI를 확인할 수 없는 상황이어도,기존 웹 사이트에 영향을 주지 않고 독립적인 포트 번호를 가진 스토리북 웹 사이트에서 컴포넌트를 체험할 수 있습니다. 스토리북에는 각 컴포넌트별로 '스토리(story)'라는 단위가 있습니다.예를 들어, 버튼 컴포넌트에는 작은 사이즈/큰 사이즈/활성화된/비활성화된 버튼 등의 다양한 종류의 버튼이 존재합니다.이때 컴포넌트의 각 버전이 하나의 스토리가 되는 것입니다. 따라서 위와 같은 스토리를 모아 관리하는 도구가..