프로그래밍/React (5) 썸네일형 리스트형 React-TypeScript에서 redux사용시 타입 에러 해결과정 기록 타입 추론 오류 확인 나만의 트위터 사이트를 React-TypeScript로 만들어보려고 프로젝트를 진행하던 중 게시글을 작성하는 PostForm 컴포넌트를 구현하고 컴파일을 하는 과정에서 위 오류를 맞이하게 되었습니다. 이미 TypeScript를 적용하는 과정에서 여러 타입 추론에 대한 주의 표시들을 많이 맞닥뜨려서 해당 부분에 대해서도 타입스크립트 학습을 진행하며 천천히 타입 지정을 해주면서 문제상황을 해결해주고 있는 상태였는데 이번 케이스의 경우에는 아예 프로젝트 진행이 불가능해지는 오류였기 때문에 해당 오류를 해결하는 과정을 기록하기 위해 이 글을 포스팅합니다. 화살표 함수 주의표시 발견 그림 1에서 발견한 문제를 분석하기 위해 map메소드를 사용하는 블록을 확인 중 아예 발견하지 못했었던 주의 .. 기존 React app project에 TypeScript 적용하기 1. TypeScript 기반 패키지 설치 참고 사이트 Adding TypeScript | Create React App Note: this feature is available with react-scripts@2.1.0 and higher. create-react-app.dev 1-1. @types/jest Not Found 에러 이번에 새로 참여하게된 챌린지에서 React 프로젝트를 TypeScript로 변경해보라는 과제를 받았다. 한번도 타입스크립트를 사용해보지는 않았지만 이번 기회에 배워보는것도 좋을 것이라고 생각해 바로 기존 프로젝트에 적용을 시도해봤다. # 타입스크립트 적용을 위한 패키지 설치 코드 npm install --save typescript @types/node @types/rea.. React 알아둘 개념 JSX는 기존 자바스크립트에 더해 XML까지 합쳐 한 번에 코드 작성이 가능하도록 해주는 문법이다. 자주 바뀌는 화면 내의 공간은 state로 등록해야 한다. constructor(props) { super(props); this.state = { ~ } } 코드 내부의 변수값 저장을 위한 state를 설정하고자 할 때 위와 같은 방식을 사용할 수도 있지만 super를 사용하지 않은 아래의 방식도 같은 효과를 얻을 수 있다. state = { ~ } 실무에서는 constructor를 쓰지 않고 state를 관리하는 경우가 더 많다. //return내 태그를 입력할 때 소괄호는 넣지 않아도 무방하나 깔끔한 가시성을 위해서 넣었다. render() { return ( {this.state.firstNumbe.. 리액트 학습 React를 위한 환경 조성하기 기존 jQuery에서 쓰던 방식으로는 만들 수 있는 가능성의 범위가 굉장히 적어진다. React는 Node, yarn, Webpack, Babel 등의 도구를 설치하여 프로젝트 기반을 닦아놓으면 기존의 개발보다 더 쉽고 편리한 환경을 얻을 수 있게 된다. Webpack과 Babel의 용도 Webpack은 여러 파일들을 한개로 결합하기 위해 사용하는 도구다. Babel은 JSX 등의 새로운 자바스크립트 문법을 무리없이 사용할 수 있도록 해주는 도구다. React 시작하는 방법 yarn 또는 npm을 설치한 후 cmd에서 npm install -g create-react-app 또는 yarn global add create-react-app 명령 을 통해 create-reac.. React 학습 - Webpack 웹팩 (Webpack) Webpack은 무엇인가- 서로 연관관계가 있는 웹 자원들을 js, css, img와 같은 static 자원으로 변환해주는 모듈 번들러이다.Modules with dependencies -> Static assets- 웹페이지들간의 관계들을 웹팩에서 bundling하게 되며 또한 축소와 압축 작업까지 함께 수행하게 된다.- 웹팩의 역할1) 모듈간의 관계들을 정립하는 의존성 그래프를 갖게 하여 모듈 관리를 수월하게 해준다.2) 자원들을 minification등의 기법을 이용해 최적화하여 웹 페이지의 성능을 올린다. Webpack을 사용하는 이유 & 배경- 새로운 형태의 Web Task Manager기존 WTM (Gulp, Grunt)의 기능 + 모듈간의 의존성 관리초기 자바 스크립트.. 이전 1 다음
