목록 45

[Next.js] Next js를 배워보자 #1

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

개발/React 2020.09.10

동적 타입 언어와 정적 타입 언어

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

개발/Javascript 2020.09.10

최근 공부해보고 싶은 것들

회사에서 React 스터디가 끝나고 다음 스터디 주제를 선정하는데, 내가 하고싶은것들을 순서와 상관없이 나열하고, 공부하고 싶은 이유도 끄적끄적 해보았다. 남은 시간동안 조금씩 해보자 아무리 생각해봐도 공부할게 너무 많다. 의식의 흐름대로 적었으니 감안해서 봐주시면 감사하겠습니다ㅠㅠㅠ 공부할게 너무 많다... 너무 많지만 다 해야되는것같다. 요즘은 많은것들이 빠르게 변하고 있지만 변하는데 이유가 있는것같고, 그 이유를 느끼기 위해선 직접 거기에 빠져드는게 가장 좋다고 생각한다. 앞으로 남은 2020년동안 공부할것들을 적어보았다. 하고싶은거 리스트 순서는 상관 없습니다. Typescript 최근 js framework에서 typescript를 사용하려는 시도가 보임 서버쪽은 꽤 많이 사용하고 있는걸로 알려..

끄적끄적 2020.09.10

[You don't know JS] Part3 - 6장. 작동 위임

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

개발/Javascript 2020.09.06

[You don't know JS] Part3 - 5장. Prototype

[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...

개발/Javascript 2020.09.06

[You don't know JS] Part3 - 4장. 클래스와 객체의 혼합

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

개발/Javascript 2020.09.06

[You don't know JS] Part3 - 3장. 객체

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..

개발/Javascript 2020.09.06