범데이의 개발노트 📄

React 기반의 다양한 프레임워크와 라이브러리 중에서 Next.js는 그 구조와 성능 최적화 측면에서 특별한 지점을 차지하고 있다. 특히 기존의 React SPC(Single Page Application)와 비교했을 때, 코드 분할, 프리페칭, 라우팅 안정성 등의 측면에서 뛰어난 사용자 경험을 제공한다. 아래는 그런 Next.js의 주요 차별점과 특징을 정리한 내용이다. 1. 자동 코드 스플리팅 (Automatic Code Splitting)Next.js는 페이지 단위로 코드를 자동 분할한다.전통적인 React SPA는 초기 로딩 시 전체 애플리케이션 코드를 한 번에 불러오게 되어 있다. 페이지가 많아질수록 처음 로딩 속도가 느려지고, 사용자 경험이 떨어질 수 있다. Next.js는 이를 해결하기 위..

프론트엔드 개발에서 배포는 필수적인 과정이다. 특히 Next.js로 프로젝트를 개발한 경우, 이를 안정적으로 운영 환경에 올리는 방법에 대해 고민하게 된다. 이때 가장 자연스럽게 사용되는 플랫폼이 Vercel이다. Vercel이란?Vercel은 Next.js의 창시자가 만든 클라우드 플랫폼이다. 프론트엔드 프로젝트의 빌드, 배포, CDN 전송을 자동으로 처리해주며, 특히 NExt.js에 최적화되어 있다.Next.js를 만든 팀이 직접 만든 만큼, 최신 기능과 호환성이 뛰어나다. 주요 특징1. 자동 배포 (CI/CD 지원)GitHub, GitLab, Bitbucket등과 연동하면, 코드 푸시만으로 자동으로 배포가 진행된다.main 브랜치는 프로덕션으로 배포되고, 그 외 브랜치는 미리보기 링크가 생성된다. ..

Next.js는 React로 웹 애플리케이션을 개발할 수 있게 해주는 프레임워크이다. 기본적으로 React 위에서 동작하며, 서버 사이드 렌더링(SSR), 정적 사이트 생성(SSG), 라우팅, 이미지 최적화, API 서버 기능 등 다양한 웹 개발 기능을 포함하고 있다. 1. React 기반 프레임워크Next.js는 React의 기능을 그대로 활용하면서도, React만으로 만들기엔 번거로운 기능들을 기본 제공한다.예를 들어, 라우팅 설정, 코드 스플리팅, 데이터 패칭 방식 통일, SEO 최적화 등을 쉽게 처리할 수 있다. 2. 다양한 렌더링 방식 지원Next.js는 페이지를 어떻게 렌더링할지 선택할 수 있다. 주요 방식은 다음과 같다.- SSG (Static Site Generation): 정적 HTML을..

React 프로젝트가 커지면서 상대 경로로 모듈을 임포트하는 것은 가독성을 떨어트리고 관리하기 어려워질 수 있다. 상대 경로 대신 절대 경로를 사용하면 코드가 더 깔끔하고 유지 보수가 쉬워진다.   위의 예시처럼 상대 경로로 Import하여 관리하던 파일들의 경로가 바뀌기라도 한다면..?일일히 맞춰서 바꿔줘야하는 굉장히 수고스러움을 겪을 수 있다.   이 포스트에서는 React 프로젝트에서 절대 경로로 설정하고 사용하는 방법을 설명한다.  1. `jsconfig.json` 또는 `tsconfig.json`파일 생성프로젝트의 루트 디렉토리에 `jsconfig.json` 또는 `tsconfig.json` 파일을 생성한다. TypeScript를 사용하는 경우 `tsconfig.json` 파일을 사용할 수 있다..

1. 개요 외부 모듈을 npm으로 설치하여 package.json 에 의존성 정보 삽입 및 node_modules에 설치가 되었다. 하지만 serve 명령어로 electron을 띄었을 시에는 해당 모듈 import시 문제가 발생하지 않았는데, build 명령어로 프로그램을 빌드 후 실행하였을때 해당 모듈 import시 아래와 같이 Cannot find module 에러가 떴다. serve시에는 로컬에 이미 설치되어 있는 모듈을 잘 참조하지만, 빌드시에는 해당 모듈이 package.json에 관리되어 있어도, electron-builder가 프로그램에 필요한 모듈이라 생각하지 않아 설치되지 않고 빌드되어, 참조시에 에러가 발생하는 모양이다. 2. 해결방법 해결책을 찾은 사이트: https://stackov..

