jineecode

조건: 값이 유효한가? : 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`..

Port 3000 is already in use. error Command failed with exit code 1. info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command. 1. 해당 프로세스를 종료하는 방법을 검색 할 수 있습니다. Linux / Mac OS 검색의 경우 터미널에서 (sudo) 실행 : $ lsof -i tcp:3000 $ kill -9 PID Windows : netstat -ano | findstr :3000 tskill typeyourPIDhere git bash에서 taskkill 에 대한 tskill 변경 2. sudo lsof -i: 현재 인스턴스를 닫지 만 백그라운드에서 프로..

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 └..

Array.prototype.concat() concat() 메서드는 인자로 주어진 배열이나 값들을 기존 배열에 합쳐서 새 배열을 반환합니다. 이를 이용하여 setState에 새로운 배열을 넣어 불변성을 유지합니다. import React, { useState, useRef, useCallback } from "react"; import "./App.css"; import TodoTemplate from "./components/TodoTemplate"; import TodoInsert from "./components/TodoInsert"; import TodoList from "./components/TodoList"; function App() { const [todos, setTodos] = us..

참조 블로그: https://velog.io/@hwang-eunji/github-2%EA%B0%9C-%EA%B3%84%EC%A0%95-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0 여러 github 계정 사용하기 for mac (SSH 설정) 만약, 하나의 컴퓨터에서 깃헙 계정 2개를 나누어 사용하고 싶다면 SSH 설정을 통해 깃헙을 이용한다. 이외의 방법은 모르겠다.. 갓대희의 작은공간: SSH 관련 내용 마이구미의 Helloworld : SSH 관련 velog.io https://velog.io/@sonypark/GitHubSSH%EB%A5%BC-%EC%9D%B4%EC%9A%A9%ED%95%B4-%EC%97%AC%EB%9F%AC%EA%B0%9C%EC%9D%98-%EA%B9%83%E..