본문 바로가기
Next.js에서 데이터 렌더링 방식 비교와 getStaticProps(SSG), getServerSideProps(SSR) 활용 Next.js는 데이터를 효과적으로 가져오고 렌더링하는데에 있어서 두 가지 주요 방식인 정적 사이트 생성(SSG)과 서버 사이드 렌더링(SSR)을 지원합니다. 또한, 이를 구현하기 위해 getStaticProps와 getServerSideProps라는 두 가지 메서드를 사용합니다. 이제 각각의 개념과 차이점에 대해 자세히 알아보겠습니다. 정적 사이트 (Static Site Generation) - getStaticProps getStaticProps는 Next.js에서 사용되는 메서드로, 정적 사이트 생성에 활용됩니다. 이 방식은 페이지가 빌드될 때 미리 데이터를 가져와 페이지를 사전 렌더링합니다. getStaticProps를 사용하여 데이터를 가져오면, 빌드 시간에 한 번 호출되며, 이후에는 정적인 데.. 2023. 7. 1.
자바스크립트 커링(Currying) 함수 이해하기 커링 함수는 함수의 인자를 여러 개의 인자를 받을 수 있는 함수로 변환하는 과정을 말합니다. 이 글에서는 자바스크립트 커링 함수의 개념, 장점, 예시, 그리고 활용 사례에 대해 알아보겠습니다. 커링 함수(currying function)란? 커링(Currying)은 함수를 여러 개의 인자를 받는 함수로 나누는 기법입니다. 커링은 함수형 프로그래밍에서 사용되며, 함수의 재사용성과 일부 인자를 미리 지정하여 새로운 함수를 생성하는 유연성을 제공합니다. 커링 함수의 장점 커링 함수는 다음과 같은 장점을 가지고 있습니다. 재사용성 커링 함수를 사용하면 함수를 더욱 재사용하기 쉽게 만들 수 있습니다. 일부 인자를 고정시켜 놓고 나머지 인자만 받는 새로운 함수를 생성할 수 있기 때문에, 같은 로직을 다양한 인자에 .. 2023. 6. 28.
nextjs에서 route 설정하기 nextjs는 react보다는 route설정이 간단하여 라이브러리를 설치할 필요없이 프로젝트의 pages디렉토리에 경로이름으로 폴더를 생성하고 그 폴더안에 js파일은 해당 페이지의 route를 나타내고, 자동적으로 인식합니다. route설정하기 정적 라우팅 미리 route주소를 지정하여 페이지를 생성하는 방식을 말합니다. pages 디렉토리안에 api폴더와 events폴더를 만들면, nextjs에서 자동적으로 /api와 /events는 route로 지정됩니다. 루트 경로는 pages폴더의 index.tsx만이 해당 됩니다. 동적 라우팅 url경로에 따라 동적으로 페이지를 생성하는 방식입니다. 예를 들어 상품리스트 페이지가 있다고 하면, 리스트중 각각 하나의 아이템에 부여되는 id값을 이용하여 헤딩 아이템.. 2023. 6. 27.
동적 타입 시스템 동적 타입 시스템(Dynamic Typing)은 변수의 타입이 실행 시간(runtime)에 동적으로 결정되는 타입 시스템입니다. 동적 타입 언어에서는 변수의 타입을 명시적으로 선언하지 않고, 변수에 할당되는 값에 따라 타입이 동적으로 결정됩니다. 이는 컴파일 시간이 아닌 프로그램이 실행되는 동안에만 타입 검사가 이루어지는 것을 의미합니다. 특징 타입 선언 생략 변수에 타입을 명시적으로 선언하지 않아도 됩니다. 변수에 값을 할당할 때, 해당 값의 타입에 따라 변수의 타입이 동적으로 결정됩니다. 동적 타입 변환 변수의 타입은 실행 시간에 동적으로 변환될 수 있습니다. 동적 타입 언어는 변수에 다른 타입의 값을 할당할 수 있고, 필요에 따라 타입 변환이 발생할 수 있습니다. 유연성과 편의성 동적 타입 언어는 .. 2023. 6. 26.
javascript의 배열을 객체로 변경하기 배열객체형태의 데이터에서 프로퍼티의 값을 새로 객체 형식으로 변한하는 방법이 무엇인지 알아보겠습니다. 문제 코드 const arr = [ { category: "LGT", fcstValue: "0" }, { category: "PTY", fcstValue: "0" }, { category: "SKY", fcstValue: "1" }, ]; const types = { LGT: 0, PTY: 0, SKY: 1 }; arr라는 배열 객체 코드에서 category의 값을 새로 생성할 객체의 propery로, fcstValue의 값을 새로 생성할 객체의 value로 선언하여 types라는 새로운 객체로 만들어 보겠습니다. 변경하기 let types = {}; arr.forEach((element) => { ty.. 2023. 6. 26.
innerHTML과 appendChild 선언 방식 innerHTML이 중복으로 선언되면 최신으로 선언된 것만 출력 appendChild은 부모 요소에서 자식 요소를 하나의 노드만 추가 할 수 있는 메서드 코드로 확인 index.html 자식 요소가 없는 id값이 root인 div요소 선언 index.js import List from "./list.js"; const $root = document.getElementById("root"); $root.innerHTML = `Hello`; new List({ $root }); id값이 root인 div를 변수 $root로 지정하여 innerHTML을 이용하여 자식 요소로 hello내용인 div요소 넣기 list.js export default function List({ $root }) { $root.in.. 2023. 6. 26.
MVC 아키텍처: 웹 개발에서의 구조적 효율성과 유지보수성 MVC(Model-View-Controller) 아키텍처는 웹 개발에서 구조적 효율성과 유지보수성을 높이는 방법입니다. 이 글에서는 MVC 아키텍처의 개념과 각 구성 요소의 역할을 알아보고, 웹 개발에서의 장점과 활용 방법을 소개합니다. MVC란? 웹 개발은 복잡한 로직과 다양한 데이터를 다루어야 하는 도전적인 작업입니다. 이를 효율적으로 구현하기 위해서는 코드의 구조와 관리가 중요합니다. 이를 위해 MVC(Model-View-Controller) 아키텍처가 사용되고 있습니다. MVC는 웹 개발에서 구조적인 효율성과 유지보수성을 높여주는 방법으로 널리 알려져 있습니다. 모델(Model) 데이터와 비즈니스 로직을 관리 모델은 애플리케이션의 데이터와 데이터를 처리하는 비즈니스 로직을 담당합니다. 데이터베이스.. 2023. 6. 26.
node.js 개발을 위한 필수 라이브러리 Node.js 개발에 필수적인 라이브러리인 nodemon, helmet, babel, morgan, body-parser을 알아보아요. 소스 수정 후 자동으로 서버를 재시작해주는 nodemon, Express 애플리케이션의 보안을 강화하는 helmet, 최신 ES6 코드를 원래 JS 코드로 변환해주는 babel, 로그 정보를 출력해주는 morgan, 그리고 POST 및 PATCH 요청의 request.body를 파싱해주는 body-parser 등의 역할을 정리해보겠습니다. 종류 nodemon nodemon은 Node.js 개발 시 소스 코드를 수정하고 저장하면 자동으로 서버를 재시작해주는 툴입니다. 이를 통해 개발자는 수정한 코드의 결과를 즉시 확인할 수 있고, 번거로운 서버 재시작 과정을 줄여 생산성을.. 2023. 6. 26.
타입스크립트 이해하기 타입스크립트는 정적 타입 언어로서 개발자에게 타입 검사, 코드 양산, 문서화 등 다양한 이점을 제공합니다. 이 글에서는 타입스크립트의 개념과 장점, 주요 기능, 그리고 활용 방법에 대해 알아보겠습니다. 타입스크립트란?타입스크립트는 JavaScript의 상위 집합 언어로서, 정적 타입을 지원함으로써 개발자가 코드를 더욱 안정적으로 작성할 수 있도록 도와줍니다. 정적 타입은 변수, 함수 매개변수, 반환값 등에 명시적인 타입을 지정하는 것을 말합니다. 이를 통해 컴파일 단계에서 오류를 사전에 감지할 수 있어 개발 생산성을 향상시키고 유지 보수 비용을 낮출 수 있습니다. 타입스크립트는 자바스크립트와의 호환성이 뛰어나며, 기존 자바스크립트 프로젝트에도 쉽게 적용할 수 있습니다. 타입스크립트는 정적 타입 체크와 타.. 2023. 6. 26.

티스토리툴바