jineecode

- 애플리케이션 로직과 뷰(UI)를 분리한 패턴 - UI 구분이 쉬워지며 모킹, 스토리북을 더 쉽게 사용할 수 있습니다. Presentational Components : 데이터가 사용자에게 어떻게 보여지는지 신경쓰는 컴포넌트. 즉, UI. Container Components : 어떤 데이터가 사용자에게 보여 지는지 신경쓰는 컴포넌트 . 즉, API 통신 등을 담당. Container Components import { useState, useEffect } from "react"; export default function useDogImages() { const [dogs, setDogs] = useState([]); useEffect(() => { async function fetchDogs() ..

앱의 수명당 한 번만 초기화하려는 리소스가 있다고 가정합니다. 권장되는 패턴은 일반적으로 구성 요소 외부 에 인스턴스를 만드는 것 입니다. 이것은 일반적으로 redux store과 같이 앱 당 한 번 필요한 리소스에 적합합니다. import type { AppProps } from 'next/app'; import { Hydrate, QueryClient, QueryClientProvider } from '@tanstack/react-query'; const queryClient = new QueryClient() function MyApp({ Component, pageProps }: AppProps) { return ( ); } export default MyApp; 그러나 구성요소를 여러 번 마운트..

넥스트에서는 기본적으로 .env.local를 사용하여 불러온 환경변수에 대해 브라우저에서는 노출되지 않고 서버에서만 노출되게 설정되어 있음. // .env.local API_URL = http://localhost:3000 yarn dev Loaded env from /Users/niege/practice/next-practice/next-todo/.env.local // pages/index.tsx import React from "react"; import { GetServerSideProps, NextPage } from "next"; import TodoList from "./components/TodoList"; import { TodoType } from "../types/todo"; impo..

조건: 값이 유효한가? : isValid 에러 메시지 : errorMessage 밸리데이션을 사용하는가? : useValidation 1. Input 컴포넌트 사용 import React from "react"; import styled, { css } from "styled-components"; import palette from "../../styles/palette"; import { useSelector } from "../../store"; //타입 지정 type InputContainerProps = { iconExist: boolean; isValid: boolean; useValidation: boolean; }; // div 스타일링 const Container = styled.div`..

1. SSR https://d2.naver.com/helloworld/7804182 SSR은 무엇인가? SSR은 서버에서 사용자에게 보여줄 페이지를 모두 구성하여 사용자에게 페이지를 보여주는 방식이다. JSP/Servlet의 아키텍처에서 이 방식을 사용했다. SSR을 사용하면 모든 데이터가 매핑된 서비스 페이지를 클라이언트(브라우저)에게 바로 보여줄 수 있다. 서버를 이용해서 페이지를 구성하기 때문에 클라이언트에서 구성하는 CSR(client-side rendering)보다 페이지를 구성하는 속도는 늦어지지만 전체적으로 사용자에게 보여주는 콘텐츠 구성이 완료되는 시점은 빨라진다는 장점이 있다. 더불어 SEO(search engine optimization) 또한 쉽게 구성할 수 있다. 반면 CSR은 SS..

1. // pages/index.tsx import {NextPage} from "next"; const index: NextPage = () => { return hello; }; export default index; NextPage: pages 폴더에서 사용하는 컴포넌트 타입. NextPage는 리액트 컴포넌트의 확장으로, getInitialProps라는 함수를 갖고 있음. 2. styled-component 에서의 타입 지정 https://velog.io/@hwang-eunji/styled-component-typescript Styled-component #3 with typescript 오늘은 글로벌 스타일 적용하고, 스타일 컴포넌트에 타입 적용하는 방법을 해보겠돠.하루에 아조조~금씩🔨 야금야..

1. next 프로젝트 생성 npx create-next-app project-name 2. 타입스크립트 적용 yarn add -D typescript @types/react @types/node @types@react-dom 3. 스타일 컴포넌트 추가 yarn add --save @types/styled-components yarn add --save-dev babel-plugin-styled-components https://github.com/vercel/next.js/tree/master/examples/with-styled-components GitHub - vercel/next.js: The React Framework The React Framework. Contribute to vercel..

react에서의 i18next는 이쪽 참조 https://jineecode.tistory.com/211 react 위에서 i18next 적용하기 1. 라이브러리 설치 npm install i18next --save //i18next npm install react-i18next i18next --save //react용 i18next npm install i18next-browser-languagedetector //브라우저에서 사용자 언어를 감지 2... jineecode.tistory.com 1. 설치 npm install next-i18next 2. 폴더 구조 (public 위치에 있음을 유의) . └── public └── locales ├── en | └── common.json └── ko └..