기록하는 블로그

이번장에선 외부 데이터를 어떻게 fetching하는지 살펴본다. 이번 장에서는 이번 장에선 아래와 같은 내용을 살펴본다. Next.js 의 pre-rendering 피쳐를 살펴본다. pre-rendering의 두가지를 살펴본다. Static Generation Server-side Rendering 데이터 유무에 따른 static Generation방식을 살펴본다 [getStaticProps](https://nextjs.org/docs/basic-features/data-fetching#getstaticprops-static-generation) 와 사용법에 대해 알아본다. [getStaticProps](https://nextjs.org/docs/basic-features/data-fetching#get..

이번엔 Css 스타일을 입혀보도록 하자 Next.js has built-in support for CSS and Sass. For the purposes of this course we will use CSS. Next.js는 CSS와 Sass가 내장되어있다. 이번엔 css를 사용해볼 예정이다. 어떻게 Next.js가 이미지나 메타데이터와 같은 정적 assets을 다루는지 알아본다. 목표 이번장에선 아래와 같은 내용을 배울것이다. 어떻게 정적 파일을 Next.js에 추가하는지 어떻게 각 페이지별안에 내용을 커스텀 하는지 어떻게 CSS 모듈을 사용하여 React Component를 재사용 하는지 어떻게 global CSS를 적용하는지 몇가지 Next.js에서의 스타일링 팁 좀더 자세한 내용을 보고싶다면 C..

React나 angular, vue 같은 프레임워크(라이브러리) 를 보면 서버에서 완성된 HTML, CSS, Js 파일을 내려주는것이 아니라 간단한 뼈대만 내려주고, 클라이언트 측에서 Javascript를 사용하여 화면을 그리는 클라이언트 사이드 렌더링 방식을 주로 사용한다. 서버사이드 렌더링과 클라이언트 사이드 렌더링은 각각의 장단점을 가지고 있고, 특징에 맞게 잘 활용해야 한다. 그중, React를 사용할때 서버사이드 렌더링이 필요한경우 Next.js를 자주 접하게 되는데, 어떤 특징이 있고, 어떻게 사용하는지 간단히 살펴보고 맛을 보도록 하자. https://nextjs.org/

면접관으로 들어갈때 종종 타입이 정적인 언어와 동적인 언어를 비교해보라는 질문을 하는데 내가 이 질문을 받으면 얼마나 멋지게 대답할지 문득 궁금해졌다. 그래서 내 생각을 정리해볼겸 글로 남기기로 하였다. Stack overflow에서는? 일단 Stack overflow에서 꽤 추천수를 받은 답을 보자. 정적 타입 언어 compile time에 변수의 타입을 알고있다면 정적 타입 언어이다. Java나 C, C++과 같은 언어에서는 개발자가 각각의 변수에 특정한 타입들을 지정해줘야한다. Ocaml, Haskell, Scala, Kotlin 과 같은 언어에서는 타입의 인터페이스를 제공하고, 시스템이 변수의 타입을 결정할 수 있도록 한다. 여기서의 장점은 모든 종류의 체킹을 compiler에 의해서 확인할 수 ..

작동 위임 5장을 요약하면 다음과 같다. [[Prototype]] 객체는 한 객체가 다른 객체를 잠조하기 위한 내부 링크이다. [[Prototype]]을 사용하여 객체에 없는 필드나 메서드에 접근하기 위해 사용한다. 현재 객체에 없으면 [[Prototype]]을 따라 들어가 찾고, 다시 또 [[Prototype]]를 찾는다. 이를 프로토타입 체이닝이라 한다. 6.1 위임 지향 디자인으로 가는 길 Javascript는 [[Prototype]]이 클래스와 근본부터 다른 디자인 패턴이다. 단, 클래스 지향 디자인 원칙을 모두 포기하라는것은 아니다. 6.1.1 클래스 이론 클래스 기반의 디자인 설계 부모가 되는 클래스를 설계 부모를 상속받은 자식클래스를 정의한다. 자식의 특성을 자식클래스에 정의한다. 위 과정에..

[Part2] Ch5. Prototype 5.1 [[Prototype]] [[prototype]]이라는 내부 프로퍼티가 있고, 다른 객체를 참조하는 단순 레퍼런스로 사용 보통 생성 시점에 할당되며 [[Get]]으로 접근했는데 없으면 이 [[prototype]]을 사용하여 값을 찾는다. var anotherObject = { a: 2 }; var myObject = Object.create(anotherObject); myObject.a; // 2 myObject는 anotherObject와 [[prototype]]으로 링크되었다. myObject에는 a라는 값이 없지만 anotherObject에서 찾아온것이다. var anotherObject = { a: 2 }; var myObject = Object...

객체지향 프로그래밍 (OOP, Object oriented progamming)에 대해 알아보자 인스턴스화, 상속, 다형성 등 클래그 관련 기법들을 살펴보기 전에, 클래스 지향을 디자인 패턴으로 조명해보자. 클래스 지향 개념은 자바스크립트와 잘 맞지않는 부분이 있어 헷갈린다. 4.1 클래스 이론 클래스와 상속은 특정 형태의 코드와 구조를 형성하며 실행활 영역의 문제를 소프트웨어로 모델링 하기 위한 방법이다. 자세한건 OOP 관련된 책에서 확인 4.1.1 클래스 디자인 패턴 클래스를 디자인 패턴이라고 생각해본적이 없음. 절차 지향형 프로그래밍을 좀더 체계적으로 바꾼 일종의 디자인 패턴이다. 4.1.2 자바스크립트의 클래스 일단 Javascript에서 클래스는 없다. ⇒ 비슷하게 프로토타입을 사용하여 흉내낼..

3.1 구문 객체는 두가지 형태로 정의할 수 있다. 리터럴형 선언형 var obj = { key: 1 } 한번에 여러 필드 정의 가능 var obj = new Object(); obj.key = 1; 한번에 하나의 필드를 정의할 수 있음 3.2 타입 원시타입 7가지 null undefined boolean number string object symbol 원시타입은 객체가 아니다. null이 객체라고 아는 사람도 있는데, 이는 typeof의 버그로 인해 object가 나오는것일뿐 실제론 객체가 아니다. javascript의 모든것은 객체이다는 말은 잘못된 말이다. 3.2.1 내장 객체 내장객체란 객체의 하위 타입이다. String Number Boolean Object Array Function Date..