본문 바로가기
분류 전체보기
 (410)
[리액트(React)] State, Lifecycle // State - Component의 변경 가능한 데이터 - 개발자가 직접 정의한다. - 렌더링이나 데이터 흐름에 사용되는 값만 포함해야 한다. > 불필요한 컴포넌트 렌더링 방지 - JavaScript 객체 - 함수형 컴포넌트, 클래스형 컴포넌트에서 모두 사용된다. import React from 'react'; const styles = { wrapper: { margin: 8, padding: 8, display: 'flex', flexDirection: 'row', border: '1px solid grey', borderRadius: 16, }, messageText: { color: 'black', fontSize: 16, }, }; class Notification extends React...
[리액트(React)] Component, Props // 컴포넌트, Component - 사용자 인터페이스를 구성하는 독립적이고 재사용 가능한 부분 - 여러 컴포넌트들을 조립하여 UI를 구성한다. - 컴포넌트명은 항상 대문자로 시작해야 한다. - 컴포넌트 함수에서는 항상 렌더링 가능한 값이 반환되어야 한다. - 컴포넌트 간의 연관성이 매우 높거나 반드시 함께 있어야만 작동하는 경우가 아니라면 별도의 컴포넌트는 별도의 파일에 저장하는 것이 좋다. ● 함수형 컴포넌트(Functional Components) function Greeting(props) { return ( {props.name}입니다. ); } ● 클래스형 컴포넌트(Class Components) class Greeting extends React.Component { render() { re..
[리액트(React)] Elements Rendering // Elements - 리액트 앱을 구성하는 가장 작은 단위 - 자바스크립트 객체 형태 - 사용자 인터페이스를 구성한다. - 한 번 생성되면 변경할 수 없다. // Elements Rendering - Elements를 통해 구성된 UI를 화면에 표시하는 과정 - Virtual DOM에 렌더링한 후 Browser DOM에 렌더링한다. > 최소한의 변경만 Browswer DOM에 반영할 수 있기 때문에 더 효율적! import React from 'react'; function Clock(props) { return ( 나무의 하루입니다. 현재 시간: {new Date().toLocaleTimeString()} ); } export default Clock; import React from 'react'..
[리액트(React)] JSX // JSX - A syntax extension to JavaScript > 자바스크립트 확장 문법 - JavaScript + XML / HTML const hi = Hello! - 간결한 코드 > 가독성 향상 - Injection Attacks를 방어할 수 있다. import React from 'react'; function Post(props) { return ( {`안녕하세요? ${props.name}입니다.`} {`${props.category} 공부 중입니다.`} ); } export default Post; import React from 'react'; import Post from './Post'; function Blog(props) { return ( ); } export defau..
React.js란? (개념, 설치 및 설정) // React - 웹 또는 네이티브 사용자 인터페이스를 위한 라이브러리 - 사용자 인터페이스 구축을 위한 자바스크립트 라이브러리 - 빠른 update를 위해 Virtual DOM 을 사용한다. - 컴포넌트의 조합으로 개발한다. - 재사용성을 높여 개발 기간을 단축할 수 있고 유지보수가 용이하다. - 오픈소스 (https://github.com/facebook/react) GitHub - facebook/react: The library for web and native user interfaces. The library for web and native user interfaces. Contribute to facebook/react development by creating an account on ..
[자바스크립트(JavaScript)] Builder 패턴 // Builder 패턴 - 복잡한 객체의 생성 과정을 단순화하는 디자인 패턴 - 가독성, 유지보수성을 높일 수 있다. - 객체가 여러 개의 매개변수를 가질 때 주로 사용한다.(3개 이상) - 단계 Builder 인터페이스를 정의하여 매개변수를 받아 정의한다. Builder 인터페이스를 구현하는 상세 클래스를 정의한다. 상세 클래스가 필요한 부분에서 Builder 인터페이스를 사용하여 객체를 생성한다. - Builder 인터페이스, 구현 클래스 export class playBuilder { duration(duration) { this.duration = duration; return this; } character(character) { this.character = character; return ..
[자바스크립트(JavaScript)] Audio // Audio - 자바스크립트에서 오디오를 사용할 수 있게 해주는 객체 - 생성 const 변수명 = new Audio('오디오 파일 주소'); - 메소드 play() : 오디오 재생 pause() : 오디오 일시정지 load() : 오디오 src 변경 후 재로딩 const sound = new Audio('경로1'); sound.play(); sound.pause(); sound.src = '경로2'; sound.load(); sound.play(); sound.pause();
[자바스크립트(JavaScript)] 정규식 (Test, Match) // Test - 주어진 문자열이 정규식에 일치하는지 확인하는 javaScript 메서드 - 문자열에서 주어진 정규식과 일치하는 부분이 있는지 결과를 Boolean으로 반환한다. - 정규식 객체에 적용된다. const regex = /^(aya|ye|woo|ma)+$/; console.log(regex.test('ayaya')); console.log(regex.test('ayawoo)); // Match - 문자열에서 정규식을 사용하여 패턴을 찾는 JavaScript 메서드 - 문자열에서 주어진 정규식과 일치하는 부분을 찾아 결과를 배열로 반환한다. (일치하는 부분이 없다면 null 반환) - 문자열 객체에 적용된다. // g(전역검색) - g 플래그가 있으면 문자열 전체의 결과를 반환하고, 없으면 첫..

티스토리툴바