WEB개발 (43) 썸네일형 리스트형 [React] Typescript : 동적인 자바스크립트 언어에 타입을 미리 부여함으로써 컴파일 시 에러를 잡을 수가 있다. 기본 타입: number : 숫자 타입 string : 문자열 타입 boolean : 불리언 타입 any : 모든 타입을 허용하는 동적 타입 void : 반환 값이 없는 함수의 리턴 타입 undefined : undefined 값 또는 타입 null : null 값 또는 타입 배열 및 튜플 타입: `Array` 또는 `ElementType[]` : 배열 타입 `[Type1, Type2]` : 튜플 타입 객체 타입: { key: Type }: 객체 타입 interface: 인터페이스를 사용한 객체 타입 정의 함수 타입: (parameter: Type) => ReturnType: 함수 타입 void: 반환 값이 없는 .. [React] ServerComponent, HTML Streaming 1. Server Components VS ClientComponent : React 프레임워크의 새로운 기능 중 하나입니다. 이 기능은 서버와 클라이언트 간의 데이터 및 렌더링 로직을 효과적으로 분리하여 성능을 향상시킬 수 있는 방법을 제공합니다. React v18 버전 이전까지는 React를 사용하여 어플리케이션을 렌더링하는 주요한 방법이 "전적으로(entirely)" 클라이언트에 있었다. 서버 컴포넌트와 클라이언트 컴포넌트의 가장 큰 차이점은 컴포넌트가 렌더링되는 장소가 서버냐 클라이언트냐의 차이입니다. 서버 컴포넌트는 서버에서 한차례 해석된 이후 클라이언트로 전달되고, 클라이언트 컴포넌트는 클라이언트가 js 번들을 다운로드 받은 후 해석하게 됩니다. 2. HTML Streaming React v1.. [Next.js] Tailwind CSS, ESLint, Webpack 1. Tailwind CSS GitHub과 Next.js 공식 사이트에서 사용하고 있습니다. Tailwind CSS는 Utility-First 컨셉을 가진 CSS 프레임워크다. 부트스트랩과 비슷하게 `m-1`, `flex` 와 같이 미리 세팅된 유틸리티 클래스를 활용하는 방식으로 HTML 코드 내에서 스타일링을 할 수 있습니다. ChitChat You have a new message! https://tailwindcss.com/docs/installation Installation - Tailwind CSS The simplest and fastest way to get up and running with Tailwind CSS from scratch is with the Tailwind CLI too.. [Spring] @RequstParam vs @ReqeustBody @RequestParam: @RequestParam 어노테이션은 URL의 쿼리 파라미터나 폼 데이터를 메서드의 파라미터로 매핑합니다. 주로 URL의 쿼리 문자열에서 파라미터를 추출하는 데 사용됩니다. 사용 예: @GetMapping("/example") public String exampleMethod(@RequestParam String name, @RequestParam int age) { // 메서드 내용 } 요청: GET /example?name=value&age=30 @RequestBody: @RequestBody 어노테이션은 HTTP 요청의 본문(body)에 있는 데이터를 메서드의 파라미터로 매핑합니다. JSON이나 XML과 같은 데이터 형식으로 전송된 복잡한 객체를 처리하는 데 주로 사용됩니.. [React] Next.js : Next.js는 React 기반의 웹 애플리케이션을 빌드하기 위한 JavaScript 프레임워크입니다. Next.js는 React를 사용하여 정적 및 동적 웹 페이지를 빌드하는 데 도움을 주며, 많은 기능과 성능 최적화를 제공합니다. 기존의 전통적인 SSR 방식은 웹페이지 이동 시에 페이지를 요청할 때마다 서버로부터 새롭게 생성된 HTML 파일을 받아와 화면에 렌더링하였습니다. 이러한 방식은 서버 자원을 많이 소모하고 불필요한 트래픽을 유발했습니다.Next.js는 초기 페이지 로딩에 대해서는 정적 사이트 생성(SSG), SSR 방식으로 동작시킬 수가 있고, 이후의 요청에 대해서는 기본적으로 클라이언트사이드 렌더링(CSR) 방식으로 동작하기 때문에 SSR 방식의 장점인 SEO에 유리하면서도 CSR의 이.. [REACT] HOOKS (useState, useEffect, useContext, useMemo, useReduce) : 함수형 컴포넌트에서도 상태 관리를 할 수 있는 useState, 그리고 렌더링 직후 작업을 설정하는 useEffect 등의 기능등을 제공하여 기존의 함수형 컴포넌트에서 할 수 없었던 다양한 작업을 할 수 있게 해줍니다. 1. useState : useState 는 가장 기본적인 Hook 으로서, 함수형 컴포넌트에서도 가변적인 상태를 지니고 있을 수 있게 해줍니다. function Counter() { const [value, setValue] = React.useState(0); console.log(value); return ( 현재 카운터 값은 {value} { setValue(value + 1); console.log("plus btn : " + value); } }> +1 button { se.. [React] React 환경구축, vscode extension 시작전 vscode extinsion live server : Live Server는 정적 웹 페이지를 빠르게 개발 및 테스트할 수 있는 확장 프로그램입니다. Live Server를 사용하면 코드를 변경하거나 저장할 때 실시간으로 브라우저를 새로 고침할 수 있습니다. 이를 통해 웹 페이지의 변경 사항을 빠르게 확인할 수 있습니다. Reactjs code snippets, dsznajder.es7-react-js-snippets : Visual Studio Code의 확장 프로그램 중 하나로, React 개발을 보다 효율적으로 진행할 수 있도록 React 코드 조각을 제공해주는 도구입니다. 이 확장 프로그램을 설치하면 React 구성 요소, 라이프사이클 메서드, 스타일링 관련 코드 등을 빠르게 삽입할 수 .. [JS] 자바스크립트 템플릿 리터럴 백틱(``), 달러(${ }) 템플릿 리터럴(Template Literal) ES6부터 새로 도입된 문자열 표기법이다. 문자열 생성시 따옴표 대신, 백틱(`)을 사용한다. var temp = `test test2` 'test\n\n\n test2' 템플릿 리터럴의 기능 1. 줄바꿈(개행: Multi-line strings) 백틱(`)으로 템플릿 리터럴을 사용하면, 줄바꿈 등을 쉽게 표현할 수 있다. \n은 개행(Line Feed), \t는 탭(수평)을 의미하는 이스케이프 시퀀스 2. 표현식 삽입(Expression interpolation) ${ } 사이에 변수나 연산 등을 삽입할 수 있게 되었다. var v1 = "안녕"; v2= "하세요"; var v3 = `${v1 + v2}`; '안녕하세요' 이전 1 2 3 4 5 6 다음
