1.  컴포넌트   [실습 환경 설정] 실습 환경 설정을 위해 새 폴더 chapter5를 만들고 터미널에서 npx create-react-app . 명령어로 새로운 리액트 앱을 만든다. 그리고 src 폴더에서 실습에 사용하지 않을 아래의 파일들을 제거한다. - src/App.test.js- src/logo.svg- src/reportWebVitals.js- src/setupTest.js Create React App이 자동으로 생성하지만 실습에는 사용하지 않는 코드를 모두 삭제한다.각각 index.js와 App.js의 파일이 아래와 같은 코드들만 남도록 불필요한 코드를 모두 삭제한다.import React from 'react';import ReactDOM from 'react-dom/client';im..

24-25/React.js 2 2024. 11. 8. 10:00

컴포넌트 리액트는 페이지의 모든 요소를 컴포넌트 단위로 쪼개어 개발하고, 완성된 컴포넌트를 마치 레고 조립하듯이 하나로 합쳐 페이지를 구성합니다. 리액트의 핵심 개념인 컴포넌트에 대해 자세히 알아보겠습니다. 실습 환경 설정하기 앞에서 Create React App으로 리액트 앱을 생성했던 방법과 동일합니다. npx create-react-app . Documents 폴더 아래에 chapter5 폴더를 만든 다음, 해당 폴더 안에서 단축키 +를 눌러 터미널을 열고, 다음 명령어로 새로운 리액트 앱을 만듭니다. npm run start 터미널에서 npm run start 명령으로 리액트 앱을 시작합니다. 첫 컴포넌트 만들기 리액트 컴포넌트는 주로 자바스크립트의 클래스나 함수를 이용해 만듭니다. 클래스로 컴포..

23-24/React.js 1 2023. 11. 3. 10:00

Node.js의 개념 자바스크립트 런타임 : 자바스크립트를 실행하는, 자바스크립트의 구동 환경 (ex: 웹 브라우저) Node.js 등장 이후 어떤 환경에서도 자바스크립트 실행이 가능해졌다. Node.js로 자바스크립트 실행 1. 비주얼 스튜디오 코드에 sample.js 파일을 생성한다. 2. 코드 작성 후, Ctrl + S로 작성한 코드를 저장한다. 3. Ctrl + J로 비주얼 스튜디오 코드의 터미널을 오픈한다. 4. 경로가 해당 폴더에 있는 것을 확인한 후, 터미널에 명령어를 입력한다. node sample.js // js파일을 node.js로 실행하는 명령어 Node.js 패키지 만들기 패키지 : Node.js에서 여러 개의 자바스크립트 파일을 실행하고 관리하는 일종의 관리 단위 1. 패키지 단위..

23-24/React.js 3 2023. 10. 13. 12:09

1.1 왜 리액트인가? 최근 몇 년간 많은 개발자들은 자바스크립트에 뜨겁게 열광하고 있습니다. 한때 자바스크립트는 웹 브라우저에서 간단한 연산을 하거나 시각적인 효과를 주는 단순한 스크립트 언어였지만, 지금은 애플리케이션에서 가장 핵심적인 역할을 합니다. 우리는 그중에서 자바스크립트 라이브러리를 사용하여 사용자 인터페이스를 만들고, 최대한 성능을 아끼며 편안한 사용자 경험을 제공하는 리액트에 대해서 알아보고자 합니다. 1.1.0 MVMM과 MVC MVC(Model-View-Controller)와 MVVM(Model-View-ViewModel)는 프레임 워크의 아키텍쳐(구조) 입니다. 이 두 가지 구조의 공통점은 모델과(Model) 뷰(View)가 있다는 것입니다. 여기서 모델은 애플리케이션의 데이터를 관..

22-23/22-23 리액트 스타터 3 2022. 9. 29. 10:00

I. 왜 리액트(React)인가? 최근 몇 년간 자바스크립트(JS, JavaScript)는 개발자들의 뜨거운 관심을 받고 있다. JS는 단순한 스크립트 언어를 넘어 웹 애플리케이션에서 가장 핵심적인 역할로 발돋움했다. 그러나 JS만으로는 프런트 엔드 사이드쪽의 애플리케이션 구조를 관리하기에는 무리가 있다. 이를 해결하기 위해 React, Angular, Ember.js 등 수많은 프레임워크들이 개발되었다. 1. 왜 리액트인가? 프론트 엔드 개발을 하다보면 MVC, MVVM, MVW 등과 같이 MV~로 시작되는 아키텍처들을 들어볼 수 있다. 코드 개발시 규칙을 만들어 반복되는 것을 패턴으로 만든다. 이 패턴을 모두가 따르도록 하는 구조를 아키텍처라고 한다. UI(User Interface)가 만들어진 후 ..

22-23/22-23 리액트 스타터 2 2022. 9. 29. 10:00

혹시 웹페이지를 만들어본 경험이 있나요. 혹은 웹 페이지를 만들면서, 수많은 html 태그와 복잡한 항목을 코딩하기에 지쳐본 경험이 있나요. ​ 여기 이 복잡함에 염증을 느껴 그 해결책으로 React를 이용했고, 이를 계기로 '웹 개발' 영역에 터를 잡은 사람이 있습니다. 저자 김민준은 자신이 좋아하는 리액트를 더 많은 사람들이 쉽고 편하게 배우기를 바라면서 한 권의 책을 집필합니다. ​ ​ 리액트를 다루는 기술 - 교보문고 입문부터 대규모 애플리케이션까지 한 권으로 | 리액트 베스트셀러 1위리액트, 현장 밀착 입문서는 따로 있다!자바스크립트의 기본 기능과 문법을 숙지한다리액트의 기본기를 익히려면 자바스 www.kyobobook.co.kr ​ 책 [리액트를 다루는 기술]은 리액트를 처음 다루는 사람부터 ..

