본문 바로가기

강의 실습159

Props 컴포넌트에 데이터를 전달하는 방법 1. Props Props : 부모 컴포넌트에서 자식 컴포넌트에게 어떤 값들에 이름을 붙여 전달하는 방식. 프로퍼티스의 줄임말. - App.js // import logo from './logo.svg'; // import './App.css'; import MyHeader from './MyHeader'; import Counter from './Counter'; function App() { return ( ); } export default App; - Counter.js import React, { useState } from 'react'; const Counter = (props) => { console.log(props); // 객체에 담겨서 온다. cons.. 2024. 1. 10.
State React State 1. State State : 계속해서 변화하는 특정 상태. 상태에 따라 각각 다른 동작을 함. 리액트에서 말하는 상태는 계속 값이 바뀌는 동적인 데이터. 상태를 바꾸는 등의 관리는 이걸 가진 컴포넌트가 직접 관리한다. Counter 예제 실행을 위해 src 폴더에 Counter.js 파일 생성 - Counter.js import React, { useState } from 'react'; const Counter = () => { console.log("Counter 호출!"); // 0에서 출발 // 1씩 증가하고 // 1씩 감소하는 // count 상태 const[count, setCount] = useState(0); // 비구조화 할당 - 0 : 상태값, 1 : 상태값을 변.. 2024. 1. 10.
JSX HTML with Javascript 1. JSX with React JSX 는 리액트의 컴포넌트를 만드는데 유용하게 사용되는 문법. - 터미널 npm start Compiled successfully! You can now view my-app in the browser. Local: http://localhost:3000 On Your Network: http://172.30.1.15:3000 Note that the development build is not optimized. To create a production build, use npm run build. webpack compiled successfully 헤더 역할을 하는 컴포넌트 MyHeader.js 파일 생성 후 App.js 에서 .. 2024. 1. 9.
Create React App React App을 세상에서 가장 빠르고 편하게 만드는 방법 1. React App을 만드는 방법 React.js : Node 기반의 Javascript UI 라이브러리 Webpack : 다수의 자바스크립트 파일을 하나의 파일로 합쳐주는 모듈 번들 라이브러리 Babel : JSX 등의 쉽고 직관적인 자바스크립트 문법을 사용할 수 있도록 해주는 라이브러리 ... 언제 다 설정하지..? Create React App : 이미 세팅 완료된 패키지 Boiler Plate - 보일러를 찍어내는 틀, 마치 보일러를 찍어내듯, 서비스를 개발할 수 있는 빵 틀의 역할을 하는 패키지를 의미함(리액트에 사용하는 패키지를 미리 설치하고 복잡한 환경설정까지 다 해놓은 패키지를 감싼 패키지). reactexam1 폴더 생성 후.. 2024. 1. 8.
Why React? React는 왜 필요한걸까? 1. Why React? 첫 번째 이유 : React 는 Component 기반의 UI 라이브러리 - index.html 여기는 HOME 입니다 다른 페이지에서도 공통적으로 사용할 거라고 예상되는 요소들을 별도의 파일이나 모듈로 제작한 뒤, 필요한 파일이나 페이지마다 컴포넌트의 이름으로 불러오는 방식을 사용하면 눈에띄게 코드량이 줄어든다. 이렇게 재사용되는 요소들을 컴포넌트로 만들어 사용하는 방식을 '컴포넌트화 방식'이라고 부른다. 컴포넌트화 방식을 사용하면 수정해야할 컴포넌트 하나만 수정하면 그 컴포넌트를 사용하는 다른 파일들을 다 수정할 필요 없이 적용된다. 산탄총 수술을 할 필요가 없어진다. 유지보수가 쉬워진다. React는 Component 기반 UI 라이브러리 이기 .. 2024. 1. 7.
Node.js 패키지 생성 및 외부 패키지 사용하기 프로젝트를 생성하고 외부 모듈을 사용해보기 NPM (Node Package Manager) : Node.js의 패키지 관리 도구 Package : 누군가 따로 만들어놓은 Node.js 모듈 1. NPM 이용하여 패키지 생성 후 실행 react-package-example 폴더 생성 후 vscode에서 Open Folder로 불러와서 터미널 실행 - 터미널 npm init This utility will walk you through creating a package.json file. It only covers the most common items, and tries to guess sensible defaults. See `npm help init` for definitive documentation.. 2024. 1. 4.
Node.js Hello World & Common JS Hello World 부터 Common JS Module System 까지 1. Node.js 를 이용한 자바스크립트 파일 실행 - index.js console.log("Hello Node js"); vscode에서 패널을 통해 터미널 보기 : View - Appearance - Panel 체크 * 터미널이란? GUI(Graphic User Interface) : 아이콘같은 그래픽을 기반으로 마우스 클릭으로 명령을 내릴 수 있게 해주는 방식 CLI(Command Line Interface) : 수행할 명령을 직접 텍스트로 타이핑하는 방식 이 때 명령을 내리는 곳이 터미널이다. node.js로 index.js 라는 파일을 사용하라는 명령하기 위해 터미널을 사용한다. 터미널에서 index.js가 존재하는 .. 2024. 1. 2.
Node.js & VsCode 설치하기 설치 과정부터 환경설정 그리고 사용법까지 구글에 node.js 검색하여 https://nodejs.org/en 링크에 접속하여 LTS 버전을 다운로드 한다. LTS : 기업을 위해 지원하는 안정적인 버전 Current : 6개월 단위로 계속 업데이트 되는 최신 버전 (불안정) 다운로드받은 설치파일을 통해 설치한다. 설치 경로는 C:\Program Files\nodejs\ 와 같이 C드라이브를 추천한다. Tools for Native Modules 단계에서 체크박스를 체크한다. 설치 후 노드js가 잘 설치되었다는 터미널이 나오면 성공. 터미널은 끄면 된다. 성공적으로 설치되었는지 터미널을 통해 확인한다. 버전이 나오면 성공적으로 설치 완료. - CMD node -v v20.10.0 # 현재 설치된 노드js.. 2024. 1. 1.
Node.js란? 자바스크립트 런타임 1. Node.js 소개 Node.js 배워야 하는 이유 : React.js가 자바스크립트 라이브러리이기 때문이다. 자바스크립트 코드는 브라우저 내장 자바스크립트 엔진을 이용하여 실행한다. Safari(Apple) : Nitro / Firefox(Mozila) : Spider Monkey / Chrome (Google) : V8 / Edge (Microsoft) : Chakra / Opera (Opera Software) : Presto 자바스크립트 언어는 웹 사이트 인터렉션 외엔 할 수 있는게 없었으나, V8 엔진을 브라우저 밖으로 끌어내 어디에서도 사용할 수 있게 만들도록 등장한 것이 Node.js 이다(프로젝트 이름이 Node.js 였다). Node.js는 자바스크립트 실행환경으.. 2023. 12. 27.

티스토리툴바