프론트엔드 개발

JSON (JavaScript Object Notation)은 경량의 DATA-교환 형식이다. 이 형식은 사람이 읽고 쓰기에 용이하며, 기계가 분석하고 생성함에도 용이하다. JSON은 완벽하게 언어로부터 독립적이지만 C-family 언어 - C, C++, C#, Java, JavaScript, Perl, Python 그 외 다수 - 의 프로그래머들에게 친숙한 관습을 사용하는 텍스트 형식이다. 이러한 속성들이 JSON을 이상적인 DATA-교환 언어로 만들고 있다. Json 특징 JSON stands for JavaScript Object Notation JSON is a lightweight data-interchange format JSON is "self-describing" and easy to un..

NEXT JS Environment Variables를 번역했습니다. Next.js 버전 9.4 이상용입니다. 이전 버전의 Next.js를 사용하는 경우 next.config.js에서 환경 변수를 업그레이드하거나 참조하세요. (github.com/vercel/next.js/tree/canary/examples/environment-variables) Exposing Environment Variables to the Browser 기본적으로. env.local을 통해로드 된 모든 환경 변수는 Node.js에서만 사용할 수 있는데, 브라우저에 변수를 사용하려면 변수 앞에 NEXT_PUBLIC_을 붙여야합니다. NEXT_PUBLIC_ANALYTICS_ID=abcdefghijk process.env.NEXT_..

자바스크립트는 객체(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) - 하나의 클래스나 메소드가 다양한 방식으로 동작이 가..