Front End
Class Component 톺아보기
JSX를 Babel이 컴파일 하는 방법컴포넌트를 생성하는 방법함수 컴포넌트클래스 컴포넌트클래스 컴포넌트에서의 props와 statestateJSX를 Babel이 컴파일 하는 방법JSX는 코드를 작성하는 개발자에겐 직관적이고 편리한 것이 사실이지만, 브라우저가 바로 읽을 수는 없다. 이 때 등장하는 것이 JSX를 JavaScript 언어로 컴파일 해주는 Babel인데, Babel이 JSX를 어떻게 컴파일하는지 예시를 통해 React가 실제 동작하는 원리를 파악해보자.const element = ( Hello, world! );const element = React.createElement( 'h1', {className: 'greeting'}, 'Hello, world!' );기본적으로 바벨은 React...
React Intro
React?React의 대표적인 특징 3가지1. 선언형 (Declarative)2. 컴포넌트 기반 (Component-Based)3. 범용성 (Learn Oncd, Write Anywhere)JSX (JavaScript XML)JSX와 BabelDOM, 그리고 React JSX주요 JSX 문법하나의 엘리먼트 안에 모든 엘리먼트가 포함CSS class 속성 지정은 classNameJavaScript 표현식 사용 시 중괄호 이용 {}사용자 정의 컴포넌트는 대문자로 시작조건부 렌더링에는 삼항연산자 사용여러 HTML 엘리먼트를 표시할 때는 map() 함수Component-Based컴포넌트 개발의 장점Create React AppReact 프로젝트 내의 public/index.html의 역할React?프론트엔드 ..
Node.js API (fs, fetch)
Node.js는 비동기적 런타임Node.js 내장 모듈 사용법서드 파티(3rd-party) 모듈 사용법Node.js 공식문서를 fs.readFile로 알아보자fs.readFile(path[, options], callback)path : \ | \ | \ | \options : \ | \callback : \fetch APINode.js는 비동기적 런타임"Node.js는 비동기 이벤트 기반 JavaScript 런타임이다.”위의 인용문은 Node.js 소개 문서의 첫 문장이다. 대표적으로 사용하는 JavaScript 런타임인 브라우저에서는 비동기와 관련해 타이머, DOM 이벤트 등 다소 한정적으로 사용하지만 Node.js의 경우 많은 API가 비동기로 작성되어 있다. Node.js 내장 모듈 사용법모든 모..
React SPA
SPA (Single Page Application)SPA의 장점SPA의 단점React에서의 Wireframe (컴포넌트 나누기)Routing?React RouterReact Router 주요 컴포넌트React Router 환경 세팅1. react-router 라이브러리 설치2. App.js에 react-router 컴포넌트 꺼내오기React Router 구현방법, useNavigateSPA (Single Page Application)웹페이지에서는 페이지를 유저에게 보여줄 때, 즉 페이지를 로딩할 때마다 서버에 미리 준비된 페이지를 전달받아 렌더링 했지만 규모가 커질수록 유저와의 상호작용이 많아지고 이에 따른 속도 저하 등의 문제가 발생했다. 이는 서버에 필요 이상의 트래픽을 발생시키는 것은 물론 유저..
React State & Props
Propsprops 사용 방법1. 하위 컴포넌트에 전달하고자 하는 값과 속성을 정의한다2. props를 이용해 정의된 값과 속성을 전달한다3. 전달받은 props를 렌더링한다StateState hook, useStateuseState 사용법state 갱신하기주의점이벤트 처리자주 사용하는 이벤트 처리onChangeonClickControlled ComponentReact의 데이터 흐름개발은 상향식(bottom-up)으로데이터의 흐름은 하향식(top-bottom)으로데이터 정의, 속성(props)인가 상태(state)인가?상태(state)를 위치시키는 방법예시를 토대로 : “전체 트윗 목록” 데이터 위치시키기Props컴포넌트의 속성(property)을 의미한다. 사람으로 비유하자면 성별이나 이름처럼 변하지 ..