My Boundary As Much As I Experienced

초창기 웹 초창기에는 모든 웹페이지가 정적인 페이지였다. 화면에 어떠한 변화를 주려고 화면을 전환하면 그 때마다 서버로부터 새로운 HTML을 전송 받아서 다시 렌더링 해야 했다. 당연히 성능적인 문제도 많았고 사용자 경험 측면에서도 좋지 못했다. 1. CSR (Client Side Rendering) React와 같은 다양한 프론트엔드 프레임워크들이 유행하면서 브라우저(클라이언트)에서 전적으로 웹 렌더링을 책임지는 방식이 보편화되었다. 이제 서버(프론트엔드 프로그램)에서 아무 내용이 없는 빈 HTML 껍데기를 보내면 클라이언트(브라우저)에서 동적으로 태그들과 스타일을 생성하여 페이지를 채운다. 이렇게 되면 최초에 HTML을 받는 것 외에는 페이지 렌더링을 위해서 별도의 HTTP 통신을 할 필요가 없어진다..

브라우저 렌더링 동작 과정 렌더링의 기본적인 동작 과정은 다음과 같다. 1~2. HTML 파일과 CSS 파일을 파싱해서 각각 Tree를 만든다. (Parsing) 3. 두 Tree를 결합하여 Rendering Tree를 만든다. (Style) 4. Rendering Tree에서 각 노드의 위치와 크기를 계산한다. (Layout) 5. 계산된 값을 이용해 각 노드를 화면상의 실제 픽셀로 변환하고, 레이어를 만든다. (Paint) 6. 레이어를 합성하여 실제 화면에 나타낸다. (Display) 0. 요청, 응답 처음 웹페이지에 접속하면 HTML, CSS, Javascript 파일, 그리고 필요하다면 이미지나 폰트같은 파일들을 서버에 요청하고 응답 받게 된다. 그렇다면 서버에 요청은 어떻게 전송할까? 브라우저..

뜻: Development + Operations의 합성어 소프트웨어 개발자와 정보기술 전문가 간의 소통, 협업 및 통합을 강조하는 개발 환경이나 문화를 의미한다. 개발과 운영의 이해관계 우리는 서비스를 만들때 기획 -> 개발 -> 빌드 -> 테스트 -> 릴리즈 -> 배포 -> 운영 과같은 단계를 거친다. 이때 각각의 역할이 있게 된다 개발팀: 개발, 빌드 운영팀: 테스트, 릴리즈, 운영 개발팀 입장에서는 잦은 배포로 더 많은 기능들을 추가하여 더 좋은 서비스를 제공하고 싶어한다 하지만 운영팀의 입장에서는 잦은 배포는 그만큼 많은 버그와 오류에 대한 걱정과 스트레스가 커지게 된다. 이 개발팀과 운영팀 사이의 중간자적인 역할을 하면서 CI/CD를 책임진다. CI/CD란? CI: 지속적통합(Continuou..

명령형 프로그래밍(절차지향, 객체지향) 상태와 상태를 변경시키는 관점에서 연산을 설명하는 방식. 알고리즘을 명시하고, 목표는 명시하지 않음 절차지향 프로그래밍: 수행되어야 할 순차적인 처리 과정을 포함하는 방식 (C, C++) 객체지향 프로그래밍: 객체들의 집합으로 프로그램의 상호작용을 표현 (C++, Java, C#) 선언형 프로그래밍 How보다는 What을 설명하는 방식 (어떻게보단 무엇을) 알고리즘을 명시하지 않고 목표만 명시함 함수형 프로그래밍: 순수 함수를 조합하고 소프트웨어를 만드는 방식 (클로저, 하스켈, 리스프) 함수형 프로그래밍은 거의 모든 것을 순수 함수로 나누어 문제를 해결하는 기법으로, 작은 문제를 해결하기 위한 함수를 작성하여 가독성을 높이고 유지보수를 용이하게 해준다. 함수형 프..