콘요맘떼 개발일지

1. MPA (Multiple Page Application) - 여러 페이지로 구성된 Application이다. - SSR(Server Side Rendering) 방식으로 렌더링한다 : 페이지 이동하거나 새로고침할 때마다 서버로부터 정적 리소스(HTML, CSS, Javascript)가 다운된 후에 전체 페이지가 렌더링된다. 장점 (1) SEO 관점에서 유리하다 (2) 첫 로딩시간이 짧다 : 초기 요청 때 상대적으로 적은 리소스를 요청하기 때문에 렌더링이 빠르다. 단점 (1) 새로운 페이지로 이동하면 리로드가 발생하여 새로운 페이지 요청과 렌더링이 이루어진다. (화면이 깜빡이는데 이는 UX의 관점에서 단점에 해당한다.) (2) 페이지 이동할 때 중복된 템플릿도 로딩이 필요하다. (3) 서버 렌더링에 ..

1. HTTP의 한계 HTTP는 connectionless : 클라이언트가 요청을 하고 서버가 응답을 하면 연결이 끊긴다. 이는 서버가 다수 클라이언트와 연결을 유지하면서 발생하는 리소스 낭비를 막기 위해서이다. → 하지만 다음과 같은 문제 발생 (1) 요청 보낼 때마다 페이지 리로딩됨 (2) 동일한 요청에 중복된 헤더 파일을 전송한다. (3) 실시간 상호작용성이 떨어진다. (오늘의 주제!) 2. Polling 방식 - 클라이언트가 HTTP request를 서버에 계속 날리는 방법 - 가장 간단하지만 서버의 부담이 크다. - 실시간 정도의 빠른 응답을 기대하기도 힘들다. 3. Long Polling 방식 - 클라이언트가 서버로 HTTP request를 전송한 후 서버가 해당 클라이언트에 응답할 내용이 생..

