Junvely 개발일기

1. Route groups 폴더이름에 ()괄호를 넣어주면 url은 변하지 않고 페이지를 묶어줄 수 있다. routes를 그룹화하여 logical groups로 만들 수 있다. 이렇게 관련된 페이지들을 그룹화 하면 좀 더 직관적으로 파악이 가능하다. 2. Meta Data - 메타 데이터는 병합된다(다른 page에서는 title, layout에는 description 사용할 경우 병합되어 나옴) - page나 layout 에서만 메타데이터를 내보낼 수 있다. - 컴포넌트에서는 메타데이터를 내보낼 수 없다. - 메타 데이터는 서버 컴포넌트에서만 있을 수 있다. - title 등에 template 옵션으로 공통으로 띄울 문자열 지정이 가능하다. default는 기본값. - 공식문서에서 여러가지 옵션들 확인 ..

[Next.js] Next.js Routing과 Hydronation, 'use Client' 알아보기 Next.js에 대해 공부해보면서 알게된 내용들을 간단히 정리해 보고자 한다. 먼저 React는 라이브러리이고, Next.js는 프레임워크이다. 학습하면서 차이가 있었던 것은 리액트는 라이브러리 이기 때문에 폴더 구조, 이름, 라우팅, CSS, 하나부터 열까지 모든 선택과 결정을 내가 해야 했었다. 어떻게 보면 하나 하나 전부 고민해야 하고 여러가지를 공부하고 선택해야 하는 번거로움이 있었지만 내가 원하는 대로, 필요할 때 원하는 패키지와 개발 방식으로 자유롭게 개발할 수 있다는 장점이 있었다. Next.js같은 경우는 프레임워크기 때문에 그들이 정해놓은 룰과 규칙이 있었고, 라우팅 방식이나 폴더구조,..

TypeScript 란 무엇인가? 1. Javascript의 한계 모든 언어에는 타입 시스템이 존재하며, 크게 정적 타입 시스템과 동적 타입 시스템으로 나뉘어 진다. 각각의 특징은 다음과 같다. 1) 동적 타입 시스템 = JavaScript, Python - 타입을 미리 검사하지 않는다. - 개발자의 의도치 않은 타입 실수로 인해 치명적인 오류가 발생할 가능성이 높다. -> 타입을 미리 검사하지 않기 때문에 타입 오류 시에도 실행이 바로 중단되지 않는다. 때문에 개발자의 타입 실수 시 런타임 중 하루뒤, 한달 뒤 등 예기치 못할 때 갑작스럽게 에러가 발생하는 등 잘 돌아가던 프로그래밍이 갑자기 실행이 안된다던지 치명적인 오류가 발생할 수 있고 디버깅이 힘들다. 2) 정적 타입 시스템 = C, Java -..

먼저 클로저를 알아보기 전에 이해해야 할 개념은 실행 컨텍스트와 렉시컬 환경이다. 이 개념을 다시 한번 되새기며 클로저에 대해 알아보도록 하자. [Deep Dive] 자바스크립트 실행 컨텍스트란 무엇인가? 실행 컨텍스트(Execution context)란 무엇인가? 💡 실행 컨텍스트란? 코드를 실행하는데 필요한 환경 정보를 제공하는 객체로, 코드 실행 결과와 순서를 관리하는 영역입니다. 식별자와 *스코프는 실 junvelee.tistory.com 실행 컨텍스트와 렉시컬 환경을 이해했다면, 클로저라는 것은 무엇일까? 클로저(Closer)와 렉시컬 환경 먼저 기억해야 할 것은 렉시컬 환경의 특징이다. 자바스크립트 엔진은 함수를 어디서 호출했는지가 아니라 함수를 어디에 정의했는지에 따라 상위 스코프를 결정한다..

실행 컨텍스트(Execution context)란 무엇인가? 💡 실행 컨텍스트란? 코드를 실행하는데 필요한 환경 정보를 제공하는 객체로, 코드 실행 결과와 순서를 관리하는 영역입니다. 식별자와 *스코프는 실행 컨텍스트의 렉시컬 환경에서 관리하고, 코드 실행 순서는 스택으로 관리합니다. *스코프 : 식별자에 대한 유효범위 코드의 평가와 실행 모든 소스코드는 평가와 실행 과정으로 나누어 처리되고, 실행 컨텍스트를 통해 실행되고 관리된다. - 코드 평가 : 실행 컨텍스트 생성 및 변수, 함수 등의 선언문의 식별자를 실행컨텍스트의 렉시컬 환경(Lexical Environment)의 환경 레코드(Environment Record)에 등록, 스코프 체인 형성, this값 설정 - 코드 실행 : 런타임 시작, 변수나..

오늘 목표 : var, let, const의 차이 / hoisting(호이스팅) 모던 자바스크립트 Deep Dive 책을 이용해 변수들과 호이스팅에 대해 공부한 내용을 정리해 보았다. 1. var의 등장 배경 / 문제점 1) 중복 선언 - 같은 이름의 변수를 중복해서 선언해도 정상적으로 동작한다. 또 재할당이 아니라 이전의 변수가 덮어쓰여진다. 규모가 큰 프로젝트에서 변수명이 중복될 경우에도 Error가 발생하지 않는다. 이는 누군가 실수로 변수를 중복 선언하여 의도치 않은 결과를 초래할 수 있다. 2) var 호이스팅 - var변수의 선언문이 스코프 내의 최상단으로 끌어올려진 것처럼 동작하여 변수를 정의하기 전에 사용해도 에러가 발생하지 않는다. 3) 함수 레벨 스코프 - var 키워드로 정의된 변수는..