22-23/22-23 리액트 스타터 1 2022. 9. 29. 10:00

이번 장에서는 리액트 프로젝트에서 반복적인 내용을 효율적으로 보여 주고 관리하는 방법을 알아봅시다. 6-1 자바스크립트 배열의 map() 함수 자바스크립트 배열 객체의 내장 함수인 map 함수를 사용하여 반복되는 컴포넌트를 렌더링 할 수 있습니다. map 함수는 파라미터로 전달된 함수를 사용하여 배열 내 각 요소를 원하는 규칙에 따라 변환한 후 그 결과로 새로운 배열을 생성합니다. arr.map(callback, [thisArg]) callback은 새로운 배열의 요소를 생성하는 함수입니다. 파라미터는 아래 세 가지입니다. currentValue: 현재 처리하고 있는 요소 index: 현재 처리하고 있는 요소의 index 값 array: 현재 처리하고 있는 원본 배열 thisArg(선택 항목): call..

21-22/21-22 리액트 스타터 -1 2021. 11. 29. 13:00

INDEX 5장 ref: DOM에 이름 달기 1. ref는 어떤 상황에서 사용해야 할까? 1.1 예제 컴포넌트 생성 1.2 App 컴포넌트에서 예제 컴포넌트 렌더링 1.3 DOM을 꼭 사용해야 하는 상황 2. ref 사용 2.1 콜백 함수를 통한 ref 설정 2.2 createRef를 통한 ref 설정 2.3 적용 3. 컴포넌트에 ref 달기 3.1 사용법 3.2 컴포넌트 초기 설정 3.3 컴포넌트에 메서드 생성 3.4 컴포넌트에 ref 달고 내부 메서드 사용 4. 정리 ● 개념 복습 문제 ● 코드 문제 5장 ref: DOM에 이름 달기 일반적인 HTML에서 DOM 요소에 이름을 달 때는 id를 이용한다. → CSS나 자바스크립트에서 해당 id를 가진 요소를 찾아서 작업할 수 있다. 리액트 프로젝트 내부..

21-22/21-22 리액트 스타터 -2 2021. 11. 22. 13:00

INDEX 2장 JSX ● 2.1 코드 이해하기 ● 2.2 JSX란? ● 2.3 JSX의 장점 ● 2.4 JSX 문법 ● 2.5 ESLint와 Prettier적용하기 ● 정리 ● 2.1 코드 이해하기 import React from 'react'; 프로젝트 생성 과정에서 node_modules 디렉터리에 react 모듈이 설치된다. import구분을 통해 리액트를 불러와서 사용 가능하다. *Node.js에서는 import대신 require을 사용한다. 번들러: 파일을 묶는다. 번들러를 사용하면 import로 모듈을 불러왔을 때 불러온 모듈을 모두 합쳐서 하나의 파일을 생성해 준다. -리액트에서는 주로 웹팩을 사용한다. (편의성, 확장성) 로더:파일을 불러온다. *css-loader, file-loader..

21-22/21-22 리액트 스타터 -2 2021. 11. 1. 13:01

1.1 왜 리액트인가? 한때 자바스크립트는 웹 브라우저에서 간단한 연산을 하거나 시각적인 효고를 주는 단순한 스크립트 언어에 불과했지만, 현재는 웹 애플리케이션에서 가장 핵심적인 역할을 합니다. 일렉트론(자바스크립트로 데스크톱 애플리케이션을 만들 수 있는 프레임워크)으로 슬랙, VS Code 등을 개발하고, 자바스크립트로 크로스 플랫폼 애플리케이션을 개발할 수 있는 여러 프레임워크를 사용해 페이스북, 디스코드 등의 애플리케이션도 개발했습니다. 이러한 프레임워크들은 주로 MVC(Model-View-Controller) 아키텍처, MVVM(Model-View-View Model) 아키텍처를 사용합니다. 이들이 지닌 공통점은 모델과 뷰가 있다는 것인데, 모델은 애플리케이션에서 사용하는 데이터를 관리하는 영역,..

21-22/21-22 리액트 스타터 -1 2021. 11. 1. 12:00

1. 왜 리액트인가? 자바스크립트만으로도 규모가 큰 애플리케이션을 만들 수 있는 시대가 왔다. 하지만 순수 자바스크립트만으로 프런트엔드 사이드에서 돌아가는 애플리케이션 구조를 관리하기는 힘들다. 이를 해결하기 위해 Angular, Vue.js등 수많은 프레임워크가 조금씩 다른 관점에서 관리를 위한 노력을 해왔다. Angular와 Vue.js같은 프레임워크는 주로 MVC, MVW 아키텍처로 애플리케이션을 구조화한다. 이 구조들이 가진 공통점은 모델(Model)과 뷰(View)가 있다는 것이다. 모델, 뷰, 컨트롤러 ▪ 모델 : 애플리케이션에서 사용하는 데이터를 관리하는 영역 ▪ 뷰 : 사용자에게 보이는 부분 ▪ 컨트롤러 : 프로그램이 사용자에게서 어떤 작업(ex: 버튼 클릭, 텍스트 입력)을 받으면 모델 ..

21-22/21-22 리액트 마스터 2021. 10. 4. 14:00