1. 개요 create-react-app을 통해 만든 React App의 경우 기본으로 3000번 포트를 사용해서 구동된다. 그러나 해당 3000번 포트가 겹치는 등의 사유로 따로 포트를 지정해줘야 할 상황이 생길 수 있다. 이와 같은 경우 포트를 변경해서 사용하는 대표적인 방법 세 가지를 정리해보고자 한다. (아래 내용들은 3001 포트로 변경한다고 가정한다.) 2. 포트 변경 방법 2.1 명령어로 포트 설정하기 - React 프로젝트 폴더에서 아래와 같은 명령어를 사용해 React 앱을 실행시킨다. (명령어를 통해 구동 시 한 번만 적용된다.) PORT=3001 npm start 2.2 package.json파일 설정 수정하기 - React 프로젝트 폴더에 ".package.json" 파일을 찾아 아..

1. 전제사항 NodeJS를 설치한다. (14~16 Version) VSCODE를 설치한다. 2. React 프로젝트 생성 프로젝트를 생성하고자 하는 위치의 상위폴더에서 다음의 명령어를 입력한다. 아래의 PROJECT_NAME에 원하는 프로젝트 이름을 넣으면 된다. npx create-react-app 이 과정을 스타벅스에서 진행하는게 아니라면(원활한 네트워크 환경이라면) 보통 1~2분내외 정도를 기다린 후 다음과 같이 Happy hacking! 이라는 문구와 함께 프로젝트가 생성됨을 확인할 수 있다. 생성된 프로젝트를 VSCODE로 열면, 다음과 같은 구조로 되어있음을 확인할 수 있다. 프로젝트 최상위 위치에서 다음과 같이 npm start명령어를 통해 로컬에 웹사이트를 띄운다. $npm start 컴..

Vue에서 템플릿과 스크립트 간 데이터 양방향 바인딩을 위해 아래와 같이 "v-model" 를 사용한다. 따라서, 이 textarea에 작성되는 값이 "something"이라는 변수에 반영이 되고, 반대로 "something" 변수의 값이 변경되면 이 textarea가 갖는 value도 변경이 된다. 이 v-model은 기본적으로 다음과 같다: :value - 데이터 바인딩. "something" 이라는 변수의 값을 textarea의 value로 설정한다. @input - 이벤트 바인딩. 이 textarea에서 input 이벤트가 발생하면 설정해준 "something = $event.target.value" 코드를 실행한다. 만일 v-model 대신 :value를 작성하면 "something" 변수의 값..

vue에서 html태그 내에 사용하는 data 단방향 바인딩 예약어로는 ":value", 이벤트 바인딩을 하기위해 "@change" 예약어를 사용하며, 이 둘을 혼합하여 양방향 바인딩을 하기위한 예약어로 "v-model"를 사용한다. 기본적으로 jQuery는 본연의 event system을 사용하기때문에 Vue에서 jQuery가 발생한 이벤트를 잡지 못하기 때문에 혼용하는것은 좋은 방식이 아닌데, 피치못하게 Vue에서 Jquery를 사용하여 HTML 요소 내 값을 직접적으로 건드릴 경우가 있다. 이럴때에는 다음과 같이 해결할 수 있다. jquery 모듈이 없으면 설치해 준다. npm install --save jquery mounted() 생명주기 메서드 내에 jquery 이벤트를 추가해주어 해결할 수 ..

[운영환경] vue: 3.0.0 language: typescript 기존에 Vue2를 사용할때는 전역으로 데이터를 전달하기 위해 EventBus를 사용하였었는데, EventBus는 이제 Vue에서 추천하는 공식적인 방법이 아니라고 한다. 그래서 이 포스팅에서는 'mitt' 라는 외부 라이브러리를 이용하여 이벤트 버스를 구현하고자 한다. (공식 usage 가이드는 다음 페이지에서 확인할수 있다: https://www.npmjs.com/package/mitt#usage) 1. 설치 npm install --save mitt 2. 사용 2.1 mitt 글로벌 변수 선언 /src 폴더의 main.ts에서 다음과 같이 import하고, globalProperties로 등록해 준다. import { createA..