3장. Node.js[Node.js란?] Node.js는 웹 브라우저 이후 등장한 자바스크립트 런타임 이다.  자바스크립트 런타임이란 자바스크립트의 구동 환경이라는 뜻으로, 지금까지는 웹 브라우저가 유일한 자바스크립트 런타임이었으며, 그러므로 자바스크립트는 웹 브라우저 외에서는 사용할 수 없었다.그런데 Node.js라는 독립적인 자바스크립트 런타임이 등장하면서 어떤 환경에서도 자바스크립트를 실행할 수 있게 되었고, 활용 범위가 넓어짐과 함께 자바스크립트를 사용하는 개발자도 늘어나 2022년 기준으로 자바스크립트는 개발자가 가장 많이 사용하는 프로그래밍 언어가 되었다.  Node.js는 단순히 자바스크립트 런타임이며, 서버 개발 기술은 아니다.  리액트 활용을 위해 Node.js의 학습이 선행되어야 하는 ..

24-25/React.js 2 2024. 10. 11. 12:34

5장 ref: DOM에 이름달기 public/index.html 파일의 div 태그의 id가 root로 설정되어 있습니다. 이처럼 id를 사용하면 특정 DOM 요소에 대하여 쉽게 접근하여 처리할 수 있습니다. 이렇게 HTML에서 id를 사용하여 DOM에 이름을 다는 것처럼, 리액트 프로젝트 내부에서 DOM에 이름을 다는 방법이 ref(reference)입니다. 5.1 ref는 어떤 상황에서 사용해야 할까? ref는 DOM을 직접적으로 건드려야 할 때 사용해야 합니다. 예로 클래스형 컴포넌트에서 ref를 사용하는 방법을 알아봅시다. 5.1.1 예제 컴포넌트 생성 src 디렉터리 안에 ValidationSample.css와 ValidationSample.js 파일을 생성해봅시다. /*ValidationSam..

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

5.1 ref는 어떤 상황에서 사용해야 할까? HTML에서 id를 사용하여 DOM에 이름을 다는 것처럼 리액트 프로젝트 내부에서 DOM에 이름을 다는 방법이 있습니다. 바로 ref(reference의 줄임말) 개념입니다 5.1.1 예제 컴포넌트 생성 //ValidationSample.css .success { background-color: lightgreen; } .failure { background-color: lightcoral; } //ValidationSample.js import React, { Component } from 'react'; import './ValidationSample.css'; class ValidationSample extends Component { state = {..

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

4장 이번장에서는 이벤트를 다루는 방법에 대해서 알아봅니다. ​ ​ ​ ​ HTML에서 DOM 요소에 이벤트를 설정하는 방법은 아래의 코드와 같습니다. alert함수를 이용해서 메시지 박스를 띄우는 방법으로, 이벤트를 실행하면 "" 사이의 자바스크립트를 실행하는 것이 특징입니다. click me 4.1.1 이벤트를 사용할 때 주의 사항 카멜 표기법 함수 형태 값 전달 (자바스크립트 코드 전달X) : HTML과의 차이점 DOM 요소에만 이벤트 설정 가능 (개발자가 직접 만든 컴포턴트에 자체 이벤트 설정 불가) 전달받은 props를 컴포넌트 내부 DOM 이벤트로 설정 4.1.2. 이벤트 종류 다양한 이벤트가 존재하지만, 책에서는 일부만을 다룹니다. Clipboard Composition Keyboard Fo..

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

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

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

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

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

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