잇스쿨

샘플 코드 want-itscool Hello~ Frontend World HTML CSS JavaScript Subject1 HTML is HyperText Markup Language. React를 왜 쓰는지 이해하기 위해서는 우선 public/index.html에 위의 샘플 코드가 있다고 가정하여 설명할 수 있습니다. 시맨틱 마크업에 대해서 알고 있다면 위의 소스 코드가 어떤 구조로 만들어져 있는지 쉽게 이해할 수 있습니다. 이제 위의 코드를 컴포넌트화하여 React를 왜 사용하는지를 알아보겠습니다. App.js import React, { Component } from 'react'; import './App.css'; class Header extends Component { render() { ..

프로젝트 구성 react-app 프로젝트 구성은 위의 그림과 같습니다. index.html id가 root인 태그 안에 UI 컴포넌트를 정의하게 된다. 꼭 id가 root여야하는건 아니며, 진입 파일에서 id는 변경 가능하다. App.js UI 컴포넌트에 해당하는 코드가 작성된 파일 import React, { Component } from 'react'; import logo from './logo.svg'; import './App.css'; class App extends Component { render() { return( Edit src/App.js and save to reload. Learn React ); } } export default App; // 작성한 컴포넌트를 다른 곳에서 불러..

1. vscode를 설치 다양한 에디터 프로그램들이 있지만 터미널을 사용해 명령어로 제어하기 위해 vscode를 선택하였다. https://visualstudio.microsoft.com/ko/free-developer-offers/ 무료 개발자 소프트웨어 및 서비스 - Visual Studio 무료로 제공되는 제품: Visual Studio Community, Visual Studio Code, VSTS 및 Dev Essentials visualstudio.microsoft.com 위의 링크에서 Visual Studio Code를 다운로드 받아 설치한다. 2. 터미널 창 실행 처음 vscode를 설치하면 터미널 창이 보이지 않아 당황할 수 있는데, 단축키 ctrl+` 를 눌러 통합터미널 창을 열어준다...

node.js 설치 Webpack, Babel 등과 같은 사용 도구들이 자바스크립트 런타임인 node.js 를 기반으로 만들어졌다. 도구들을 사용하기 위해서 Node.js 를 설치해야 한다. https://nodejs.org/en/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 위의 사이트로 이동하면 아래와 같이 다운로드 받을 수 있는 아래와 같은 화면이 보인다. LTS는 안정화된 버전이고 Current는 현재 최신의 버전이다. 개인의 취향에 따라 선택하여 파일을 다운로드한 후 설치하면 된다. 설치를 제대로 했는지 확인하기 위해서는 Window 기준으로 cmd 창을 실행하여, nmp -v..

정의 페이스북, 인스타그램에서 사용자 경험을 향상하기 위해 만든 자바스크립트 라이브러리입니다. = 사용자 인터페이스 라이브러리 (프레임워크가 아니다!) 지속해서 데이터가 변화하는 대규모 애플리케이션을 구축하기 위해 만들어졌습니다. 장점 1. 가독성 UI 컴포넌트를 만들어 가독성을 높일 수 있습니다. 2. 재사용성 UI 컴포넌트의 캡슐화를 통한 재사용이 가능합니다. 3. 유지보수 기존 코드를 모두 바꿀 필요 없이 수정이 필요한 UI 컴포넌트만을 수정하여 유지보수에 뛰어납니다. 즉, React는 UI 컴포넌트라는 개념에 집중되어 있는 라이브러리입니다. 리액트는 뷰만 관리하고, 나머지 기능은 3rd Party 라이브러리가 담당하게 함으로서, 다양한 시도를 할 수 있습니다. [3rd Party 라이브러리] Ro..

Summary 호출 문자열을 소문자로 변환하여 반환 원래의 호출 문자열(str)에 영향을 주지 않는다. 모든 브라우저에서 지원한다. JavaScript 1.0 부터 지원한다. 오직 영문자에 대해서만 유효하게 동작한다. 대소문자 구분이 없는 한글 또는 특수기호 등은 해당 메서드를 적용해도 변화가 없다. ↔ toUpperCase()는 대문자로 변환 Syntex str.toLowerCase() Return 호출 문자열을 소문자로 변환한 새로운 문자열을 반환 Ex var str = "Happy Birthday"; console.log(str.toLowerCase()); // happy birthday console.log("HAPPY BIRTHDAY".toLowerCase()); // happy birthday

calc() : 괄호 안의 식을 계산한 결과를 속성값으로 사용하게 해주는 함수 The calc() Function Create a div that stretches across the window, with a 50px gap between both sides of the div and the edges of the window: Some text... 위의 코드 예시의 width: calc(100% - 100px); 처럼 css에서 정의하면 브라우저 크기가 줄어들 때마다 해당 함수가 자동적으로 계산한 값을 width에 적용 사용법 사칙 연산이 가능 (곱셈은 *, 나눗셈 / 기호 사용) 곱셈, 나눗셈은 공백이 필요x 덧셈, 뺄셈의 좌우에는 공백이 필요 (ex. 100% - 200px) 왼쪽에서 오른쪽으로..

text-overflow : 지정한 영역을 넘쳐 텍스트가 넘어갈 경우 어떻게 처리할 것인지 지정하는 속성 * 주의 ) 아래의 두가지 조건을 모두 충족할 경우에만 적용 1. overflow의 속성값이 hidden, scroll, auto 일 경우 (visible은 제외) 2. white-space:nowrap 3. width 또는 height가 고정적 속성값 clip | ellipsis | string | initial | inherit clip : 기본값, 텍스트 자름 ellipsis : 잘린 텍스트를 … 기호로 표현 가능 string : 잘린 텍스트를 지정한 문자열로 표시 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod t..

clip clip 속성은 무엇인가를 깎는다는 어원적 의미를 떠올리면 쉬움 정의 clip 1. 핀, 클립 2. (옷에 꽂는, 보석으로 장식한) 핀 3. (무엇을 짧게) 깎음 즉, clip 속성은 요소의 특정 부분만 나오도록 지정 요소의 크기가 변하는 것이 아닌, 포토샵의 mask 기능처럼 선택한 영역만 보여줄 수 있는 것 기본값 : auto 상속 : no 퍼센테이지 : 지정불가 애니메이션 : Yes 버전 : CSS2 문법 clip: auto | shape | initial | inherit auto : 기본(default) 값 clip을 적용한 대상의 원래 크기와 동일하게 적용 clip이 적용 안된 상태와 동일 shape : rect(top, right, bottom, left)형식으로 지정 이는 네변에서..

상태 선택자 : 입력 양식의 상태를 선택할 때 사용하는 선택자 상태 선택자 설명 CSS Level ex :cheked 체크 상태의 input 태그를 선택 CSS3 input:checked :focus 포커스가 있는 input 태그를 선택 CSS2 input:focus :enabled 사용 가능한 input 태그를 선택 CSS3 input:enabled :disabled 사용 불가능한 input 태그를 선택 CSS3 input:disabled :cheked Male Female I have a bike I have a car :focus The width Property Set the width of the input field to 100 pixels. However, when the input fiel..