코딩 초보 개발 일지

import React, { useState } from 'react'; const Say = () => { // 배열 비구조화 할당 문법 : const array = [1,2]; >> const[1,2] = array; const [ message, setMassage ] = useState(''); //배열 비구조화 할당 문법 // useState('')의 인자(매개변수:숫자, 문자열, 객체, 배열)가 state의 초기값을 설정한다. // userState()를 호출하면 배열이 반환된다. 첫번째 배열의 원소가 현재 상태(state)이고, 두번째 배열의 원소가 상태를 바꾸어 주는 세터함수(setState)이다. const onClickEnter = () => setMassage("안녕하세요."); //..

컴포넌트별로 별도의 파일로 정리정돈해서 쪼개보기 먼저 src 디렉터리에 components 라는 디렉터리를 만든다. 생성된 components 디렉터리 안에 컴포넌트별로 정리해보겠다. 우선 TOC 컴포넌트부터 작업한다. P.70 첫번재 코드 참조!! ...생략... import App from './App' ...생략... 위 코드를 보면 C.R.A가 기본적으로 이 App이라는 컴포넌트를 같은 디렉터리에 있는 App.js 라는 파일에서 불러와 보여주는 것을 알 수 있다. 이를 참고해 components 디렉터리로 가서 TOC.js 라는 파일을 생성하고 기존의 App.js 에 있던 TOC 컴포넌트를 복사해 붙여넣는다. + 편집기 기능에 따라 'Component 라는 클래스가 사용되고 있는데 그 클래스를 로..

어떤 태그를 패키지로 만들어서 인터넷에 올리면 다른 사람들이 내가 정의한 태그를 자신의 앱에 붙여 사용할 수 있다. 3대 빌드 도구 (번들링 도구) - maven - gradle - Ant 빌드 도구의 역할(:묶는 역할)을 VSCode에서는 Web phk (웹 픽)이 한다. 바벨 : 스크립트 태그 JSX를 자바스크립트 코드로 반환시켜준다. node.js 는 웹브라우저가 할 수 없는 기능을 제공한다. 1. 웹 서버의 역할 (Tomcat 없이 가능) 2. 번들링이 잘 되도록 관여하는 역할 App.js 에 를 하나 더 추가하면 똑같은 내용이 두 번 반복한다. 문제는 현재의 Subject 라는 컴포넌트는 언제나 똑같은 결과만 보여줄 수 있다. P.60 두번째 코드 참고! 속성값을 붙인 Subject 컴포넌트이다..

컴포넌트 만들기 1 - 순수한 html로 작성한 코드를 리액트로 정리하는 작업 수업.html 과 App.js 코드를 함께 보면서 코딩을 하겠다. 컴포넌트를 만들어 보겠다. App.js 에 보이는 코드가 컴포넌트를 만드는 코드이다. Class App extends Component { render() { return ( Hello, React!! ) } } 객체지향을 이해하는 경우 ' 리액트가 갖고 있는 Component 라는 클래스를 상속해서 새로운 App 클래스를 만든다. 그리고 그 클래스는 render 라는 메서드를 가지고 있다.' 라고 이해하면 된다. 객체지향에 익숙하지 않다면 ' 컴포넌트를 만드는 코드', 일종의 템플릿이라고 생각하면 된다. 수업.html 에서 header 영역을 Subject 라..

애플리케이션을 배포(deploy) 하는 방법을 알아본다. 먼저 지금까지 만든 간단한 리액트 앱을 한번 살펴본다. 크롬 개발자 도구(F12) > [Network] 탭 > 상단 새로고침 버튼에 마우스 우측 클릭 > 메뉴 확인 일반적으로는 브라우저는 성능을 높이기 위해 리소스를 내려받아 캐시에 보관해 뒀다가 그 다음에는 같은 리소스를 내려받기 위해 다시 접속하지 않고 앞서 내려받은 리소스를 사용한다. + 캐시 용량을 늘리는 이유 : 속도를 높이기 위해서 ( 캐시가 남아있으면 인터프리터기가 다시 읽지 않아 속도가 향상된다.) 하지만 [캐시 비우기 및 강력새로고침] 버튼을 누르면 캐시를 모두 없애 버린다. 강력 새로고침 한 뒤 [Network] 탭의 하단을 보면 내려받은 리소스의 용량을 볼 수 있다. 리소스의 다..

Create React App에서 생성한 샘플 애플리케이션에서 css 코드를 어떻게 작성하면 되는지 살펴본다. index.js 파일 상단에 보면 index.css 파일을 임포트(import)하고 있음을 확인할 수 있다. import './index.css'; ( ./로 시작하면 해당 파일이 같은 레벨에 위치한다는 뜻.) index.css 파일을 열어 코드를 다음과 같이 수정하면 웹 브라우저에 자동으로 업데이트 된다. + 현 구조에서는 index.css 가 전체에 해당되고, App.css는 커스터마이징 css 라고 생각할 수 있다. body { background-color:powderblue; } index.js 의 상단을 보면 사용자 정의 컴포넌트인 App을 임포트 하는 부분을 볼 수 있다. ⋮ imp..

웹브라우저에 노출되는것 : public 코딩 하는 부분 : src 이전 버전에서는 APP.js 페이지 상단에 import React from 'react' 문장이 있었음 import React from 'react'; // 리액트를 불러와서 사용할 수 있게 한다. 리액트 프로젝트를 만들 때 node_modules 폴더에 리액트 모듈이 설치된다. ※이렇게 리액트 모듈을 불러와서 설치하는 것은 브라우저 환경이 아닌 곳에서 자바스크립트를 실행할 수 있도록 하는 'Node.js의 기능'을 지원하기 위해서이다. 리액트 모듈을 불러 모을 때 사용하는 것이 번들러(bundler) 이다. 불러온 모듈은 모두 합쳐 하나의 파일(=자바스크림트 파일)로 생성한다. (대표적인) 번들러는 웹팩(WebPack), 파슬(Parce..

1. 루트 폴더에서 마우스 우측 클릭 > ‘GIT BASH HERE’ 선택 2. 명령어 입력 : $ npx create-react-app charter03