분류 전체보기
브라우저 동작 원리
브라우저 동작 원리 구글의 Chrome V8 자바스크립트 엔진으로 빌드된 자바스크립트 런타임 환경인 Node.js의 등장으로 자바스크립트는 웹 브라우저를 벗어나 서버 사이드 어플리케이션 개발에서도 사용되는 범용 개발 언어가 되었다. 하지만 자바스크립트가 가장 많이 사용되는 분야는 역시 웹 브라우저 환경에서 동작하는 웹 페이지/ 어플리케이션이다. 대부분의 프로그래밍 언어는 운영체제(O/S) 위에서 실행되지만 웹 어플리케이션의 자바스크립트는 브라우저에서 HTML, CSS와 함께 실행된다. 따라서 브라우저 환경을 고려할 때 보다 효율적인 자바스크립트 프로그래밍이 가능하다. 브라우저의 핵심 기능은 사용자가 참고하고자 하는 웹페이지를 서버에 요청(Request)하고 서버의 응답(Response)을 받아 브라우저에..
CSS Variables
요구사항 css에서 변수를 사용하여 값을 설정 해보고 javascript로 css를 동적으로 컨트롤 해보자. 기본 소스코드 Update CSS Variables with JS Spacing: Blur: Base Color 처리과정 & 코드분석 css에서 :root 가상클래스에 변수를 추가해 주었다. (:root 에 추가해주는 것이 모든 요소에 변수를 정의하는 데에 도움이 된다.) 커스텀 속성 정의 부분 (--* 패밀리) :root { --base: #ffc600; --spacing: 10px; --blur: 10px; } img태그에 선언한 변수들을 이용해서 값을 설정함 캐스케이딩 변수 사용 부분 (var()함수) img { padding: var(--spacing); background: var(--b..
CSS + JS Clock 정리
요구 사항 CSS 와 JavaScript를 이용하여 시,분,초 를 각각 동적으로 움직이게 구현한다. 기본 소스코드 html { background: #018DED url(http://unsplash.it/1500/1000?image=881&blur=5); background-size: cover; font-family: 'helvetica neue'; text-align: center; font-size: 10px; } body { margin: 0; font-size: 2rem; display: flex; flex: 1; min-height: 100vh; align-items: center; } .clock { width: 30rem; height: 30rem; border: 20px s..
오늘의 React 정리
키워드 npm npx 설치명령어 실행명령어 디렉터리 구조 Coding, Run, Deploy Component 1. npm Node.js를 이용해서 만들어진 여러 앱들이 있는데 그런 앱들을 명령어 환경에서 손쉽게 설치할 수 있도록 도와주는 도구 쉽게 말해 node.js 계의 앱 스토어 또는 구글플레이 같은 역할을 하는 소프트웨어이다. npm을 사용하려면 node.js 홈페이지에서 node.js를 설치하면 된다. 버전은 LTS(안전한 버전) / Current(최신버전) 으로 나뉜다. ## 1.1 npx npm을 설치하면 npx도 설치되는데 npx는 설치하고자 하는 소프트웨어를 일회용으로 다운로드 받은 다음에 실행한 후 지운다.npx명령어를 사용하면 장점은 ? 소프트웨어를 항상 최신 버전으로 사용할 수 있게..
React의 필요성과 특징들
1. 리액트의 필요성 리액트가 없다면? 리액트가 없다면 예를 들어 코드의 길이가 천 줄 만 줄 된다 가정했을 때 한눈에 코드가 들어오지 않고 인지능력을 벗어나기 때문에 고통받는 상황이 되는데 이러한 코드 뭉텅이를 안 보이게 다른 곳에서 작성을 해두고 같은 이름의 의미를 갖는 컴포넌트를 작성하게 된다면 코드상에선 쉽게 보이고 실제로 웹페이지에서 표시될 때는 코드가 보이는 기술이 리액트의 필요성이다. 리액트는 마치 정리 정돈의 기술과 같다 예를 들어 물건이 널브러져 있으면 캐비닛 같은 곳에 탁탁 정리시키고 이름만 붙여 이름만 신경 쓰는 것과 같이 컴포넌트의 이름만 집중함으로써 복잡함을 획기적으로 최소화시킴 그렇단 건 지금보다 조금 더 복잡도에 도전할 수 있는 여지가 생긴다 작성한 컴포넌트를 (패키지/소프트웨..
JavaScript 값, 식, 문,Primitive Type & Reference Type
목차 Variable Expression Statement Primitive Type & Reference Type 참고자료 Variable : 변수 식의 결과를 잡아두거나 이용하거나 꺼내쓰길 바랄 때 사용하는 것이 변수다 식은 값으로 귀결되고 변수는 값을 넣을 수 있다. 중요 용어: assignment : 할당 assignment 특징: 자바스크립트에서 할당은 우항의 값으로 귀결된다. Quiz : Variable에 Statement를 assignment 할 수 있을까 ? answer : No! 이유는 Statement(문) 이란건 컴파일러가 '힌트' 를 받아서 해석한 다음에 사라지기 때문에 변수에 넣을 수 없다. 변수에 들어갈 수 있는 것은 오직 'Expression(식)'..
Array의 여러가지(filter, map, reduce, sort, ...) 메소드를 활용해보자.
진행과정 const inventors = [ { first: 'Albert', last: 'Einstein', year: 1879, passed: 1955 }, { first: 'Isaac', last: 'Newton', year: 1643, passed: 1727 }, { first: 'Galileo', last: 'Galilei', year: 1564, passed: 1642 }, { first: 'Marie', last: 'Curie', year: 1867, passed: 1934 }, { first: 'Johannes', last: 'Kepler', year: 1571, passed: 1630 }, { first: 'Nicolaus', last: 'Copernicus', year: 1473, pa..
접근성을 고려한 UI 제작
Part1. 웹 접근성과 웹표준 웹 접근성 : 웹사이트에서 제공하는 정보를 차별 및 제한없이 동등하게 이용할 수 있도록 보장하는 것 접근성은 장애인과 밀접한 관계가 있다. 장애인 및 고령자를 포함한 모든사람 다양한 platform 및 Device와 웹 브라우저 등 모든 환경 평등(Equality) , 공평(Equity) 차이 평등은 사용자를 고려하지않고 다 똑같이 적용한 것이지만 공평은 사용자에 따라 배려를 하는 것 공평하게 웹 접근성이 되어야 함 계단에 눈을 치울때 계단과 경사로가 있는데 계단부터 치우는 것 보다 경사로를 치우는 것을 먼저 생각한다면 비장애인과 장애인이 모두 사용할 수 있다. 계단부터 치우면 경사로가 꽁꽁 얼어서 손을 대지못 할 수 있다. 웹개발을 할때 장애를 고민하는 것은 선택이 아니..