[FRONTEND] 프론트엔드 기술면접 개념 정리

💡 주소창에 주소를 입력했을 때의 흐름을 설명해주세요.

1. 사용자가 브라우저의 주소창에 주소를 입력
2. 브라우저에서 DNS 서버에 IP주소를 요청하고, DNS 서버에서 IP주소를 반환한다.
3. 그후 브라우저에서 호스팅 서버에 IP주소를 요청하면 호스팅서버에서 HTTP를 요청하고 서버에서 HTTP를 응답
4. 브라우저에서 렌더링이 일어나면서 화면이 보인다.

🔥  DNS(Domain Name System) 란? 웹사이트의 IP 주소와 도메인 주소를 이어주는 환경/시스템

: 웹사이트의 데이터가 저장되어 있는 호스팅 서버는 인터넷 회선이 연결된 컴퓨터/장치인지라 IP 주소가 할당되어 있고 이 주소가 실제 웹사이트 주소라 할 수 있다. DNS 서버는 이런 IP 주소를 특정 도메인 주소와 같다는 기록을 저장해두고, 인터넷 사용자들이 도메인 주소를 검색했을 때 IP 주소로 연결되도록 해준다.

 

💡 브라우저 렌더링 과정을 설명해주세요.

1. 사용자가 브라우저를 통해 웹 사이트에 접속
2. 브라우저는 서버로부터 HTML, CSS, JavaScript와 같은 웹사이트에 필요한 리소스를 다운 받음( = Resource Downloading)
3. HTML DOM Tree 구축 : 렌더링 엔진은 전달받은 HTML 문서를 파싱(parsing)해 DOM(Document Object Model, 문서 객체 모델) 트리 형성
4. CSSOM Tree 구축 : 이어서 다운 받은 외부 CSS 파일과 함께 포함된 스타일 요소를 파싱(parsing)해 CSSOM Tree 형성
5. Render Tree 구축 : 만든 DOM 트리와 CSSOM 트리를 결합
6. Rayout : 각 요소를 어디에 배치할 지 결정
7. Paint : 레이아웃 과정이 끝나면 UI 백엔드에서 Render 트리를 화면에 그리기 시작하는 과정

💡 리플로우와 리페인트에 대해 설명해주세요.

: 렌더링 과정의 레이아웃을 반복해 수행하는 것을 리플로우, 페인트 과정을 반복해 수행하는 것을 리페인트라고 합니다.

 

💡 리플로우와 리페인트의 발생 조건에 대해 설명해주세요.

: 리플로우는 요소의 너비, 높이, 위치 등을 변경할 때 발생하며, 리페인트는 요소의 색상, 배경색 변경 혹은 리플로우가 일어난 경우 발생

 

💡 visibility 속성은 리플로우를 발생시킬까요?

: visibility 속성은 요소를 화면에서 보이도록하는 속성이므로 요소화 그 내용이 레이아웃에 영향을 미친다. 따라서, 이 요소가변경되거나 추가되면 리플로우가 발생할 수 있습니다.

✅ visibility 속성을 hidden으로 설정하면 화면에서 요소를 숨길 수 있으며, 리플로우를 최소화할 수 있습니다. 이는 성능을 향상시키는 데 도움이 될 수 있습니다.

---

🖇️ Webpack

• 최신 프런트엔드 프레임워크에서 가장 많이 사용되는 모듈 번들러(Module Bundler)입니다. 

🔥 모듈 번들러란? 웹 애플리케이션을 구성하는 자원(HTML, CSS, Javscript, Images 등)을 모두 각각의 모듈로 보고 이를 조합해서 병합된 하나의 결과물을 만드는 도구를 의미합니다.

 

사용하는 이유

1. 파일 단위의 자바스크립트 모듈 관리의 필요성
2. 웹 개발 작업 자동화 도구
3. 웹 애플리케이션의 빠른 로딩 속도와 높은 성능

🖇️ Babel

• 최신 문법을 브라우저가 이해할 수 있는 자바스크립트로 통역
• 브라우저는 JSX를 이해하지 못한다.
  그러니 바벨이라는 통역사로 JSX -> Javascript

🖇️ Prettier

협업을 하게 될 때, 일관성 있는 코드 스타일은 정말 중요하다.
그래서 일관성 있는 코드 스타일 규칙만 설정해주면 알아서 자동으로 그 규칙에 맞게 코드들을 정리해준다.

