etc

[CS기술면접 대비] 프론트엔드 CS 기술 공부 (2)

jelly._.me 2025. 4. 15. 13:15

 

나 혼자 복습하려고 기록하는거라 가독성 0임

💯 1. CI/CD

CI/CD 이점
1. 코드의 변경사항을 빠르게 배포, 개발 속도 높아짐
2. 자동화된 배포 프로세스로 수동의 위험도 줄임, 배포 과정의 비용 절감
3. 개발자들의 코드 변경을 쉽게 통합


CI = 지속적 통합 : 빌드와 테스트를 자동화해서 공유 저장소에 병합 시키는 프로세스

ex) git 사용 시 여러 개발자가 하나의 공유 저장소 사용하게 됨

→ 그러면 변경 사항이 저장소에서 통합되지 않게 되면, 서로 충돌 위험이 있음

CI 프로세스 예시

1. 개발자가 코드 작성 후 Git에 푸시.
2. CI 툴(예: GitHub Actions)은 푸시된 코드를 받아 빌드하고 테스트를 실행.
3. 테스트가 성공하면 배포 준비가 완료된 상태로 코드가 메인 브랜치에 통합.
4. 만약 테스트가 실패하면 자동으로 개발자에게 피드백을 주어 수정하게 함.

 

CD = 지속적 전달/배포 : CI를 통해 정상적으로 빌드/테스트 확인되면 자동 배포 (배포시간 단축함)

→ 수동 작업의 오류를 줄이고, 배포 빈도를 높일 수 있듬

CD 프로세스 예시

1. CI 프로세스가 성공하면 배포가 준비된 상태.
2. 배포 환경에 자동으로 배포가 진행되며, Vercel 같은 툴이 이를 관리.
3. 배포 후, 블루/그린 배포, A/B 테스트 등으로 안정적인 배포가 이루어짐.

 

 

 

💯 2. Git Flow

대규모 프로젝트 관리에 적합한 워크플로우 방식

브랜치끼리 협력하는 플로우

Git Flow에는 5가지 주요 브랜치

  • feature: 기능 개발용 브랜치
  • develop: 개발 중인 코드 브랜치
  • release: 배포 준비용 브랜치
  • hotfix: 긴급 버그 수정용 브랜치
  • master: 실제 프로덕션에 배포되는 브랜치

feature 브랜치 : 새 기능 개발 / 버그 수정

feature 브랜치 프로세스

1. git checkout -b feature/login*을 통해 로그인 기능을 위한 새로운 브랜치 생성.
2. 로그인 기능을 완성 후, git push origin feature/login 로 원격 저장소에 푸시.
3. git checkout develop → git merge feature/login 로 develop 브랜치에 병합

 

develop 브랜치 : 모든 기능이 정상 작동인 상태

테스트 완료 후에 원격 저장소에 푸시

release 브랜치 : 배포 준비를 위한 브랜치

develop에서 분기된 브랜치임

최종 확인 작업, UI수정이나 문서화 작업, 개발 후에 master와 develop 브랜치에 병합

  • 수정이 끝나면 **git merge release/1.0.0 master**와 **git merge release/1.0.0 develop**을 통해 두 브랜치에 병합.
  • 배포 후, **git tag 1.0.0**으로 버전 태그를 지정.

hotfix 브랜치 : 버그 긴급 수정 브랜치

master에서 분기된 브랜치

버그 수정 후 다시 master랑 develop에 병합

master 브랜치 : 프로덕션 환경에 배포되는 코드

얘만 실제 배포에 사용됨

 

 

💯 3. SEO

검색 엔진 최적화 작업

SEO를 통해서 웹 내부에서 해당 웹사이트가 검색 결과에 더 잘 보이도록

  • 검색 엔진은 웹 크롤링해서 링크를 따라가고, 색인을 생성
  • 크롤러는 정해진 규칙에 따라서 진행하며, 해당 규칙에 밀접한 웹사이트가 더 상단에 노출됨
SEO 최적화 방안

1. HTTPS 적용하기
   구글이 검색엔진 92% 점유 중인데,
    HTTPS로 된 사이트가 보안이 우수하다고 판단하고 더 높은 점수를 부여한다고 함
2. 사이트맵 생성하기
   크롤봇에게 사이트맵으로 발견안된 웹도 크롤되게 함, 페이지의 구조를 알려주는 것만으로, 많은 컨텐츠를 담은      페이지를 상위에 올리게 됨
3. robots.txt 사용
    robots.txt : 엑세스 가능한 사이트 URL을 크롤러에게 알려줌 크롤러가 불필요한 페이지를 크롤링하지 않도록 관     리할 수 있어서 효율적 동작 ㄱㄴ
4. 메타데이터 추가
5. 성능 개선 최적화 작업
    SEO 랭킹 요소 중 웹사이트 성능이 가장 큰 요소!!

 

 

💯 4. CSR시 SEO 이슈가 발생하는 이유

→ 웹 크롤러가 자바스크립트 파일을 실행하지 못하고 오직 빈 HTML만 수신하기 때문..!

왜냐면 CSR은 클라이언트 측면에서: 초기 빈 HTML → JS 받아와서 이후 동적 렌더링

 

 

💯 5. Nginx

Nginx는 가볍고 높은 성능을 지닌 웹 서버 소프트웨어임

