[과제] 자기소개 페이지 제작

2주차 마지막 날의 과제로 HTML, CSS, JavaScript를 이용해서 자기소개 페이지를 제작하는 과제가 주어졌다. 멋사에서 활동했을 때도 HTML/CSS를 배우고 가볍게 자기소개 페이지 제작 과제를 했었는데, 확실히 그 때보다 이런저런 요소들을 제법 다룰 수 있게 된 것을 느꼈다. 그 때 같이 활동했던 동아리원 중, 웹 화면에 페이지를 꽉 채워서 여러 페이지들을 스크롤 하는 방식으로 제작하신 분이 계셨는데, 당시 웹 개발 햇병아리였던 나는 그런 신세계(?) 디자인은 처음 접해봤었고 다음에 한 번 저렇게 만들어 보고싶다는 생각을 했었다. 그 외에도 능력이 부족해서 해보고는 싶지만 구현을 못했던 것들이 많았어서, 이번 과제의 페이지 디자인은 당시를 회상하면서 했다. 과제의 주제가 필수 내용들을 삽입하..

→2022.02.04

elice/study

[CS] DOCTYPE

1. DOCTYPE Document Type의 약자로, HTML이 어떤 버전으로 작성되었는지 미리 선언하여 웹브라우저가 내용을 올바로 표시할 수 있도록 해주는 것이다. 으로 선언하는데, 이걸 해주지 않으면 호환 모드(quirks mode)로 동작한다. 호환 모드의 경우 각 브라우저마다 문서를 나타내는 방식이 다르기 때문에 크로스 브라우징 이슈가 훨씬 심해지게 된다. DOCTYPE 선언 X: 쿼크 모드로 렌더링 → 브라우저마다 다른 결과물 출력 DOCTYPE 선언 O: 표준 모드로 렌더링 → 브라우저별로 같은 레이아웃 결과물 출력 2. DTD (Document Type Definition) DTD(Document Type Definition)란 문서 형식을 정의해놓은 것으로 DOCTYPE을 명시할 때 사용..

→2022.02.04

elice/study

[CS] CSS와 JS 애니메이션의 차이점

1. CSS 애니메이션 vs JS 애니메이션 웹사이트에 애니메이션 효과를 부여할 때 CSS의 transiton / animation 속성을 사용할 수 있고, JS의 setInterval() / requestAnimationFrame() 을 사용할 수 있다. 하지만 각각을 사용할 때의 특징이 다르고 장단점이 있기 때문에 어떤 차이가 있는지 알아두는 것이 좋다. 기술면접에도 나온적이 있다. 2. CSS 애니메이션 일반적으로, 마우스를 올렸을 때 혹은 메뉴 버튼의 전환과 같은 간단하게 처리하는 애니메이션의 경우 CSS로 처리한다. 예를 들어, 200 크기의 정사각형을 왼쪽 위에서 오른쪽 아래로 350px 움직이게 하는 애니메이션을 구현한다고 하면, transform의 translate를 사용해서 구현할 수 있..

→2022.02.04

elice/study

[CS] CI와 CD

1. CI (Continuous Integration, 지속적 통합) CI는 빌드와 테스트를 자동화해서 공유 저장소에 병합시키는 프로세스를 뜻한다. git과 같은 버전관리 시스템을 사용할 때, 여러명의 개발자가 하나의 공유 저장소를 사용하는 경우가 많다. 이렇게 되면 새로운 코드의 변경 사항이 저장소에 통합되지 않을 경우 서로 충돌할 수 있다. 따라서 빌드/테스트 자동화부터 코드의 일관성(Consistency)을 제공하기 때문에 지속적으로 통합한다는 용어를 사용한다는 것이다. 즉, 어플리케이션의 새로운 코드 변경 사항이 정기적으로 빌드 및 테스트되어 공유 레포지토리에 통합되는 것을 의미한다. CI의 핵심 목표는 버그를 신속하게 찾아 해결하고, 소프트웨어의 품질을 개선하고, 새로운 업데이트의 검증 및 릴리..