1. css의 한계 (1) 클래스명을 작성하는 번거로움 (2) 방대한 스타일 정보로 인한 파일의 크기 → scss, styled-components의 등장 2. Scss - Sass 버전3에서 등장하였으며 Saas의 모든 기능을 구현하면서 CSS 문법과 완전히 호환된다. - 그 자체로 웹에서 돌아갈 수 없기 때문에 전처리기로 작성된 후 CSS로 컴파일 되어야 한다. (Gulp, Webpack, Parcel 등) - 변수 사용이 가능한다. - 연산자가 사용 가능하다 : +, -, /, *, %, ==, != (단 +, -는 단위를 통일시켜서 사용해야 한다.) - Nesting이 가능하다. (상위 요소를 참조할 때는 &를 사용한다.) - Mixin을 사용할 수 있다. (선언 : @mixin, 사용 : @in..

1. 브라우저 저장소 (Web storage) - 브라우저 내에 키-값 쌍을 저장하게 해준다. (키 기반으로 데이터 조회) - localStorage와 sessionStorage가 있다. - 해당 도메인과 관련된 데이터를 서버가 아닌 클라이언트 웹브라우저에 저장하게 해준다. - 사이트의 도메인 단위로 접근이 제한된다. 따라서 서로 다른 도메인끼리 데이터를 공유할 수 없다. - HTML5부터 제공되었다. (1) 로컬 스토리지 (localStorage) - 데이터를 영구적으로 보관할 수 있다. (브라우저 종료해도 데이터 지속) - 페이지 프로토콜 별로 분리해 자료 저장한다 → 동일 페이지여도 HTTP에서 접속하였을 때랑 HTTPS로 저장되었을 때 데이터 다르게 저장된다. - 도메인만 같으면 전역적으로 데이터..

1. Box Model 문서의 레이아웃을 계산할 때 브라우저 렌더링 엔진은 각각의 요소를 사각형 박스로 표현한다. 하나의 박스는 Content, Padding, Border, Margin 총 네 가지 영역으로 구성된다. 2. Box Sizing 요소의 너비와 높이를 계산하는 방법을 지정한다. (1) content-box - CSS의 기본 설정이다. - 요소의 width, height 지정시 이는 content의 크기를 가리키며 padding, border의 크기는 그에 추가로 적용된다. (2) border-box - border과 padding 역시 width와 height를 계산할 때 포함시킨다. - 대부분의 경우에 이 방법이 크기를 조절하기 쉽기 때문에 전체 선택자(*)와 함께 많이 사용한다.

1. Inline Element - , , , , , 등이 있다. - content의 너비만큼 라인을 차지하며 한 라인에 여러 개의 요소가 올 수 있다. - inline 요소의 상·하 여백은 margin이 아닌 line-height에 의해 결정된다. - inline 요소에는 width, height이 적용되지 않는다. - inline 요소가 연속 사용되는 경우 약 5px의 외부 margin이 자동 생성된다. 2. Block Element - , , , , , , , , , , 등이 있다. - 화면 전체 너비를 차지한다. - width : 100% 속성을 기본적으로 가지고 있다. (이로 인해 자동 줄넘김 발생) 3. display 속성 태그가 Inline인지 Block인지 결정해주는 것은 display 속..

1. Inheritance (상속) - CSS에서 한 엘레먼트에 스타일을 주면 그 자식들 역시 영향을 받는다. - 모든 스타일이 상속되는 것은 아니며 border, margin, padding, border 등은 상속되지 않는다. 2. Cascading (캐스케이딩) - 한 대상에 대해 중복되는 스타일 선언이 존재할 경우 어떤 스타일을 선택할지에 대한 규칙이다. - 캐스케이딩은 중요도, 명시도, 순서 이렇게 3가지 규칙에 따른다. (1) 중요도 CSS 소스의 출처로부터 중요도를 구분한다. (먼저 언급될수록 우선순위가 높다) !important 속성 개발자 CSS 인라인 스타일 style 태그 link 태그로 가져온 stylesheet css 파일 유저 CSS : 폰트 설정 등 사용자가 브라우저에 적용한 ..

1. CSS (Casading Style Sheets) - HTML이나 XML로 작성된 문서의 표시 방법을 기술하는 Style sheet 언어 (프로그래밍 언어, 마크업 언어 둘 다 아님!) - HTML에서 디자인을 위한 새로운 태그들을 추가하였으나 해당 방법이 한계가 있음에 따라 CS가 등장하였다. Rule set (줄여서 Rule) - 선택자(Selector) : 꾸며줄 요소를 선택 - 선언(Declaration) : 꾸미길 원하는 요소의 소성 묘사 (각 선언은 ;를 통해 구분한다) 2. 선택자(Selector) 종류 (1) 전체 선택자 - * 모든 요소를 선택한다. (2) 태그 선택자 (요소 선택자) ex) p, div 특정 태그의 엘레먼트를 모두 선택한다. (3) 아이디 선택자 - #id 특정 아..

1. 버전 관리 시스템(VCS : Version Control System) - 파일 변화를 시간에 따라 기록했다가 특정 시점의 버전을 다시 꺼내올 수 있는 시스템. - 파일의 상태를 되돌리거나, 수정 내용을 비교하고 이슈를 추적할 수 있게 해준다. - 주로 소프트웨어 개발에서 코드 관리에 사용되지만 텍스트, 이미지 등 다양한 종류의 파일을 관리하기 위해 사용 가능 - VCS 이전에는 각 버전의 파일들을 모두 저장하는 방법밖에 없었음. (1) 로컬 버전 관리 시스템 - 로컬 환경에 간단한 DB를 사용해서 파일의 변경 정보 관리. (2) 중앙 집중식 버전 관리 시스템 (CVCS : Centralized Version Control System) - 다른 개발자와 함께 작업하는 경우를 위해서 등장. - 파일..

UI를 목적으로 태그 아래 들어가는 태그들이 아닌, 주로 태그 아래에 들어가며 메타 데이터를 담기 위한 태그들을 학습한다. 1. - DTD(Document Type Definition)이라고 불리며 브라우저에게 현재 웹페이지의 형식을 알려준다. - 브라우저는 이를 통해 해당 형식 및 버전을 기준으로 해당 페이지를 해석한다. 2. - 웹페이지의 시작과 끝을 알려준다. - 전역 속성(Global Attribute)를 자주 사용한다. (대표적으로 lang 속성을 통해 메인 언어 명시) ex) 3. - 웹페이지의 메타데이터를 작성하거나 외부 파일들을 링크하는데 사용한다. - 태그가 실제 사용자에게 보여지는 UI적 요소들의 최상위 컨테이너라면 는 사용자에게 보여지지 않는 것들이 담기는 곳이다. - 메타데이터를 담..