본문 바로가기

전체 글58

[React] 리액트 SPA 키워드 : MPA, SPA, Routing, Router, Browser Router, Route(s), Link SPA(Single Page Application) 특징 페이지 전환 시 중복되는 부분(메뉴, footer... 등)은 새로 불러오지 않는 웹페이지 표시 실행 방식. 완전히 새로운 페이지를 불러오는 것이 아닌 화면 update에 필요한 데이터만 서버에서 전달받아 업데이트하는 방식으로 작동하는 Web App or site를 일컬음. 전통적인 방식 SPA 방식 느린 반응성 빠른 반응성 페이지 이동 시, HTML 파일로 된 '페이지 전체'가 로딩 update 필요한 '부분'만 서버에서 전달받아 로딩 불필요한 트래픽 발생 불필요한 트래픽 발생 X 과부하 위험 높음 과부하 위험 낮음 단점 JS 파일 .. 2022. 6. 5.
[React] 리액트 & JSX 키워드 : JSX, 컴포넌트 [리액트] JS 오픈소스 라이브러리 3대 특징 1. 선언형 HTML/ CSS / JS로 나눠 적기보단, 하나의 파일에 명시적으로 작성할 수 있게 JSX를 활용한 선언형 프로그래밍을 지향. 직관적. 코드만 보고도 기능 및 모습 예측이 가능. 2. 컴포넌트 기반 컴포넌트 : 하나의 기능 위주로 구분한 코드 묶음집. 컴포넌트를 분리하면 독립적이고 재사용이 가능 -> 기능 자체에 집중하여 개발 가능. 유지 보수에 용이. 컴포넌트 내에 다른 컴포넌트들이 존재 가능. 3. 범용성 JS 프로젝트 어디서든 이용 가능. 기존 프로젝트에도 유연하게 적용 가능. 리액트 네이티브 이용 시 모바일 개발도 가능. [JSX] Javascript XML JS를 확장한 문법 리액트에서 UI 구성 시 사용하.. 2022. 6. 4.
[Node.js] fetch API, fs.readFile 키워드 : Node.js, fetch API, fs.readFile, JSON, JSON.parse, .json() fetch API - 특정 URL에서 정보를 받아오는 역할을 한다. - 비동기적으로 수행된다. 모듈 - 어떤 기능을 조립할 수 있는 형태로 만든 것 - fs(File System) 모듈 : PC의 파일을 읽거나 저장하는 등의 일을 할 수 있게 도와줌. - 모듈을 사용하기 위해서는 불러오는 과정이 필요. - Node.js에서는 JS코드 최상단에 require 구문을 이용하여 다른 파일을 불러온다. - 3rd party 모듈 : 빌트인(내장)모듈이 아닌 외부 모듈. npm으로 다운로드 해야함. - fs.readFile : 로컬에 존재하는 파일을 읽어옴. fs.readFile (path [,op.. 2022. 6. 1.
[JS / Node] 비동기 (타이머API) 키워드 : 비동기, 타이머API setTimeout ( callback, millisecond ) - 일정 시간 후에 콜백 함수를 실행 - 매개변수 : callback : 실행할 콜백함수 millisecond : 콜백함수 실행 전 기다려야 할 시간(밀리초) clearTimeset ( timerId ) - setTimeout 타이머를 종료 - 매개변수 : timerId - 리턴 값은 없음. setInterval ( callback, millisecond) - 일정 시간의 간격을 두고 함수를 반복적으로 실행. - 매개변수 : callback : 실행할 콜백함수 millisecond : 시간 간격(밀리초) clearTimeset ( timerId ) - setInterval 타이머를 종료 - 매개변수 : .. 2022. 6. 1.
[JS / Node] 비동기 키워드 : 비동기, callback, Promise, Promise chaining, Promise All, Async Await 비동기의 순차 제어 방법 - 기본적으로 비동기의 경우, 작업이 순차적으로 시작되었다고 해서 결과도 순차적으로 나오지 않음. - 순어를 제어하고 싶을 경우 : callback 함수, Promise, Async Await 활용. 1. callback 함수 - 함수 내에서 callback 함수를 계속해서 호출하여 순서를 제어할 수 있다. - 하지만, callback 함수가 대량으로 끊임없이 이어질 경우 일명 'callback hell'이 발생. 예시 코드) const getDataFromFile = function (filePath, callback) { fs.readFile(fi.. 2022. 5. 31.
[JS / Node] 동기 vs 비동기 키워드 : 동기, 비동기, callback, blocking, non-blocking, Promise, Promise chaining, Promise All, Async Await 동기 (Synchronous) - 요청에 대한 결과가 즉시 발생. - 시작 시점과 완료 시점이 동일. - blocking 이 동반 : 하나의 작업이 완료되어야 다음 작업이 시작될 수 있음. - 순차적으로 진행. 비동기 (Asynchronous) - 요청에 대한 결과가 즉시 발생하지 않음. - non-blocking : 하나의 작업이 완료되지 않아도 다음 작업 시작이 가능. - 일종의 분업화 개념과 비슷 비동기 함수 전달 패턴 1. callback 패턴 2. 이벤트 등록 패턴 비동기의 주요 사례 DOM Element의 이벤트 핸.. 2022. 5. 31.

티스토리툴바