@2023/10/17 안녕하세요 lika-7입니다이번시간에는 Next.js에서 라우터를 사용하는 방법을 설명하겠습니다,.Next.js에서 라우터를 사용하는 방법Next.js에서 route는 파일 시스템 기반 라우터를 지원하여 라우팅 설정을 간단하게 만듭니다.이 방식을 사용하면 페이지 컴포넌트를 프로젝트의 디렉토리 구조와 일치시키고 URL 경로에 따라 페이지가 자동으로 연결됩니다.작동 방식 - 파일 기반 네비게이션pages/ ├── index.tsx ├── about.tsx └── products/ ├── index.tsx ├── product1.tsx └── product2.tsx페이지 컴포넌트는 pages 디렉토리에 저장됩니다.이 디렉토리 아래에 새로운 디렉토리를 만들고 해당 디렉토리에 페이지 컴포넌트..

@2023/10/17 안녕하세요 lika-7입니다이번시간에는 Next.js에서 데이터를 가져오는 방법을 설명하겠습니다,.Next.js에서 데이터를 가져오는 방법Next.js에서 데이터를 가져오는 방법을 data fetching이라고 합니다 react.js에서 데이터를 가져오는 방법은 보통 useEffect를 통해서 데이터를 가져 옵니다.Next.js 또한 비슷한 방법을 통해서 데이터를 가져올 수 있습니다.react.js에서 데이터를 가져오기React.js 에서 useEffect를 이용해 함수형 컴포넌트에서 데이터 가져오기, 구독 설정, 수동 DOM 조작을 수행하기 위한 Hook 중 하나 입니다.//JSX import React, { useState, useEffect } from 'react'; func..

@2023/10/15 안녕하세요 lika-7입니다이번시간에는 Next.js 설치 방법을 정리하겠습니다설치방법일반 설치 법npx create-next-app@latestoryarn create-next-app타입스크립트용 설치 법npx create-next-app@latest --typescriptoryarn create-next-app --typescript 현재 디렉토리에 설치하려면 npx create-next-app@latest --typescript ./ TypeScript: YesESLint: YesTailWind Css: Nosrc/ directory: YesApp Router: Noimport alias: No

@2023/10/15 안녕하세요 lika-7입니다이번시간에는 Next.js가 무엇인지 정리하겠습니다Next.JS란 / 사용 이유React의 SSR(Server Side Rendering)을 쉽게 구형할수 있도록 도와주는 프레임워크React는 라이브러리이고, Next.JS는 프레임워크React로 개발 할 때 SPA(Single Page Application)을 이용해 CSR(Client Side Rendering)을 하면 좋은점도 있는데검색엔진 최적화(Search Engin Optimazation) 부분에서 문제가 생깁니다.CSR은 첫페이지에서 빈 html을 가져와 JS파일을 해석하여 화면을 구성하기 때문에 포탈 검색에 거의 노출 안되는 문제가 있습니다.하지만 Next.js에서 Pre-Rendering을 ..

@2023/10/14 안녕하세요 lika-7입니다이번시간에는 대괄호 표기법에 대해서 정리하겠습니다.대괄호 표기법 (Bracket Notation) 이란대괄호 표기법 (Bracket Notation)은 객체의 속성(프로퍼티)에 접근할 때 사용되는 방법 중 하나입니다. 객체 내의 특정 속성에 접근하려면 해당 속성의 이름을 대괄호 [] 안에 넣어서 사용합니다. 이 방법은 객체의 속성 이름이 동적으로 생성되거나 변수로 지정되는 경우 유용합니다.예시const person = { name: "John", age: 30 }; const propertyName = "name"; console.log(person[propertyName]); // "John"위 예제에서 propertyName 변수에 저장된 문자열을 사용..

@2023/10/14 안녕하세요 lika-7입니다이번시간에는 TypeSscript를 이용할 때 객체의 type를 자동으로 변환해주는 사이트를 소개하겠습니다. 사용목적분량이 많은 인터페이스를 만들 때 자동으로 형 지정 해주는 프로그램을 이용해 형을 지정하면 휴먼에러를 방지할수 있습니다.사용방법TransformA polyglot web converter that's going to save you a lot of time.https://transform.tools/JSON to TypeScript 클릭변환할 객체 복사크롬의 개발자 도구를 켜서JSON.stringify()를 이용해 변환하고 싶은 객체를 JSON 형식으로 변형console에 나온 데이터를 https://transform.tools/에 붙여 넣기..

@2023/10/09 안녕하세요 lika-7입니다이번시간에는 json.stringify(), JSON.parse()에 대해 정리 하겠습니다JSON.stringify()란JSON.stringify()는 JavaScript 객체나 값(문자열, 숫자, 배열, 객체 등)을 JSON 문자열로 변환하는 메서드입니다.사용방법const person = { name: 'Alice', age: 30, hobbies: ['Reading', 'Gaming'] }; const jsonString = JSON.stringify(person); console.log(jsonString);{"name":"Alice","age":30,"hobbies":["Reading","Gaming"]}JSON.parse()란JSON.parse()..

@2023/10/08 안녕하세요 lika-7입니다이번시간에는 클래스와 함수의 객체 지향적 사용법에 대해 정리 하겠습니다글을 쓰는 이유필자는 절차 지향적 코더에서 객체 지향적 코더로 변화하고 있는 중입니다.이에 우리의 코딩 엣지를 살려줄만한 몇가지 코딩법을 기술하겠습니다.1. 클래스와 함수를 객체의 키로 사용하기✅객체 지향 프로그래밍(OOP) 구현: 클래스를 객체의 프로퍼티로 사용하면 객체 지향 프로그래밍의 개념을 자연스럽게 표현할 수 있습니다. 이렇게 하면 코드를 더욱 객체 지향적으로 구성할 수 있습니다.✅다형성(Polymorphism) 구현: 객체의 키로 클래스를 사용하면 상속과 다형성을 활용하여 다양한 동작을 구현할 수 있습니다. 동일한 메소드 이름을 가진 다른 클래스를 객체로 생성하여 다형성을 실현..