🖇️ Eslint

ESLint가 코드 퀄리티를 일관적으로 유지
문법 에러를 잡아주거나 더 좋은 코드 구현 방식을 사용하도록 해준다.

 

💡 Webpack, Babel, Polyfill에 대해 설명해주세요.

1. webpack : 번들러 - JS로 만든 프로그램을 배포하기 좋은 형태로 묶어주는 도구이다. 여러 JS파일을 작성하면 웹팩이 하나의 JS파일로 만들어준다.
2. babel : 컴파일러 - 최신 자바스크립트 문법을 지원하지 않는 환경에서 최신 문법을 사용할 수 있도록 도움 (바벨은 빌드 시점에 코드 변환)
3. polyfill : 크로스 브라우징 - 자바스크립트 표준에 새롭게 추가된 객체나 함수를 사용했을 경우, 실행 시점에 현재 환경(사용자의 브라우저)에 해당 객체나 함수(기능)가 존재하는지 검사하여 없을 때만 주입해주는 코드 (폴리필은 실행 시점에 주입)

 

💡 ESLint와 Prettier에 대해 설명해주세요.

1. prettier : 코드 규칙을 설정해주면 자동으로 그 규칙에 맞게 코드들을 정리해준다
2. eslint : 문법 에러를 잡아주거나 더 좋은 코드 구현방식을 사용하도록 해준다.

---

💡 CSR과 SSR의 차이는 무엇인가요?

CSR은 클라이언트가 데이터를 가져와서 그린다. 처음 로딩시 js파일의 용량이 클수록 로딩시간이 길다.
하지만 초기에 로딩이 되고나면 페이지 간 이동 시 매우 빠른 속도로 전환되고, 페이지 이동 시 새로고침되는 현상도 사라진다(= SPA).

 

SSR은 서버로부터 완전하게 만들어진 html파일을 받아와 페이지 전체를 렌더링 하는 방식. 첫 페이지의 로딩시간이 CSR에 비해 짧다.
이미 렌더링된 페이지를 서버에서 받아서 화면을 구성하기 때문이다. SEO 측면에서도 유리하다.
검색엔진이 크롤링을 할 때 서버에 이미 하드코딩된 html 파일이 있기 때문에 검색엔진이 이 페이지가 어떤 역할을 하는지 파악하는데 용이하다.

 

💡 CORS와 해결 경험을 말씀해주세요.

: 다른 출처에서 리소스에 접근하려는 시도를 제한하는 보안 메커니즘입니다. 이로 인해 웹 애플리케이션 개발 시 다른 도메인에서 데이터를 요청하거나 서버 간 통신을 할 때 CORS 에러가 발생할 수 있습니다.

✅ 해결방법

서버 측 설정 / 프록시 서버 사용

 

💡 쿠키, 세션, 웹스토리지의 차이에 대해 설명해주세요.

: 쿠키는 브라우저에, 세션은 서버에 데이터를 저장한다. 그러다보니 세션이 쿠키보다 보안성은 높지만 속도는 낮다.

쿠키는 브라우저를 종료해도 만료기간이 남아있으면 존재하지만, 세션은 브라우저 종료시 종료 된다.

웹 스토리지는 클라이언트 측에서 데이터를 저장하는 데 사용되고, 로컬 스토리지와 세션 스토리지 두 가지 주요 유형이 있으며, 이들은 브라우저에 데이터를 저장하여 영구적 또는 임시로 유지할 수 있습니다. 웹 스토리지는 쿠키보다 더 많은 데이터를 저장할 수 있으며, 클라이언트 측에서 작동하므로 더 빠를 수 있습니다.

 

💡 로그인 처리를 할 때 쿠키와 세션을 어떻게 사용하시나요?

: 아이디 자동완성 기능을 사용할때는 쿠키 / 자동 로그인 기능은 로컬스토리지 / 임시로 유지되는 입력폼 또는 일회성 로그인 기능은 세션스토리지를 사용한다.

 

💡 크로스 브라우징에 대해 설명해주세요.

: 크로스 브라우징(cross browsing)이란? 웹 페이지 제작 시에 모든 브라우저에서 깨지지 않고 의도한 대로 올바르게(호환성) 나오게 하는 작업을 말합니다. (HTML5, CSS3, Javascript 작성 시 웹 규격에 맞는 코딩을 함으로써 어느 브라우저, 기기에서 사이트가 의도된 대로 보여지고 작동되는 기법입니다.)

 

