CSRF는 사용자가 동의하지 않은 서버 요청을 통해 피해가 발생하게 됩니다. 이미지 태그 src에 악의적인 코드를 넣어 로드하게 하는것을 예로 들 수 있고 이를 해결하기 위해서는 쿠키에samesite 플래그, same origin 정책 활용 등이 있습니다.
주로 크롬에서 제공하는 라이트 하우스를 주로 사용하여 time to interact, 가장 큰 이미지를 로드하는 시간을 확인하여 측정하였고 console.time, timeend로 대략적인 연산 처리 시간을 확인하여 측정한 경험이 있습니다
- link 태그나 스타일 태그를 만나면 DOM 생성을 중단하고 파싱을 통해 CSSOM을 생성한다.
- 브라우저는 HTML, CSS, 자바스크립트, 폰트 파일 등 렌더링에 필요한 리소스들을 요청하여 서버로 부터 응답 받습니다.
브라우저 렌더링 과정
- 브라우저의 렌더링 엔진은 서버로부터 응답된 HTML과 CSS를 파싱하여 DOM과 CSSOM을 생성하고 이들을 결합하여 렌더 트리를 생성합니다.
- 브라우저의 자바스크립트 엔진은 서버로부터 응답된 자바스크립트를 파싱하여 실행합니다. 이때 자바스크립트는 DOM API를 통해 DOM이나 CSSOM을 변경할 수 있습니다. 변경된 돔과 CSSOM은 다시 렌더 트리로 결합됩니다.
- 렌더 트리를 기반으로 HTML요소의 레이아웃을 개선하고 브라우저 화면에 HTML 요소를 페인팅합니다.
- HTML 파일을 파싱하는 도중 link, img, script를 만나면 파싱을 일시 중단하고 서버로 요청, 응답 받는다.
- script 태그를 만나면 DOM 생성 중단 자바스크립트 실행, HTML 파싱 중단된 지점부터 다시 파싱 시작
REST API
REST는 HTTP를 기반으로 클라이언트가 서버의 리소스에 접근하는 방식을 규정한 아키텍처입니다. REST API는 이를 기반으로 서비스 API를 구현한 것을 의미합니다. 그렇기에 RESTful API라고도 불립니다.
Rest API는 몇가지 설계 규칙을 가지고 있고 이 규칙들을 통해 각 요청이 어떤 동작이나 정보를 위한 것인지 그 요청의 모습 자체만으로 추론이 가능하도록 설계하는것이 Best case입니다. 잘 설계된 API를 통해 유연성, 확장성, 독립성에서 이점을 얻을 수 있습니다.
인증과 인가
인증은 사용자의 신원을 확인합니다. 예로 회원가입, 로그인이 있습니다 반면 인가는 신원이 확인된 사용자에게 리소스에 액세스할 수 있는 권한을 확인하는 절차를 말합니다. 회원만 글을 올릴 수 있는 게시판에서 로그인된 회원인지 확인하는 것을 예로 들 수 있습니다.
애플리케이션의 성능 측정한 방법
XSS와 CSRF
크로스 사이트 스크립팅은 악의적인 코드를 사이트에 스트립트로 넣는 방법입니다. 게시판에 글을 작성하여 사용자들이 악성 코드를 실행하게 되는 예가 있습니다. 이를 해결하기 위해서는 스크립트 태그를 삽입하지 못하도록 막는 노력이 필요합니다.
크로스 브라우징
prettier & esLint
프리티어는 스타일 교정을 위한 포맷팅을 지원하고 lint는 unused variables같은 오류들을 잡을 수 있도록 도와줍니다. 두가지를 함께 사용하여 컨벤션과 오류를 최소화한 코드를 작성하는 것을 목표로 합니다.
package.json dependencies vs devDependencies
디펜던시는 애플리케이션 동작과 직접적으로 연관된 라이브러리를 설치하여 빌드된 프로덕트에도 적용되어있고 Dev디펜던시는 개발환경에서 필요한 라이브러리로 구분하여 프로덕트에는 적용되지 않습니다. 그렇기 때문에 빌드시에도 시간과 용량을 줄일 수 있어서 사용합니다.
CORS와 해결방법
Cross Origin Resource Sharing
CORS는 출처가 다른 리소스에 접근할 수 있도록 권한을 부여하는 체제입니다. 기본적으로 브라우저는 Same origin Policy를 규칙으로 합니다. protocol host port가 같을 때 same origin으로 간주되고 이를 통해 CSRF나 XSS 공격을 방어합니다. 하지만 다른 출처의 리소스를 활용해야하는 경우도 많기에 CORS가 해결방안이 됩니다.
CORS가 동작하는 방법은 HTTP 요청 헤더에 Origin과 access control allow origin을 브라우저가 비교하여 이를 허용하거나 막게됩니다.
동작 방식 세가지 예비 요청, 단순 요청, 인증된 요청
해결 방법 백엔드 단에서 access control allow origin을 설정해주는 방법이 있습니다. 프론트에서는 확장 프로그램 사용, 프록시 서버를 통해 이를 해결할 수 있습니다.
객체 지향 프로그래밍이란 무엇인가요?
객체들의 집합으로 프로그램의 상호 작용을 표현하며 데이터를 객체로 취급하여 객체 내부에 선언된 메서드를 활용하는 패러다임입니다.
갹체지향 프로그래밍은 추상화, 캡슐화, 상속성, 다형성이라는 특징이 있습니다
추상화: 복잡한 시스템으로부터 핵심적인 개념 또는 기능을 간추려내는 것을 의미
캡슐화: 객체의 속성과 메서드를 하나로 묶고 일부를 외부에 감추어 은닉하는 것
상속성: 상위 클래스의 특성을 하위 클래스가 이어받아서 재사용하거나 추가, 확장하는 것 재사용성, 계층적 관계, 유지 보수성 측면에서 중요
다형성: 하나의 매서드나 클래스가 다양한 방법으로 동적하는것 ex) 오버로딩, 오버라이딩
SOLID 원칙
절차형 프로그래밍
로직이 수행되어야 할 연속적인 계산 과정 (for문을 사용하는것) 코드의 가독성이 좋고 실행 속도가 빠릅니다. 단점으로는 모듈화, 유지 보수성이 떨어진다는 점이 있습니다.
리플로우와 리페인트
자바스크립트 코드에서 DOM이나 CSSOM을 변경하는 DOM API가 사용된 경우 이를 변경하고 변경된 DOM과 CSSOM은 다시 렌더트리로 결합되고 이를 기반으로 레이아웃과 페인트 과정을 거처 화면에 다시 렌더링됩니다 이를 리플로우, 리페인트라고 부릅니다.
리플로우는 레이아웃을 다시 계산하는 것을 말하며 노드 추가/삭제, 요소의 크기/위치 변경, 윈도우 리사이징 등 레이아웃에 영향을 주는 변경이 발생한 경우에 한하여 실행됩니다. 리페인트는 재결합된 렌더트리를 기반으로 다시 페인트를 하는 것을 말합니다. 둘은 상관 관계가 없다.
script async/defer 어트리뷰트
DOM이 자바스크립트 파싱에 의해 중단되는 문제를 해결하기 위해 HTML5에 추가된 내용입니다.
async - 외부 자바스크립트 파일의 로드가 비동기적으로 동시에 진행됨. 자바스크립트의 파싱과 실행은 파일의 로드가 완료된 직후 진행 이때 HTML파싱 중단. 순서가 보장되지 않음
defer - async와 같이 비동기적으로 동시에 진행, 단 자바스크립트 파싱과 실행은 HTML 파싱이 완료된 직후, DOM이 완성된 직후 진행. 자바스크립트 DOM 생성이 완료된 후 실행되어야 할 경우 유용하다.
인라인 자바스크립트 바로 script태그 안에 쓰는 경우에는 사용 불가