[springboot+jwt+react#2] react layout / react-dom

2023.07.21 - [spring+jwt+react] - [springboot+jwt+react] react cra frontend 초기설정 오늘 만들것 리액트 react-dom과 layout 잡기 (아래와 같이) 사전에 알면 좋은것 react-dom 실습 우선 src 폴더 아래에 compoenents 폴더를 생성하고 다시 Layout 이라는 디렉토리를 만들어준다 여기에 Layout.tsx 파일과 Navigation.tsx 파일을 생성해준다. Layout.tsx import React, {Fragment} from "react"; import Navigation from "./Navigation"; import Footer from "./Footer"; type Props = { children?: ..

• format_list_bulleted Programming/spring+jwt+react
• · 2023. 7. 22.
• textsms

[Typescript/3Day] 함수 (1)

2021/02/19 - [Typescript] - [Typescript/1Day] 실습준비 2021/02/22 - [Typescript] - [Typescript/2Day] Types javascript에서 함수는 일급(first-class) 객체이다. 1. 함수선언방법 // 이름을 붙인 함수 function getName(name: string) { return 'hello ' + name } // 함수표현식 let getName2 = function (name: string) { return 'hello' + name } // 화살표 함수 표현식 let getName3 = (name: string) => { return 'hello' + name } // 단축형 화살표 함수 표현식 let getNam..

• format_list_bulleted Programming/Typescript
• · 2021. 2. 23.
• textsms

[Typescript/2Day] Types

2021/02/23 - [ALL] - [Typescript/3Day] 함수 (1) 2021/02/22 - [Typescript] - [Typescript/2Day] Types 2021/02/19 - [Typescript] - [Typescript/1Day] 실습준비 타입스크립트인만큼 타입을 배워보자 1. any 타입들의 대부분으로 뭐든지 할수 있지만 꼭 필요한 상황이 아니면 쓰지마라 (하지만, 실무에서 어쩔수 없이 쓰게되는것들이 있음..) 2. unknown any를 쓸일이 있다면 any대신 unknown을 사용하자. any처럼 모든값을 사용할수 있지만 타입을 검사하기 전까지는 값을 사용할수 없게 강제한다. let a : unknown = 30 // unknown let c = a + 10 // erro..

• format_list_bulleted Programming/Typescript
• · 2021. 2. 22.
• textsms

[Typescript/1Day] 실습준비

IDE는 VSCode를 사용하며 Node.js가 설치되어 있어야 합니다. # 디렉토리 생성 mkdir typescript-study cd typescript-study # npm v프로젝트 초기화 npm init ... #TSC, TSLint, NodeJs용 타입 설치 npm install --save-dev typescript tslint @types/node # tsconfig.json 생성 touch tsconfig.json (IDE에서 파일을 직접 생성해도 된다) { "compilerOptions": { "lib": ["ES2015"], // 실행환경에 이용할수 있다고 가정하는 API "module": "commonjs", // TSC가 컴파일할 대상 모듈 시스템 "outDir": "dist", ..

• format_list_bulleted Programming/Typescript
• · 2021. 2. 19.
• textsms

[vue/typescirpt] Cannot resolve definitions for module 'xxx'

typescript 프로젝트에서 외부라이브러리를 import 할때 .d.ts 파일이 없을경우 생기는 오류. 왠만한 라이브러리들을 typescript에 대응하여 .d.ts 파일을 제공하지만 오래된 라이브러리나 관리가 안되는 라이브러리에 경우 에러가 발생한다 이럴때는 직접 .d.ts 파일을 생성해주면 된다. 예를 들어 vue-json-pretty 라는 라이브리를 사용한다고 하면 types 폴더 밑에 vue-json-pretty.d.ts 라는 파일을 만들고 아래와 같이 선언을 해주면 된다. declare module 'vue-json-pretty' { import {Component} from 'vue/types/options' const VueJsonPretty: Component export default..

• format_list_bulleted Programming/Vue-tip
• · 2020. 10. 21.
• textsms

[error] Could not find a declaration file for module 'vuetify/lib'

vuecli로 프로젝트 생성후 vue add vuetify 로 vuetify를 추가한후 실행했을때 아래와 같은 에러가 나왔을때 Could not find a declaration file for module 'vuetify/lib' Try `npm install @types/vuetify` if it exists or add a new declaration (.d.ts) file containing `declare module 'vuetify/lib';` typescript를 쓰고있는데 위와같이 에러가 나올경우 tsconfig.js >types 에 "veutify"를 추가하면 된다. "types": [ "webpack-env", "mocha", "chai", "vuetify" ],

• format_list_bulleted Programming/Vue-tip
• · 2020. 3. 28.
• textsms