💡 REST API에 대해 설명해주세요.

: REST API는 HTTP 요청을 통해 통신함으로써 리소스 내에서 레코드(CRUD 라고도 함)의 작성, 읽기, 업데이트 및 삭제 등의 표준 데이터베이스 기능을 수행합니다.

 

💡 객체 지향 프로그래밍이란 무엇인가요?

: 프로그래밍에서 필요한 데이터를 추상화 시켜 상태와 행위를 가진 객체로 만들고, 객체들간의 상호작용을 통해 로직을 구성하는 프로그래밍 방법이다.

 

💡 객체 지향 프로그래밍의 특징에 대해 말씀해주세요.

: 객체 지향 프로그래밍은 크게 추상화 , 캡슐화 , 상속 , 다형성 의 네가지 특징을 가진다.

• 추상화는 불필요한 정보는 숨기고 중요한 정보만을 표현함으로써 프로그램을 간단하게 만드는 것
• 캡슐화는 데이터 구조와 데이터를 다루는 방법들을 결합 시켜 묶는 것 (변수와 함수를 하나로 묶는 것을 뜻함) / 속성과 기능을 정의하는 변수와 메소드를 클래스라는 캡슐에 넣어서 분류하는 것으로 재활용이 원활하다.
• 상속은 클래스의 속성과 행위를 하위 클래스에 물려주거나 하위 클래스가 상위 클래스의 속성과 행위를 물려받는 것을 말한다.
• 다형성은 하나의 클래스 내부에 같은 이름의 행위를 여러개 정의하거나 상위 클래스의 행위를 하위 클래스에서 재정의하여 사용할 수 있다.

💡 객체 지향 프로그래밍의 장단점에 대해 말씀해주세요.

:

장점

• 클래스 단위로 모듈화시켜서 개발하기 때문에 업무 분담이 편리하고 대규모 소프트웨어 개발에 적합하다.
• 클래스 단위로 수정이 가능하기 때문에 유지 보수가 편리하다.
• 클래스를 재사용하거나 상속을 통해 확장함으로써 코드 재사용이 용이하다.

단점

• 처리속도가 상대적으로 느리다.
• 객체의 수가 많아짐에 따라 용량이 커질 수 있다.
• 설계시 많은 시간과 노력이 필요하게 될 수 있다.

 

💡 SEO에 대해 설명해주세요.

: 검색 엔진 최적화 - 검색을 하면 검색엔진은 인덱싱해둔 수많은 웹 페이지 중 가장 적합한 순서대로 결과를 노출하는데 그중 

자신의 웹 페이지가 더 많이 노출되도록 최적화된 작업을 말한다.

 

💡 SEO는 어떤 식으로 신경쓰셨나요?

: 정확항 메타 태그 작성 , 페이지 로딩 속도 줄이기 등

 

💡 dependencies 와 devDependencies 차이에 대해 설명해주세요.

: dependencies에는 애플리케이션 동작과 직접적으로 연관된 라이브러리를 설치하고, devDependencies에는 개발할 때 필요한 라이브러리를 설치한다. devDependencies에 포함된 라이브러리는 실제 배포할 때 포함되지 않기 때문에 빌드 시간을 줄일 수 있다.

 

 

 

❤️ 도움주신분:

https://velog.io/@leemember/%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C-%EA%B8%B0%EC%88%A0-%EB%A9%B4%EC%A0%91-%EB%8B%A8%EA%B3%A8-%EA%B0%9C%EB%85%90%EB%93%A4-%EC%A0%95%EB%A6%AC-%EB%A6%AC%EC%95%A1%ED%8A%B8-%ED%8E%B8

https://velog.io/@heony/babel-webpack-polyfill

https://velog.io/@jeju_daun/%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80-%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80-%EB%A0%8C%EB%8D%94%EB%A7%81-%EB%B0%A9%EC%8B%9D

https://velog.io/@khy226/%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80%EC%97%90-url%EC%9D%84-%EC%9E%85%EB%A0%A5%ED%95%98%EB%A9%B4-%EC%96%B4%EB%96%A4%EC%9D%BC%EC%9D%B4-%EB%B2%8C%EC%96%B4%EC%A7%88%EA%B9%8C

https://jongminfire.dev/%EA%B0%9D%EC%B2%B4%EC%A7%80%ED%96%A5-%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%B0%8D%EC%9D%B4%EB%9E%80