Engineering_S/W & H/W

 설치 필요 버전정보 angular : 16.2.3 node : 18.18.0 1. angular 설치 - terminal을 이용하여 angular를 설치합니다. (node v18.18.0) $ npx @angular/cli@16.2.3 new copy 사진1) angular 셋팅 <!-- src/app/app.component.html --> <h1> Hello World! </h1> code1) html문서 작성 2. angular 실행 - terminal을 이용하여 angular를 실행합니다. (npm) $ npm start copy 사진2) angular서버 실행 사진3) Hello World GitHub Link :  https://github.com/Alex-Choi0/angular_helloWorld.git

 이제 React에 대한 기본적인 설명 및 데모를 하도록 하겠습니다. public폴더 안에 index.html 파일이 있습니다. 31번째 줄에 id가 root인 div가 있는데 실제적으로 코딩을 하면 위 div에 React내용이 들어가게 됩니다. 7번째 줄에 ReactDOM.render가 실제적으로 root가 id인 부분에 랜더링을 해서 React로 화면을 만드는 것입니다. 9번째줄에 <App />은 실제적으로 React로 코딩한 부분이 들어가게 됩니다.  물론 id가 root일 필요는 없습니다. 만약 다른id로 React를 랜더링 하고 싶다면 11번째 줄에 getElementById의 대상을 바꾸면 됩니다. 이제 App.js에 가서 코드를 수정하겠습니다. 7~20번째 줄까지 모두 지워줍니다. 이제 위 사진처럼 7번째 줄에 <h1>Hello World</h1>을 작성하고 저장합니다. npm start을 하면 Hello World가 가운데 브라우저 창에 생성된 것을 알수 있습니다. 다음은 읽지 않아도 되지만 다음 글을 빨리 따라가기 위해서 참고해 주셨으면 합니다. 삭제 파일 목록 - App.test.js, logo.svg, setupTests.js 그리고 App.js파일에 가서 'import logo from './logo.svg'; 지우기 이전 글 : React 설치법 이후 글 : React(Class) - 다른 compoment로 전달

안녕하세요 . 알렉스 입니다. 이번에는 자바스크립트를 처음 배우게 되서 글을 작성하게 되었습니다. 어느 프로그램 언어나 마찬가지로 'Hello World'를 작성해 보도록 하겠습니다. 그림1) 크롬 화면 일단 시작할때 빈 공백의 크롬화면을 시작합니다. 이때 가능하면 웹사이트를 통하지 않고 그냥 완전 빈 공간이 좋습니다. 그림2) 검사 선택 마우스를 우클릭 한 다음 검사를 누릅니다. 이후 목차에서 Console를 선택하시면 그림 3과 같은 화면이 출력이 됩니다. 빠른 방법으로 F12를 누르면 바로 Console화면으로 전환이 됩니다. 그림3) console로 작성 이제 console.log를 이용하여 문자를 출력하려고 한다. 출력하고자 하는 문자열은 'Hello World!'이다. 따라서 console.log(/*console에 출력할 내용 기입*/)를 사용하면 된다. 그림3과 같이 console.log('Hello World')를 기입했다. 그림4) 'Hello World!' 출력 그림5) 변수 저장 변수를 이용하여 'Hello World!'를 출력하도록 하겠다. 일단 변수명을 선언하고 그 변수에 문자열을 저장해야 한다. 여기서 'str'은 변수를 선언한 것이고 'Hello World!'는 변수이다. 따라서 위와 같이 'var str = 'Hello World!';'를 작성한다면 str에 변수가 저장된 것이다.  그림6) 변수를 console로 출력 그림3과 마찬가지로 'console.log'를 이용하여 출력을 해보자. 일단 'Hello World!'의 입력위치는 같다. 하지만 ' '가 생략되어 있다. 이거는 차후에 나오지만 이미 변수 'str'은 문자열이기 때문에 필요하지가 않다.  그림7) clear사용 이후 코드를 하다보면 console 창이 지저분해지는 경우가 있다. 한...