본문 바로가기

Frontend42

[TS] TS 연습하기1 //Primitive Variable const 이름:string = 'Lee'; //Array let 어레이:string[] = ['어레이1', '어레이2'] //Object let 오브젝트:{name : string, name2 : number} = {name : 'Lee', name2 : 123}; // 중요한 것은 온 갖 곳에 다 ts 타입질을 안해도 된다. // 타입스크립트는 대부분 알아서 자동으로 해준다구요. let 테스트 = '테스트라구'; // 테스트 = 123; 이거 에러난다구요 ts가 자동으로 테스트:string 해주기 때문이다. // 연습 let project:{member : string[], days : number, started : boolean} = { member : ['k.. 2023. 4. 12.
[TS] 타입스크립트 변수 문법 빠르게 정리하기 빠르게빠르게 tsconfig.json 2023. 4. 10.
[TS] MERN에서 TS 사용하기 1. CRA 세팅하기 (npx) npx create-react-app your-app-name --template typescript 2. Express에서 세팅하기 - 설치하기 npm init -y npm install typescript express ts-node @types/node @types/express --save - 세팅하기 npx tsc --init //tsconfig.json 생성 - tsconfig.json 설정하기 { "compilerOptions": { "module": "commonjs", "esModuleInterop": true, "target": "es6", "moduleResolution": "node", "sourceMap": true, "outDir": "dist",.. 2023. 4. 10.
ChatGPT 4.0 으로 나만의 라이브러리 만들기 도전(애니메이션 엔진) 1. 개요 - chatGPT 4.0이 출시되었다! 더욱 신중하고 정확하며, 오류가 적고 거짓말을 줄였다고 한다. - plust 결제 바로 때렸다 - 프로젝트에서 사용할 타임라인 애니메이션 엔진을 가볍게 만들어보고 싶었다. - 일도하고 사이드프로젝트도 하고 공부도하고 장가도 가야하니까 바빠서 chatGPT4.0 에게 시켜보았다. 2. 요구사항 작성 - 일단 사용방법을 정의해보았다. const anim1 = vic .anim('요소', 'css속성', 'css값', 애니메이션지속시간, 애니메이션실행이후콜백함수) //1번 애니메이션 .next('요소', 'css속성', 'css값', 애니메이션지속시간, 애니메이션실행이후콜백함수) //1번 종료 이후 .with('요소', 'css속성', 'css값', 애니메이션.. 2023. 3. 16.
추가) React redux-toolkit 리덕스 쉽게 쓰는 비법 리덕스툴킷을 실제 사이드프로젝트에 세팅하는 방법을 재구성해서 개념화 한 포스팅이다. 아래는 실제 진행하고 있는 사이드프로젝트에서 쓰고있는 redux-toolkit 세팅방법 https://victormeredith.tistory.com/93 [앱삼] 4. (frontend) Redux-toolkit 구조 세팅 1. 리덕스 툴킷 쓰는 이유 - 스승님께서 그러셨다. 취업하려면 새로운 라이브러리 신기술 이런거 적당히 배우고 리덕스나 하라고.. - 근데 오리지날 리덕스는 문법이 매우 더럽고 리듀서/액션 패 victormeredith.tistory.com 1. 조건 리덕스 특유의 더러운 문법을 쉽게 바꾼 redux/toolkit은 react18 버전 이상이어야만 사용 가능하다. 2. 왜쓰는가? 리덕스 공식문서에는 .. 2023. 3. 7.
React - 19장 : 코드 스플리팅(완) React - 1장 : React 이해 React - 2장 : JSX React - 3장 : 컴포넌트 React - 4장 : 이벤트 핸들링 React - 5장 : ref. DOM에 이름 달기 React - 6장 : 컴포넌트 반복 React - 7장 : 컴포넌트의 LifeCycle React - 8장 : React Hooks 총정리 React - 9장 : 컴포넌트의 스타일링 React - 10장 : 빠르게 TODO앱 실습 React - 11장 : 컴포넌트 성능 최적화 React - 12장 : immer를 사용하여 더 쉽게 불변성 유지하기 React - 13장 : 리액트 라우터로 SPA 개발하기 React - 14장 : 뉴스 뷰어 예제프로젝트 React - 15장 : ContextAPI React - 16장.. 2023. 3. 2.
React - 18장 : 리덕스 미들웨어를 통한 비동기 작업 관리 React - 1장 : React 이해 React - 2장 : JSX React - 3장 : 컴포넌트 React - 4장 : 이벤트 핸들링 React - 5장 : ref. DOM에 이름 달기 React - 6장 : 컴포넌트 반복 React - 7장 : 컴포넌트의 LifeCycle React - 8장 : React Hooks 총정리 React - 9장 : 컴포넌트의 스타일링 React - 10장 : 빠르게 TODO앱 실습 React - 11장 : 컴포넌트 성능 최적화 React - 12장 : immer를 사용하여 더 쉽게 불변성 유지하기 React - 13장 : 리액트 라우터로 SPA 개발하기 React - 14장 : 뉴스 뷰어 예제프로젝트 React - 15장 : ContextAPI React - 16장.. 2023. 3. 1.
React - 17장 : 리액트 리덕스 실습 예제(React-Redux) React - 1장 : React 이해 React - 2장 : JSX React - 3장 : 컴포넌트 React - 4장 : 이벤트 핸들링 React - 5장 : ref. DOM에 이름 달기 React - 6장 : 컴포넌트 반복 React - 7장 : 컴포넌트의 LifeCycle React - 8장 : React Hooks 총정리 React - 9장 : 컴포넌트의 스타일링 React - 10장 : 빠르게 TODO앱 실습 React - 11장 : 컴포넌트 성능 최적화 React - 12장 : immer를 사용하여 더 쉽게 불변성 유지하기 React - 13장 : 리액트 라우터로 SPA 개발하기 React - 14장 : 뉴스 뷰어 예제프로젝트 React - 15장 : ContextAPI React - 16장.. 2023. 2. 28.

티스토리툴바