jineecode

Object.keys() 메소드는 주어진 객체의 속성 이름들을 일반적인 반복문과 동일한 순서로 순회되는 열거할 수 있는 배열로 반환합니다. const object1 = { a: 'somestring', b: 42, c: false }; console.log(Object.keys(object1)); // ['a', 'b', 'c'] 예) // todo.d.ts // d.ts는 타입스크립트 코드의 타입 추론을 돕는 파일이다. export type TodoType = { id: number; text: string; color: "red" | "orange" | "yellow" | "green" | "blue" | "navy"; checked: boolean; }; // index.tsx import Reac..

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

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

object를 확장성있게 사용해보자. constructor 상속 constructor 을 생성할 때는 관습적으로 대문자로 짓는다. function Human(){ this.name = 'Kim'; this.age = 15; } let human1 = new Human(); let human2 = new Human(); function Human(name){ this.name = name ; this.age = 15; this.sayHi = function(){ console.log('안녕하세요' + this.name + ' 입니다'); } } let human1 = new Human('지니'); let human2 = new Human('램프'); human2.sayHi(); prototype 원형, 유..