전체 글

전체 글

    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, ...) 메소드를 활용해보자.

    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..