본문 바로가기
React 4-1. 컴포넌트(1) 목차 컴포넌트란? 컴포넌트의 유형? class로 정의된 컴포넌트 함수로 정의된 컴포넌트 컴포넌트 렌더링 컴포넌트 합성 컴포넌트 추출 1. 컴포넌트란? UI를 독립적이고 재사용 가능한 여러 조각으로 나누는 것 컴포넌트는 엘리먼트를 함수나 클래스에 담는 행위 결과물을 JSX로 반환 개념적으로 JS 함수와 유사 props라고 하는 임의의 입력을 받은 후 화면에 어떻게 표시되는 지를 기술하는 React 엘리먼트(리액트가 이해할 수 있는 객체)를 반환 2. 컴포넌트의 유형 class 함수 3. ES6 class로 정의된 컴포넌트 class로 정의된 컴포넌트는 보다 많은 기능을 제공함 React 컴포넌트 class 정의를 위해서는 React.Component를 상속받아야 함 React.Component의 하위 cl.. 2022. 4. 14.
React3. ReactDOM.render() 목차 React 엘리먼트? DOM에 엘리먼트 렌더링하기: ReactDOM.render() 메서드 DOM에 렌더링된 엘리먼트 업데이트하기 변경된 부분만 업데이트 - 특정 시점의 UI 변화에 대해 고민하는 접근법 1. React 엘리먼트 React 앱의 가장 작은 단위이며, 화면에 표시할 내용을 기술함 일반 객체 불변객체(엘리먼트 생성 이후 해당 엘리먼트의 자식이나 속성 변경 불가) 엘리먼트는 특정 시점의 UI를 보여줌 React DOM은 React 엘리먼트와 일치하도록 DOM을 업데이트 함 2. DOM에 엘리멘트 렌더링하기 React 엘리먼트를 container DOM에 렌더링 현재 ReactComponent 루트(root) 인스턴스에 대한 컴포넌트에 대한 참조를 반환 즉, 생성한 React 엘리먼트를 루.. 2022. 4. 13.
React 2. JSX? 목차 JSX란? JSX로 변수 선언 JSX에서 JS표현식 사용하기 JSX로 속성 정의하기 JSX로 자식 정의하기 JSX로 React 엘리먼트(객체) 생성 JSX에서 주석 작성하기 1. JSX란? JSX는 템플릿 언어라기 보다는 자바스크립트 문법의 확장이다. 리액트 '엘리먼트'를 생성한다. 리액트에서는 기본적으로 렌더링 로직이 UI 로직과 연결 된다는 사실이 깔려있다. 별도의 파일에 마크업과 로직을 넣어서 기술을 인위적으로 분리하기보다는, 마크업과 로직 둘을 포함하는 '컴포넌트'로 관심사를 분리한다 (대충 컴포넌트 안에 HTML과 JS를 한꺼번에 작성 가능하다는 뜻) 2. JSX로 변수 선언 const element = I'm considering dropping this class; 3. JSX에서 JS.. 2022. 4. 12.
React 1. 용어 및 기본 개념 목차 React란? 프레임 워크와 라이브러리의 차이는? 리액트를 사용하기 위한 라이브러리 React 기술 용어 1. React란? 사용자 인터페이스(UI)를 만들기 위한 JavaScript 라이브러리 - 공식 문서 웹프레임 워크 - 위키 2. 프레임 워크와 라이브러리 차이? 개발자들은 종종' 라이브러리'와 '프레임워크'라는 용어를 혼용해서 쓴다. 프레임워크와 라이브러리는 누군가에 의해 쓰여진 코드를 재사용한다는 점에서 공통점이 있지만 몇 가지 큰 차이점이 있다. 그 차이에 초점을 맞춰보자. 라이브러리와 프레임 워크의 기술적 차이점은 제어 반전(=제어의 역전, 역제어)이라 불리는 용어에 있다. 라이브러리를사용 할때, 개발자는 어플리케이션 flow를 관리할 수 있으며 언제, 어디에서 라이브러리를 사용할 지 .. 2022. 4. 12.
# 4-3 mysql2 - 프로미스 API 목차 promise API promise 함수 non-promise 커넥션을 poromise 커넥션으로 업그레이드 #1. 프로미스 API를 이용한 코드 작성 const mysql = require('mysql2/promise') const connection = await mysql.createConnection(config) const SQL = 'SELECT* FROM user where user_id=?' const prepare = ['red'] async () => { const [result] = await conncection.execute(SQL, prepare) } #2. pool에 프로미스 함수 사용 따라서 connection 생성 시 동일한 pool에 대하여 프로미스/non 프로미스의.. 2022. 3. 26.
# 4-2 mysql2 - 커넥션 풀 목차 환경 셋팅 커넥션 풀을 사용한 코드 작성 #1. 환경셋팅 (1) 가져오기 const mysql = require('mysql2'); (2) 옵션 작성하기 const config = { host: 'localhost', user: 'root', database: 'blacktea', waitForConnections: true, connectionLimit: 10, queueLimit: 0 } const pool = mysql.createPool(config) #2. 커넥션 풀을 사용한 코드 작성 커넥션 풀은 기존의 connection을 재사용함으로써 MySQL 서버에 연결하는 시간 절약 pool은 모든 connection을 미리 생성하지는 않지만, connection limit에 도달할 때까지 사용.. 2022. 3. 26.
# 4-1 mysql2 - 기본 목차 라이브러리 사용 셋팅 단순한 형태의 쿼리 prepared statement(execute 메서드) # 1. 환경셋팅 1-1. 라이브러리 설치 $ npm install --mysql2 1-2. 가져오기 const mysql = require('mysql2'); 1-3. 객체 생성 및 옵션 설정 const config = { host: 'localhost', user: 'green', database: 'soybeanlatte' } const connection = mysql.createConnection(config) # 2. 단순한 형태의 쿼리 1. 간단한 형태 const SQL = 'SELECT * FROM menu WHERE `drink` = `오렌지주스` AND `side` = `콘샐러드`' .. 2022. 3. 26.
Oauth1. 개념과 용어정리 목차 Oauth 개념 각 개체들의 역할 개념 이해를 위한 용어 정리 (scope, contsent) 인가 작업 수행을 위한 5가지 grant 유형 #1 Oauth API(Open API)로 제공되는 인가(authorization) 를 위한 산업 표준의 프로토콜 서버 구성의 요소 > 즉 아키텍쳐라고 보면됨 어플리케이션이나 웹사이트들이 다른 웹사이트로부터 사적 데이터에 접근할 수 있도록 하는 인가의 흐름(flow/process)을 제공 고객 발자들의 사용 편의성에 집중 #2 Oauth 개념에서 각 개체들의 역할 - 사용자 (Resource owner) 어플리케이션이 사용자 계정의 일정 부분에 접근하도록 허락하는 개개의 사용자들. (휴먼...) 어플리케이션의 사용자 계정에 대한 접근권은 사용자가 수여한 인가의.. 2022. 3. 17.
4. __dirname / __dirfile : 홈디렉토리~ 절대 경로 반환 목차 __dirname __filename #1 현재 디렉토리의 경로 반환 : __dirname 홈디렉토리~ 현재 디렉토리까지의 절대 경로 반환 console.log(__dirname) ///Users/apple/Documents/workspace console.log(__dirname + '\path.js')//윈도우즈용 경로 console.log(__dirname + '/path.js')//POSIX용(맥, 리눅스) 경로 //반환: /Users/apple/Documents/workspace 단, 윈도우(GUI)에서 코드 실행 시 결과 다를 수도 있음 윈도우즈 기준으로 c~ user/계정명까지 들어가는 것이 홈디렉토리이며 경로가 역 슬래쉬로 표현됨 [참고] __filename의 path.dirname은.. 2022. 3. 16.

티스토리툴바