02_자바스크립트란? 2.1 자바스크립트의 탄생 1995년, 넷스케이스 커뮤니케이션즈는 웹페이지의 보조적인 기능을 수행하기 위해 -> 브라우저에서 동작하는 경량 프로그래밍 언어를 도입하기를 결정 -> 그래서 탄생한 것이, 브렌던 아이크가 개발한 자바스크립트 1996년 3월, 모카(Mocha) 로 명명 -> 넷스케이프 커뮤니케이션즈의 웹 브라우저인 넷스케이프 내비게이터2 에 탑재 -> 그 해 9월, 라이브스크립트로 이름이 변경 -> 그 해 12월, 자바스크립트라는 이름으로 최종 명명 2.2 자바스크립트의 표준화 1996년 8월, 마이크로소프트는 자바스크립트의 파생 버전인 JScript 를 인터넷 익스플로어 3.0 에 탑재했다. 그러나 문제는 JScript 와 자바스크립트가 표준화되지 못하고 적당히 호환되었..
01_프로그래밍 1.1 프로그래밍이란? 컴퓨터에게 실행을 요구하는 일종의 커뮤니케이션 이를 위해 먼저 무엇을 실행하고 싶은지 정의할 필요가 있다. 프로그래밍에 앞서 해결해야 할 문제(요구사항)을 명확히 이해하고 적절한 문제 해결 방안을 정의할 필요가 있다. 이 때 요구되는 것이 문제 해결 능력 이다. 하지만 대부분의 문제는 명확하지 않을 수 있다. 따라서.. 문제(요구사항) 를 명확히 이해하는 것이 우선되어야 하며 복잡함을 단순하게 분해 하고 자료를 정리하고 구분해야 하며 순서에 맞게 행위를 배열해야 한다. 즉, 프로그래밍 이란 0과 1 밖에 알지 못하는 기계가 실행 할 수 있을 정도로 정확하고 상세하게 요구사항을 설명 하는 작업이며, 그 결과물이 바로 코드다. 1.2 프로그래밍 언어 문제 해결 능력을 ..
1. Assets 1.1 public 디렉토리 정적 데이터를 제공하는 경우 최상위 디렉토리의 public 를 이용하면 됩니다. 이미지 경로는 public 폴더가 / 로 매칭 됩니다. 1.2 최적화 되지 않은 이미지 그러나, 일반 HTML 의 img 를 사용하면 아래의 상황들을 수동으로 처리해야 합니다. 다양한 화면 크기에 이미지가 반응형으로 적용되는지 다른 툴 또는 라이브러리로 이미지 최적화 뷰포트에 들어갈 때만 이미지 로드 등 ... 하지만, Next.js 는 Image 를 처리하기 위해 즉시 사용 할 수 있는 구성 요소를 제공 합니다. 1.3 Image Component - 이미지 자동 최적화 Next.js 는 기본적으로 이미지 최적화도 지원 합니다. 이미지 크기 조정, 최적화와 최신 이미지 포멧 (..
Next.js 에서는 태그를 사용해서 페이지 이동하는 것을 반가워 하지 않습니다. 이유는, 앱 내에서 페이지를 이동 할 때 사용하는 특정 컴포넌트가 존재하기 때문 입니다. React 에서 React router link 를 사용하는 이유와 같습니다. 태그를 사용해서 페이지를 이동하게 되면 애플리케이션은 새로고침이 발생 합니다. Link 페이지간의 탐색을 CSR으로 진행 할 수 있습니다. Code Splitting이 페이지 별로 진행 되어 각 페이지에서 필요한 것만 로드할 수 있도록 합니다. 특정 페이지에서 오류가 발생하더라도 나머지 앱은 정상 작동 합니다. 라우팅 라이브러리가 필요하지 않습니다. next/link 가장 먼저 import 를 합니다. 별도의 설치는 필요하지 않습니다. import Link ..
Next.js 의 Router 는 file-system 기반 file-system : 파일을 만들면 그 즉시 라우터로 인지되고 주소가 맵핑이 됩니다. pages/ src/pages/ 리액트에서는 별도의 Router 를 제공하지 않기 때문에 별도의 라이브러리를 사용해야 하지만, Next.js 는 기본적으로 제공을 합니다. pages/ OR src/pages 둘 중 우선순위는? 우선순위는 pages/ 가 우선 입니다. pages/index.js import Link from 'next/link' import { useEffect, useState } from 'react' export async function getStaticProps(){ console.log('server') return { props..
1. React.js 의 방식 1.1 기존의 React 는 CSR 방식으로 화면을 렌더링 합니다. 클라이언트 측에서 화면을 직접 렌더링 합니다. 즉, 브라우저가 유저가 보는 UI 를 만듭니다. React 로 만들어진 화면의 모든 것은 HTML 소스코드 안에 들어있지 않습니다. React 로 만들어진 앱을 개발자 도구로 확인하면, 하나의 만을 가지고 있을 것 입니다. 브라우저가 HTML 을 가져올 때 비어있는 div 으로 가져옵니다. 그 후, 브라우저가 모든 자바스크립트를 요청해서 자바스크립트와 React.js 를 실행 시키고 그 다음 화면이 유저에게 보이게 됩니다. 1.2 만약 자바스크립트를 가져오는 속도가 느리다면? 사용자는 화면이 렌더링 되는 시간을 오래 동안 기다려야 할 것 입니다. 브라우저는 자바..
데이터 가져오기, 화면에 무엇인가를 그리려면 어디선가 데이터를 가져와야 합니다. 1. SSR (Server Side Render) 페이지에 대한 요청이 있을 때마다 서버에서 페이지를 만들어 반환 합니다. 서버에서 매번 연산을 해야하며 캐시를 사용하는 것이 상대적으로 어렵기 때문에 SSG에 비해 느립니다. 하지만 항상 최신의 정보를 보여주어야하는 경우, SSR를 사용하는 것이 좋습니다. (프론트)서버에서 HTML 파일을 만들어서 보내기 때문에 CSR에 비해 사용자가 더 빠르게 화면을 인식할 수 있습니다. 하지만 이벤트 등 페이지의 동작을 위해서는 hydrate라는 과정을 통해서 JS 코드가 실행되어야 합니다. 서버 가 그립니다. 그린다 : 데이터를 가져와서 나타낸다. 즉, 서버가 데이터를 가져와서 그린다...
