Next.js는 React 기반의 프레임워크로, 웹 개발자들에게 파일 기반 라우팅을 제공합니다. Next.js 13에서는 새로운 라우팅 시스템인 App Router가 도입되었으며, 기존 Page Router와 함께 사용 가능합니다.이 글에서는 App Router와 Page Router의 차이점, 각각의 특징, 그리고 어떤 상황에서 어떤 라우팅 방식을 선택해야 하는지 명확하게 설명하겠습니다.1. App Router와 Page Router란?App Router (Next.js 13 이상)기반 디렉토리: app/React의 서버 컴포넌트(Server Components)를 기본으로 사용.더 나은 레이아웃 재사용과 중첩 라우팅을 제공.서버 사이드 데이터 패칭과 클라이언트 컴포넌트를 혼합하여 효율적인 UI 구축 ..

React는 SPA(Single Page Application) 구조를 지원합니다. 그런데 일부 웹 애플리케이션은 MPA(Multi-Page Application)구조를 가집니다. 이번 글에서 React Router DOM을 사용하여 SPA구조를 어떻게 구현할지, 그리고 MPA구조와 어떻게 비교할 수 있는지를 다뤄봤습니다.React Router DOMReact Router DOM은 리액트 애플리케이션에서 패이지 간에 네이게이션을 관리하는 라이브러리라고 생각하시면 됩니다. 이를 사용해서 클라이언트(사용자)쪽에서 페이지를 새로 고침하지 않아도 다른 페이지로 전환할 수 있습니다.React Router DOM은 SPA구조에 적합하며 페이지 이동시에도 브라우저가 새로고침되지 않고, 필요한 컴퓨넌트만 렌더링하여 성..

JavaScript에서 비동기 작업을 처리할 때 콜백 함수는 유용합니다. 하지만 콜백 함수를 여러번 사용하면 중첩이 발생하여 콜백 지옥에 빠질 수 있습니다.이때 Promise를 이용하면 코드를 깔끔하게 짤 수 있습니다.Promise란?Promise란 비동기 작업을 처리할 때 그 작업이 성공하거나 실패할 것에 대해서 결과를 알려준다고 약속하는 것입니다. Promise를 이용하여 비동기 작업이 성공하면 resolve를, 실패하면 reject로 반환 값을 전달합니다.const myPromise = new Promise((resolve, reject) => { // 비동기 작업을 수행 let success = true; if (success) { resolve("작업이 성공적으로 완..

JavaScript에서 undefined가 발생하는 경우는 대표적으로 3가지가 있습니다.이 3가지에 대해 다뤄보도록 하겠습니다. undefined가 나타나는 세 가지 경우 1. 빈 객체일때객체를 선언만 하고 속성 값을 정의하지 않은 상태에서, 해당 객체의 속성을 호출하면 undefined가 반환됩니다.const obj = {};console.log(obj.name); // undefined여기서 객체 obj에는 { }로 속성이 정의되어 있지 않기 때문에, name이라는 key의 value를 호출해도 undefined가 반환됩니다. 2. 함수에 return이 없을 때함수에서 값을 반환하지 않으면, return이 없으면, 함수 호출의 결과가 자동으로 undefined가 됩니다.const text = () ..

콜백함수 뭔가 들었을때 어려울거 같지 않아요? 괜히 막 거부감들고 하기싫고..저는 그랬답니다^^ ㅎㅎ하지만 후에 필요한 Promise, async/await를 이해하려면 콜백함수를 확실히 이해해야하는데요, 저도 몰랐을때 처럼.. 최대한 쉽게 이해시켜보겠습니다. 가시죠.콜백 함수 개념부터.JavaScript에서 콜백함수는 다른 함수가 "끝난 후에 실행할 작업"을 담은 함수입니다.예를 들어, 어떤 함수가 하나의 작업을 하고 있을 때, 그거 끝나고 바로 뭔가 해야해!!!바로 해야하는 작업을 콜백함수를 이용하여 쉽게 만들 수 있습니다. 콜백 함수 예시.아래는 c라는 함수가 callback이라는 함수 인자를 받아서 실행하는 예시입니다.const a = () => console.log("A");const b = (..

Function Hositing. 함수 호이스팅입니다.함수 호이스팅이란, JavaScript에서 JS엔진이 코드를 실행시키면, 돌아가기 전에 코드의 함수 선언에 대한 부분을 끌어 올립니다. 즉, JS엔진이 실행전에 코드 전체를 한 번 훑어보고 선언된 부분부터 먼저 읽는다~ 라고 생각하시면 편할 것 같습니다.함수 호이스팅에 대해 알기 전에, JS에서는 함수를 정의하는 방법이 2가지가 있죠?1. 함수 선언식2. 함수 표현식차례대로 설명드리겠습니다. 1. 함수 선언식함수 선언식은 호이스팅이 적용됩니다. 그러면 함수 표현식은요?? 뒤에 말씀드릴게요.JavaScript 코드를 실행시에 선언에 대한 코드는 맨 위로 끌어 올려 처리가 됩니다. 즉 선언식에서는 함수가 선언되기 전에 호출이 가능합니다.console.lo..

아.. 급하게 폴더 만들어서 거기다가 작업을 하고 있었는데,github에 올리고 싶으면 어떡해야하지 싶으신 분들은 글을 참고해주세요.폴더 하나 만들어서 정리하다가,"아.. 이거 깃헙에 올려야하는데, 새로 레포파서 처음부터 다 다시 해야하나??" 싶었는데 아니더라고요.1. GitHub에 새로운 레포지토리 생성먼저 레포지토리를 생성합니다.그리고 주소를 가지고 있는 상태에서 작업해둔 파일의 VSCode로 넘어갑니다. 2. Git 초기화VSCode로 넘어오셨다면, 작업중인 폴더, 즉 로컬 프로젝트 폴더에서 Git저장소를 초기화합니다.밑에 명령어는 해당 폴더를 Git저장소로 만들어주고, .git이라는 디렉토리가 생성됩니다.git init  3. GitHub레포와 로컬프로젝트 연결로컬저장소(git init으로 생성..

2이번 글에서는 Vite와 TypeScript를 사용하여 React 프로젝트를 설정하는 방법을 단계별로 설명드리겠습니다.1. 폴더 생성 2. VSCode로 폴더 열기 3. 터미널 열기(Crtl + j) // git bash로 열어주세요. 4. Vite를 이용하여 프로젝트 생성npm create vite@latestvite@latest (파일이름) 으로 파일 이름을 지정해줘도 되지만,우리는 이미 파일을 열었기 때문에 .(현재 파일에 설치)를 입력해줘도 됩니다. 5. 설치과정Select a framework: React (리액트 사용할거니까)Select a variant: TypeScript / TypeScript + SWC둘 중에 어느거를 설치해도 상관없지만 저는 SWC버전으로 설치합니다. SWC는 Spe..