충청 ICT취창업 역량강화프로그램 개발일지(10/19)

- 클래스(빵틀)-찍어내서-객체(변수가 메모리 할당,태어남)되고,
상식선에서 생각하고 상속은 즉, 자식이 부모를 닮는 것으로 메모리에 복사해서 다른 것을 본인 것으로 정의도 가능하다. 재사용성의 특징도 가지고 있다.
프로토타입에서는 메모리에 있는 객체를 복사해서 상속 객체를 만든다. 자바에서는 클래스에서 찍어내기 때문에, 일단 프로그램이 돌아가면, 재정의 안되는데, 프로토타입에서는 실시간으로 재정의(신규 변수 할당) 가능하다. 

 

________________________________________________________________________________________________

 

이번에는 리액트를 다운받아보려한다,, 그러려면 node. js가 필요하는데 이미 나는 node.js를 따로 공부하고 있어서 

node.js를 따로 다운로드 하지 않아도 되었다. CMB에 들어가서 리액트를 생성하는 코드를 아래처럼 입력하였다. 

 

 

 

그리고 이어서 npm start를 vscode 키고 터미널에 입력하였더니,

 

 

이 창이 뜨면서 성공적으로 수행되었따고 한다!!

그리고 잠시후,

 

 

인터넷 창에 이러한 화면이 나왔다!

React는 사용자 인터페이스를 구축하기 위한 선언적이고 효율적이며 유연한 JavaScript 라이브러리다. “컴포넌트”라고 불리는 작고 고립된 코드의 파편을 이용하여 복잡한 UI를 구성하도록 돕는다.

________________________________________________________________________________________________

 

 

hello, world는 그래도 꽤 해봐서 그렇게 신기하진 않았는데!!

 

 

 

시간이 실시간 나오는 건 신기했다 ㅋㅋㅋ 자바스크립트 공부했을때 잠깐 배웠던 거긴 한데 실제로 이런식으로 응용돼서 사용되는 건 처음으로 봐서 그런 것 같다! 다음에 한번 활용해봐야겠다.

 

________________________________________________________________________________________________

 

아래의 코드는 초기 코드다!!

 

초기 코드

 

초기 코드는 제작할 틱택토의 기본 틀이다. 

위 사진에 있는 코드를 살펴보면, 세 가지(Square, Board Game)의  React 컴포넌트를 확인할 수 있다.

Square 컴포넌트는 <button>을 렌더링하고 Board는 사각형 9개를 렌더링한다. Game 컴포넌트는 게임판을 렌더링하며 나중에 수정할 자리 표시자 값을 가지고 있어 현재로써 사용자와 상호작용하는 컴포넌트가 없다.

 

이 초기코드부터 시작해 props를 통해 데이터를 전달하고 어떠한 것을 기억하기 위해 state를 사용하면서 사용자와 상호작용하는 컴포넌트를 만든다.

 

________________________________________________________________________________________________

 

오늘 배운 내용을 조금 정리 해보야겠다,,

 

 

jsx?

const element = <h1>Hello, world!</h1>;

이 것은 자바스크립트의 문법 확장인  JSX이다. JSX는 템플릿 언어처럼 보일 수 있지만, 자바스크립트를 기반으로 하고 있다. JSX는 React “요소”를 만듭니다.

 

React는 렌더링 로직이 다른 UI 로직과 본질적으로 결합되어 있다는 사실, 이벤트 처리 방법, 시간에 따른 상태 변경 방법 및 데이터 표시 준비 방법을 포함하고 있다. React는 별도의 파일에 마크업과 로직을 넣어 기술 을 인위적으로 분리하는 대신, 둘 다 포함하는 “컴포넌트”라고 부르는 느슨하게 연결된 유닛으로 관심사를 분리한다.

React는 JSX 사용을 필수로 하지 않는다. 하지만 대부분의 사람들은 자바스크립트 코드 내부의 UI로 작업할 때 시각적으로 더 도움된다고 생각한다. 또한 React가 보다 도움이 되는 에러 및 경고 메시지를 표시할 수 있다.

 

JSX 안에 자바스크립트 표현식을 중괄호로 묶어서 포함시킬 수 있다.

 

 

속성에 따옴표를 이용해 문자열 리터럴을 정의할 수 있고,

 

const element = <div tabIndex="0"></div>

속성에 중괄호를 이용해 자바스크립트 표현식을 포함시킬 수 있다.

 

const element = <img src={user.avatarUrl}></img>;

 

 

속성에서 자바스크립트 표현식을 포함시킬 때 중괄호를 따옴표로 묶지 않아야 한다. 따옴표 (문자열 값인 경우) 또는 중괄호 (표현식인 경우) 중 하나를 사용해야 하며, 둘 다 같은 속성에 사용할 수 있는 것은 아니다.

 

JSX는 HTML보다는 자바스크립트에 가깝기 때문에, React DOM은 HTML 속성 이름 대신 camelCase 속성 이름 컨벤션을사용한다. JSX에 문자열 대신 함수를 전달합니다.

 

예를 들어 HTML에서 이벤트를 넣을 때,

<button onclick="activateLasers()">

  Activate Lasers

</button>

위 예제는 React에서는 조금 다르다.

<button onClick={activateLasers}>

  Activate Lasers

</button>

 

 

혹시라도 태그가 비어있다면, XML 처럼 /> 를 이용해 닫아주어야 한다.

const element = <img src={user.avatarUrl} />;

 

JSX 태그는 또한 자식을 가질 수 있다.

const element = (

  <div>

    <h1>Hello!</h1>

    <h2>Good to see you here.</h2>

  </div>

);

 

________________________________________________________________________________________________

 

다음으로 props에 대해 간략히 정리 해보겠다,,

  Props? 

props(property)는 상위 컴포넌트가 하위 컴포넌트에 값을 전달할 때 사용하는 속성이고 상위 컴포넌트가 하위 컴포넌트에 값을 전달하기 때문에  단방향 데이터 흐름을 갖는다. 부모 컴포넌트는 수정 가능하지만, 자식 컴포넌트는 읽기만 가능하다. 

 

props 를 사용하려면 두 단계가 필요하다.

첫번째, 상위 컴포넌트에서 Props를 지정하고 두번째, 하위 컴포넌트에서 받은 Props값을 렌더링해야 한다. 

이 때, 상위 컴포넌트에서 하위 컴포넌트로 프로퍼티가 전달되는데 이것이 바로 "단방향 데이터 흐름" 라고 한다. 

 

 

________________________________________________________________________________________________

 

그리고 디버깅에 대해 간략하게 배웠는데 진짜 잘 안보인다,, 그래두 보다보면 실력이 점차 나아질 테니 걱정말고 뭐든 시도해보자ㅏㅏ 파이팅 ~ 오늘까지 딱 이론 강의를 들었는데 실습과 같이 하는게 아니라 집중이 잘 안될때도 있었지만,, 그래도 모르는 것들도 새로 알게 된 부분도 있었고 알고 있는 부분도 복기 되는 시간이었던 것 같다! props 같은 부분은 첨에 봤을때 그저 전에 한번이라도 봤을 거라고 생각되어 당연히 알고 있다고 생각했었는데, 설명해주시는 것도 듣고 검색해서 확인해보니 내가 생각했던 개념과 전혀 달랐다.