Javascript
클라이언트 Ajax 요청
상태 끌어올리기 (Lift State Up)React 데이터 흐름단방향 데이터 흐름을 해치지 않는 React의 해결법간단한 방법 : 상태 변경 함수를 props로 전달Effect HookSide Effect (부수효과)Pure Function (순수 함수)React의 함수 컴포넌트React 컴포넌트에서의 Side EffectEffect Hook(useEffect)조건부 effect 발생주의사항Data Fetching: 필터링 예제 살펴보기1. 컴포넌트 내에서 필터링2. 컴포넌트 외부에서 필터링fetch를 이용한 AJAX 요청 보내기AJAX 요청이 매우 느릴 경우엔, 로딩화면상태 끌어올리기 (Lift State Up)React 데이터 흐름앞서 배웠듯 React 개발은 컴포넌트부터 개발을 시작해 하나로 모아..
[Web Server] Express
Express설치 및 간단 사용법설치간단 사용법라우팅라우트 메서드 METHOD라우트 경로 PATH라우트 핸들러 HANDLER응답 메서드 res.미들웨어미들웨어 함수미들웨어 사용서버 작성에 필요한 APIexpress.json()req.queryreq.paramscorsExpressExpress는 Node.js 환경에서 웹 서버, 또는 API 서버를 제작하기 위해 사용되는 프레임워크이다. Node.js HTTP 모듈로 작성한 서버와 달리 미들웨어를 추가 할 수 있고, 라우터를 제공하기 때문에 서버를 작성하는 측면에서 편의성이 증대되고 효율적이다.🌟MERN stack? JavaScript 생태계에서 인기 있는 프레임워크인 MongoDB(데이터베이스), Express(서버), React(SPA), Node.js..
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 내장 모듈 사용법모든 모..