본 글은 Next.js14 기반으로 작성 됐습니다. 설치 create-next-app npx 패키지를 사용하여 next.js 프로젝트를 생성할 수 있지만 프로젝트 초기세팅을 경험해보기 위해 typescript 를 적용한 프로젝트를 직접 A to Z로 생성해봤다. npx create-next-app@latest --typescript // 타입스크립트를 사용하는 프로젝트 생성 수동설치 결론부터 말하자면 수동으로 프로젝트를 생성하는 건 생각했던 거만큼 어렵지 않았다. 오히려 npx로 생성할 때보다 직관적이고 필요 없는 파일들을 생성하지 않아도 된다는 게 맘에 들었다. 프로젝트를 생성 하는 과정은 다음과 같다. 프로젝트 폴더생성 mkdir next-test 생성해준 폴더에 명령어를 입력 해준다. npm ini..

(Next.js14 기준으로 작성된 글 입니다.) Next.js란? React를 기반으로하는 웹 개발 프레임워크 React는 UI를 만들기위한 JavaScript 라이브러리이며, React로 작성된 애플리케이션은 SPA(Single Page Application)이라함 2016년에 Vercel 이라는 회사에서 공개함 주요기능 Full-Stack 개발 File-based Routing API Routing SEO, Dynamic Metadata SSR Pre-Rendering WHY NEXT.JS? 대표적으로 Next.js 는 SSR(Server Side Rendering)을 지원한다. 기본적으로 React는 CSR(Client Side Rendering)을 한다. 이는 브라우저에서 html을 요청했을때 ..

자바스크립트 비동기 방식 자바스크립트는 싱글 스레드 프로그래밍 언어기 때문에 멀티작업을 하기 위해서는 비동기 처리 방식이 자주 쓰인다. 비동기는 백그라운드로 동작하기 때문에 그 결과가 언제 반환될지 알 수 없기때문에, 완료결과를 받기위해 쓰이는 콜백 함수(callback) 와 이를 보완하기 위해 나온 프로미스(Promise)가 있다. async / await async/await는 ES2017에 도입된 문법으로서, Promise 로직을 더 쉽고 간결하게 사용할 수 있게 해준다. 유의해야 할 점이 async/await가 Promise를 대체하기 위한 기능이 아니라는 것이다. 내부적으로는 여전히 Promise를 사용해서 비동기를 처리하고, 단지 코드 작성 부분을 프로그래머가 유지보수하게 편하게 보이는 문법만..

개요 Firebase는 2011년 Firebase사가 개발했다. 이후 2014년 구글에 인수되었다. Firebase 가 제공하는 클라이언트 SDK(소프트웨어 개발도구)가 이런 백엔드 구성요소들과 직접 상호작용을 하며, 구축한 앱과 서비스 사이에는 그 어떤 미들웨어(Middleware)도 구축할 필요가 없습니다. 일반적으로 클라이언트 앱에서 데이터베이스 쿼리(query)를 전송하는 코드를 작성하게 된다. 전통 HTTP 요청 일반적으로 프론트엔드와 백엔드 양쪽 모두에서 쿼리를 작성한다. 프론트엔드 코드는 백엔드의 API만을 호출할 뿐이며, 실제로 작업을 수행하는 것은 백엔드 코드이다. Firebase 요청 Firebase를 이용하면 이러한 백엔드 쪽의 작업을 건너뛰고, 그 일을 클라이언트 쪽으로 넘길 수 있..

React란? 사용자 인터페이스를 구축하기 위한 자바스크립트 라이브러리 React는 선언적이고, 효율적이고, 유연하다 컴포넌트(Components) 라는 요소를 이용하면 복잡한 UI를 독립적인 단위로 쪼개어 구현할 수 있다. Why? 동적(Dynamic) 인 웹페이지를 구축할 수 있고, 인터페이스를 지속적으로 변경이 가능하다. React의 Virtual DOM은 사용자 경험을 향상하고 개발자의 작업 속도를 높인다. Virtual DOM이란 가상적인 표현을 메모리에 저장하고 ReactDOM과 같은 라이브러리에 의해 실제 DOM과 동기화하는 재조정 개념이다. React 컴포넌트의 재사용은 개발 시간을 크게 절약한다. 단방향 데이터 흐름을 통해 안정적인 코드를 제공한다. 단향향 데이터 흐름은 데이터는 항상 일..

1. var ES6 이전에 나온 변수 선언방법 var변수가 함수 외부에서 선언될 떄의 범위는 전역 함수 블록 외부에서 var를 사용하여 선언된 모든 변수를 전역으로 사용할 수 있음 특징으로는 var 변수는 재선언,재할당 가능하다. 문제점 var hello = "hi"; var count = 4; if (count > 3) { var hello = "say Hello"; } console.log(hello) // "say Hello" count > 3 가 true 를 반환하기 때문에 hello는 "say hello" 로 재정의 된다. 이미 정의되어 있다면 상관 없지만 인식하지 못했다면 문제가 된다. 2. let var와 마찬가지로 let으로 선언된 변수는 해당 범위 내에서 업데이트될 수 있다. var와 달..