개발해보개

웹소켓 (websocket) http의 경우 단방향 통신으로 요청 시 응답을 보내주는 형식이다. (요청이 있어야만 연결 되며 응답을 받은 후엔 연결이 종료됨). 이를 보완하기 위해 나온 것이 websocket이다. 웹소켓은 양방향 통신이 가능하다. http 가 stateless protocol 이라면 websocekt은 stateful protocol 이기 때문에 클라이언트와 한 번 연결이 되면 계속해서 통신을 주고 받을 수 있다. 때문에 실시간 통신이 가능하여 채팅이나 주식, 실시간 동영상 streaming, 온라인게임 등과 같은 실시간 정보가 필요한 서비스에 주로 사용된다. Websocekt은 초기에 연결한 오직 하나의 url만 존재한다. 웹소켓 커넥션을 만들려면 new WebSocket을 호출하는데..

Computer Science 2022. 9. 25. 20:07

웹의 3대 요소 웹을 구성하는 3대 요소로는 HTML , HTTP, URL이 있습니다. HTTP는 웹 서버와 웹 클라이언트 간에 통신을 할 수 있도록 지원해주며 URL은 웹 클라이언트가 웹 서버로 자원 요청 후 HTML이 담긴 응답을 맡으며 웹 클라이언트 프로그램인 웹 브라우저가 이를 해석하여 사용자에게 구조화된 인터페이스를 출력시켜 줍니다. 이렇듯 3대요소는 웹의 핵심적인 기술입니다.

Computer Science 2022. 2. 8. 20:39

웹표준이란?(Web Standards) 웹에서 사용되는 규칙 또는 기술을 의미하는 것으로, 웹 사이트 개발시 사용하는 HTML, JavaScript 등에 대한 규정, 웹 페이지가 다른 기종이나 플랫폼에서도 구현되도록 제작하는 기법 등을 포함한다. 접근성이란?(Web Accessibility) 누구나 어떠한 환경에서도 웹 사이트에서 제공하는 모든 정보를 접근하여 이용할 수 있도록 보장하는 것을 의미한다. 장애인이나 고령자 등이 웹 사이트에서 동등하게 접근 할 수 있고 이해할 수 있도록 보장 하는 것. 웹 호환성이란이란?(Cross Browsing) 유저가 각기 다른 환경(브라우저)를 통해 페이지를 볼 때, 깨지지 않고 의도한 대로 올바르게 나오게 하는 작업을 말한다. 브라우저마다 랜더링 엔진이 다르기 때문..

Computer Science 2022. 2. 7. 20:01

바벨이란? 모든 실행 환경에서 자바스크립트가 정상적으로 동작할 수 있도록 변환해주는 자바스크립트 트랜스파일러. 간혹 오래된 브라우저에서는 최신 문법을 지원하지 않는 경우가 있는데, 사용자가 이런 브라우저를 통해 접속 했을 경우 최신 문법으로 작성된 코드도 읽을 수 있도록 (ex : ES6코드를 ES5코드로 변환) 해주는 것이다. (Transpile : 한언어로 작성된 소스 코드를 비슷한 수준의 추상화를 가진 다른 언어로 변환하는 것.) 웹팩이란? 프로젝트의 구조를 분석하고 자바스크립트 모듈을 비롯한 관련 리소스들을 번들로 묶고 브라우저에서 사용할수있도록하는 모듈번들러이다. 모듈번들러(Module bundler)란? 웹 애플리케이션을 구성하는 자원을 모두 각각의 모듈로 보고 이를 조합해서 병합(압축)된 하..

Computer Science 2022. 2. 7. 19:48

브라우저의 동작 과정 사용자가 선택한 페이지를 보여주기 위해 브라우저는 서버에 필요한 페이지를 요청한다. 서버는 응답하고 브라우저는 서버로부터 받은 페이지를 렌더링하여 사용자에게 보여줍니다. 렌더링 과정 렌더링 엔진은 HTML 문서를 파싱하여 DOM트리를 생성합니다. 사타일 요소를 파싱하여 CSSOM트리를 생성합니다. DOM과CSSOM을 결합하여 렌더트리를 생성합니다. 렌더트리의 각 노드를 배치합니다(레이아웃작업) 배치 완료된 렌더트리를 화면에 그립니다. 참고사이트 https://velog.io/@yejineee/%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80-%EB%8F%99%EC%9E%91-%EA%B3%BC%EC%A0%95

Computer Science 2022. 2. 7. 19:28

DOM이란 Document Object Model의 약자로 넓은 의미로 웹 브라우저가 HTML 페이지를 인식하는 방식을 의미한다. 좁은 의미로 본다면 document 객체와 관련된 객체의 집합을 의미할 수도 있다. HTML, XML 문서의 프로그래밍 interface(연결장치)이다. DOM은 문서의 구조화된 표현을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 그들이 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕는다. DOM 은 구조화된 nodes와 property 와 method 를 갖고 있는 objects로 문서를 표현한다. 이들은 웹 페이지를 스크립트 또는 프로그래밍 언어들에서 사용될 수 있게 연결시켜주는 역할을 담당한다. VirtualDOM이란 브라우저에 실제로 보..

Computer Science 2022. 2. 7. 19:19

NPM이란? Node Package Manager의 약자로 node.js의 모듈관리를 도와주는 프로그램이다. node.js 설치시 함께 설치된다. 기본 명령어 npm init (package.json이 생성됨) npm install (package.json에 있는 모든 패키지 모듈 설치) npm install 패키지명@버전 (버전지정하여 설치) 참고사이트 https://curryyou.tistory.com/346

Computer Science 2022. 2. 7. 19:13

REST(Representational State Transfer)란? 말 그대로, 자원(Resource)의 표현(Representation)에 의한 상태 전달(State Transfer)이다. 여기서 자원이란? 해당 소프트웨어가 관리하는 모든 것 (문서,그림,데이터,해당 소프트웨어 자체 등) 여기서 표현이란? 그 자원을 표현하기 위한 이름 여기서 상태전달이란? 데이터가 요청되는 시점에 자원의 상태를 전달하는 것. 풀어 설명하자면, 자원을 이름으로 구분하여 해당 자원의 상태를 주고 받는 모든 것을 의미한다. 쉽게 말해, 웹에 존재하는 모든 자원에 고유한 URI를 부여해 활용하는 것으로, 자원을 정의하고 자원에 대한 주소를 지정하는 방법론을 의미한다. REST의 구성요소 자원(Resocurce) = URI..

Computer Science 2022. 1. 9. 22:50