프론트엔드 개발

자바스크립트는 객체(object) 기반의 스크립트 언어이며, 원시 타입(Primitives)을 제외한 나머지 값들(함수, 배열, 정규표현식 등)은 모두 객체이다. 키(key)과 값(value)으로 구성된 프로퍼티(Property)들의 집합이다. 객체는 new Object() 'object constructor' 문법 또는 {} 'object literal' 문법을 사용하여 만들 수 있다. Property value shorthand const person1 = {name: 'jihun', age: 28}; const person2 = {name: 'changhan', age: 23}; const person3 = {name: 'taenam', age: 21}; 만약에, 다음과 같이 person1부터 3까..

기본적으로 Next js는 모든 페이지를 pre-renders 해준다. 즉, Next.js는 클라이언트 측 JavaScript에서 모든 작업을 수행하는 대신 각 페이지에 대해 미리 HTML을 생성한다. 생성된 각 HTML은 해당 페이지에 최소한의 JS 코드와 연결된다. 브라우저에서 페이지를 로드하면 해당 JS 코드가 실행되고, 페이지가 상호작용 하게 된다. ( hydration ) 2가지 형태의 pre-rendering - Static-Generation: HTML은 빌드할 때 생성되며, 각 요청에서 재사용된다. - Server-side-Rendering: HTML은 매 요청 시에 생성된다. Static Generation 만약 페이지가 Static Generation를 사용하게 된다면, HTML은 빌드..

pages 폴더 바로 밑에 파일을 만들고 다른 설정 필요 없이 각 페이지는 파일의 이름과 연결되어, routing이 적용된다. Dynamic Routing Next.js는 dynamic routes를 제공한다. 예를 들어, test/1, test/2와 같이 접근하려면 pages 디렉터리 바로 밑에 아래와 같이 만들어야 한다. 네이밍을 대괄호로 감싸면 적용된다. router.beforePopState 경우에 따라 popstate를 호출하고 라우터가 작동하기 전에 무언가를 수행 할 수 있다. router.beforePopState(cb) cb-들어오는 popstate 이벤트에서 실행할 함수. 이 함수는 다음의 props를 사용하여 이벤트 상태를 객체로 받는다. url: String - 새로운 상태의 경로, ..

필요조건 Node.js 10.13 이거나 최신 Setup npx create-next-app // or yarn create next-app create next-app으로 설치 시, 1. 컴파일과 번들링이 자동으로 된다. 2. 변경사항 저장 시, 화면에 바로 적용 3. SSR 지원 4. static 파일 지원 pacakage.json에서는 "scripts": { "dev": "next dev", "build": "next build", "start": "next start" } - develope 환경 yarn dev를 터미널에서 실행하면, development server가 실행된다. 'http://localhost:3000'으로 들어가서 확인해보면 된다. - product 환경 yarn start를..

SSR과 hydration 고성능의 웹사이트를 만들기 위해서 우리는 Next.js의 수정버전을 사용할것이다. next는 기본적으로 SSR과 함께 성능 최적화 기능이 들어있다. next는 react를 다음과 같은 순서로 사용한다. 1. 서버에서 리액트 컴포넌트를 HTML string 형태로 렌더링한다. 2. 렌더링된 HTML을 클라이언트에게 보낸다. 3. javascript로 된 리액트 코드를 클라이언트에게 보낸다. 4. html을 리액트로 hydrate한다. next가 HTML 위에 돌돌 말려진 리액트 코드를 푸는것을 hydrate 라고 이해하면 된다. 그 후에 Next는 React에게 다음과 같이 말한다. hydration :: 미리 HTML을 로드해 두고 --> 페이지에 접근하게 되면 --> java..

객체지향언어(OOP)란? 서로 관련 있는 데이터와 명령어들을 묶어서 객체라는 것을 만들고, 이 객체에 지정된 방향대로 실행되는 방식이다. 이렇게 여러가지 객체들을 조립하는 방식으로 프로그래밍하는 것 객체 지향 언어의 특징 캡슐화(Encapsulation) - 프로그램 내에서 같은 기능을 목적으로 작성된 코드를 모아서 다른 곳(클래스)에서 안 보이게 숨기는 것. - 클래스에 정의된 속성(Attribute)는 숨기고(Private), 객체가 수행할 기능(Function)은 공개(Public)하는 것. 상속(Inheritance) - 자식 클래스는 상속받은 부모 클래스의 속성(변수) 및 기능(메서드, 함수)을 물려받는 것. 다형성(Polymorphism) - 하나의 클래스나 메소드가 다양한 방식으로 동작이 가..

function is object type Parameters premitive parameters: passed by value object parameters: passed by reference (메모리에 ref가 전달) Rest parameters ( ES6에서 추가) // parameters가 ...으로 선언하면 배열로 전달되어진다. function printAll(...args) { for(let i = 0; i console.log(arg)); }; printA..

1. primitive type - 더 이상 나눠질 수 없는 - 값 자체가 메모리에 저장된다 number special numeric values const infinity = 1 / 0; // Infinity const netativeInfinity = -1 / 0; // -Infinity const nAn = 'not a number' / 10; //NaN string boolean falsy 한 값: 0, null, undefined, NaN, '' truthy: 어느 값이든 있는 null 텅텅 비어있는 empty 값, 값이 할당이 되어 있는 undefined 선언은 되었지만, 값이 지정되어있지 않은 symbol 동시에 다발적으로 일어날 수 있는 코드에서 우선순위를 주고 싶을 때 사용 고유한 식별자..