웹응용프로그래밍

웹응용 프로그래밍 수업을 통해 프론트엔드 개발에 대해 배우게 되었다.

NPM

Node.js

웹팩

NPX

등등 낯선 단어들이 많다.

 

오늘 배운 내용을 잊지 않기 위해 기록을 남기자면

대충 json 파일 만들고 컴포넌트 활용해보기 였던것 같다. 아님 말고

 

맥으로 따라하려다가 아차하면 진도 못따라 갈까봐 학교 수업 컴퓨터로 하는데  파일을 가지고 다니려면

node_modules 폴더는 지워서 가지고 다녀도 된다. 단, 다시 사용하려면 npm install 해줘야 한다.

vscode에서 설치한 확장프로그램들: prettier, reactjs code snippets

설정: format on save 활성화

관리자 권한으로 실행한 cmd: nvm install 14.0.0

nvm 설치하기: https://github.com/coreybutler/nvm-windows/releases

CD C:/..../Document

mkdir React
mkdir practice
npm init //프로젝트 생성

code .

문서 폴더에 파일을 만들고 프로젝트를 생성하고 vsCode를 실행한다.

여려 파일 중 이번에 다루는 파일은 index.html, index.js, App.js 정도다

웹이 실행 되면 제일 먼저 실행하게 되는 파일이 index.html이며 다음이 index.js 여기에서 App.js를 호출한다.

 

npx create-react-app do-it-example
code .

 예제 파일을 생성한다.

{

    "useTabs": false,

    "printWidth": 100,

    "tabWidth": 2,

    "trailingComma": "all",

    "semi": true,

    "singleQuote": true

}//.prettierrc 기본값

 

서버실행은 터미널을 생성하고 다음 명령어를 입력한다.

npm start

 

App.js 와 같은 폴더에 Rcc.js 라는 파일을 만든다. 여기서 "rsc"를 입력해 첫 단축키를 불러온다.

익숙한 funtion 형태로 만들고 

const Rcc = () => {
==>
function Rcc(){

원하는 기능(태그)를 넣는다.

 

Rcc.js 파일을 사용하기 위해 index.js 파일 상단에 

import Rcc from './Rcc';

를 추가하고 

root.render(

  <React.StrictMode>

 

    <Rcc />

  </React.StrictMode>

);

와 같이 호출해준다.

 

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import Rcc from './Rcc';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
    <Rcc />
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

를 통해 INDEX.HTML 에서, 즉 웹에서 볼수 있다. 빨리가야되서 대충 마무리

1. 리액트 시작하기.pptx

6.83MB