BE전문가 프로젝트

불변성Element 생성 후에는 Children이나 attributes를 바꿀 수 없다.한번 생성된 후에는 변경이 불가능하다.따라서 변경을 하고 싶다면 새로운 element를 생성 후 변경 후 바꿔야 한다. Elements 렌더링 하기element를 생성 후 보여주기 위해서는 렌더링이라는 과정을 거쳐야 한다.const element = 안녕, 리엑트!ReactDOM.render(element, document.getElementById('root'));element를 생성 후 root div에 렌더링하는 과정 렌더링된 Elements  업데이트 하기function tick() { const elements =( 안녕, 리엑트! 현재 시간: {ne..

react에서 element란 리액트 앱을 구성하는 가장 작은 블록들이다.기존에 우리가 자주사용하던 element는 react의 element가 아닌 DOM Element 이다.React Element와 DOM element의 차이Virtual DOM에 존재하는 element가 react ElementBrowser DOM에 존재하는 element가 Dom Element따라서 react element는 dom element의 가상 표현이라고 볼 수 있다. Elements의 생김새React Elements는 자바스크립트 객체 형태로 존재한다.function Button(props) { return { {props.children} ..

JAX는 JavaScript의 확장 버전이기 때문에 모든 JavaScript의 문법을 지원한다. const name = '홍길동'; const element = 내 이름은, {name}; ReactDOM.render( element, document.getElementById('root') ); 위에서 볼 수 있드시 javaScript와 html이 섞인 형태로 작성된다. html코드를 사용하다 JavaScript 코드를 사용하고 싶다면 중괄호 안에 {javaScript코드}를 넣어주면 된다. function formatUserInfo(user) { return "내 이름은 " + user.name + ", 나이는 " + user.age; } const user = ( name: '홍길동', age: 18..

JSX란? A syntsx extension to javaScript로 자바스크립트의 확장 문법을 의미한다. JavaScript와 XML 또는 HTML을 합친것이다. let dom = 안녕; JSX을 사용하는 이유 xml 또는 HTML 코드를 내부적으로 JavaScript로 변환하는 과정을 거치게 된다. 따라서 JSX로 코드를 작성하면 JavaScript로 변환된다는 것을 의미한다. createElement라는 함수가 jax에서 javaScript로 변환하는 역할을 담당한다. JAX로 작성한 코드 class Hello extends React.Component { reder() { return Hello {this.props.toWhat} } ReactDOM.render{ document.getEleme..

React란? 사용자 인터페이스(UI)를 만들기 위한 자바스크립트 라이브러리이다. 화면을 만들기 위한 기능에 대한 라이브러리이다. React를 사용해야 하는 이유 1. 빠른 업데이트와 렌더링 속도 페이지가 넘어갈 때 데이터를 불러오는 속도를 위해 React는 virtual DOM이라는 것을 사용한다. virtual DOM(Document Object Model)이란? 웹페이지를 정의하는 하나의 가상 객체를 의미한다. virtual DOM의 장점 기존의 방식을 사용하여 업데이트를 할 경우 DOM을 직접 수정하여 성능에 영향을 미치며 비용 또한 많이 든다. 반면 React는 DOM을 직접 수정하는 것이 아닌 업데이트할 내용을 찾아 최소한의 데이터만 바꿔준다. 2. 컴포넌트 구조 컴포넌트는 구성요소라는 장점을..

이전 포스팅에서 바이트 기반 스트림과 문자 기반 스트림에 대해서 알아봤다. 직접 사용할 수도 있지만 입출력의 성능을 향상 시키거나 데이터 출력의 형식을 지정하고 싶을 때 보조 스트림을 연결하여 사용할 수 있다. 보조 스트림은 문자 변환, 입출력 성능 향상, 기본 타입 입출력 등 여러 가지 편리한 기능을 제공해주는 스트림이다. 말 그대로 보조이기 때문에 자체적으로 입출력을 수행할 수 없으며 바이트 기반 입출력 스트림의 최상위 클래스인 InputStream, OutputSteam과 문자 기반 최상위 클래스인 Writer, Reader 등에 연결하여 입출력한다. 보조 스트림 연결 보조 스트림 연결은 보조스트림 생성할 때 자신이 연결될 스트림을 생성자의 매개값으로 제공하면 된다. InputStream is = ..

데이터는 스트(stream)을 통해 입력되거나 출력된다. 여기서 나오는 스트림이란 단일 방향으로 연속적으로 흘려가는 것을 의미한다. 키보드처럼 데이터가 프로그램에 도착하여 데이터를 입력받을 때는 입력 스트림을 사용하고, 반대로 모니터처럼 데이터가 프로그램으로 부터 출발하게 되면 출력 스트림을 사용해야한다. 구분 바이트 기반 스트림 문자 기반 스트림 그림, 멀티미디어 등의 바이너리 데이터 읽고 출력 문자 데이터 읽고 출력 입력 스트림 출력 스트림 입력 스트림 출력 스트림 최상위 클래스 InputStream OutputStream Reader Writer 하위 클래스 XXXInputStream XXXOutputStream XXXReader XXXWriter OutputStream(바이트 출력 스트림) 바이트..

이전 포스팅에서 스레드를 사용하기 위해 스레드.start() 메소드를 사용했다. 사실 start() 메소드를 호출한다고 해서 스레드가 곧바로 실행되는 것은 아니다. 실행 대기 상태가 되어 실행이 되기를 기다리는 상태가 된다. 운영체제에서는 실행대기 생태에 있는 스레드 중 하나를 선택하여 CPU가 run() 메소드를 실행하여 실행 상태(running)로 만든다. 상태 구분 내용 초기 상태 NEW 스레드 객체를 생성한 상태 실행 가능 RUNNABLE start()메서드로 스레드를 실행할 수 있는 상태 실행 중 RUNNING 실행가능한 스레드 중에서 스케줄러가 선택하여 스레드가 실행 중인 상태. CPU에 의해 코드가 한줄씩 실행된다. CPU는 n개의 스레드 중 1개밖에 처리할 수 없으며 n-1개의 스레드는 대..