INDEX 6장 컴포넌트 반복 1. 자바스크립트 배열의 map() 함수 ● 문법 2. 데이터 배열을 컴포넌트 배열로 변환하기 2.1 컴포넌트 수정하기 2.2 App 컴포넌트에서 예제 컴포넌트 렌더링 2.3 모듈 내보내기 및 불러오기 3. key 3.1 key 설정 4. 응용 4.1 초기 상태 설정하기 4.2 데이터 추가 기능 구현하기 4.3 데이터 제거 기능 구현하기 5. Question 개념 정리 및 코드 문제 ● 개념 복습 문제 ● 코드 문제 컴포넌트 반복 html 태그 중에는 반복적으로 사용할 필요가 있는 태그(li, tr, td 등)가 있다. // IterationSample.js const IterationSample = () => { return ( 눈사람 얼음 눈 바람 ); }; 이 장에서는..

21-22/21-22 리액트 스타터 -2 2021. 11. 29. 13: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

일반적으로 HTML에서 DOM에 이름을 달 때는 id를 사용합니다. id를 달면, 1. CSS에서 특정 id에 스타일 적용하기 2. 자바스크립트에서 특정 id를 작업하기. 두 가지가 모두 가능합니다. 리액트 프로젝트 내부에서 이와 같은 행동을 하기 위해서는, reference의 줄임말인 ref를 사용합니다. 5.1 ref는 어떤 상황에서 사용해야 할까? 'DOM을 꼭 직접 건드려야 할 때' 사용합니다. .success { background-color: lightgreen; } .failure { background-color: lightcoral; } ValidationSample.css import React, { Component } from 'react'; import './ValidationSa..

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

INDEX 4장 이벤트 핸들링 1. 리액트의 이벤트 시스템 1.1 이벤트를 사용할 때 주의 사항 1.2 이벤트 종류 2. 예제로 이벤트 핸들링 익히기 2.1 컴포넌트 생성 및 불러오기 2.2 onChange 이벤트 핸들링하기 2.3 임의 메서드 만들기 2.4 input 여러 개 다루기 2.5 onKeyPress 이벤트 핸들링 3. 함수형 컴포넌트로 구현해보기 4. Question 개념 정리 및 코드 문제 ● 개념 복습 문제 ● 코드 문제 이벤트 핸들링 이벤트(event): 사용자가 웹 브라우저에서 DOM 요소들과 상호작용하는 것으로 클릭, 키보드 입력 등의 사용자의 행위 이벤트 핸들링: 이벤트(event)를 처리하는 것 자바스크립트의 이벤트 실행 Click Me 1. 리액트의 이벤트 시스템 // Say...

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

4장에서와 같이 웹 서버를 만들 때 코드가 복잡하고 확장성이 떨어지는 문제가 있다. 이를 불편함을 해소하고 편의 기능을 추가한 npm에서 제공하는 웹 서버 프레임워크가 있다. 익스프레스가 대표적이다. 6.1 익스프레스 프로젝트 시작하기 먼저 learn-express 폴더를 만든다. 항상 package.json을 제일 먼저 생성해야 한다. 직접 파일을 만들어도 되고 명령어를 콘솔에서 호출해도 된다. version이나 description, author license는 자유롭게 수정 가능하다. $ npm i express $ npm i -D nodemon // package.json { "name": "learn-express", "version": "0.0.1", "description": "익스프레스를 ..

21-22/21-22 Node.js 2021. 11. 15. 13:00

4.1 리액트의 이벤트 시스템 이벤트란 사용자가 웹 브라우저에서 DOM 요소들과 상호 작용하는 것을 말합니다. 4.1.1 이벤트를 사용할 때 주의 사항 이벤트 이름은 카멜 표기법으로 작성합니다. 예를 들어 HTML의 onclick은 리액트에서 onClick으로 작성해야 합니다. 또, onkeyup은 리액트에서 onKeyUp으로 작성합니다. 이벤트에 실행할 자바스크립트 코드를 전달하는 것이 아니라, 함수 형태의 값을 전달합니다. HTML에서 이벤트를 설정할 때는 큰따옴표 안에 실행할 코드를 넣었지만, 리액트에서는 함수 형태의 객체를 전달합니다. DOM 요소에만 이벤트를 설정할 수 있습니다. 즉 div, button, input, form, span 등의 DOM 요소에는 이벤트를 설정할 수 있지만, 우리가 ..

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

