해당 글의 내용은 poiemaweb 을 읽고 요약하여 재정리한 내용입니다. 이번에는 JavaScript lesson 7~9에 해당되는 연산자, 제어문, 타입 변환에 대해 알아보겠습니다. 연산자(Operator) 표현식과 연산자 표현식(expression)은 리터럴, 식별자, 연산자, 함수 호출 등의 조합을 말합니다. // 리터럴 표현식 10 // 식별자 표현식 sum // 연산자 표현식 10 + 20 // 함수/메소드 호출 표현식 square() 결국 하나의 값이 되므로 표현식과 값은 동등한 관계, 즉 동치(Equivalent)가 됩니다. 연산자 표현식은 표현식을 결합해 새로운 값을 만들어 내는 가장 일반적인 표현식 입니다. 이처럼 표현식은 다른 표현식의 일부가 되어 새로운 값을 만들어낼 수 있습니다. ..
해당 글의 내용은 poiemaweb 을 읽고 요약하여 재정리한 내용입니다. 이번에는 JavaScript lesson 5, 6에 해당되는 자바스크립트의 기본 문법, 데이터 타입과 변수에 대해 알아보겠습니다. 5. 자바스크립트의 기본 문법(Syntax Basics) 변수(Variable) 변수는 값(value)을 할당(저장)하고, 할당된 값을 참조하기 위해 사용됩니다. 유지(캐싱)할 필요가 있는 값은 변수에 담아 사용합니다. 또, 위치(주소)를 기억하는 저장소인데 여기서 위치란 메모리 상의 주소를 의미합니다. 즉, 메모리 주소(Memory address)에 접근하기 위해 사람이 이해할 수 있는 언어로 지정한 식별자(identifier)입니다. 변수를 선언할 때 var 키워드를 사용하며, 할당 연산자 = 은 ..
해당 글의 내용은 poiemaweb 을 읽고 요약하여 재정리한 내용입니다. 이번에는 JavaScript lesson 1~4에 해당되는 프로그래밍 기본 개념, 자바스크립트란?, 개발 환경, 브라우저 동작 원리에 대해 알아보겠습니다. 1. 기본 개념과 동작 원리 이해의 중요성(Programming) 프로그래밍이란? 기계가 실행할 수 있는 정도로 정확하고 상세하게 요구사항을 설명하는 작업이며, 작업물이 코드입니다. 컴퓨터와 사람은 사고와 인지의 방식이 다른데 이 때 필요한 것이 컴퓨터의 관점으로 사고를 하는 Computational thinking 입니다. 이 때 논리적, 수학적 사고가 필요하게 되고, 해결 과제를 작은 단위로 분해하고 패턴화하여 추출하며 프로그래밍 내에서 사용될 모든 개념은 평가 가능하도록 ..
해당 글의 내용은 poiemaweb 을 읽고 요약하여 재정리한 내용입니다. 이번에는 CSS3 lesson 19~22의 내용인 반응형 레이아웃, flexbox, 수평/수직 중앙 정렬, image 요소 아래에 패딩된 여분의 공간 제거하기에 대해 알아보겠습니다. 19. 반응형 레이아웃(Responsive Web Design) Responsive Web Design 개요 사용자가 어떤 디바이스로 웹사이트를 방문할 지 알 수 없기 때문에 layout은 방문자의 화면 해상도를 고려해야 합니다. 반응형 웹 디자인은 화면 해상도에 따라 가로폭이나 배치를 변경해 가독성을 높여줍니다. viewport meta tag viewport는 웹페이지의 가시영역을 의미하며 디바이스에 따라 차이가 있습니다. 이를 이용하여 디바이스의..
해당 글의 내용은 poiemaweb 을 읽고 요약하여 재정리한 내용입니다. 이번에는 CSS3 lesson 15~18의 내용인 애니메이션, 트랜스 폼, 웹 폰트, 레이아웃에 대해 알아보겠습니다. 15. 애니메이션(Animation) HTML 요소에 적용되는 CSS 스타일을 다른 CSS 스타일로 부드럽게 변화시킵니다. 애니메이션을 나타내는 CSS 스타일과 애니메이션의 sequence를 나타내는 복수의 키프레임(@keyframes) 들로 이루어집니다. CSS 애니메이션을 사용하면 기존의 JavaScript 기반 애니메이션 실행과 비교하여 더 나은 렌더링 성능을 제공한다고 알려져 있습니다. 그러나 경우에 따라 세밀한 제어를 위해서는 JavaScript를 사용하는 것이 바람직합니다. @keyframes CSS 애..
저는 현재 프론트엔드 개발자를 준비하면서 여러 프로젝트를 해봤는데, 그 때마다 어떤 언어와 프레임워크를 써야 하는지 제대로 생각하지 않고 썼던 기억이 납니다. 그래서 오늘은 프론트엔드에서 주로 쓰이는 언어와 프레임워크들을 비교해서 정리해보려고 합니다. 주로 사용하는 언어 HTML, CSS, JavaScript는 웹 개발을 배우기 시작할 때 프론트엔드에서 기초로 배우기도 하고 빠질 수 없는 대표적인 언어 3대장 입니다. 하지만 요즘 채용공고를 보면 JavaScript 뿐만 아니라 TypeScript를 사용해본 경험이 있는 사람을 뽑는 동향이 보입니다. 그렇다면 두 언어의 차이는 과연 무엇일까요? JavaScript vs TypeScript JavaScript는 동적 타입 언어로 타입을 명시적으로 선언하지 ..
해당 글의 내용은 poiemaweb 을 읽고 요약하여 재정리한 내용입니다. 이번에는 CSS3 lesson 11~14의 내용인 벤더 프리픽스, shadow, gradient, transition에 대해 알아보겠습니다. 11. 벤더 프리픽스(Vendor Prefix) CSS3 표준으로 확정되기 이전 or 브라우저 개발사가 실험적으로 제공하는 기능을 사용하기 위해서는 벤더 프리픽스를 사용해야 합니다. 구형 브라우저를 지원하기 위하여 벤더 프리픽스를 사용해야 할 필요가 있습니다. Can I use?에서 브라우저별 CSS 지원 정보를 제공하고 있으니 참고 바랍니다. Prefix Free 사이트에서 라이브러리를 다운로드하고 include 하기만 하면 이 후에는 벤더 프리픽스없이 모든 CSS를 사용할 수 있습니다. ..
해당 글의 내용은 poiemaweb 을 읽고 요약하여 재정리한 내용입니다. 이번에는 CSS3 lesson 8~10의 내용인 position, float, 상속, 캐스캐이딩에 대해 알아보겠습니다. 8. 요소의 위치 정의 (Position) position 프로퍼티 요소의 위치를 정의합니다. top, bottom, left, right 와 함께 사용됩니다. static (기본 위치) position 프로퍼티의 기본 값이며 좌표 프로퍼티는 같이 사용할 수 없습니다. 위 → 아래, 왼쪽 → 오른쪽 순서에 따라 배치됩니다. 부모 요소 내에 자식 요소로서 존재할 때는 부모 요소의 위치를 기준으로 배치됩니다. relative (상대 위치) 기본 위치를 기준으로 좌표 프로퍼티를 사용해 위치를 이동시킵니다. static..
해당 글의 내용은 poiemaweb 을 읽고 요약하여 재정리한 내용입니다. 이번에는 CSS3 lesson 6, 7의 내용인 백그라운드와 폰트 & 텍스트에 대해 알아보겠습니다. 6. Background Background 관련 프로퍼티는 해당 요소의 배경으로 이미지 또는 색상을 정의합니다. background-image 프로퍼티 요소에 배경 이미지를 지정합니다. background-repeat 프로퍼티 배경 이미지의 반복을 지정하며 수직, 수평 또는 수직과 수평 모두의 반복을 지정할 수 있습니다. 설정된 이미지의 크기 < 화면의 경우, 자동으로 이미지가 반복 출력되어 화면을 채우게 됩니다. 이는 기본값이 repeat 으로 되어있기 때문입니다. x축으로만 배경 이미지를 반복할 경우에는 repeat-x, y축..
