개발해보개

웹표준이란?(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

AWS EC2를 통해 배포하다보니 Linux 명령어를 공부해야할 필요가 있다고 느꼈다. Cat 명령어 - 출력만 가능 (읽기,보기) 1. 파일 열기(출력,보기) Cat 파일이름 2. 각 행에 번호 붙여서 출력하기 cat -b 파일이름 3. 빈 행에 번호 붙여서 출력하기 cat -n 파일이름 vi 명령어 - 읽기, 수정 가능 1. 파일 열기 vi 파일이름 2. 편집하기 키보드i 3. 수정완료 후 종료하기 ESC 4. 저장하고 나가기 :wq : 커서맨아래로 이동 w 저장하기 q 나가기 wq 저장하고 종료하기 q! 저장하지 않고 나가기 cp명령어 파일 복사 cp 파일위치/파일이름.확장자 목적파일위치/파일이름.확장자 디렉토리 복사 cp -r 디렉토리명 목적디렉토리위치

etc. 2022. 1. 17. 15:01

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

Computer Science 2022. 1. 9. 22:50

자바스크립트의 이벤트를 다룰 때 사용하는 event객체의 target과 currentTarget에 대해 알아보자. event.target 실제 이벤트가 발생한 최하위 요소를 나타낸다. =타깃요소(target요소) 쉽게 말해 내가 클릭한 요소(onclick이벤트의경우) event.currentTarget(this) 발생한 이벤트의 핸들러가 할당된 요소를 나타낸다. 쉽게 말해 이벤트가 걸려있는 위치

JavaScript 2022. 1. 9. 19:50