본문 바로가기

전체 글

 (291)
[nextjs] File system routing https://nextjs.org/learn/basics/data-fetching nextjs 프레임워크가 리액트와 차별화되는 특징 중 하나는 서버측에서 페이지를 일부 생성하여 사용자에게 전달할 수 있다는 점이다. 이때 리액트에서 라우팅이 react-router 라이브러리에 의존하고, 및 컴포넌트에 의해 수행되었던 것과는 달리, nextjs는 파일 시스템 라우팅을 기본적으로 채택한다. 이 시스템에 대해 알아보자. nextjs의 페이지 nextjs는 파일 시스템 라우팅을 지원하며, 모든 페이지 컴포넌트들은 pages 폴더 내부에 존재한다. 파일 시스템 라우팅은 파일 시스템 상의 경로에 기반하여 사이트의 경로를 지정하는 방식으로, 웹사이트의 경로 ( 보통 path로 표현 ) 와 서버의 파일 시스템 상 상대 ..
[nextjs] _app · _document · _error nextjs에는 이름 앞에 _ 이 붙는 특별한 컴포넌트들이 존재한다. _app · _document · _error 과 같은 컴포넌트들이 여기에 속하는데, 이들은 nextjs에서 기본적으로 제공하는 기능을 개발자의 필요에 따라 일부 변경해야하는 경우에 사용되며, 각각 페이지 초기화, html 문서 구조, 에러 페이지를 커스터마이징할 때 사용된다. 모든 파일은 pages/ 폴더 바로 안에 위치한다. _app https://nextjs.org/docs/advanced-features/custom-app _app.js 파일은 모든 페이지 컴포넌트에 대해 적용되어야 하는 요소를 초기화할 때 사용된다. 만약 해당 파일이 존재한다면, 모든 페이지 컴포넌트에 대해 _app 파일에 정의된 여러 설정들이 적용된다. 예컨..
[nextjs] nextjs에서 bootstrap 사용하기 https://getbootstrap.com/ Bootstrap The most popular HTML, CSS, and JS library in the world. getbootstrap.com 웹페이지의 디자인이 필요할 때 css 을 이용하여 모든 요소를 제작하는 것도 좋은 방법이겠지만, 해당 작업에 시간을 많이 투자할 수 없거나, css 및 브라우저 환경간의 차이를 반영한 디자인에 익숙하지 않다면 차라리 이미 존재하는 툴을 이용하는 것이 나을 것이다. 이때 부트스트랩을 이용하면 프론트엔드 환경의 디자인을 간단하게 처리할 수 있다. 부트스트랩은 반응형 + 모바일 디자인을 위한 css 및 js 파일을 제공하는 라이브러리로, 간단하게 웹을 디자인 하는 경우 미리 만들어져 있는 포맷을 가져다가 사용하면 되..
[nextjs] SSR을 위한 리액트 프레임워크 리액트는 상태 기반으로 렌더링 및 정보를 처리하기 위한 프레임워크로, 리액트 기반의 사이트는 하나의 html 파일에 대해 가상 DOM을 설정하고, 자바스크립트에 기반하여 해당 내용을 페이지 내에 반영하는 방식으로 동작한다. 리액트 페이지 주소를 처음 방문하면 클라이언트는 html 파일 하나와 가상 DOM을 구성하는 자바스크립트 객체를 얻게 된다. 이때 html 페이지는 사실상 아무런 내용도 가지지 않으므로 초기 페이지는 흰색을 띈다. 이후 가상 DOM이 자바스크립트 코드를 통해 실제 DOM과 대응되면, 우리가 아는 페이지를 볼 수 있게 되며, 리액트가 동작하게 된다. 이후 페이지는 갱신 없이 자바스크립트 코드 및 사용자의 반응에 따라 변경된다. 위와 같은 이유로 리액트 기반 페이지는 몇가지 제한점이 존재..
[자바스크립트] RegExp - 자바스크립트와 정규표현식 다양한 종류의 정보들은 저마다의 특정한 규칙을 가지는 경우가 많다. 예를 들어 전화번호라는 정보는 010 으로 시작하여 3자리 혹은 4자리 숫자가 2번 반복된다는 규칙을 가진다. 따라서 우리는 010-XXXX-XXXX 라는 문장을 보면, 앞서 언급한 규칙에 기반하여 이 문장을 전화번호로 판단할 수 있다. 즉, 우리는 전화번호의 패턴에 기반하여 특정 문장이 전화번호인지 여부를 알 수 있는 것이다. 특정 정보들이 공통적으로 가지고 있는 고유한 패턴을 이용하면 주어진 데이터에서 해당 정보들을 식별할 수 있는데, 이때 사용되는 고유한 패턴을 정규표현식이라고 한다. 정규표현식은 특정 정보의 문자열을 일정한 패턴으로 표현하는 형식 언어로, 많은 프로그래밍 언어에서 regex 등의 이름으로 해당 기능을 지원하고 있다..
[npm] errno -4092 | EACCES 에러 오늘 npm을 사용했는데, 어제까지는 발생하지 않았던 에러가 발생했다. 에러 내용은 아래와 같다. 마지막 실행 시점과 변경된 코드가 하나도 없는데 대체 이러한 에러가 왜 발생하는 것일까? 이를 알아보기 위해 우선 EACCES 에러가 무엇인지 먼저 알아보자. EACCES 에러 특정 모듈이 거의 모든 프로젝트에서 사용되는 경우, 우리는 해당 모듈을 전역적으로 설치한다. 이때 전역 모듈들이 설치되는 폴더는 따로 변경하지 않는 한 다음과 같은 경로에 존재한다. %USERPROFILE%\AppData\Roaming\npm\node_modules ~\AppData\Roaming\npm\node_modules : 위의 경로와 동일하게 처리된다. 이때 대부분의 운영체제에서는 특정 파일에 대한 접근 권한을 지정할 수 있..
Sequelize : 런타임 코드 생성을 활용하는 ORM~ Sequelize는 프로미스 기반의 ORM 으로, 일반적인 SQL 및 NoSQL 영역의 데이터베이스도 처리할 수 있다. 모델간의 관계를 지정 (Association) 하면 런타임에 코드가 생성되는 등 라이브러리 전반적으로 런타임 속성 할당이 많이 발생하기 때문에, 타입스크립트를 도입하여 사용하더라도 큰 메리트는 없으며, 모델간의 관계에 대응되는 함수들을 수동으로 declare 해야 하기 때문에 꽤 번거롭게 느껴진다. 물론 자동완성 기능이 크게 중요하지 않고, 자바스크립트 기반으로 ORM을 사용할 예정이라면 충분히 좋은 선택이 될 수 있다. 현재 글에서는 Sequelize ORM을 타입스크립트 환경에서 사용하는 경우에 대해 정리한다. https://github.com/blaxsior/web_study/tr..
[SQL] Object Relation Mapping 현대 사회에서는 짧은 시간에도 많은 데이터들이 오간다. 이러한 데이터들은 서버 기능을 하는 호스트에 의해 관리되는 경우가 많으며, 해당 서버에서는 데이터베이스 관리 시스템을 이용하여 데이터들을 체계적으로 관리하고 있다. 데이터베이스 관리 시스템으로 자주 사용되는 구조 중 하나인 RDBMS에서는 데이터를 개체간의 관계를 이용하여 관리하는데, 이러한 시스템은 통상적으로 SQL 언어를 사용하기 때문에, 만약 우리가 RDBMS 에 저장된 데이터를 호출하고 싶다면 SELECT와 같은 쿼리를 작성하여 여러 테이블에 저장된 데이터들을 불러올 수 있겠다. 실제 서버를 운영하는 경우에도 이러한 기조는 변하지 않는다. 클라이언트가 특정 url을 통해 데이터베이스 내에 존재하는 데이터를 요청하도록 구현하고 싶다면, 서버에서..

티스토리툴바