정적 파일을 처리하는 데 매우 효율적이고 빠르게 서빙 ㄱㄴ

  • 서버의 부하를 분산
  • 캐싱 기능 (자주 요청되는 데이터를 메모리/디스크에 저장, 빠르게 응답)
  • SSL암호화, HTTP/2 지원 등의 기능
  • 주로 정적 웹페이지 서비스(HTML,JS등의 정적파일을 전달 빠르게 함)
  • 리버스 프록시, TCP/UDP 프록시 등으로 활용

 

💯 6. SSL

웹 사이트와 브라우저 사이에서 전송되는 데이터를 암호화함

인터넷 연결 보호 표준 기술임

  • SSL인증서가 있는 웹사이트에서만 실행 ㄱㄴ
  • SSL인증서 발급받아야만 웹사이트가 HTTPS로 이동 가능
  • SSL인증서로 SSL/TLS암호화가 가능해지고, 인증서에는 웹사이트 공개키랑 관련 정보 포함

 

💯 7. XSS 공격

XSS는 웹사이트에 악성 스크립트를 삽입 공격하는 방식!

이 악성 스크립트가 브라우저에 실행되면서 유저 정보 해킹함

ex) 댓글을 작성한다고 할 때, 한 해커가 <script>alert('XSS Attack');</script> 이걸 입력

XSS 방어 방법

1. 입력값 검증, 필터링
   → 정규식이나 화이트 리스트 방식으로 허용된 문자만 입력되도록 (HTML 태그 등 불가하게)
2. 출력 시 이스케이프 처리 (HTML로 해석되지 않도록!)
   입력을 페이지에 출력할 때, 이스케이프 처리!
    <script>alert('XSS');</script> 이걸 →  &lt;script&gt;alert('XSS');&lt;/script&gt; 이렇게
3. CSP 적용 : 외부 스크립트 차단하도록
4. HTTPOnly와 secure플래그 : 쿠키에 이 플래그 추가해서 js로 쿠키 탈취 막음

 

 

💯 8. CSRF 공격

CSRF은 사용자 인증된 상태에서, 악성 웹사이트가 유저 권한 도용해서 브라우저로 요청하는 공격

ex)

  • 구글 계정에 로그인한 상태에서, 사용자가 다른 악성 웹사이트를 방문
  • 악성 웹사이트는 A가 구글에 로그인된 상태에서 구글에 POST 요청을 보내도록 만들어. 이 요청은 A의 권한으로 실행되어, A의 계정에서 비밀번호 변경 요청이나 돈 이체 같은 민감한 작업을 실행할 수 있음.
CSRF 방어 방법

1. CSRF 토큰 사용 : 서버가 토큰을 확인하면서 요청의 출처 검증!
2. Referer 헤더 검사 : 요청의 referer 헤더 검사해서 출처 검증
3. SameSite쿠키 속성 : 타사이트에서 오는 요청에 대해서 쿠키 보내지 않도록
   ex ) SameSite = LAX 나 SameSite = Strict 로 쿠키 속성 설정
4. GET 요청을 변경
   중요한 요청은 GET이 아니라 POST로 요청!! (왜냐면 GET은 브라우저가 자동전송할 수도 있기 때문임)

 

 

 

💯 9. 모듈 번들러와 트랜스 파일러

  • 모듈 번들러이는 웹앱 성능을 최적화하고 코드의 관리를 용이하게 함ex) Webpack이나 Parcel 등의 모듈 번들러를 사용, 여러 개의 JavaScript 파일을 하나로
  • ex) Webpack이 app.js를 하나의 번들로 묶어서, 브라우저가 하나의 파일만 요청
  • 브라우저에서 여러 개의 JavaScript 파일을 각각 요청하는 대신, 하나의 파일로 묶으면 네트워크 요청을 줄일 수 있어. 이는 페이지 로딩 속도를 빠르게 만들어줌
  • 여러 개의 js 파일을 하나로 묶어서 브라우저 실행, 번들러 자체가 여러개 조각을 묶는다는 뜻
  • 트랜스 파일러ES6를 하위호환성 위해 이전 버전으로 변환 ex) Babel, 타입스트립트 컴파일러(타→자) 등
  • 코드를 한 프로그래밍 언어 → 다른 언어로 변환해주는 거

 

💯 10. Webpack

자바스크립트 애플리케이션 효율적 관리, 배포하는 모듈 번들러

js 말고도, Sass 파일을 CSS로 변환하거나, TypeScript를 JavaScript로 변환하는 작업해줌

WebPack 사용 이유

1. 성능 최적화: 여러 파일을 하나로 묶어 네트워크 요청을 줄이고, 로딩 시간을 개선할 수 있음.
2. 모듈화: 코드가 복잡해지면 모듈화하여 유지보수성을 높여줌.
3. 자동화: 빌드, 트랜스파일, 압축 등 여러 과정을 자동화해주어 개발 속도를 높임.
4. HMR 및 코드 스플리팅: 개발 중 실시간으로 변경 사항을 반영하고, 필요한 코드만 불러오는 최적화를 함

 

💯 11. 함수형 프로그래밍

부수효과를 최소화하고, 조합성을 강조하는 프로그래밍 패러다임

 

**** 부수효과** : 자기 자신이 의도한 결과 외에 외부 상태를 변경하거나 영향을 미치는 경우

ex) 콘솔에 로그 출력, 네트워크 요청, 함수 내부에서 전역변수 변경 등
⇒ 함수의 예측 불가능한 동작이 발생할 수도 있듬!

함수형 프로그래밍 쓰는 이유

→ 조합성, 모듈화 수준이 높아짐

(함수를 기능별로 쪼개서 모듈화 높아지고, 다시 또 필요할 때 모아서 조합함)

→ 즉 프로그램 전체의 안정성이 높아짐!