브라우저 렌더링 과정 브라우저 (browser) → 인터넷을 통해 웹 페이지에 접근하고, 그래픽, 텍스트, 멀티미디어 등을 표시하는 소프트웨어 웹 페이지를 해석하고 화면에 표시하는 역할 다양한 운영체제 및 플랫폼 지원 사용자 경험 형성 및 쉬운 웹 탐색 도움 ex) Chrome, Firefox, Torch, Safari, Internet Explorer, MS Edge 렌더링 과정 1. HTML 파싱 웹 페이지의 HTML 문서를 파싱하여 DOM 트리를 생성. 이 과정에서 HTML 태그, 요소, 속성을 인식하고 계층 구조로 구성 2. CSS 파싱 CSS 파일 및 스타일 정보를 파싱하여 CSSOM 생성. CSSOM은 각 HTML 요소에 대한 스타일 정보를 제공 3. 렌더링 트리 구축 DOM 트리와 CSSOM을 결합하여 렌더링 트리를 생성. 렌더링 트리는 화면에 실제로 렌더링될 요소만을 포함하며, 레이아웃과 스타일 정보를 고려 render tree 4. 레이…

CSR vs SSR Client-Side Rendering (CSR) → 웹 애플리케이션의 초기 페이지 로딩 후, 웹 브라우저에서 JavaScript가 실행되고, JavaScript 코드를 통해 동적으로 콘텐츠를 가져와서 화면에 렌더링하는 방식 서버에서 초기 페이지 로딩 → 클라이언트에서 JS 실행 → 동적 데이터 요청 → 데이터 처리 및 렌더링 Sever-Side Rendering (SSR) → 서버 측에서 초기 페이지 렌더링을 수행하고 완전한 HTML 페이지를 클라이언트로 제공하는 방식 서버에서 초기 페이지 렌더링 → HTML 페이지 전송 → 클라이언트에서 초기 페이지 로딩 → 동적 데이터 요청 → 클라이언트 측 렌더링 CSR 🆚 SSR CSR SSR 장점 - 빠른 초기 페이지 로딩 - 부드럽고 빠른 페이지 간 전환 - 서버 부하 감소 - SEO 용이성 - 초기 로딩 후 완전한 페이지 (UX향상) 단점 - SEO 취약 - 초기 페이지 로딩 이후 백엔드 …

Dev Ops Development(개발) + Operations(운영) → 개발과 운영의 경계를 허물고 하나의 팀으로서 소통, 협업을 강조하는 개발 방법론 소프트웨어 개발과 운영을 통합하여 한 팀으로 작업 반복 작업 자동화를 통해 개발 및 배포 과정을 빠르고 정확하게 수행 코드 변경사항이 지속적으로 통합, 자동적으로 배포(CI/CD) 운영 중인 소프트웨어 모니터링을 통해 사용자 피드백 수집 인프라 및 애플리케이션을 빠르게 확장 및 관리 장점 CI/CD → 빠른 소프트웨어 제공 버그 조기 발견 가능 → 높은 품질 인프라 비용 절감 협력 및 의사소통 강조 → 효율적인 협업 사용자 피드백 반영 → 신속한 문제 해결 단점 조직 내 문화적인 변화 필요 데브옵스 환경 구축 및 유지 복잡성 자동화 프로세스를 위한 초기 투자 비용 발생

함수형 프로그래밍 (Functional Programming) → 수학적 함수의 개념에 기반을 둔 프로그래밍 패러다임 순수 함수 : 동일한 입력에 대해 항상 동일한 결과를 반환 불변성 : 데이터가 변경되지 않고, 변경이 필요한 경우에는 새로운 데이터 생성 고차 함수 : 함수를 변수에 할당하거나 인수로 전달할 수 있어 함수 추상화 및 재사용 용이 참조 투명성 : 함수 호출을 결과로 대체하여 코드 이해 및 최적화 재귀 : 반복 대신 재귀를 사용하여 코드를 간결하게 유지 명령형 프로그래밍 vs 함수형 프로그래밍 장점 간결하고 가독성 높은 코드 작성 가능 → 유지 보수 용이 순수 함수 & 불변 데이터 → 단위 테스트 및 TDD 용이 병렬 및 동시프로그래밍에 적합 메모리 사용 최적화 및 불필요한 복사 방지 단점 학습 시간 소요 재귀 사용 시 스택 오버플로우 발생 가능성 라이브러리 성능 면에서 제한 가능성 이해하기 어렵고 복잡한 높은 추상화 수준 references 👉 htt…