개발자노트/우아한 테코톡 감상 (19) 썸네일형 리스트형 [10분 테코톡] 🐶 코기의 Servlet vs Spring ( Spring으로 Servlet을 다룬다는 것 ) 1. 서블릿이란? 처음 웹 서버는 클라이언트의 요청에 따라 정적인 페이지로만 응답할 수 있었음 그래서 웹 서버에 프로그램을 붙여서 동적인 페이지를 생성하기 시작함 ✔ 서블릿도 동적인 페이지를 만들기 위해 웹 서버에 붙이는 프로그램 중 하나인 것! 그렇다면 서블릿을 사용하면 어떠한 실질적인 이득이 있는가? ✔ 복잡한 http 요청을 개발자들이 직접 처리,분석해서 모든 규약과 제약에 맞춰 텍스트 형식의 응답을 보내야 한다면 굉장히 어렵고 복잡함 ✔ 이 때, 서블릿이 요구하는 구현 규칙을 지켜주면서 서블릿을 정의해주면 http 요청 정보를 쉽게 사용할 수 있고, 처리결과를 쉽게 응답으로 변환할 수 있음 ✔ 서블릿을 이용하여 웹 요청을 다루게 되면 개발자들이 진짜 집중해야하는 비즈니스 로직 (처리 로직) 에 집.. [10분 테코톡] 🎨 신세한탄의 CSR&SSR SPA와 MPA SPA (SinglePageApplication) - 리액트, 앵글러 , 뷰와 같은 자바스크립트 기반 프레임워크를 사용하여 개발 된 하나의 페이지로 구성된 웹 어플리케이션 - ex) APP을 이용할 때 헤더는 고정되어있고, 메뉴를 선택하면 메인화면 부분, 혹은 클릭한 부분만 바뀌는 웹사이트 MPA (MultiPageApplication) - 탭을 이동할 때마다 서버로부터 새로운 HTML을 받아와 페이지 전체를 새로 랜더링 하는 전통적인 웹페이지 구성방식 - 전환 시 마다 화면 깜빡임 CSR과 SSR SPA, MPA와의 관계 - 리액트, 뷰, 랭글러 등을 이용하여 SPA를 만들고 특별한 목적을 가지고 랜더링 방식을 변경하지 않는다면 자연스럽게 SCR을 사용하게 됨 - PHP, JSP등으로 .. [10분 테코톡] 🌳 나봄의 CORS SOP (Same Origin Policy) - 다른 출처의 리소스를 사용하는 것에 제한하는 보안 방식 - 출처란? CORS (Cross-Origin Resource Sharing) - 다른 출처의 자원을 공유 - 추가 HTTP 헤더를 사용하여, 한 출처에서 실행중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에게 알려주는 체제 CORS 접근제어 시나리오 ✔ 단순요청 (Simple Request) ✔ 프리플라이트 요청 (Preflight Request) ✔ 인증정보 포함 요청 (Credentialed Request) Preflight - 사전 확인 작업 - OPTIONS 메서드를 통해 다른 도메인의 리소스에 요청이 가능한지 확인 작업 - 요청이 가능하다면 실제 .. [10분 테코톡] 🕶 곤이의 DOM&BOM 1. 웹 구성 요소 HTML - 뼈대 ( 제목 / 이미지/ 표 등을 정의 ) , 구조와 의미를 부여하는 정적언어 - 웹의 전체적인 구조를 담당함 CSS - 옷 (색상 , 레이아웃, 폰트 등을 지정), 콘텐츠를 꾸미는 정적 언어 - 웹의 시각적인 표면을 담당함 JS - 기능 , HTML의 정적이고 단조로운 한계를 극복하기 위해 만들어진 언어 - 웹 문서를 더욱 동적으로 처리할 수 있도록 도와줌 JS는 어떻게 확장자가 다른 HTML과 CSS파일의 내용을 읽고 수정할 수 있을까?? 해답은 2번 DOM에 있음 2. DOM (Document Object Model) - 문서에 대한 모든 내용을 담고 있는 객체 - 텍스트 파일로 만들어진 문서를 브라우저가 이해할 수 있는 구조로 구성한 것 - HTML 요소 간의 부.. [10분 테코톡] 🦄 콜린의 Flex Layout Layout - 문서 위에 상자를 적절한 위치에 배치하는 것 Layout [normal flow] - 브라우저가 기본값으로 HTML페이지를 배치하는 방법 크게 두가지가 존재 1) block - 자신의 부모요소 넓이를 전부 차지하게 됨, - 또한 새로운 블록이 추가될 시 아웃라인 즉 개행되어 추가되는 형태 2) inline - 부모의 전부, 부모너비의 전부를 차지하지 않고 컨텐츠 영역만 너비를 차지하며, - 새로운 인라인 요소는 부모의 최대 너비를 넓지 않는 선에서 나란히 위치하게 됨 - 만약 부모의 너비를 넘겼다면 개행하여 위치하게 됨 Flex - 요소들을 행, 열 단위로 정렬하기 위한 1차원 레이아웃 Flex 용어 ✔ flex container : flex 아이템들을 배치 , 정렬 - flex-dire.. [10분 테코톡] 🎉 동동의 CSS 방법론 1. CSS란 - HTML 또는 XML로 쓰여진 문서의 스타일을 나타내기 위해 사용되는 언어 - 문서의 구조와 스타일(디자인)을 분리하여 HTML이나 XML의 각 요소를 꾸미는 것이 역할 2. CSS 등장 이전/ 이후의 스타일링 - 등장이전 : 각 요소의 전용 속성이나 style 속성으로 스타일을 일일히 지정 ex) font 요소의 color 속성에 hex 코드를 넣어 색상 스타일을 부여하거나 각 요소의 style 속성에 inline으로 스타일을 기재하여야 했음 => 문제점 1) 같은 스타일 요소를 여러 페이지마다 사용하면, 하나를 수정할 때마다 그만큼 반복하여 수정 해야함 2) HTML은 본래 문서구조를 의미하므로 HTML에 직접 스타일을 지정하는 것은 바람직하지 않음 - 등장이후 : css 파일에는 .. [10분 테코톡] 🎁 브랜의 프론트엔드에서 Component란 1. 컴포넌트 - 전체의 부분 여기서는 비행기로 예를 들었다. 비행기에 각 부분들이 나누어서 설계가 되지 않고 하나의 덩어리로 이루어지게 된다면 어떻게 될까? - 컴포넌트가 없다면? 높은 의존성 - 반복 X - 재사용X - 규모가 큰 설계X 2. 프론트엔드 컴포넌트 - 과거의 웹사이트는 HTML페이만으로 구성되어있었음 => 유저의 액션에 대해 매번 새로운 HTML페이지를 서버에 내려주어야 했음 => 페이지의 일부만 변경하고 싶어도 전체 페이지를 새로 내려주어야 한다는 점에서 비효율적이였음 => ex) 과거 네이버 anchor와 table 태그 위주로 구성되어 있었음 == 정적인 페이지 - 1990년대 후반에 AJAX가 등장하면서 웹의 변화가 시작 됨 => 필요한 데이터만을 전달받고, 화면에 일부분만 다시.. [10분 테코톡] 🐭 미키의 웹 접근성 & 표준 웹 표준은 왜 지켜야하는걸까? 1. 웹 표준 등장배경) -초기 -> 증기 -> 말기 -초기 : 넷스케이프 vs 인터넷 익스플로러 -중기 : IE가 독점 , IE는 자사에 유리한 플러그인을 대거 채용 ( 호환성을 고려하지 않음 ex)ActiveX ) -말기 : 새로운 플랫폼인 스마트폰의 등장 웹표준이란?) - 어떠한 운영체제나 브라우저를 사용하여도 동일한 컨텐츠를 볼 수 있도록 웹에서 표준적으로 사용되는 기술이나 규칙 - 팀 버나스리를 중심으로 한 W3C이라는 조직의 토론에 의해 결정됨 웹표준의 장점) - 검색엔진 최적화 = 웹 페이지가 검색 결과를 좀 더 높은 순위가 나올 수 있도록 하는 작업 - 개발자가 코드를 이해하기 더 쉬워짐 = 사람도 의미를 가진 태그를 통해 만들어진 구조를 더 이해하기 쉽다. .. 이전 1 2 3 다음