→2022.02.01

elice/study

[CS] 모듈 번들러와 트랜스파일러

1. 모듈 번들러(Module bundler) 1-1. 모듈(Module) 모듈은 여러 기능들에 관한 코드들이 한데 모여있는 파일로서 다음과 같은 용도로 사용된다. 유지보수성 기능들이 모듈화가 잘 되어 있다면, 의존성을 그만큼 줄일 수 있기 때문에 어떤 기능을 개선한다거나 수정할 때 편하게 할 수 있다. 네임스페이스화 자바스크립트에서 전역변수는 전역공간을 가지기 때문에 코드가 길어지다 보면 네임이 겹치는 경우가 발생한다. 이 때 모듈화를 하면, 각 모듈만의 네임스페이스를 가지기 때문에 중복되는 변수를 줄일 수 있다. 재사용성 똑같은 코드를 반복하여 사용하지 않고 모듈로 분리시켜서 재사용할 수 있다. 1-2. 모듈 번들러(Module bundler) 현대의 프론트엔드 개발은 모듈단위로 파일을 엮어서 개발하..

→2022.02.01

elice/study

[CS] BOM과 DOM

1. BOM (Browser Object Model) 브라우저의 창이나 프레임을 프로그래밍적으로 제어할 수 있게 해주는 객체모델이다. 이를 통해서 브라우저의 새 창을 열거나 다른 문서로 이동하는 등의 기능을 실행시킬 수 있다. 전역객체로 window가 있으며, 하위 객체들로 location, navigator, document, screen, history가 포함되어 있다. 2. DOM (Document Object Model) 웹페이지를 프로그래밍적으로 제어할 수 있게 해주는 객체모델이다. 최상위 인터페이스로 Node가 있고, 아래 이미지와 같은 구조로 나타나게 된다. 이 때, 단순한 엘리먼트 뿐만 아니라 텍스트나 주석 등도 DOM 트리에 포함되는 것을 알 수 있다. DOM을 다루기 위해서는 getEl..

→2022.01.29

elice/study

[CS] 자바스크립트 엔진이 코드를 실행하는 과정

자바스크립트를 실행하기 위해서는 자바스크립트 엔진이 필요하고, 웹 브라우저는 자바스크립트 엔진을 내장하고 있다. 브라우저마다 엔진의 종류가 다르지만, 코드를 실행하는 방식은 비슷하다. (V8, SpiderMonkey, Javascript core 등의 구현이 각각 다르다.) 1. 소스코드를 만나면 파싱하여 AST(Abstract Syntax Tree)로 변환한다. 2. 인터프리터(Interpreter)는 AST를 기반으로 바이트코드(Bytecode)를 생성한다. 3. 인터프리터가 바이트코드를 실행할 때, 자주 사용되는 함수 및 타입 정보 등이 있는 프로파일링 데이터(Profiling data)와 같이 최적화 컴파일러(Optimizing compiler)에게 보낸다. 4. 최적화 컴파일러는 프로파일링 데이..

→2022.01.29

elice/study

[CS] 브라우저의 렌더링 원리

렌더링이란 HTML, CSS, JavaScript 등 개발자가 작성한 문서가 브라우저에 출력되는 과정을 말한다. 브라우저가 화면에 나타나는 요소를 렌더링 할 때, 웹킷(Webkit)이나 게코(Gecko) 등과 같은 렌더링 엔진을 사용한다. 렌더링 엔진이 HTML, CSS, JavaScript로 렌더링할 때 CRP(Critical Rendering Path) 라는 프로세스를 사용하며, 다음 단계들로 이루어진다. HTML 파싱 후, DOM(Document Object Model) 트리 구축 파싱(Parsing) : 서버로부터 전송받은 문서의 문자열을 브라우저가 이해할 수 있는 구조로 변환하는 과정 CSS 파싱 후, CSSOM(CSS Object Model) 트리 구축 JavaScript 실행 이 때, HTM..

→2022.01.27

티스토리툴바