일반 CSS : 컴포넌트 스타일링하는 가장 기본적인 방식 Sass : 자주 사용되는 CSS 전처리기 중 하나로 확장된 CSS 문법을 사용하여 CSS 코드를 작성 CSS Module : 스타일 작성 시, CSS 클래스가 다른 클래스의 이름과 충돌하지 않도록 파일마다 고유한 이름을 자동으로 생성해주는 옵션 styled-components : 스타일을 자바스크립트 파일에 내장시키는 방식. 9.1 가장 흔한 방식, 일반 CSS CSS 작성 시, 가장 중요한 점 : CSS 클래스를 중복되지 않게 만드는 것 9.1.1 이름 짓는 규칙 컴포넌트 이름-클래스 형태 (예: App-header) BEM 네이밍 : 해당 클래스가 어디에서 어떤 용도로 사용되는지 명확하게 작성하는 방식 (예: .card_title-primar..

21-22/21-22 리액트 마스터 2021. 11. 15. 13:00

INDEX 3장 컴포넌트 1. 클래스형 컴포넌트 ● 컴포넌트를 선언하는 두 가지 방식 2. 첫 컴포넌트 생성 2.1 src 디렉터리에 MyComponent.js 파일 생성 2.2 코드 작성하기 2.3 모듈 내보내기 및 불러오기 3. props 3.1 JSX 내부에서 props 렌더링 3.2 컴포넌트 사용 시 props 값 지정하기 3.3 props 기본값 설정: defaultProps 3.4 태그 사이의 내용을 보여주는 children 3.5 비구조화 할당 문법을 통해 props 내부 값 추출하기 3.6 propTypes를 통한 props 검증 * isRequired를 사용하여 필수 propTypes 설정 4. state 4.1 클래스형 컴포넌트의 state 4.2 함수 컴포넌트에서 useState 사용..

21-22/21-22 리액트 스타터 -2 2021. 11. 8. 18:49

3.1 클래스형 컴포넌트 컴포넌트를 선언하는 방식은 두 가지입니다 하나는 함수형 컴포넌트이고 다른 하나는 클래스형 컴포넌트입니다. import React, { Component } from 'react'; class App extends Component { render() { const name = 'react'; return {name}; } } export default App; 클래스형 컴포넌트는 다음과 같이 이루어져 있습니다. 클래스형 컴포넌트이지만 역할을 이전에 보았던 함수형 컴포넌트와 같습니다. 하지만 클래스형 컴포넌트의 경우 state 기능 및 라이프사이클 기능을 사용할 수 있다는 것과 메서드를 정의할 수 있다는 점에서 함수형 컴포넌트와 차이점이 있습니다. 클래스형 컴포넌트에서는 rende..

21-22/21-22 리액트 스타터 -1 2021. 11. 8. 18:46

1. npm 알아보기 npm : Node Package Manager 노드가 자바스크립트 프로그램을 컴퓨터에서도 실행할 수 있도록 해 주고, 그 외에 여러 가지 기능들을 제공하는 125만 개의 패키지가 존재한다. npm에 업로드된 노드 모듈을 패키지라고 부른다. 2. package.json으로 패키지 관리하기 package.json : 설치한 패키지의 버전을 관리하는 파일 노드 프로젝트 폴더 내부에 package.json을 만들어야 함 D:\CODING\node.js\5장에 npm을 설치하고 package.json 파일을 만드는 과정 생성된 package.json { "name": "npmtest", "version": "0.0.1", "description": "test npm and package.j..

21-22/21-22 Node.js 2021. 11. 8. 18:46

1. 요청과 응답 이해하기 클라이언트가 서버로 요청(request)을 보냄 서버에서는 요청의 내용을 읽고 처리한 뒤 클라이언트에 응답(response)을 보냄 클라이언트로부터 들어온 요청을 받을 이벤트 리스너를 등록해야 함 const http = require('http'); http.createServer((req, res) => { // 응답 처리 } http 모듈에 있는 createServer 메서드를 사용 인수로 요청에 대한 콜백 함수를 넣을 수 있으며 요청이 들어올 때마다 콜백 함수가 실행됨 콜백 함수에 대한 응답을 적으면 됨 req 객체는 요청에 관한 정보 / res 객체에는 응답에 관한 정보 서버 연결(한번에 여러 개 연결하기) const http = require('http'); http...

21-22/21-22 Node.js 2021. 11. 8. 18:46