JiSoo's Devlog

📍 타입 확장하기타입 확장은 기존 타입을 사용해 새로운 타입을 정의하는 것을 말한다.기본적으로 interface와 type 키워드를 사용해서 타입을 정의하고 extends, 교차 타입, 유니온 타입을 사용해 타입을 확장한다. 타입 확장의 장점타입 확장의 큰 장점은 코드 중복을 줄일 수 있다는 것이다.중복되는 타입을 반복적으로 선언하는 것보다 기존에 작성한 타입을 바탕으로 타입 확장을 함으로써 불필요한 코드 중복을 줄일 수 있다.type BaseMenuItem = { itemName: string | nill; itemImageUrl: string | null; itemDiscountAmount: number; stock: number | null;};type BaseCartItem = { qu..

📍 타입스크립트만의 독자적 타입 시스템any 타입any 타입은 자바스크립트에 존재하는 모든 값을 오류 없이 받을 수 있다.any로 지정한 타입에 어떠한 값을 할당하더라도 오류가 발생하지 않는다. any타입을 어쩔 수 없이 사용해야 하는 경우- 개발 단계에서 임시로 값을 지정해야 할 때- 어떤 값을 받아올지 또는 넘겨줄지 정할 수 없을 때- 값을 예측할 수 없을 때 암묵적으로 사용 예외적으로 any 타입을 사용해야 하는 상황이 있음에도 되도록 any 타입은 지양하는 게 좋다! unknown 타입unknown 타입은 any 타입과 유사하게 모든 타입의 값이 할당될 수 있다.그러나 any를 제외한 다른 타입으로 선언된 변수에는 unknown 타입 값을 할당할 수 없다. void 타입타입스크립트에서 함수가 어..

📍 타입이란 자료형으로서의 타입변수란 값을 저장할 수 있는 공간이자 값을 가리키는 상징적인 이름으로 개발자는 변수 선언 후 특정 값을 할당한다.var name = 'ji';var year = 2025; 컴퓨터 메모리 공간은 한정적이기에 특정 메모리에 값을 효율적으로 저장하기 위해서는 해당 메모리 공간을 차지할 값의 크기를 알아야 한다. 자바스크립트의 7가지 데이터 타입(자료형)- undefined- null- Boolean- String- Symbol- Numeric- Object 집합으로서의 타입타입은 값이 가질 수 있는 유효한 범위의 집합을 말한다.타입 시스템은 코드에서 사용되는 유효한 값의 범위를 제한해 런타임에서 발생할 수 있는 유효하지 않은 값에 대한 에러를 방지해 준다.const num: ..

📍 1.1 웹 개발의 역사1995년 브랜든 아이크가 웹의 다양한 콘텐츠를 표현하지 위한 객체 지향 언어로 자바스크립트를 만들었다.초기 자바스크립트는 단지 새로운 기능이 추가되는 형태로 발전했기 때문에 자바스크립트와 브라우저의 발전 속도 간의 차이가 나기 시작했고 브라우저는 자바스크립트의 변화를 따라가지 못했다. 폴리필은 브라우저가 지원하지 않는 코드를 브라우저에서 사용할 수 있도록 변환한 코드 조각이나 플러그인트랜스파일은 최신 버전의 코드를 예전 버전의 코드로 변환하는 과정 모든 브라우저에서 동일하게 동작하도록 자바스크립트가 표준화되자 정적 웹사이트에서 동적 웹 애플리케이션으로의 전환이 가속화되었다. 웹사이트수집된 데이터, 정보를 특정 페이지에 표시하기 위한 정적인 웹단방향으로 정보를 제공하기 때문에 ..

양식 제출 처리 방법1. 분리된 독립형 백엔드 API양식 데이터를 포함한 요청을 받아들이고 그 데이터를 데이터베이스에 저장 2. 통합된 Next.js 애플리케이션 => 서버 액션양식을 직접 제출받고 데이터베이스에 데이터 저장  폼 액션 설정서버 액션 없이 그냥 formAction으로 제출 처리도 가능form에 action 프로퍼티를 사용해 함수 전달 가능action은 React를 쓰지 않고도 양식 요소에 설정 가능한 기본 속성양식 요소에서 React를 사용하지 않거나 formAction 기능을 지원하지 않는 React 버전을 사용할 경우에는 양식 요소에 설정되는 액션 속성이 URL을 정의한다NextJS를 사용하는 경우에 action 속성은 URL 대신 함수를 받아들이고 브라우저 기본 동작을 막아 URL로..

백엔드 API 웹 서버 시작npm start  백엔드 데이터 가져오기1. NextJS의 별도 API를 통해 클라이언트 측에서 처리useEffect(() => { async function fetchNews() { const response = await fetch("http://localhos:8080/news"); if (!response.ok) { setError("Failed to fetch news."); setIsLoading(false); } const news = await response.json(); setIsLoading(false); setNews(news); } fetchNews(); }..

병렬 라우트 설정별도의 경로를 가지는 라우트 두 개의 콘텐츠를 동일 페이지에서 렌더링병렬 라우팅 설정하려면 병렬 라우트를 포함하려는 경로에 레이아웃 파일 추가병렬 라우트마다 @로 시작하는 하위 폴더 하나 추가 -> 병렬 라우트가 두 개라면 폴더 두 개 추가app ㄴ archive ㄴ @archive ㄴ page.js ㄴ @latest ㄴ page.js 일반적으로 레이아웃 컴포넌트 함수는 {children} 프로퍼티를 받는다NextJS는 병렬 라우트 폴더와 인접해 있다면 해당 레이아웃 컴포넌트에 프로퍼티를 자동으로 추가한다@archive 라우트 콘텐츠 => archive 프로퍼티@latest 라우트 콘텐츠 => latest 프로퍼티export default fun..

프로젝트 생성npx create-next-app@latest    app 폴더 -> 다양한 페이지 설정                    새로운 폴더를 추가해 라우트로 취급하는 새로운 경로 생성 가능                     /about이라는 라우트 지원하고 싶으면 about 폴더 생성                     이 폴더만으로는 아무것도 할 수 없음! -> page.js 파일 추가 page.js 파일 -> NextJS에게 페이지를 렌더링해야 한다고 알려주는 것서버 컴포넌트 -> 컴포넌트가 서버에 렌더링 되고 컴포넌트 함수가 서버에 실행되는 것 보장                            서버 컴포넌트는 HTML로 렌더링 되고 전환되어 브라우저로 보내진다  페이지 간 이동Nex..

패턴이란 다른 기능에 따라 코드를 논리적으로 나누는 것을 의미한다 MVC란?MVC는 Model View Controller의 약자로 모델, 뷰, 컨트롤러와 관련되어 있다모델은 객체나 데이터를 나타내는 코드의 한 부분으로 데이터 관련 작업을 할 수 있게 한다뷰는 사용자가 보게 되는 화면을 책임지는데 애플리케이션 코드와 분리되어 있고 뷰를 생성하기 위해 템플릿 엔진에 주입하는 데이터와 아주 조금만 통합되어 있다컨트롤러는 모델과 뷰 사이의 연결점으로 모델과 함께 데이터를 저장하거나 저장 프로세스를 유발하거나 뷰에서 가져온 데이터를 전달한다 라우트는 어떤 경로에 따른 http 메서드에 따라 어떤 컨트롤러 코드를 실행할지 정의한다컨트롤러는 작업할 모델과 렌더링할 뷰를 정의하는 역할을 하는데 이게 바로 패턴!  컨..

요청 및 사용자 간의 데이터 공유const products = [];// admin/add-product => POSTrouter.post("/add-product", (req, res, next) => { products.push({ title: req.body.title }); res.redirect("/");});exports.routes = router;exports.products = products;객체나 배열 같은 참조 유형을 내보내기 하면 다른 파일에서 변경하면 저절로 업데이트된다→ 데이터 공유  템플릿 엔진html 페이지에 동적 콘텐츠를 넣기 위해 사용한다 · EJS일반 HTML을 사용하고 단순한 JavaScript를 사용할 수 있게 하는 플레이스홀더가 있어 for 루프, if 문 작..